Zawartość
- Dlaczego nie przejść od razu do Photoshopa?
- Struktura i forma
- Modele szkieletowe
- Jak szczegółowy powinienem zrobić mój szkielet?
Po zakończeniu planowania całej witryny i omówieniu wstępnych przemyśleń, musimy zacząć zbierać konkretne pomysły dotyczące projektu i struktury. W końcu dojdziemy do punktu, w którym będziemy pracować w Photoshopie (lub przeglądarce, jeśli to Ci odpowiada) i delikatnie tworzyć projekty o doskonałej jakości co do piksela, ale najpierw musimy ustalić, co projektujemy.
W tym artykule omówimy miniatury, modele szkieletowe i szare pola. Zobaczymy, jak wpisują się w nasz przepływ pracy i czemu służą. Artykuł powinien służyć jako wprowadzenie do procesu tworzenia szkieletów i przegląd kluczowych decyzji, które się z nim wiążą.
Dlaczego nie przejść od razu do Photoshopa?
Szczerze mówiąc, zależy to od tego, jak wolisz pracować. Żaden pojedynczy proces nie działa dla wszystkich i możesz zaufać swoim instynktom na tyle, aby po prostu go wykonać i opracować projekty za jednym razem. Więcej mocy dla ciebie, jeśli tak jest, ale wątpię w to. Większość z nas potrzebuje trochę struktury, aby uporządkować swoje pomysły, zanim będziemy mogli nad nimi pracować.
Znam wielu projektantów, którzy zasadniczo pomijają fazę wstępnego projektowania procesu i przechodzą od razu do programów takich jak Photoshop CS6, aby tworzyć swoje makiety. Przesuwają piksele dookoła, aż znajdą projekt, z którego są zadowoleni, i podają go klientowi. Czasami to działa, a projekt jest akceptowany, oznaczany i wysyłany. Czasami tak nie jest.
Najczęściej projektanci, którzy potrafią wykonać świetny projekt bez szkicowania lub tworzenia szkieletów, mają szybki wewnętrzny proces podejmowania decyzji. Projektant albo idzie z pierwszym pomysłem, albo ma zdolność szybkiego i zdecydowanego akceptowania lub odrzucania pomysłów w locie. Naprawdę przechodzą przez ten sam proces, który opisuję, po prostu robią to wewnętrznie. Tak czy inaczej, proces nadal ma miejsce, gdy atakują to puste płótno programu Photoshop.
Uwaga: zazwyczaj umiejętność wewnętrznego rozwiązania tych problemów wymaga dużego doświadczenia. Wierzę, że struktura zapewniona przez określony proces może pomóc w poświęceniu każdemu aspektowi projektu uwagi, której potrzebuje.
Struktura i forma
Kiedy odnoszę się do struktury projektu, mam na myśli dwie rzeczy. Projekt musi mieć strukturę wizualną na podstawie poszczególnych stron. Układ musi być łatwy do przeanalizowania, a treść powinna być zorganizowana w taki sposób, aby użytkownik wiedział, co jest ważne, a co pomocnicze.
Ale oprócz porządkowania zawartości strony, nasze projekty muszą zapewniać dostępność i łatwość analizy pozostałej części witryny. Powinni przekazać użytkownikom informacje zwrotne o tym, gdzie się znajdują, co właśnie zrobili i w jaki sposób mogą dotrzeć do kolejnych potrzebnych informacji.
Myślę o tym jako o nadaniu struktury informacjom, które są widoczne (informacje widoczne na stronie) i ukryte (cała treść poza bieżącą stroną). Oba są równie ważne, a najlepsze projekty znajdują sposób na połączenie tych dwóch.
Modele szkieletowe
„W przypadku usług klienckich czasami trzeba opracować model szkieletowy, który będzie dostarczany klientowi, a czasami nie. Jeśli tego nie zrobisz, czasami nadal będziesz to rozwijać, ale dla siebie… Myślę, że nie powinno być jednego sposobu robienia wszystkiego za każdym razem ”. - Dan Rubin
Wporządku. Nadszedł czas, abyśmy zajęli się dobrymi rzeczami.
Modele szkieletowe to projekty o bardzo niskiej wierności (co oznacza proste: linie, ramki, tekst), które koncentrują się na hierarchii treści, ogólnym układzie i funkcjonalności. Model szkieletowy powinien wykluczać kolor, teksturę lub obrazy. Zamiast tego jest to dokument czysto strukturalny, który stara się uporządkować zawartość i interakcję bez całego wizualnego bałaganu, jaki mogą stworzyć elementy projektu.
W niektórych firmach projektant UX i projektant interfejsu to ta sama osoba, ale nie zawsze tak jest. Jeśli pracujesz w agencji lub w zespole, zadanie tworzenia szkieletu prawdopodobnie spadnie na inną osobę. Ktokolwiek zajmuje się UX, prawdopodobnie przekaże Ci stos makiet do pracy, więc radzę szczerze porozmawiać z tą osobą, aby mieć pewność, że otrzymasz makiety o poziomie szczegółowości, który Ci odpowiada.
Jak szczegółowy powinienem zrobić mój szkielet?
Poziom szczegółowości modelu szkieletowego jest decyzją subiektywną. Głębokość szkieletu często zależy od tego, ile procesu decyzyjnego pozostawiono projektantowi interfejsu, a ile kontroluje projektant UX. Szczegółowy model szkieletowy oznacza, że projektant UX już podejmuje zdecydowane wybory dotyczące układu i hierarchii treści. Jednak często modele szkieletowe nie są „osadzone w kamiennych” dokumentach, więc projektant interfejsu ma dość dużą swobodę przenoszenia treści podczas tworzenia ostatecznej makiety.
Na szczegółowość szkieletu może mieć również wpływ ilość treści na stronie lub jej typ, jak pokazuje poniższy obrazek. Strona główna z kilkoma wierszami tekstu i kilkoma dużymi obrazami nie będzie wymagać szczegółowego szkieletu. Ponieważ na stronie jest bardzo mało elementów, staranne porządkowanie ich hierarchicznie nie jest konieczne.
Z kolei strona główna witryny z wiadomościami z wieloma kolumnami treści, polecanymi artykułami, kanałami mediów społecznościowych i klipami wideo będzie wymagać wcześniejszego zaplanowania. Na ruchliwej stronie internetowej należy zwrócić większą uwagę na szkielet ze względu na potrzebę struktury.
Najczęściej jakość szkieletu zależy od tego, w jaki sposób jest on używany. W niektórych przypadkach model szkieletowy może służyć do podejmowania bardzo konkretnych decyzji dotyczących układu i hierarchii. W innych przypadkach model szkieletowy służy jako ogólny przewodnik dla projektanta do odniesienia podczas tworzenia projektów.
Modele szkieletowe o bardzo niskiej wierności mogą zapewnić dużą elastyczność podczas projektowania układu, ale często dostarczają kilku wskazówek dotyczących szczegółów funkcjonalności i potrzeb konstrukcyjnych projektu. Modele szkieletowe o wysokiej wierności mogą dostarczyć wielu informacji o szczegółach strony, ale mogą sprawić, że poczujesz się zapakowany w swoje wybory projektowe. Twoje projekty również nie muszą dokładnie odpowiadać modelom szkieletowym, jak pokazuje poniższy przykład.
Wireframe to rodzaj skrótu do ostatecznych projektów. Jako takie, wspólne elementy mają uproszczoną reprezentację. Obrazy są przedstawiane jako kwadrat z przekreślonymi liniami. Formularze to pola z tytułami nad górną linią. Poziome elementy nawigacyjne to długie pola z równomiernie rozmieszczonymi tytułami. Tekst to ... cóż, tekst. Ale podkreślę: nic nadzwyczajnego! Model szkieletowy może nie mieć prawie nic wspólnego z ostatecznym wyglądem projektu, jak pokazano na poniższym obrazku.
Tworząc model szkieletowy, powinieneś zadać sobie cztery pytania:
- Jaka treść musi znajdować się na stronie?
- W jaki sposób różne fragmenty treści odnoszą się do siebie?
- Jak można by je zorganizować?
- W jaki sposób użytkownik powinien wchodzić w interakcję z treścią?
Otóż to. Jeśli myślisz o czcionkach i obrazach, prawdopodobnie wyprzedzasz siebie. Skoncentruj się na treści i strukturze.
Ten artykuł jest ekskluzywnym fragmentem „Mapy drogowej projektanta stron internetowych” autorstwa Giovanniego DiFeterici, opublikowanej przez SitePoint. Ta 192-stronicowa, pełnokolorowa książka obejmuje wszystkie etapy od początkowej inspiracji do gotowego projektu, pomagając uczynić Cię bardziej profesjonalnym projektantem stron internetowych.
Możesz zarejestrować się, aby otrzymać bezpłatny przykładowy rozdział, zanim zamówisz książkę.
