Jak stworzyć makietę strony internetowej?

W 2014 roku założyłem agencję MOTE wraz z Rembrantem Van der Mijnsbrugge. Specjalizujemy się w e-commerce i współpracujemy z klientami na każdym etapie rozwoju ich marki — od początkowej strategii rynkowej i tożsamości marki po projektowanie, rozwój i marketing — zawsze z naciskiem na zrównoważony wzrost. Przez 15 lat doświadczenia w projektowaniu stron e-commerce kształtowałem strategie klientów, od niezależnych marek po firmy z listy Fortune 500. Z przyjemnością podzielę się wskazówkami i radami dotyczącymi projektowania stron internetowych, które zebrałem w trakcie mojej kariery.

Edytowanie gotowego motywu strony internetowej jest proste — jeśli chcesz zobaczyć, jak będzie wyglądać Twoja strona z czterema produktami w rzędzie zamiast dwóch, możesz to podejrzeć w kilka sekund. Jednak w przypadku w pełni niestandardowej strony internetowej wprowadzanie zmian w kodzie może być czasochłonne i kosztowne. Dlatego projektanci tworzą makiety stron internetowych przed przejściem do etapu programowania.

W tym artykule dowiesz się więcej o makietach stron internetowych, a także o narzędziach i najlepszych praktykach tworzenia własnych makiet.

Czym jest makieta strony internetowej?

Makieta strony internetowej to statyczny podgląd wizualny tego, jak będzie wyglądać strona. Daje wyobrażenie o finalnym projekcie i układzie, ale nie jest jeszcze funkcjonalna ani wyposażona w kod back-end, który uczyniłby ją interaktywną i gotową do publikacji. Projektanci stron internetowych używają makiet do eksplorowania różnych opcji projektowych przed przekazaniem projektu do etapu programowania. Po zbudowaniu strony w kodzie trudniej jest wprowadzać zmiany, dlatego makieta wysokiej wierności (jak najbardziej zbliżona do finalnego produktu) może zaoszczędzić czas i pieniądze.

Różnice między makietami, szkieletami i prototypami stron internetowych

• Szkielety
• Makiety
• Prototypy

Szkielety, makiety i prototypy to różne sposoby wizualizacji pomysłu projektowego. Oto kiedy używać każdego z nich:

Szkielety

Szkielety to diagramy pokazujące układ i strukturę strony internetowej bez elementów projektowych. Możesz myśleć o szkielecie jako o planie dla projektu Twojej strony internetowej.

Szkielet może być prostym szkicem narysowanym ołówkiem na papierze, dzięki czemu jest użytecznym narzędziem dla osób niebędących projektantami, które chcą przekazać swoją wizję. Szkielety mogą również wspierać projektantów pracujących nad stronami z nowymi lub interaktywnymi elementami, ponieważ pozwalają zdecydować o podstawowym zarysie i funkcjonalności strony, zanim przystąpi się do projektowania i kodowania.

Nawet jeśli budujesz prostą stronę internetową, szkielet może pomóc Ci ugruntować ogólny lejek sprzedażowy i doświadczenie klienta, które chcesz stworzyć. Dzięki swojej prostocie szkielet stanowi doskonały sposób, by wszyscy znaleźli wspólny punkt wyjścia przed rozpoczęciem projektowania.

Makiety

Makiety to szczegółowe, statyczne reprezentacje przedstawiające zamierzony układ strony internetowej wraz z decyzjami dotyczącymi brandingu. W przeciwieństwie do szkieletów, makiety uwzględniają kierunek artystyczny, typografię oraz dobór kolorów.

Dają realistyczny podgląd tego, jak finalna strona będzie wyglądać dla użytkownika, choć nie są jeszcze interaktywne. Makiety są niezbędne przy tworzeniu niestandardowych stron internetowych, ponieważ umożliwiają wprowadzanie zmian w projekcie przed rozpoczęciem kodowania.

Prototypy

