Tvorba wireframe pro e-shop

Před spuštěním nového e-shopu nebo při jeho redesignu je důležité navrhnout, jak bude nová podoba e-shopu vypadat. V této fázi se navrhuje drátěný model neboli wireframe. Kdy a proč je tvorba wireframe důležitá před spuštěním nového nebo při redesignu stávajícího e-shopu? Celý proces tvorby wireframe a jeho významosti bude nastíněn v článku.

Tak jako Architekt nakreslí projekt vašeho domu na papír, zakreslí všechny místnosti a jejich rozměry a vy tak získáte konkrétnější představu o tom, jak bude celý dům vypadat, podobně postupuje specialista na tvorbu wireframu při návrhu webového projektu nebo e-shopu.

Definice z wikipedie: Wireframe webu („drátěný model“ nebo stále častěji „skica webu“) se v oblasti vývoje webových prezentací či aplikací používá pro náhled nového řešení. Jde o návrh definující funkci a obsah stránek webu, pro lepší pochopení: Wireframe = projektová dokumentace nového webu.

Ukázka

wireframe

Proč vytvářet wireframe?

Hlavním důvodem, proč vytváříme wireframe je návrh prototypu stránek/eshopu a jeho hlavních prvků vztahů mezi nimi. Jedná se o základní kostru, kde jsou zobrazeny a vysvětleny všechny potřebné funkce bez rušivých barev, typů písma a jiných grafických prvků. Největší výhodou drátěného modelu je jeho jednoduchá modifikace. Změny mohou být implementovány před zahájením programování a nedochází tak k navyšování nákladů ve formě úprav hotových řešení.

Wireframe proto definuje pouze rozložení obsahu a všech funkčních prvků. Po odladění funkčních částí při součinnosti se zákazníkem se wireframe převede do podoby, jehož výsledkem je zjednodušená podoba e-shopu. V prototypu fungují všechny odkazy, efekty, dynamické menu, záložky a lze  jej procházet a proklikávat jako skutečný e-shop. Jde však pouze o simulaci.

Kdy se wireframe vytváří?

Tvorba drátěného modelu se dělá před grafickým návrhem. Wireframe definuje rozmístění funkční prvků na stránce / e-shopu. Je potřeba zdůraznit, že se nejedná o grafický návrh – ikdyž profesionální drátěné modely již takto mohou vypadat. Ve wireframu se musí především objevit všechny prvky, které bude e-shop obsahovat. Až výsledná podoba se předává jako podklad pro grafický návrh i jako podklad pro kodera.

Software pro tvorbu wireframe:

Přesto že se drátěné modely běžně vytvářejí kresbou na papír nebo v grafickém editoru, tyto metody nenahradí profesionální nástroje, které jsou byly za tímto účelem vytvořeny. Takový software výrazně zjednoduší práci všem zúčastněným stranám. Je velký rozdíl se na návrh podívat nebo mít možnost si jej proklikat a projít si všechny stránky (např. jednotlivé kroky košíku, formuláře…).

Pro prezentování drátěného modelu zákazníkům se vyplatí pořídit si specializovaný software. Vyzkoušeli jsme jich několik, nejlépe našim požadavkům vyhovuje Axure. Zákazníkovi zasíláme speciální url adresu, na které si může prototyp e-shopu pohodlně proklikat, přečíst si poznámky a my tak můžeme pružně reagovat na další případné požadavky na úpravu.

Stránky a funkční prvky, které by ve wireframu neměly chybět

  • Homepage – obecné rozvržení klíčových prvků, které se budou objevovat i na dalších stránkách a podstránkách. Jedná se především o části jako je hlavička (header), patička (footer), obsah (content), sloupce (sidebar)
  • Logo
  • Navigace – menu
  • Košík
  • Vyhledávání
  • Přihlášení
  • Formuláře
  • Výpis produktů
  • Detail produktu
  • Detail kategorie
  • Statické stránky
  • Ostatní prvky – tlačítka pro sdílení na sociální sítě, recenze…

Hlavní výhody tvorby drátěného modelu

  • objevení skrytých problémů
  • stanovení hlavních cílů webu / e-shopu
  • předejití špatnému rozvržení funkčních prvků a nelogickému rozmístění obsahu
  • snadnější komunikace se zákazníkem, grafikem, koderem, analytikem…
  • možnost provádět uživatelské testování ještě před grafickým návrhem

Máte-li zájem o profesionání návrh wireframu pro váš e-shop, podívejte na výsledky naší práce.  Realizovali jsme více než 200 úspěšných projektů v oblasti internetového obchodování. Navrheme vám drátěný model na profesionální úrovni.