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 użyciu 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, aby stworzyć szkielet typu Brizzly.
Szyna to szkic idei układu strony. Model szkieletowy skupia się na projekcie 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 wstępnego szkicu strony bez fantazyjnych elementów wizualnych przesuwa uwagę użytkownika na ważne elementy, takie jak rozmiar, układ i rozmieszczenie składników strony. Zaczniemy lepiej rozumieć, czego tak naprawdę klient potrzebuje i czego potrzebuje od oprogramowania, gdy użytkownik zaczyna skupiać się na ważnych elementach strony. Tworzenie ramki drucianej pozwala Tobie i Twoim użytkownikom efektywnie współpracować i wcześnie identyfikować potencjalne problemy projektowe.
Pobierz ołówek z dodatków Pencila. Po zainstalowaniu Ołówka jest dostępny z "Narzędzia"> "Ołówek szkicowania".
Tak wygląda Brizzly. Jest to całkiem fajna aplikacja internetowa, która agreguje Facebooka i Twittera na jednej stronie.
Jest to efekt końcowy ramy z drutu. Główne kształty w tym modelu krawędziowym to prostokąty, pola tekstowe i tabulatory. W następnej sekcji artykułu podam prosty przykład tworzenia każdego kształtu.
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 nam dostosować typ czcionki, rozmiar, styl, wagę, kolor, jasność i krycie tekstu.
Karty domu, szkicu i obrazu 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 "Obrazy" i "Robocza". Ustaw go na szary (# 989898).
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.
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 także otworzyć próbnik kolorów ColorZilla, klikając dwukrotnie ikonę kropli do oczu. Po prostu skopiuj kod szesnastkowy do kolorowego kodu HTML ołówka.
Ołówek jest łatwym w użyciu narzędziem do modelowania szkieletowego. 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
