Wireframes (szkielet / makieta) to, innymi słowy, uproszczony szkic intefrejsu użytkownika strony internetowej lub aplikacji. Jego podstawowym celem jest przede wszystkim koncentrowanie się w szczególności na przydzielaniu miejsca poszczególnych funkcjonalności, ustalaniu priorytetów treści, dostępnych funkcji i zamierzonych zachowań. Z tych powodów Wireframes zazwyczaj nie zawierają stylów, kolorów ani grafiki.

Wireframes – co to jest?

Wireframes pełnią przede wszystkim kilka funkcji:

  • Łączą architekturę informacji witryny z jej projektem wizualnym, pokazując ścieżki między widokami oraz podstawowe działanie funkcjonalności,
  • Wyjaśniają sposoby wyświetlania określonych typów informacji w interfejsie użytkownika,
  • Określają zamierzoną funkcjonalność interfejsu,
  • Pomagają odpowiednio priorytetyzować treści poprzez określenie, ile miejsca należy przeznaczyć na dany przedmiot i gdzie się on znajduje. (zobacz także: Co to jest priorytetyzacja MOsCoW?)

Wireframes – jak zrobić?

Na wstępnie należy pamiętać, że wireframes to szkice, prezentujące, gdzie na stronie pojawią się główne elementy nawigacji i treści witryny. Ponieważ celem ilustracji nie jest przedstawienie projektu wizualnego, należy zachować prostotę.

  • Nie używaj kolorów. Zamiast tego polegaj na różnych odcieniach jednego koloru np. szarości.
  • Nie używaj obrazów. Obrazy odwracają uwagę od wykonywanego zadania. Aby wskazać, gdzie zamierzasz umieścić obraz i jego rozmiar skorzystaj z prostych kształtów, np.:Wireframes - co to jest?
  • Używaj tylko jednego kroju pisma. Typografia nie powinna być częścią dyskusji o makietach. Jednak w modelach szkieletowych nadal można zmienić rozmiar czcionki, aby wskazać różne nagłówki i zmiany w hierarchii informacji tekstowych na stronie. Bardzo dobrze sprawdza się do Wireframes font San Francisco Pro Display, który w połączeniu z SF Symbols oferuje nam możliwość szybkiego dodawania ikon w projekcie, bez zbędnych paczek lub rysowania ich ręcznie.

Ponieważ Wireframes są dwuwymiarowe, należy pamiętać, że nie radzą sobie dobrze z wyświetlaniem interaktywnych funkcji interfejsu, takich jak listy rozwijane, stany najechania kursorem, akordeony z funkcją ukrywania czy automatycznie obracające się karuzele. Do tego możemy wykorzystywać bardziej zaawansowane narzędzia, wówczas mówiąc o prototypie High – Fidelity.

Zobacz także: Prototypowanie aplikacji Lo-Fi oraz Hi-Fi. Różnice i zastosowanie.

Podczas rysowania Wireframes warto zaznajomić się z podstawowymi komponentami wykorzystywanymi w produktach cyfrowych. Więcej o Wzorcach projektowych oraz Design Systemach przeczytasz tutaj.

Rodzaje Wireframes

Modele Wireframes mogą różnić od szkiców papierowych po obrazy narysowane komputerowo, jak i pod względem ilości szczegółów, które przekazują. Niska (Lo-Fi) i Wysoka (Hi-Fi) wierność to terminy używane do określania poziomu jakości lub funkcjonalności modelu szkieletowego.

  • Wireframes Low Fidelity o niskiej wierności ułatwiają komunikację zespołu projektowego i są stosunkowo szybkie w opracowaniu. Zwykle są bardziej abstrakcyjne, ponieważ często używają prostych obrazów do blokowania spacji i implementacji pozorowanej treści lub tekstu łacińskiego (lorem ipsum) jako wypełniacza treści i etykiet.
  • Wireframes High Fidelity o wysokiej wierności są lepsze w dokumentacji ze względu na zwiększony poziom szczegółowości. Te modele szkieletowe często zawierają informacje o każdym konkretnym elemencie na stronie, w tym wymiary, zachowanie i / lub działania związane z dowolnym elementem interaktywnym.

źródło: https://www.usability.gov/how-to-and-tools/methods/wireframing.html

Zobacz także: Co to jest User Flow oraz jak je zrobić?