14.07.2016 • Pavol Lelák

​Dizajn e-shopu - ​Ako založiť e-shop (4. časť)

Ak sa hovorí, že šaty robia človeka, tak dizajn stránky robí internetový obchod. Aspoň na prvých pár sekúnd, ktoré môžu rozhodnúť o tom, či zákazník na vašom e-shope zostane a nakúpi, alebo sa radšej znechutene poberie ďalej. 
Pri príprave dizajnu vášho e-shopu by ste sa mali riadiť najmä funkčnosťou v kombinácii s kvalitným grafickým návrhom, ktorý bude pôsobiť moderne a dôveryhodne. Dizajn by mal podporovať branding vašej firmy v súlade s dizajn manuálom

 
  • Prejdite priamo na: 

Príprava dizajnu na mieru

Farby a Fotografie 

 

 

Dizajn zadarmo

Responzívny dizajn

 

Príprava dizajnu na mieru

Pri príprave dizajnu na mieru potrebujete grafický návrh, ktorý sa následne naprogramuje ako webstránka. Ak nie ste grafik a ani programátor, budete musieť využiť služby profesionálov. Odborníci, ktorí majú skúsenosti s desiatkami podobných projektov, vás budú vedieť nasmerovať a upozornia vás už vopred na chyby, ktoré laik pri príprave nevidí. Rozloženie prvkov na hlavnej stránke, v detaile produktu, na blogu a ostatných častiach e-shopu si môžete pripraviť aj na papieri a následne skonzultovať s odborníkom na UX a UI – používateľskú skúsenosť a dizajn používateľského rozhrania. Pomôže vám spoznať zákazníka a už vopred mu pripraviť čo najprirodzenejší pohyb v e-shope. Trendom pri vytváraní webov je dnes najmä funkčnosť a použiteľnosť. Nezabudnite ani na zákazníkov so zrakovým postihnutím a uistite sa, že váš e-shop bude spĺňať pravidlá prístupnosti týkajúce sa dizajnu. 

Skúste začať s dizajnom detailu produktu. Na produktovej stránke sa totiž zákazník rozhoduje, či bude pokračovať v nákupe. Nezanedbajte však ani úvodnú stránku a venujte pozornosť aj jednotlivým prvkom stránky, ako je napríklad navigácia. To, či ste zvolili správny postup, zistíte testovaním. A/B testing je metóda, pri ktorej zobrazujete náhodným návštevníkom e-shopu viaceré varianty jedného prvku a meriate ich výkon. Môžete tak napríklad zistiť, že tlačidlo s textom „Kúpiť“ má väčšiu úspešnosť v modrej farbe než v červenej. 



Farby

Pre rôzne kategórie produktov sú charakteristické rôzne farebné kombinácie. Ak v segmente ešte nepôsobíte dlho, skúste sa inšpirovať konkurenciou. Nekopírujte, ale využite prvky, ktoré sa vám páčia vo vlastnom dizajne. Zvážte využitie farebnej kombinácie definovanej v dizajn manuáli vášho loga.  
Výber farebnej kombinácie by mal závisieť aj od vašej cieľovej skupiny. Farby vnímajú inak muži a inak ženy. Rozdiely nájdeme aj medzi staršími a mladšími zákazníkmi. Pri výbere farieb dominantných na stránkach vášho e-shopu zhodnoťte ich psychologický vplyv na koncového zákazníka. Teplejšie farby môžu vzbudiť emóciu a vyvolať reakciu. Chladnejšie farby sa zasa používajú pre dosiahnutie profesionálneho a dôveryhodného dojmu. Pri vytváraní farebných paliet sa môžete inšpirovať dizajnérskymi nástrojmi, ktoré vám pomôžu vybrať vhodnú kombináciu farieb. Je vhodné dodržiavať tradičné a overené postupy, ktoré je však potrebné dopĺňať najnovšími trendmi v oblasti webového dizajnu.

Aj farby textu a pozadia by mali spĺňať určité normy. Mali by byť dostatočne kontrastné, aby ste čítanie zákazníkom čo najviac uľahčili. Najľahšie čitateľný text má tmavú farbu na svetlom pozadí. Pri svetlom texte na tmavom pozadí sa naše oči unavia podobne rýchlo, ako pri čítaní textov písaných kurzívou. Čitateľnosť textov si môžete overiť aj pomocou špeciálnych nástrojov. Stačí zadať farby textu a pozadia a uvidíte, či sú dostatočne kontrastné aj v rôznych veľkostiach.

Fotografie 

