Makieta strony internetowej – jak ją zaprojektować?

Kategoria:

Opublikowane: 29-10-2020

Czas czytania

: 6 min

Planujesz stworzyć stronę internetową? Makieta strony to pierwszy etap prac nad nową www. Dowiedz się, jak wygląda proces projektowania makiety strony internetowej, poznaj sprawdzone metody, stwórz samodzielnie makietę funkcjonalną strony za pomocą kilku polecanych programów.

Czym jest makieta strony internetowej?

Makieta strony internetowej to obrazowe przedstawienie koncepcji wyglądu nowej www. Łączy ona logikę i strukturę szkieletu strony z graficznymi rozwiązaniami. Jest to symulacja wyglądu witryny, taki jej zarys. Zwykle zawiera: hierarchię i układ strony, informacje o tym, w jaki sposób użytkownik będzie korzystał ze strony, wizualizację elementów strony oraz określenie ich rozmiaru, położenia, odstępów pomiędzy poszczególnymi komponentami, kolorystykę, typografię, pliki graficzne oraz zdjęcia. Makieta definiuje najważniejsze elementy strony. Wyróżnia się makietę lo-fi i hi-fi. Czym się różnią?

Makieta low fidelity (lo-fi)

Makieta lo-fi to pierwsze próby przedstawienia strony www w formie graficznej. Do jej stworzenia wystarczy kartka i ołówek. To bardzo prosty rysunek, który zawiera schematy projektowanej strony. Warto już na tym poziomie przeprowadzać testy wśród potencjalnych użytkowników. Papierowa wersja makiety pozwala na wykrycie niezrozumiałych elementów na potencjalnej stronie i poprawienie jej użyteczności.

Makieta high fidelity (hi-fi)

Makieta hi-fi zawiera więcej szczegółów. Po zebraniu informacji, dzięki początkowym testom może być bardziej rozbudowana. Makieta posiada kolorystykę, zdjęcia, logo, nawigację i wiele innych potrzebnych do stworzenia strony informacji.

Dlaczego warto projektować makietę strony www?

Po co projektować makietę strony? Głównie za względu na wydajność, na koszty rozwoju, które dzięki makiecie strony są znacznie obniżone. Makieta strony internetowej pozwala na wczesnym etapie sprawdzić, czy projekt jest funkcjonalny, czy zgodnie z naszymi oczekiwaniami działa na klienta docelowego. Umożliwia przeanalizowanie wyglądu strony, zastanowienie się nad odstępami pomiędzy elementami, nad ostateczną kolorystyką. Jest świetnym narzędziem do komunikacji pomiędzy klientem zamawiającym stronę a zespołem programistów ją tworzących. Jeśli jest przygotowana szczegółowo i zawiera kluczowe informacje, pozwala na uniknięcie kosztownych przeróbek.

Podsumowując, makieta strony:

obniża koszty rozwoju,
usprawnia wprowadzenie produktu na rynek,
pozwala na wykrywanie błędów na wczesnym etapie prac,
ułatwia komunikację pomiędzy klientem a programistami,
doprecyzowuje wygląd www,
pozwala na przetestowanie nawigacji strony,
umożliwia wizualne zobaczenie przez klienta strony głównej,
niweluje koszty przeróbek na gotowym produkcie,
wpływa pozytywnie na UX strony.

Tworzenie makiety funkcjonalnej strony krok po kroku

Podczas tworzenia makiety strony internetowej należy pamiętać, że jest ona przede wszystkim przeznaczona do testów na użytkownikach. Musi być tak przygotowana, by potencjalni konsumenci mogli ją sprawdzić i przekazać swój feedback. Aby opracować właściwą makietę funkcjonalną strony, należy stworzyć persony (by zrozumieć oczekiwania grupy docelowej), przeanalizować możliwości rynkowe, zaplanować nawigację www, pomyśleć o kwestiach wizualnych, ale przede wszystkim dane rozwiązania testować, testować i jeszcze raz testować, do skutku. Warto przyjrzeć się wspomnianym elementom bliżej.

Krok 1: Sprawdź konkurencję

Najpierw przeanalizuj możliwości rynkowe, sprawdź, co oferuje konkurencja. Zastanów się, do czego ma służyć Twoja witryna, określ jej cel. Być może w trakcie analiz okaże się, że zmienisz swój pomysł, ale na tym etapie jest na to właśnie i czas i miejsce.

Krok 2: Poznaj użytkownika

Stworzenie person użytkowników pozwoli na przeanalizowanie celu projektu i sprawdzenie, czego tak naprawdę oczekuje rynek. Warto wiedzieć, kim konkretnie są potencjalni użytkownicy strony, co lubią, czego nie, na co zwracają uwagę, co na nich działa. Ilość person jest dowolna, jednak należy pamiętać, że wielość informacji spowoduje rozmycie się oczekiwań klientów i niemożność wdrożenia tylu wytycznych. Trzy, cztery persony to dobra liczba.