Prototypy to rozwiązanie o najwyższej wierności podglądu strony internetowej. Są to interaktywne modele, które dzięki linkom podglądu symulują doświadczenie użytkownika i przybliżają projekt strony do rzeczywistości.

W projektach wymagających testowania różnych elementów interaktywnych przed kodowaniem prototyp może okazać się szczególnie przydatny. W prostszych projektach można natomiast przejść bezpośrednio z makiety do programowania.

Jak stworzyć makietę strony internetowej?

1. Zdecyduj, jak zaprezentować markę
2. Stwórz spójną narrację
3. Zbierz elementy marki
4. Zaprojektuj szablony dla każdego typu strony
5. Dodaj elementy zastępcze
6. Uzyskaj opinię

Niezależnie od tego, czy projektujesz samodzielnie, czy współpracujesz z projektantem, podstawowe elementy, które warto uwzględnić w procesie projektowania, pozostają takie same.

1. Zdecyduj, jak zaprezentować markę

Pierwszym krokiem w projektowaniu strony internetowej jest zatrzymanie się i przemyślenie, jak najlepiej zaprezentować markę. Jeśli współpracujesz z projektantem, proces możesz rozpocząć od briefu kreatywnego, który pomoże mu poznać Twoją markę, odbiorców oraz źródła inspiracji.

Naturalna jest chęć skupienia się na konkretnych funkcjach, ale zanim zanurzysz się w szczegóły techniczne, warto spojrzeć z dystansu: przemyśl ogólną historię, jaką chcesz opowiedzieć poprzez układ strony internetowej.

Na przykład możesz zacząć od celu, jakim jest zachęcenie użytkowników do spędzania więcej czasu na Twojej stronie głównej. To często pierwszy punkt kontaktu z marką i miejsce o największych współczynnikach odrzuceń. Zamiast jednak zaczynać od funkcji czy optymalizacji konwersji, zadaj sobie pytanie: „Jak nawiązać głębszą więź z odwiedzającymi stronę główną?".

Rozwiązanie może być proste — na przykład napisanie klarownego wprowadzenia do Twojej marki w górnej części strony. Jeśli wartości marki są sercem Twojego biznesu, to doskonała okazja, by zaprezentować je bezpośrednio na stronie głównej. Demonstrowanie wartości takich jak zrównoważony rozwój czy inkluzywność może rezonować z grupą docelową i zatrzymać odwiedzających na stronie dłużej.

2. Stwórz spójną narrację

Twoja strona internetowa powinna opowiadać spójną, linearną historię — każda sekcja i podstrona powinny logicznie wynikać z poprzedniej. Dobrze skonstruowana narracja sprawia, że odwiedzający stronę główną od razu rozumie, czym jest Twoja marka i co oferujesz. W miarę poruszania się po stronie możesz stopniowo ujawniać więcej szczegółów i funkcji, które pomagają użytkownikom znaleźć odpowiednie produkty.

Na tradycyjnej stronie sklepu internetowego narracja linearna to lejek sprzedażowy: użytkownik trafia na stronę główną, która przedstawia Twoją markę. Stamtąd przechodzi do stron z kolekcją produktów, które zawierają więcej szczegółów niż strona główna — najważniejsze informacje są wyświetlane jako pierwsze, a informacje mniej istotne są łatwo dostępne. W przypadku skutecznej narracji użytkownik wybiera produkty, przechodzi do strony koszyka i ostatecznie finalizuje proces zakupu.

3. Zbierz elementy marki

Po przemyśleniu, jak ma wyglądać narracja Twojej strony internetowej, zbierz wszystkie elementy marki, które będą użyte w projekcie.

Jeśli posiadasz wytyczne marki, możesz udostępnić je projektantowi (lub samodzielnie się do nich odwołać). Jeśli nie, przed stworzeniem makiety musisz zdecydować o elementach marki, takich jak typografia, grafika i kolory. Układ siatki strony internetowej będzie opierał się na wysokościach linii i odstępach między literami używanych czcionek, dlatego tak ważne jest ustalenie tych elementów jeszcze przed rysowaniem makiety. Po przygotowaniu siatki możesz przystąpić do tworzenia makiet, wykorzystując zebrane zasoby projektowe oraz brief kreatywny.

