Jak vytvořit grafický návrh (mockup)

V roce 2014 jsem společně s Rembrantem Van der Mijnsbruggem založil agenturu MOTE. Specializujeme se výhradně na e-commerce a spolupracujeme s klienty ve všech fázích jejich podnikatelské cesty, od počáteční tržní strategie a identity značky až po design, vývoj a marketing, vždy se zaměřením na udržitelný růst. Za svých 15 let zkušeností s webdesignem pro e-commerce jsem formoval strategie klientů od nezávislých značek až po společnosti z žebříčku Fortune 500. A teď se s vámi velmi rád podělím o praktické tipy a rady, které jsem za svou kariéru nasbíral.

Úprava předpřipravené šablony webu je snadná. Pokud chcete vidět, jak bude váš web vypadat se čtyřmi produkty v řadě oproti dvěma produktům v řadě, můžete si to zobrazit během několika sekund. Ale u plně zakázkového webu mohou být změny v kódu časově náročné a zejména drahé. Proto designéři vytvářejí grafické návrhy webu ještě před přechodem do fáze vývoje.

V tomto článku se dozvíte více o grafickém návrhu webu, stejně jako o nástrojích a osvědčených postupech pro vytvoření vlastního návrhu webu.

Co je to grafický návrh webu (mockup)?

Grafický návrh webu (běžně označovaný jako mockup) je statický vizuální náhled toho, jak bude finální stránka vypadat. Poskytuje představu o finálním designu a rozložení stránky, ale zatím není funkční s back-endovým kódem, který by web učinil interaktivním a připraveným k publikování. Webdesignéři používají grafické návrhy webu k prozkoumání různých designových možností před předáním webdesignu k vývoji. Jakmile je totiž web jednou naprogramovaný, jakékoli úpravy jsou náročné a drahé. Detailní neboli „high-fidelity“ návrh (takový, který se maximálně blíží k finálnímu produktu) vám tak ušetří hromadu času i peněz.

Grafický návrh webu vs. wireframe vs. prototyp

• Wireframy
• Grafické návrhy (mockupy)
• Prototypy

Wireframy, mockupy (grafické návrhy) a prototypy představují tři odlišné fáze vizualizace vašeho nápadu. Kdy se hodí použít který z nich?

Wireframy

Wireframy jsou zjednodušená schémata, která ukazují základní rozvržení a strukturu webu bez jakýchkoliv grafických prvků. Můžete si je představit jako architektonický plán vašeho webu.

Wireframe může být jednoduchý náčrtek tužkou na papíře, takže je užitečným nástrojem pro nedesignéry, kteří chtějí sdělit svou vizi. Wireframy mohou také pomoci designérům pracujícím na webech s novým nebo velmi interaktivním prvkem. Je to proto, že wireframy vám umožňují rozhodnout o základním obrysu a funkcionalitě stránky, než se necháte rozptýlit barvičkami a kódem.

I když stavíte jen jednoduchý e-shop, wireframe vám může pomoci upevnit celkový prodejní trychtýř a zákaznickou zkušenost, kterou chcete vytvořit. Díky své naprosté jednoduchosti jsou wireframy tím nejlepším způsobem, jak hned na začátku sladit očekávání celého týmu.

Grafické návrhy (mockupy)

Grafické návrhy (mockupy) jsou naopak vysoce detailní, ale stále statické vizualizace. Jasně ukazují finální rozložení webu včetně kompletního brandingu. Na rozdíl od holých wireframů už obsahují reálné barvy, finální typografii (fonty), obrázky a celkové umělecké směřování.

Poskytují naprosto realistický náhled na to, jak bude finální web působit na běžného uživatele, jen se na něm ještě nedá na nic kliknout. Kvalitní grafický návrh webu je u zakázkových projektů naprostou nutností, protože vám umožňuje ladit design bez nutnosti sahat do složitého kódu.

Prototypy

