Ołówek to narzędzie do tworzenia szkieletów, którego możemy użyć do naszkicowania makiety interfejsu użytkownika naszej aplikacji. Wspaniałą rzeczą w Pencil jest to, że jest lekki, łatwy w użyciu i ściśle zintegrowany z Firefoksem. Na dodatek jest to darmowa aplikacja open source! Na końcu artykułu podamy proste demo pokazujące, jak używać ołówka do tworzenia szkieletu przypominającego Brizzly.
Dlaczego tworzymy makiety?
Model szkieletowy to szkic pomysłu na układ strony, który koncentruje się na projekcie informacyjnym strony, aby upewnić się, że projekt pasuje do potrzeb użytkownika. Model szkieletowy zwykle składa się z różnych kształtów (takich jak prostokąty, owale i romby), 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 na tworzenie szkiców strony. Szkielet jest ważny, aby użytkownicy mogli skupić się na ważnym elemencie strony. Tworzenie zgrubnego szkicu strony, bez wyszukanych 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 klient naprawdę chce i potrzebuje od oprogramowania, gdy użytkownik zacznie koncentrować się na ważnych elementach strony. Tworzenie szkieletu umożliwia efektywną współpracę z użytkownikami i wczesne identyfikowanie potencjalnych problemów projektowych.
Pierwsze kroki z ołówkiem
Pobierz Pencil ze strony z dodatkami Pencila. Po zainstalowaniu ołówka jest on dostępny w „Narzędzia”> „Szkicowanie ołówkiem”.
Tak wygląda Brizzly. To całkiem fajna aplikacja internetowa, która gromadzi dane z Facebooka i Twittera na jednej stronie.
To jest końcowy efekt ramy drucianej. Główne kształty w tym modelu szkieletowym to prostokąty, pola tekstowe i karty. Następna część artykułu zawiera prosty przykład tworzenia poszczególnych kształtów.
Tworzenie prostokąta
Pierwszym krokiem tworzenia kształtu ramy drucianej jest przeciągnięcie kształtu z menu „Kolekcje kształtów” na kanwę.
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 myszy prostokąt i wybierz „Właściwości”, aby otworzyć okno 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 obramowania na czarny (# 000000) i zmień grubość obramowania na 1.
Ekran właściwości tekstu pozwala nam dostosować typ czcionki, rozmiar, styl, grubość, kolor, jasność i krycie tekstu.
Tworzenie kart
Zakładki Strona główna, Wersja robocza i Obraz to trzy karty, które są ułożone jedna na drugiej. Przeciągnij trzy „Panel zakładek” do prostokąta. Zmień rozmiar każdej karty, tak aby była wyświetlana obok siebie.
Otwórz ekran właściwości tekstu, aby dostosować kolor czcionki na karcie „Obrazy” i „Wersja robocza”. Ustaw go na szary (# 989898).
Tworzenie tekstu
Przeciągnij kształt „Tekst” na kanwę, aby utworzyć każde z menu. Możemy dostosować wygląd tekstu, uzyskując dostęp do okna właściwości tekstu.
Przydatne wskazówki dotyczące zmiany koloru
Kolor jest jednym z najważniejszych elementów zapewniających przyjemny szkielet. Najdokładniejszym sposobem zmiany koloru kształtu jest określenie kodu HTML koloru. Ustalenie kodu HTML dla określonego koloru może być trudne. Możemy użyć ściągawki kolorów HTML ze strony w3cschools.com, aby wyszukać właściwy kod HTML dla określonego koloru.
Lubimy też używać colorzilli do wybierania kolorów z ekranu i używania ich w Ołówku. Kliknij ikonę zakraplacza do oczu w lewym dolnym rogu przeglądarki Firefox, aby wybrać kolor na ekranie. Możemy również otworzyć selektor kolorów ColorZilla, klikając dwukrotnie ikonę kropli do oczu. Po prostu skopiuj i wklej kod szesnastkowy do kolorowego kodu HTML ołówka.
Wniosek
Ołówek jest łatwym w użyciu narzędziem do tworzenia szkieletów. Integracja ołówka z przeglądarką Firefox umożliwia nam korzystanie z innej wtyczki do przeglądarki Firefox, aby pomóc w tworzeniu lepszego szkieletu
Spinki do mankietów
Pobierz Pencil
Pobierz Colorzilla
Ściągawka kolorowa W3C HTML
