Košice
19. Október udalosť už prebehla
Poprad
9. November udalosť už prebehla
Bratislava
5. December udalosť už prebehla
Bardejov
25. Január udalosť už prebehla
Žilina
15. Február udalosť už prebehla
Prešov
7. Marec udalosť už prebehla
Zvolen
18. Apríl už čoskoro
Liptovský Mikuláš
9. Máj už čoskoro
Nitra
30. Máj už čoskoro
Košice
3. Október už čoskoro
Banská Bystrica
24. Október už čoskoro
Poprad
7. November už čoskoro
Bratislava
28. November už čoskoro
5 min. čítanie

Webdizajn e-shopu

V roku 2017 Heureka zaznamenala celkovo približne 11100 e-shopov na Slovensku. Nových e-shopov vzniklo za rok 2017 cca 2200. Ak budujete vlastný e-shop, tak by ste sa mali od týchto e-shopov odlíšiť.

Ivan Potančok Ivan Potančok
CEO vibration.sk
Webdizajn e-shopu

Podľa SEO odborníka Mareka Prokopa je zmyslom WWW stránok zisk. O to viac to platí pre e-shopy. Na to, aby sme ho dosiahli potrebujeme mať kvalitný e-shop. Kvalitný e-shop definujeme viacerými faktormi ako výber produktov, cenotvorba, dostupná a rýchla logistika, až po dobrý dizajn. Spoznať dobrý dizajn e-shopu nie je jednoduché, ale dá sa to. Nezabúdajme, že prvý dojem zákazníka môže ovplyvniť to, či zavrie okno, alebo nakúpi.

Základné prvky webdizajnu e-shopu

Viditeľné zákazníkom

Štruktúra stránky

  • rozvrhnutie stránky
  • stĺpce

Navigácia

  • umiestnenie menu
  • umiestnenie košíka
  • telefónneho čísla
  • doplnková navigácia

Písmo

  • čitateľné písmo
  • správne zobrazuje diakritiku
  • dá sa zväčšiť
  • má správny kontrast

Farebnosť

  • farby prispôsobené cieľovej skupine zákazníkov
  • striedme použitie farieb – veľa farieb spôsobuje cirkus
  • farby vychádzajú z firemnej identity
  • správny kontrast pozadia a textu – dobre čitateľné všetky texty na webe
  • odlíšené call to action prvky ako napríklad: “Vložiť do košíka”

Whitespace

  • práca s voľným priestorom
  • oddelenie blokov, informácie sú oddelené od seba
  • nenalepené nadpisy na text

Fotky a ilustrácie

  • kvalitné fotky produktov
  • popisné ilustrácie
  • ikonky, ktoré urýchľujú pochopenie kontextu

Neviditeľné zákazníkom

Tieto prvky ovplyvňujú dobrý dizajn, ale zákazník si ich pri nákupe neuvedomuje.

Responzivita

  • správne prispôsobenie e-shopu na mobilných zariadeniach
  • flexibilné prvky
  • zmena veľkosti písma kvôli čitateľnosti

Práca s obsahom

  • skrývanie a prispôsobovanie obsahu podľa zariadenia – na mobile nezobrazujeme niektoré zbytočné prvky
  • prispôsobenie personalizovaného obsahu – napríklad na úvodnej stránke zobrazujeme produkty existujúcemu zákazníkovi podľa toho, čo nakúpil pred tým

Interakčný dizajn

  • ako sa menia tlačítka po nabehnutí myšou
  • ako sa vysunie menu na mobile
  • mikroanimácie – napríklad keď stlačím tlačítko tak sa zakrúti a zmizne

Vlastnosti dobrého dizajnu

 

Je to pomerne veľa vecí, na ktoré by mal majiteľ e-shopu myslieť. Ako teda na to?

Výber dodávateľa webdizajnu

 

Pri výbere dodávateľa webdizajnu si o ňom zistite dôležité informácie, pretože s ním budete pravidelne komunikovať, do budúcna s ním pracovať dlhodobo a musíte si sadnúť aj chémiou.

Čo zistiť o dodávateľovi:

  • Aký má štandardný postup prác?
  • Koľko bude stáť celé dielo?
  • Akú má hodinovú sadzbu?
  • Aké má referencie?
  • Koľko projektov podobného rozsahu už robil?
  • Ako rýchlo vie reagovať na vaše požiadavky? Problém môže byť iné časové pásmo alebo práca na viacerých projektoch.
  • Zavolajte jeho existujúcim klientom, ako sa im s ním spolupracovalo?
  • Urobí najprv wireframes? Prototyp?
  • Koľko kôl pripomienok je v danej cene ochotný urobiť?
  • Aký vám dodá výstup? Len dizajn? Alebo aj HTML+CSS šablóny? Dizajn dodá v sketchy? Alebo Photoshop?
  • Čo používa na komunikáciu?
  • Používa nejaký nástroj na riadenie projektu?
  • Koľko vám dodá obrazoviek?
  • Koľko času sa vie vášmu projektu venovať týždenne?
  • Robí aj iné projekty?
  • Sú nejaké problémové oblasti, ktoré môžu oneskoriť dokončenie projektu?

Ako zadať tvorbu dizajnu