Prototypy jsou tou vůbec nejpřesnější formou náhledu. Jedná se o plně interaktivní modely, které používají náhledové odkazy k simulaci uživatelské zkušenosti a vdechují webdesignu život.

Pro projekty, které vyžadují testování různých interaktivních prvků před vývojem, může být prototyp opravdu přínosný. U jednodušších projektů můžete přejít přímo z návrhu k vývoji.

Jak vytvořit grafický návrh webu (krok za krokem)

1. Rozhodněte se, jak prezentovat svou značku
2. Vytvořte lineární příběh
3. Shromážděte prvky své značky
4. Navrhněte šablony pro každý typ stránky
5. Přidejte smysluplné zástupné symboly
6. Získejte zpětnou vazbu

Ať už něco navrhujete sami, nebo pracujete s designérem, základní prvky, které je třeba zvážit při procházení designového procesu, jsou stejné.

1. Rozhodněte se, jak prezentovat svou značku

Úplně prvním krokem při navrhování webu je udělat krok zpět a pořádně se zamyslet nad tím, jak chcete svou značku vlastně prezentovat. Pokud spolupracujete s designérem, můžete proces zahájit kreativním briefem. Z něj se grafik dozví vše podstatné o vaší značce, cílové skupině a hlavní inspiraci.

Je naprosto přirozené chtít se zaměřit na konkrétní funkce, ale než se necháte strhnout technickými detaily, zkuste nejprve od toho trochu odstoupit: Přemýšlejte o celkovém příběhu, který chcete uživatelům prostřednictvím webu vyprávět.

Například můžete začít s cílem povzbudit uživatele, aby strávili více času na vaší domovské stránce. Domovská stránka je často prvním kontaktním bodem značky. Také má tendenci mít nejvyšší míru opuštění. Ale místo začínání z perspektivy funkcí nebo optimalizace konverzí se zeptejte sami sebe: „Jak si s návštěvníky domovské stránky vybudovat mnohem hlubší vztah?“

Řešení může být až překvapivě prosté. Třeba hned do první viditelné obrazovky (nad ohyb neboli above the fold) vložit jednu údernou větu, která dokonale vystihuje vaši misi.

Pokud je srdcem vašeho byznysu důraz na udržitelnost nebo naopak exkluzivitu, je to ta nejlepší možná příležitost, jak s těmito hodnotami návštěvníka okamžitě konfrontovat a udržet ho na webu déle.

2. Vytvořte lineární příběh

Váš web by měl sledovat logický, lineární příběh. To znamená, že každá sekce a stránka na sebe přirozeně navazují. Úspěšný příběh zajišťuje, že když někdo přistane na vaší domovské stránce, má jasnou představu o vaší značce a nabídce produktů. Jakmile se začne nořit hlouběji do webu, měli byste mu postupně dávkovat více detailů a funkcí, které mu pomohou najít přesně to, co hledá.

V tradičním e-commerce je tímto lineárním příběhem vlastně klasický prodejní trychtýř: uživatel přistane na domovské stránce, která představuje vaši značku. Odtud se proklikne na stránky s kategoriemi produktů, které jdou už více do hloubky. Ty nejdůležitější informace vidí okamžitě, zatímco ty sekundární jsou jen na dosah kliknutí. V ideálním scénáři pak uživatel vybere produkt, přejde do košíku a plynule dokončí celou objednávku.

3. Shromážděte prvky své značky

Jakmile máte jasno v tom, jaký příběh chcete vyprávět, je čas shromáždit všechny prvky vaší značky, které se v designu reálně použijí.

Pokud máte vytvořený brand manuál (designový manuál), stačí ho předat designérovi. Pokud ho nemáte, budete muset ještě před samotným grafickým návrhem definovat základní prvky: typografii (písma), firemní barvy a grafický styl. Celkové rozvržení mřížky webu (tzv. grid) se totiž často počítá právě na základě výšek řádků a mezer vašich firemních fontů. Je proto naprosto klíčové mít v těchto prvcích jasno ještě dřív, než nakreslíte první čáru. Jakmile máte grid hotový, můžete do něj začít sázet designové prvky podle kreativního briefu.