Dôležitou súčasťou dizajnu vášho e-shopu budú fotografie. Či už sú to ilustračné obrázky pre blog, alebo produktové fotografie v detaile produktu. Aj vzhľad fotografií, prípadne používané filtre a podobné úpravy, môže byť zadefinovaný v dizajn manuáli. Aktuálnym trendom sú väčšie a kvalitné fotografie. Ak je to možné, používajte originálne fotografie vytvorené špeciálne pre vás. Pomôže vám to nielen v SEO, ale aj v budovaní imidžu e-shopu. V prípade, že musíte používať fotografie z fotobanky, vyberajte dôsledne. K dispozícii máte množstvo fotobaniek s fotografiami zdarma, ale vo väčšine prípadov už presýtili internet. Ilustračná fotografia, ktorú si kúpite, môže v konečnom dôsledku priniesť oveľa viac. 

Dizajn zadarmo

Ak sa rozhodnete, že dizajn na mieru pre vás nie je až taký dôležitý, pomôžu vám šablóny. Je samozrejmosťou, že e-shopové riešenia ponúkajú na výber aspoň niekoľko druhov rôznych šablón pre váš e-shop. Vyberajte si také e-shopové riešenie, ktoré má responzívne a moderne pôsobiace šablóny, ktoré sú zároveň jednoducho editovateľné. Ak vám nestačia nastavenia v administrácii, so základnými vedomosťami z CSS by ste mali byť schopní pretvoriť si šablóny podľa svojich predstáv. Oveľa väčšiu voľnosť vo výbere máte v prípade, že používate najznámejšie redakčné systémy WordPress alebo Joomla. Medzi šablónami pre Wordpress a šablónami pre Joomlu si určite vyberiete tú správnu. 



Responzívny dizajn alebo mobilná verzia?

Stúpajúci trend v používaní mobilných zariadení znamená, že používatelia budú prichádzať na váš e-shop z rôznych zariadení. To, že web vyzerá dobre na vašom počítači neznamená, že bude taký aj na zákazníkovom smartfóne. Vrcholom, ktorý sa snažíte dosiahnuť, je intuitívna ovládateľnosť a prehľadnosť e-shopu aj na mobile. Kým v minulosti sa preferovala pre mobilné zariadenia špeciálne vytvorená verzia stránky na subdoméne (napríklad v tvare m.google.com), dnes sa kladie dôraz takmer výlučne na responzívny dizajn. Znamená to, že v závislosti od používaného zariadenia sa pri prehliadaní vášho e-shopu budú jednotlivé prvky na stránke automaticky prispôsobovať používateľovi. Už žiadne približovanie na malom displeji a skúšanie kliknúť na príliš malé tlačidlo. Responzívny dizajn ho umiestni na správne miesto a v správnej veľkosti. Keďže Google uprednostňuje responzívne stránky, pomôcť si môžete aj v umiestnení vo vyhľadávači. Určite vás to vďaka tomu neposunie na prvé miesto, ale aspoň budete mať pred konkurenciou so staršími webmi ďalšiu výhodu. E-shop optimalizovaný pre mobilné zariadenia je známkou modernej firmy, ktorej záleží na zákazníkovi. Ak neviete, ako optimalizovať web pre mobilné zariadenia tak, aby vždy vyzeral dobre, skúste sa inšpirovať najnovšími trendmi.
Otestovať svoj e-shop z pohľadu responzívnosti si môžete aj automatizovane vďaka Googlu.



Odporúčané zdroje

Výbornou pomôckou pre každého začínajúceho e-shopára je e-book Michala Krála13 najčastejších chýb pri prevádzkovaní e-shopu“. Michal sa spolu s kolegami venuje aj konzultáciám pre e-shopy. Ak neviete, či vášmu e-shopu pomôže redizajn alebo úplne nový vizuál, vďaka dlhoročným skúsenostiam v e-commerce vám určite budú vedieť poradiť.

Všetko, čo potrebujete vedieť o e-commerce, sa naučíte na praktických školeniach Pricemania Academy, ktoré sa zameriavajú najmä na majiteľov e-shopov.

Super tipy pre inšpiráciu v dizajne nájdete v článku od startitup.sk.
UXpin zverejňujú pravidelne aktualizované trendy vo web dizajne vo forme e-bookov. 

Newsletter

Buďte prednostne informovaný
o novinkách a eventoch


Sledujte nás na sociálnych sieťach

Project Manager:
Ing. Patrícia Dunárová
E-mail:
patricia.dunarova@pricemania.sk
Mobil:
+421 911 665 486

Organizuje

Pricemania s.r.o.
Priemyselná 1/A, 821 09 Bratislava
www.pricemania.sk


Mediálni Partneri
Partneri
  • NetDirect-logo
  • ui42-logo
  • vnet-logo
  • Logo DHL
  •