Design nového e-shopu, který počítá s platformou i provozem

Návrh začíná obchodem, ne barvami

První týdny patří obsahu a struktuře: kdo jsou zákazníci, jak vybírají, jaké informace potřebují k rozhodnutí a co vás odlišuje od konkurence. Z toho vzniká informační architektura — strom kategorií, parametry pro filtraci, šablona detailu produktu a nákupní proces. Teprve potom přichází vizuál. U nového e-shopu je to nejlevnější chvíle na změny: přesunout kategorii ve wireframu stojí minuty, po spuštění týdny práce a přesměrování.

Platforma určuje, co jde postavit

Design musí odpovídat technologii. Na Shoptetu stavíme na některé ze šablon a upravujeme ji, vlastní design od základu nabízí Shoptet v rámci řešení Shoptet Premium — podrobněji na stránce Shoptet šablony na míru. Na Shopify se vzhled staví na tématech v jazyce Liquid; aktuální řada oficiálních témat Horizon je postavená na tzv. theme blocks, které se dají skládat v editoru. WooCommerce od verze 8.3 používá pro košík a pokladnu ve výchozím stavu bloky a s blokovými tématy se dá upravovat v Site Editoru. U headless řešení je frontend zcela na míru a design systém je nutnost. Platformu, která zatím není vybraná, pomůžeme zvolit v rámci replatformingu.

Prototyp jako pojistka

Klíčové šablony převádíme do klikacího prototypu ve Figmě na mobilu i desktopu. Na prototypu projdeme nákup s vámi a ideálně s několika lidmi z cílové skupiny. Pro kvalitativní test použitelnosti obvykle stačí malý vzorek — Nielsen Norman Group dlouhodobě doporučuje testovat po malých kolech zhruba s pěti uživateli a test opakovat po úpravách.

Předání do vývoje

Výstupem nejsou jen hezké obrazovky. Předáváme komponenty se všemi stavy (hover, chyba, prázdný výsledek, načítání), design tokeny pro barvy, typografii a mezery a popis chování na různých šířkách obrazovky. Vývojář tak nemusí nic domýšlet a e-shop jde konzistentně rozvíjet i po spuštění. Na design pak navazuje design systém, pokud plánujete větší rozvoj.