4. Zaprojektuj szablony dla każdego typu strony

Projektując makietę strony internetowej, nie tworzysz osobnej makiety dla każdej pojedynczej strony. Zamiast tego przygotowujesz szablony makiet dla różnych typów stron, np. szablon strony kolekcji czy szablon strony produktu.

Projektując każdy z tych szablonów, zatrzymaj się i zadaj sobie pytanie: „Co sprawi, że doświadczenie użytkownika będzie udane?" Na przykład, jeśli masz wyselekcjonowany asortyment sześciu produktów lub mniej, Twoja strona kolekcji powinna prezentować każdy z tych produktów i dodać trochę kontekstu, zanim użytkownik przejdzie do stron szczegółowych produktów.

Natomiast jeśli Twój katalog obejmuje dziesiątki, setki czy nawet tysiące produktów, strona kolekcji powinna oferować bardziej zaawansowane filtrowanie. Dzięki temu odwiedzający będą mogli łatwo zawęzić wyniki i znaleźć produkty najbardziej dla siebie odpowiednie.

5. Dodaj elementy zastępcze

Ponieważ makieta pokazuje, jak ostatecznie będzie wyglądać Twoja strona internetowa, często tworzy się ją równocześnie z przygotowywaniem treści. W takim przypadku warto używać symboli zastępczych.

Nawet jeśli obrazy i teksty w makiecie są tymczasowe, powinny jak najlepiej oddawać ostateczny cel strony. Dzięki temu podczas przeglądania makiet łatwiej wyobrazić sobie kierunek całego projektu. Na przykład zamiast klasycznego „lorem ipsum” można przygotować przykładowy tekst pasujący do charakteru marki.

6. Uzyskaj opinię

Gdy makieta jest gotowa, czas zaprezentować ją osobom zainteresowanym i zebrać opinie. Główną zaletą tworzenia makiety strony internetowej jest możliwość wprowadzania poprawek bez konieczności zmiany kodu. Wykorzystaj tę okazję, aby upewnić się, że wszyscy interesariusze są zgodni co do makiety, zanim trafi ona do produkcji.

Narzędzia do tworzenia makiet stron internetowych

Istnieje wiele narzędzi projektowych, których możesz użyć do stworzenia makiety strony internetowej, a niektóre z najpopularniejszych to:

Sketch

Sketch to aplikacja do projektowania stron internetowych, która umożliwia szybkie wprowadzanie zmian i iteracji. Stworzona w 2010 roku z myślą o projektowaniu UI, pozwala tworzyć zarówno makiety, jak i interaktywne prototypy. Standardowa subskrypcja zaczyna się od 12 dolarów miesięcznie (ok. 50 zł miesięcznie).

Figma

Figma to narzędzie do projektowania, które umożliwia współpracę w czasie rzeczywistym. Jeśli nad makietą pracuje kilka osób jednocześnie, będzie to bardzo dobre rozwiązanie. Możesz założyć darmowe konto, natomiast płatne plany, dające dostęp do wszystkich funkcji, zaczynają się od 15 dolarów miesięcznie (ok. 60 zł miesięcznie).

Adobe XD

Projektanci korzystający z pełnego pakietu Adobe Creative Cloud (obejmującego m.in. Adobe Photoshop, Adobe Illustrator, Adobe InDesign i Adobe Lightroom) cenią Adobe XD za płynną integrację z innymi narzędziami Adobe. Adobe nie oferuje już XD jako samodzielnego produktu, ale można z niego korzystać w ramach subskrypcji Adobe Creative Cloud, która kosztuje 59,99 dolarów miesięcznie (ok. 240 zł miesięcznie).