Čím viac informácií dáte o vašom budúcom e-shope dodávateľovi dizajnu, tým lepší bude finálny výsledok. Dajte si preto záležať na príprave zadania. Veľa dodávateľov má pripravený dotazník, ktorý len vyplníte. Ideálne je dať si aj stretnutie s dodávateľom, prípadne skype a prejsť si vaše konkrétne požiadavky podrobnejšie.

Čím viac informácií dáte o vašom budúcom e-shope dodávateľovi dizajnu, tým lepší bude finálny výsledok.

Podklady potrebné na tvorbu dizajnu e-shopu

  • logo e-shopu alebo celú firemnú identitu – ak máte
  • spísané ciele vášho e-shopu
    • chcem primárne predávať koncovým zákazníkom na Slovensku
    • chcem aby navštívili môj showroom v Bratislave
  • aká je cieľová skupina zákazníkov e-shopu
    • mamičky na materskej od 25 do 35 rokov
  • ako chcete, aby bola vnímaná vaša značka
    • chcem, aby e-shop pôsobil moderne a sviežo.
  • aké chcete používať fotky produktov
    • mám vlastné fotky + fotky od dodávateľov
  • konkurenčné výhody nákupu
    • dodanie do 24 hodín
    • 5 rokov na trhu
    • poskytujeme poradenstvo
    • osobný odber v kamennej predajni
    • záruka vrátenia peňazí…
  • bude mať e-shop nejaké špeciálne funkcie?
    • konfigurátor produktov
    • b2b zóna
    • klientská zóna
    • jednostránkový košik…
  • e-shopy, ktoré sa vám páčia
  • čo konkrétne sa vám na daných e-shopoch páči
    • na e-shope xyz sa mi páči výsuvné horné menu a našepkávač vo vyhľadávaní
  • čo by mala obsahovať úvodná stránka
  • čo by mala obsahovať stránka produktu
  • koľko budete mať produktov
  • aké budú kategórie produktov
  • budete mať aj blog?
  • prípadne iné špecialitky vášho e-shopu

Postup pri tvorbe web dizajnu e-shopu

Ideálny postup asi neexistuje. Každý dodávateľ bude mať svoje zaužívané procesy. Tieto body sa štandardne musia spraviť z pohľadu majiteľa e-shopu ak nepôjde cestou hotových šablón.

  1. Príprava zadania pre výber dodávateľov
  2. Oslovenie dodávateľov
  3. Stretnutia s dodávateľmi
  4. Vyhodnocovanie ponúk
  5. Výber dodávateľa
  6. Objednávka prác
  7. Platba zálohy
  8. Workshopy s dodávateľom – došpecifikovanie diela
  9. Pripomienkovanie informačnej architektúry
  10. Pripomienkovanie wireframes
  11. Testovanie prototypu – užívateľské testovanie
  12. Pripomienkovanie prvotných dizajnov
  13. Testovanie dizajnu – užívateľské testovanie
  14. Finalizácia dizajnu
  15. Prebratie dizajnu
  16. Platba za zvyšok diela
  17. Odovzdanie front end programátorom na spracovanie šablón
  18. Dodatočné práce na dizajne ak niečo chýba pri programovaní
  19. Kontrola šablón dizajnérom

Záver

Tvorba dizajnu pre e-shop je pomerne náročný proces a vyžaduje si špecialistov. Alternatíva pre začínajúce e-shopy je využiť hotové šablóny, ktoré šetria peniaze a čas. Ak sa do toho chcete obuť poriadne, tak treba dôsledne vyberať dodávateľa, pripraviť správne podklady, dbať na plynulý chod projektu a kontrolovať jednotlivé procesy. Ak je to váš prvý webový projekt, je dobré prizvať si od začiatku nejakého konzultanta, ktorý vás celým procesom tvorby e-shopu bude sprevádzať.

Zdieľať článok
Ivan Potančok
CEO vibration.sk

Riaditeľ a zakladateľ vibration.sk. Od roku 2000 robí weby. Nadšenec skialpinizmu, cyklistiky, GTD a hudobnej produkcie.

Tento článok ti prináša

Vibration

Vibration je softvérové štúdio, ktoré sa zameriava na vývoj webových aplikácií a webových stránok na mieru. Vyvíjajú vlastný produkt sellio – komplexný, modulárny, cloudový systém, vhodný na tvorbu e-shopov, B2B riešení a informačných systémov. Sú na trhu už 11 rokov a dokončili viac ako 1200 projektov.

Viac o tejto spoločnosti

Týždenný podcast UPdate
Podobné články
Cenové konfigurátory produktov pre B2B a B2C e-shopy
6 min. čítanie

Cenové konfigurátory produktov pre B2B a B2C e-shopy

Chceli by ste predávať vaše produkty online s možnosťou konfigurácie ich parametrov? Pre váš e-shop má množstvo výhod. Zákazník si vyberie napríklad rozmery produktu, materiál či vybavenie a následne podľa svojich predstáv aj rovno pokračuje k objednávke. A predstavte si, že by si konfiguráciu mohol i uložiť a spätne doupravovať. 

Ivan Potančok Ivan Potančok
CEO vibration.sk
Prečítať článok
Bridge Now

Najnovšie správy práve TERAZ

10+ neprečítaných

10+