Do czego służy mockup
Sam zrzut ekranu jest płaski i bez kontekstu. Ten sam zrzut w telefonie pokazuje produkt, który można wziąć do ręki. Brzmi jak drobiazg. Na stronie w sklepie albo w reklamie często decyduje o tym, czy ktoś przewinie dalej, czy kliknie.
Mockupy znajdziesz:
- na zrzutach w App Store i Google Play;
- w głównych grafikach i filmach produktowych na stronach;
- w postach na Instagramie, TikToku i LinkedInie;
- w prezentacjach dla klientów i portfolio;
- w pitch deckach dla inwestorów.
Dla projektanta jest też strona praktyczna. Klient patrzący na płaski PNG zawsze w końcu pyta, jak to będzie wyglądać na telefonie. Mockup odpowiada, zanim padnie pytanie.
Rodzaje mockupów
Dziś widać trzy rodzaje i każdy jest dobry w czymś innym.
Płaski mockup (2D)
Zrzut siedzi w ramce urządzenia widzianej z przodu. Szybko się go robi, pliki są małe i do sklepów często wystarcza. Ale wszystko jest z tego samego kąta, więc strona pełna mockupów 2D szybko robi się monotonna.
Mockup na zdjęciu
Ktoś fotografuje prawdziwe urządzenie, na przykład telefon w dłoni albo laptop na biurku. Zaznacza się obszar ekranu, a twój projekt trafia tam z właściwą perspektywą. Światło i otoczenie są prawdziwe, więc efekt wygląda bardzo naturalnie, i dlatego tak dobrze działa w social mediach i na stronach.
Mockup 3D i film mockup
Trójwymiarowy model urządzenia. Obracasz telefon pod dowolnym kątem, przesuwasz światło, a cień idzie za nim. Prawdziwa siła to ruch: urządzenie się obraca albo laptop się otwiera, a na ekranie działa twoja aplikacja. W filmach premierowych i podglądach App Store to dziś najpopularniejszy rodzaj.
Mockup, wireframe i prototyp
Ciągle się je myli. Wireframe to szkielet ekranu: prostokąty, linie, tekst zastępczy, bez koloru. Służy do ustalenia, co gdzie będzie. Prototyp da się klikać: dotykasz przycisku i otwiera się następny ekran. To pokazuje się użytkownikom w testach.
Mockup pokazuje gotowy albo prawie gotowy projekt w realistycznym otoczeniu. Nie da się go klikać; jest do oglądania.
Jak zrobić mockup
Kiedyś były dwie drogi: otworzyć PSD z obiektami inteligentnymi w Photoshopie albo zbudować scenę w programie 3D, takim jak Blender czy Cinema 4D. Pierwsza jest szybka, ale ograniczona. Druga daje dużo, ale nauka trwa tygodnie.
Dziś są aplikacje zrobione właśnie do tego. W Mockup Center wygląda to tak:
- Przeciągnij zrzut albo nagranie ekranu do aplikacji.
- Wybierz urządzenie (iPhone, Galaxy, iPad, MacBook, Apple Watch i inne) albo otwórz animowany szablon.
- Ustaw kąt, światło i tło, a potem eksportuj PNG albo wideo.
Poradnik jak zrobić mockup przechodzi przez każdy krok.
Co sprawia, że mockup jest dobry
Po obejrzeniu wielu stron w sklepach i postów premierowych dobre mockupy mają zawsze te same nawyki:
- Zrzut jest ostry. Rozmazany ekran sprawia, że nawet droga scena 3D wygląda tanio. Rób go w prawdziwej rozdzielczości urządzenia.
- Pasek stanu jest czysty: 9:41, pełna bateria, bez powiadomień. Drobiazg, ale ludzie go zauważają.
- Tło nie konkuruje z produktem.
- Każda grafika mówi jedno: jedna funkcja, jeden nagłówek.
