Co to jest mockup i do czego służy?
3 min
Sprawdź, jak wypozycjonowaliśmy naszą stronę do TOP1
3 min
Na skróty
Zanim podejmiesz się realizacji projektu, przygotuj wcześniej jego czytelną wizualizację. Właśnie w tym celu powstaje mockup, który nazywany jest również modelem, makietą czy prototypem. Jakie dokładnie ma zastosowanie i dlaczego jego wykonanie jest dobrym krokiem?
Chcesz zrealizować określony projekt i masz na niego pomysł. Zanim to zrobisz, ustal, jak będzie wyglądał docelowo. Właśnie po to tworzy się mockup. Pozwala on wizualnie zaprezentować, jak będzie wyglądać dany produkt. Korzysta się z niego nie tylko w odniesieniu do stron WWW, ale również etykiet, koszulek, aplikacji i nie tylko. Poprzez mockup można pokazać wizję końcowego produktu w formie zarówno prostej grafiki, jak i zaawansowanego modelu 3D.
Podstawowymi celami mockupu są:
Na poniższej grafice znajduje się przykład mockupu:
Dzięki takiej makiecie możesz zidentyfikować różne problemy na wczesnym etapie i tym samym ograniczyć koszty, które ewentualne wiązałyby się z wprowadzaniem poprawek w przyszłości. Projektanci i programiści mogą przetestować i zaprezentować rozwiązania, które zostaną ocenione przez klienta i zarekomendowane do wdrożenia. Ułatwia to również negocjowanie ze zlecającym – możesz pokazać, jaki będzie efekt w zależności od wybranych przez niego rozwiązań i jakie wiążą się z tym koszty. Mockup ma także zastosowanie do zaprezentowania prototypów aplikacji oraz stron potencjalnym klientom.
Możesz wykonać low-fi mockup lub Hifi mockup. Sprawdź, czym się różnią.
Low-fi mockup
To od niego często rozpoczyna się projektowanie produktu. Do jego przygotowania w zupełności wystarczą długopis i kartka papieru, ale oczywiście możesz też korzystać z programów. Low-fi mockup pokazuje, gdzie będą się znajdować poszczególne elementy i przejścia między nimi. Na tym etapie bez problemów i kosztów wprowadzisz nawet znaczące zmiany w pomyśle. Możesz zbierać opinie potencjalnych klientów i szybko nanosić modyfikacje zgodnie z ich komentarzami. Do przygotowania takiego projektu nie potrzebujesz specjalistycznego oprogramowania ani wiedzy. Każdy może spróbować zaprezentować pomysł na papierze. Poniżej znajduje się przykład takiego prototypu:
Hifi mockup
Tego typu prototypy są bardziej zbliżone do postaci końcowej. Obejmują większość elementów, z których ma się składać docelowy produkt. Co za tym idzie, są przygotowywane na późniejszych etapach realizacji projektu. Służą przede wszystkim przetestowaniu użyteczności oraz identyfikacji potencjalnych problemów. Buduje się je na podstawie makiet low-fi. Zazwyczaj prototyp obejmuje podstawowe animacje i przejścia między ekranami. Przykład takiej makiety znajduje się na poniższej grafice:
Do Twojej dyspozycji jest mnóstwo narzędzi. Możesz skorzystać z gotowych, darmowych rozwiązań. Wyszukaj w sieci strony Anthony Boyd, Behance, CSS Author, Freebiesbug – znajdziesz na nich szablony.
Popularnymi narzędziami do projektowania są Adobe XD i Sketch (na macOS). Do godnych uwagi i dostępnych za darmo zaliczamy Figmę czy InVision. Spróbuj przetestować przynajmniej dwa, aby ocenić, które lepiej odpowiada Twoim oczekiwaniom i umiejętnościom.
Do generowania mockupów możesz też wykorzystać narzędzia AI. Przykładem są Fotor AI czy Mockey.ai. To rozwiązania, które ułatwiają pracę. Pomogą Ci zrealizować m.in. stronę WWW zoptymalizowaną pod kątem SXO. To oznacza, że witryna będzie jednocześnie dopasowana do wymagań algorytmu Google i do oczekiwań internautów.
Przedsiębiorca związany z branżą SEO od 2004 roku. Tworzy content o tematyce marketingu online, finansów, nieruchomości i podróży. Rozwija własne serwisy tematyczne.