Krok 3: Zaplanuj nawigację

Zanim przystąpisz do tworzenia makiety, przemyśl nawigację. Rozrysuj ją na kartce i przetestuj na kilku użytkownikach, sprawdź, jak podchodzą do danego rozwiązania i czy ono do nich przemawia. To pierwsze testy. Schemat strony, rozmieszczenie elementów, wielkość odstępów pomiędzy nimi są bardzo ważne. Testuj i poprawiaj projekt do skutku. Gdy już makieta funkcjonalna strony przygotowana na kartce będzie spełniała oczekiwania użytkowników, skorzystaj z programu do tworzenia makiet i przenieś projekt do komputera.

Krok 4: Zadbaj o właściwą kolorystykę makiety strony

Gdy wiesz już, jak ma wyglądać schemat strony, przemyślany jest układ interfejsu użytkownika oraz kluczowe funkcjonalności, możesz przystąpić do wizualnej wersji www. Makieta strony internetowej powinna być ładna. Warto zadbać o nawigację oraz call to action na www, zaprojektować przyciski, pomyśleć o sposobie ich użycia. Zaplanuj wygląd poszczególnych elementów na www, określ odstępy pomiędzy nimi. Kluczową rolę w doświadczaniu użytkownika zapewniają kolory. To etap, na którym należy zaproponować kolorystykę www. Pamiętaj o jakościowych obrazach. Zadbaj o typografię, zbyt wiele rodzajów czcionek może zaburzyć właściwych odbiór informacji przez konsumenta. Określ hierarchię elementów, upewnij się, że teksty są czytelne.

Krok 5: Przetestuj makietę na użytkowniku

Nawet niewłaściwy dobór kolorów buttonów może zaprzepaścić cały projekt, dlatego ostateczna decyzja co do wyglądu strony powinna być podjęta po jej przetestowaniu. Użytkownicy pomogą określić czytelność i funkcjonalność www. Być może czcionka jest za mała lub za duża? Masz za wiele elementów na stronie głównej, a może kolorystyka nie jest przyjemna dla oka i tworzy kontrast tam, gdzie nie powinna? Testuj dotychczasowe rozwiązania.

Krok 6: Wprowadź zmiany w makiecie funkcjonalnej strony

Wprowadzanie zmian na tym etapie jest bardzo ważne. Być może testy pokażą, że koncepcja jest zła i trzeba ją diametralnie zmienić, ale po to jest właśnie makieta. Jej kluczową rolą jest ograniczenie zmian na właściwym projekcie i przygotowanie go tak, by odpowiadał na oczekiwania użytkowników. Makieta strony internetowej wpływa na funkcjonalność www oraz jej użyteczność. Lepiej wprowadzić zmiany na tym etapie niż stworzyć kosztowne strony internetowe, które nie spełniają swojego celu.

Krok 7: Przekaż makietę strony deweloperom

Po testach i uszczegółowieniu wymagań i oczekiwań konsumentów można przekazać projekt deweloperom. Na pewno praca nad stroną internetową, która posiada makietę, jest dużo sprawniejsza

Makieta strony internetowej – kilka przydatnych wskazówek

Tworząc makietę strony www, zwróć uwagę na kilka kwestii:

PAMIĘTAJ O TESTACH – testuj swoje rozwiązania na użytkownikach pasujących do person, które określiłeś, by produkt końcowy był użyteczny.
PRZYGOTUJ RESPONSYWNĄ MAKIETĘ – nie zapominaj o panującej zasadzie mobile first. Zwracając uwagę na responsywność makiety, od początku unikniesz problemów w końcowym etapie projektowania.
ZADBAJ O INTERAKCJĘ – pamiętaj, że makieta powinna być klikalna. Skup się na podstawowej nawigacji produktu. Użytkownik musi mieć możliwość przetestowania strony, powinien wejść z nią w interakcję.

Programy, które umożliwiają projektowanie makiety strony www

Aby zaprojektować makietę lo-fi, wystarczy kartka i ołówek, jednak w zadbaniu o więcej szczegółów pomogą już konkretne programy. Pierwsze makiety pozwolą stworzyć takie narzędzia jak Balsamiq i Azure. Azure to bardzo popularny, ale płatny desktopowy program. Balsamiq to aplikacja dostępna nie tylko w wersji desktopowej, a również jako wtyczka np. do Google Drive czy JIRA.

Do zaprojektowania makiet hi-fi dobrze sprawdzi się Adobe Illustrator, Adobe XD, UXPin, Sketch, Pidoco czy Moqups, Creately i HotGloo. Moqups jest w pełni funkcjonalnym narzędziem, w dużej mierze dostępnym za darmo. UXPin to polski program dostępny za stosunkowo niską cenę, zawierający wiele przydatnych opcji. Pidoco to aplikacja, do której masz dostęp w każdym momencie, pozwala na przeprowadzanie testów online. Wybór programów jest szeroki, a ich poziom naprawdę satysfakcjonujący. A więc – do dzieła!