4. Navrhněte šablony pro každý typ stránky

Pamatujte, že když tvoříte grafický návrh webu, nekreslíte přece každou existující podstránku zvlášť. Místo toho vytváříte univerzální šablony pro různé typy stránek, tedy jednu šablonu pro kategorii, jednu pro detail produktu (PDP), jednu pro košík atd.

Při navrhování každé z těchto šablon udělejte krok zpět a zeptejte se sami sebe: „Co udělá nákupní zážitek na této konkrétní stránce úspěšným?“ Pokud prodáváte jen úzce profilovaný sortiment o šesti produktech, vaše stránka kategorie by se s nimi měla spíše „mazlit“ a přidat k nim kontext ještě předtím, než uživatele pošle na detail produktu.

Pokud ale spravujete zásoby o stovkách či tisících položek, musíte navrhnout e-shop s robustním a pokročilým filtrováním. Jedině tak zajistíte, že když zákazník dorazí do kategorie, dokáže si ty stovky položek zúžit jen na ty, které jsou pro něj skutečně relevantní.

5. Přidejte smysluplné zástupné symboly

Protože je grafický návrh vizuálním náhledem finálního webu, je dost pravděpodobné, že reálné texty a fotky se budou tvořit až za běhu. Pokud je to váš případ, můžete použít takzvané zástupné symboly (placeholdery), ale udělejte to chytře.

I když jsou obrázky a text použité v návrhu dočasné, měly by být co nejblíže konečnému cíli. Tímto způsobem, když si prohlížíte návrhy, skutečně získáte pocit zamýšleného směru pro web. Například místo použití zástupného textu „lorem ipsum“ můžete napsat nějaký ukázkový text, který je v souladu se značkou.

6. Získejte zpětnou vazbu

Jakmile je váš grafický návrh webu hotový, je na čase jej odprezentovat stakeholderům (klientovi či klíčovým lidem v týmu) a posbírat od nich upřímnou zpětnou vazbu. Pokud své podnikání vedete sami, tak si zpětnou vazbu můžete vyžádat od přátel nebo od potenciální cílové skupiny zákazníků.
Tou hlavní výhodou vytvoření grafického návrhu webu je, že můžete dělat obrovské revize bez změny složitého kódu. Využijte proto tuto fázi na maximum a ujistěte se, že jsou všichni s výsledným designem stoprocentně spokojení ještě předtím, než web pošlete do ostrého vývoje (produkce).

Nástroje pro grafický návrh webu

Existuje mnoho designových nástrojů, které můžete použít k vytvoření grafického návrhu webu, ale mezi nejpopulárnější patří:

Sketch

Sketch je průkopnická aplikace pro webdesign, která umožňuje rychlé iterace. Sketch byl vytvořen v roce 2010 speciálně pro UI design a v něm lze vytvářet návrhy i interaktivní prototypy. Standardní předplatné začíná na 12 dolarech měsíčně (cca 250 Kč).

Figma

Figma je designový nástroj, který umožňuje spolupráci v reálném čase. Pokud na vašem návrhu pracuje více lidí současně, Figma by mohla být dobrou volbou. Do Figmy se můžete zaregistrovat zdarma, ale pokud chcete používat všechny její funkce, plány začínají na 15 dolarech měsíčně (cca 320 Kč).

Adobe XD

Designéři, kteří jsou zvyklí pracovat v celém ekosystému Adobe (aplikace jako Photoshop, Illustrator, InDesign a Lightroom), nedají dopustit na Adobe XD pro jeho bezproblémovou integraci s ostatními aplikacemi Adobe. Adobe již neprodává XD jako samostatný produkt, ale můžete k němu přistupovat prostřednictvím předplatného Adobe Creative Cloud za 59,99 dolaru měsíčně (cca 1 270 Kč).