Użyj przeglądarki Firefox do tworzenia prostych makiet
Ołówek to narzędzie do wireframingu, za pomocą którego możemy szkicować makiety interfejsu użytkownika naszej aplikacji. Wspaniałą cechą Pencil jest to, że jest lekki, łatwy w obsłudze i ściśle zintegrowany z Firefoksem. Na dodatek jest to bezpłatna aplikacja open source! Na końcu artykułu przedstawimy proste demo dotyczące korzystania z Ołówka do stworzenia szkieletu podobnego do Brizzly.
Dlaczego tworzymy szkielety ?
Szyna to szkic idei układu strony. Model szkieletowy koncentruje się na projektowaniu informacji strony, aby upewnić się, że projekt pasuje do potrzeb użytkownika. Model szkieletowy składa się zazwyczaj z różnych kształtów (takich jak pudełka, owale i diamenty), które reprezentują elementy treści, funkcjonalne i nawigacyjne. Te kształty wyświetlają ich położenie na stronie.
Na początku może wydawać się stratą czasu, tworząc szorstkie szkice strony. Rama z drutu jest ważna, aby użytkownicy mogli skupić się na elemencie ważności na Twojej stronie. Tworzenie szkicu strony, bez fantazyjnych elementów wizualnych, przenosi uwagę użytkownika na ważne elementy, takie jak rozmiar, układ i rozmieszczenie komponentów strony. Zaczniemy lepiej rozumieć, czego naprawdę potrzebuje klient i czego nie potrzebuje, gdy użytkownik zaczyna skupiać się na ważnych elementach strony. Utworzenie ramki drucianej pozwala Tobie i Twoim użytkownikom skutecznie współpracować i wcześnie identyfikować potencjalne problemy projektowe.
Pierwsze kroki z ołówkiem
Pobierz ołówek z dodatków Pencila. Po zainstalowaniu Ołówka jest dostępny z "Narzędzia"> "Szkicowanie ołówkiem".
Tak wygląda Brizzly. Jest to całkiem fajna aplikacja internetowa, która agreguje Facebooka i Twittera na jednej stronie.
Jest to wynik końcowy ramy z drutu. Główne kształty w tym modelu krawędziowym to prostokąty, pola tekstowe i tabulatory. W następnej części artykułu podam prosty przykład tworzenia każdego kształtu.
Tworzenie prostokąta
Pierwszym krokiem tworzenia kształtu siatki jest przeciągnięcie kształtu z menu "Kolekcje kształtów" na płótno.
Zmień rozmiar prostokąta na odpowiednią szerokość i wysokość.
Możemy dostosować tekst, obramowanie i kolor tła dowolnego kształtu w Ołówku. Kliknij prawym przyciskiem prostokąt i wybierz "Właściwości", aby otworzyć okna Właściwości. To jest ekran właściwości tła. Ustaw kolor tła prostokąta na biały (#FFFFFF).
Kliknij kartę "Obramowanie" i dostosuj właściwości obramowania. Ustaw kolor ramki na czarny (# 000000) i zmień grubość ramki na 1.
Ekran właściwości tekstu pozwala dostosować typ czcionki, rozmiar, styl, wagę, kolor, jasność i krycie tekstu.
Tworzenie zakładek
Karty domu, szkicu i zdjęcia to trzy zakładki ułożone jedna na drugiej. Przeciągnij trzy "Panel zakładek" do prostokąta. Zmień rozmiar każdej karty, tak aby każda karta wyświetlała się obok siebie.
Otwórz ekran właściwości tekstu, aby dostosować kolor czcionki w zakładkach "Zdjęcia" i "Wersja robocza". Ustaw go na Gray (# 989898).
Tworzenie tekstu
Przeciągnij kształt "Tekst" na płótno, aby utworzyć każde z menu. Możemy dostosować wygląd tekstu, otwierając okno właściwości tekstu.
Przydatne wskazówki dotyczące zmiany koloru
Kolor jest jednym z najważniejszych elementów dostarczania przyjemnego modelu krawędziowego. Najbardziej precyzyjnym sposobem zmiany koloru kształtu jest określenie kodu HTML koloru. Wykreślenie kodu HTML dla określonego koloru może być trudne. Możemy użyć arkusza oszukującego w kolorze HTML z w3cschools.com, aby wyszukać odpowiedni kod HTML dla określonego koloru.
Lubimy też używać colorzilla do wybierania kolorów z ekranu i używania go w Ołówku. Kliknij ikonę kroplomierza w lewym dolnym rogu Firefoksa, aby wybrać kolor na ekranie. Możemy również otworzyć próbnik kolorów ColorZilla, klikając dwukrotnie ikonę kropli ocznych. Po prostu skopiuj kod szesnastkowy do kolorowego kodu HTML ołówka.
Wniosek
Ołówek jest łatwym w użyciu narzędziem do modelowania szkieletów. Ołówkowa integracja z Firefoksem pozwala nam korzystać z innych pluginów Firefox, aby pomóc w tworzeniu lepszych szkieletów
Spinki do mankietów
Pobierz ołówek
Pobierz Colorzilla
W3C HTML Color Cheat Sheet
