Makieta strony internetowej umożliwia przedstawienie klientowi wstępnej koncepcji na organizację treści na stronie, customer journej, elementów UX i sposobu na prowadzenie narracji do odbiorcy. Umożliwia też lepszą współpracę zaangażowanych w tworzenie strony www osób. Dzięki niej web designer, programista i copywriter mogą pracować bez nieporozumień, dostosowując swoją pracę pod wspólnie stworzony „szkic”. Wykonanie makiety usprawnia cały proces projektowania strony – bo eliminuje problemy pokroju „za dużo tekstu jak na tak małą grafikę” oraz dają wstępny spójny obraz koncepcji strategicznej na budowaną stronę.
Czym jest makieta strony internetowej?
Makieta strony internetowej to interaktywna wizualizacja, umożliwiająca pracę nad wstępnym projektem strony, oraz ułatwiająca wymianę informacji przed rozpoczęciem „stawiania” witryny. Oczywiście stworzyć można też makietę aplikacji czy gry – jednak to, na czym skupiamy się my, to tworzenie stron internetowych.
Na makiety składają się:
- Układ graficzny – ukazujący, w jaki sposób powinien być zorganizowany produkt końcowy (strona). Zawiera figury odzwierciedlające obrazy i podział na sekcje, uwzględniający pożądane odległości pomiędzy nimi;
- Architektura informacji – czyli organizacja treści dopasowana do potrzeb użytkowników (innymi słowy dająca im informacje, których w danym momencie potrzebują – strona z odpowiednią treścią w odpowiednim miejscu działa jak „scenariusz”, pozwalający odbiorcy „płynąć” przez kolejne sekcje);
- Atrapa nawigacji – czyli odwzorowanie funkcjonalności strony. Makieta ukazuje w obrazowy sposób relacje między podstronami (np. za pomocą dodanych do nich sekcji z odnośnikami, jakie mają pojawić się na docelowej stronie) i zawiera atrapy interaktywnych elementów, takich jak formularze czy menu. Ukazuje więc jej docelową użyteczność i działanie.
Projekt makiety można swobodnie edytować oraz dodawać do niego poszczególne elementy, które również podlegają edycji. Dzięki temu, że aplikacje do makietowania wykorzystują grafikę wektorową (pozbawioną pikseli i opartą na bryłach), można zaprojektować strukturę strony bez obawy o utratę jakości poszczególnych elementów.
Nowoczesne programy do makietowania działają w chmurze. Dzięki temu jednoczesny wgląd w makiety mogą mieć zarówno wszystkie osoby zajmujące się projektowaniem strony, jak i sam klient.
Poprawki naniesione przez jedną osobę są zatem od razu widoczne u wszystkich innych osób wyświetlających projekt. Każdy członek zespołu może też na bieżąco komentować pracę innych.
Hi fi, low fi i docelowy design – rodzaje makiet
Podczas projektowania makiet, można wykorzystywać projekty hi fi i low fi.
Low fi to nic innego, jak szkic „na brudno”. Jest tworzony zazwyczaj po to, by zarysować wstępnie plan albo na szybko zobrazować jakiś pomysł. Hi fi, to już docelowa makieta strony internetowej, o określonych proporcjach i strukturze. Mało tego: makiety hi fi można udoskonalić jeszcze bardziej, „ubierając” je w docelowy wygląd. Po co tworzyć setki projektów w programach graficznych przed etapem wdrożenia docelowego designu, skoro można działać na makietach?
Zobacz, jak wygląda to w praktyce. Szare makiety wyewoluowały w docelowy design!
Dlaczego warto wykorzystywać makiety stron internetowych?
Makiety są jednym z najbardziej przydatnych elementów, ułatwiających proces projektowania strony internetowej – ale dlaczego tak jest? Poznaj najważniejsze powody:
1. Makiety stron internetowych ułatwiają organizację pracy
Chociaż (z trudem) można stworzyć bez żadnego planu pojedynczą podstronę, rozbudowana witryna internetowa nie powstanie bez projektu.
Najbardziej bazowy projekt obejmuje wstępny szkic, przygotowany na kartce czy w programie graficznym i schemat blokowy, ukazujący pożądany sposób poruszania się pomiędzy podstronami i ich elementami (na zasadzie: naciskasz tu -> przechodzisz tam).
To jednak mało – bo taki projekt nie jest elastyczny. Jeśli po rozpoczęciu pracy, projektant stron internetowych zaproponuje pojedynczą zmianę, nagle poprawki trzeba będzie wprowadzić wszędzie. To wiąże się też z koniecznością przekazania osobnego briefu dla każdego członka ekipy.
W przypadku projektu strony internetowej na makiecie poprawkę można wprowadzić w dowolnym momencie, a po skończeniu prac nad treścią czy grafiką – poglądowo wrzucić ją do pliku, by zobaczyć, jak może prezentować się na stronie.
Tworzenie makiet stron www niejako zastępuje dziesiątki plików z pulpitu czy Google Drive. Wszystko można zawrzeć od razu w jednym miejscu.
2. Makiety stron internetowych działają jak pośrednik pomiędzy kodem strony a klientem
„Firma wie, czego oczekuje klient – a klient ma podgląd na to, jak wygląda realizacja końcowa, opisywana przez firmę”.
Niestety, to tylko pozory. Nie wiesz, co siedzi w czyjejś głowie. Jeśli poprosisz 10 osób, żeby narysowały na kartce papieru jednakowy rysunek według identycznych, ścisłych wytycznych, każda zrobi to odrobinę inaczej.
Podobnie jest w projektowaniu stron. Nawet po przeprowadzeniu wielogodzinnych rozmów z klientem, nie wiesz, czy macie w głowie podobny obraz.
Firmy ze względu na wieloletnie doświadczenie, posługują się też zwrotami typu hero image czy light boxy – których naturalnie nie rozumieją klienci. Po co przekazywać sobie skomplikowane definicje, jeśli makiety stron internetowych pozwalają pokazywać obrazowo, o co chodzi?
We wczesnym etapie projektu, warto więc przygotować makietę, pokazującą obrazowo, jak będzie wyglądać docelowa strona. Taki projekt powstaje jeszcze na długo przed tym, zanim programista i copywriter stukną pierwszy raz w klawiaturę, a designer zacznie projektować stronę.
Makieta strony przedstawiona klientowi pomaga podjąć decyzję o akceptacji projektu lub konieczności naniesienia poprawek. To szczególnie ważne nie tylko pod kątem wyglądu strony – ale także tego, jak zostanie zapełniona treścią. Jeśli podjęta zostanie decyzja o skrócenia czy wydłużenia bloków tekstu, zmianie ulega cała struktura strony. W tym, niestety, położenie grafik czy samo umiejscowienie tekstu i jego formatowanie.
Wprowadzanie takich poprawek na gotowej już stronie, wypełnionej grafikami i tekstem byłoby kłopotliwe. Część obrazków po przeskalowaniu nie wyglądałaby dobrze, a przesuwanie elementów strony wymagałoby ciągłego zmieniania kodu.
Tworzenie makiet pozwala więc na obrazowe przedstawienie klientowi struktury strony – i pozwala na ekspresowe nanoszenie poprawek.
…i wspomagają wideokonwersacje
Przez to, że makiety są bardzo łatwe i intuicyjne w obsłudze, są też świetnym narzędziem do wykorzystania na rozmowach wideo. Kiedy udostepnisz drugiej stronie swój ekran, może na bieżąco odnosić się do elementów makiet. To pozwala firmie ekspresowo nanosić poprawkę czy zostawiać na makietach stosowne adnotacje.
Firma może z kolei po udostępnieniu swojego ekranu wytłumaczyć klientowi na podstawie makiet stron, co docelowo będzie znajdować się w szarych polach.
3. Makiety stron internetowych usprawniają pracę w zespole i umożliwiają wspólne wykonanie makiety
Copywriter, web deweloper i programista – każda z tych osób ma inną wizję strony. Makiety pozwalają im przeprowadzić burzę mózgów na wspólnym projekcie, a co za tym idzie: dojść do porozumienia.
W aplikacjach do tworzenia makiet w chmurze każda z osób może podglądać, co robią inni. Może też na bieżąco odnosić się do zmian, w pozostawianych w konkretnych miejscach komentarzach. Niektóre aplikacje zawierają nawet czat, przyporządkowany każdemu z projektów – dzięki temu, nie trzeba miotać się pomiędzy różnymi komunikatorami.
W przypadku makiet stron żaden z członków projektu nie musi zdobywać wiedzy wykraczającej poza jego kompetencje. Są na tyle intuicyjne w obsłudze, że w razie potrzeby programista może sformatować tekst copywritera, a copywriter – zaproponować zmianę w koncepcji wizualnej, samodzielnie przesuwając element czy modyfikując strukturę strony.
4. Makiety stron internetowych ułatwiają przygotowanie treści na strony internetowe
Makieta to dobry przyjaciel copywritera. Jeśli np. tekst zajmuje więcej miejsca, niż zakładano, można w każdym momencie dopasować do niego makietę strony www. Co, jeśli ekipa dojdzie do wniosku, że jedna sekcja strony, po wypełnieniu treścią zyskała na wartości i powinna znaleźć się znacznie wyżej, niż zakładano? Nic prostszego: w kilku ruchach przeniesie ją ponad inne sekcje.
Copywriter może też pracować bezpośrednio na makiecie, dzięki czemu uniknie stworzenia tekstu trzy razy dłuższego, niż powinien. Do takich sytuacji może dojść podczas przygotowywania treści w aplikacji np. Word czy Google Docs i przenoszeniu jej do projektu dopiero na samym końcu. Dzięki makietom copywriter widzi od razu, ile tekstu zmieści się w konkretnym obszarze (np. na kafelku).
Jeśli jednak copywriter uzna, że do konkretnej sekcji pasuje zupełnie inna długość i struktura tekstu, niż zakładał projektant, może zasugerować wprowadzenie zmian. Wystarczy wtedy w kilku ruchach przesunąć sekcję czy zmodyfikować jej elementy, np. wielkość „obrazków”, odzwierciedlanych przez szare kwadraty, czy ilość i rozmieszczenie checkpointów albo kafelków. Sam zobacz, jak zmieniła się ta sekcja:
5. Makiety stron internetowych gwarantują oszczędność czasu
Umówmy się: kod strony internetowej nie jest zbyt przejrzysty, a praca z nim to masa ograniczeń. Przekopywanie się przez setki linijek znaków i wprowadzanie poprawek na ślepo spowalnia pracę. Jeśli przed projektem strony internetowej, cały zespół przygotuje makietę, a po feedbacku klienta – wprowadzi na nią poprawki, programista przygotuje odpowiednią stronę od razu, na podstawie zaakceptowanych przez klienta makiet.
Dzięki temu uniknie konieczności kodowania tej samej sekcji czy podstrony w kilku różnych wersjach.
6. Makiety stron www pomagają poprawić user experience
Makiety są przydatne w projektowaniu UX! Dzięki temu, że pozwalają rozplanować układ strony i architekturę informacji, pozwalają na analizę ruchu użytkownika po witrynie. Dzięki takiej atrapie masz bowiem możliwość przetestowania strony z punktu widzenia persony. Sam zobaczysz, czy sunąc wzrokiem w dół makiety, czujesz coraz większe zainteresowanie, lub czy najbardziej wartościowe informacje następują po sobie w odpowiedniej kolejności.
Makieta strony internetowej pozwala zatem na zwiększenie skuteczności docelowego projektu. Wystarczy np. stworzyć na makiecie kilka wersji landing page obok siebie i przeanalizować, która z nich ma najlepiej rozplanowane elementy… A co za tym idzie: która z nich będzie najbardziej odpowiednia dla użytkownika końcowego, mając na uwadze cele, jakie chce osiągnąć projektant.
7. Makieta strony internetowej umożliwia rozplanowanie nawigacji
Oczywiście planuje się już w początkowym etapie – ale w projekcie zawierającym kilkadziesiąt podstron łatwo o pomyłki. Wystarczy przenieść docelową nawigację na makiety. Poszczególne elementy można połączyć ze sobą w widoczny lub niewidoczny sposób. W tym drugim przypadku, poszczególne części po prostu są do siebie przypisane w widocznym tylko dla projektanta panelu.
O czym warto pamiętać przy tworzeniu makiety strony www?
Makiety strony internetowej stanowią bardzo przydatne narzędzie – o ile w czasie projektowania pamięta się o dobrych praktykach:
- Nieprzesadzony wygląd w początkowej fazie – nie ma sensu czynić makiety… zbyt ładną. Estetyczne hi-fi wystarczy! Na uproszczonym tle znacznie łatwiej zachować pożądany układ i odległości pomiędzy elementami. Prowadnice (linie pomocnicze) są też na nim lepiej widoczne. Po zaakceptowaniu projektu i treści można zaszaleć i uczynić z makiety małe dzieło sztuki.
- Systematyczność – jeśli lorem ipsum nie podmieni się na docelowy tekst na wszystkich podstronach, a przyciski „czytaj dalej” zamieszczone zostaną jedynie na jednej z pięciu identycznych sekcji, podobny błąd może wystąpić także w docelowym projekcie – a naprawa błędów w kodzie zajmuje więcej czasu, niż na makietach. Systematyczność odgrywa kluczową rolę w oszczędzaniu czasu.
- Porządek – jeśli makieta strony internetowej zawiera więcej adnotacji, niż docelowych elementów, projektant prędzej czy później „utonie” w nadmiarze uwag. Jeżeli zaś burza mózgów wciąż trwa, lepiej stworzyć kilka wersji podstrony, niż przez następny miesiąc dochodzić do porozumienia, czyje uwagi warto uwzględnić i czyj pomysł jest najlepszy.
Makiety stron www – podsumowanie
Tworzenie makiet popłaca! Są w pełni funkcjonalnym narzędziem, pomagającym usystematyzować pracę, przekazać obrazowo swoją wizję i uniknąć nadmiaru niepotrzebnych poprawek. Pozwalają również znacznie przyspieszyć proces projektowania UX i ułatwiają podjęcie kluczowych decyzji o funkcjonalności strony (dotyczących np. tego, gdzie znajdują się przyciski interaktywne, jak wyglądają i do czego przekierowują).
Makieta w chmurze to też jedyny sposób na organizację wspólnej przestrzeni roboczej dla osób z różnych stanowisk. Wszystkie zaangażowane osoby mogą w jednej chwili pracować nad stroną internetową, nie przeszkadzając sobie nawzajem. Cały proces pracy na makietach jest intuicyjny i nie wymaga zaawansowanych umiejętności – a jednocześnie jest przystępny dla klienta.
Tworzenie makiety to praktyka, wykorzystywana obecnie przez te firmy, które podchodzą do procesu tworzenia strony internetowej poważnie. Osoby, które nie „szkicują”, działają na żywioł… czyli biorą się za “budowanie domów” bez wcześniejszego projektu.
Z makiet stron internetowych warto korzystać zarówno w większych, jak i w mniejszych realizacjach. Ich przygotowanie ułatwia i przyspiesza pracę, bez względu na skalę projektu! Wpływają też na to, jak dobrze zorganizowana będzie docelowa strona internetowa.
