Blog o podnikaní na internete
Poradca úspešného podnikateľa

Webdesign trendy na rok 2015 – Zápisky z konferencie Daily Web 2014 – 4.časť

iStock_000018350624SmallV novom roku pokračujeme reportami zo skvelej konferencie Daily Web 2014, ktorej sme sa zúčastnili.

V dnešnom blogposte si predstavíme webdesign trendy na tento rok – prednášku na túto tému odprezentoval Tobias Gebauer z Nemecka.

Top 5 grafických prvkov, ktoré budú tento rok kraľovať webdizajnu sme načrtli aj v našom newsletteri.

Ak sa práve chystáte na vytvorenie stránky alebo založiť vlastný eshop, inšpirujte sa!

Podľa webdizajnéra a webdevelopera Tobiasa sa jedná o:

1. Responzívny web dizajn

Ak patríte medzi našich stálych čitateľov, nepochybne pojem responzívny web dizajn poznáte.

Obsah vášho webu sa automaticky prispôsobí šírke obrazovky používaného zariadenia.

responzívny web design, responzívny webdizajn

responzívny web dizajn – montesaline.com

2. Obrázok / video alebo odkaz

Návštevníci vašich stránok by mali pochopiť, čo im ponúkate v priebehu 5 sekúnd.

Ako uľahčiť pochopenie vášho reklamného posolstva?

  • zvoľte vhodný obrázok alebo krátke video
  • krátky nadpis
  • 1 – 2 vety výstižne popisujúce vaše podnikanie
home-page

bluhomes.com – ukážka ideálne koncipovanej titulnej stránky

3. Design na celú šírku obrazovky

Ak na vašich stránkach použijete obrázky alebo videá na celú šírku, teda 1920 px a viac, umocníte tým reklamné posolstvo. Vhodné je zakomponovať video alebo obrázok aj do headeru či využiť farby pozadia do obsahových blokov, aby web pôsobil vzdušne.

full-width

šírka web stránky na celú obrazovku

4. Veľké obsahové bloky

Tobias tvrdí, že obsah musí  „dýchať“ 🙂 – vyčleňte mu preto dostatok priestoru.

Samozrejme, že každý bežný eshop si asi nemôže dovoliť nechať svoj e-shop „dýchať“  ako napr. swellspecialized.com 🙂, ale ako inšpirácia skvelý príklad.

Rešpektujte dĺžku vášho webu a v žiadnom prípade ju neprekračujte.

Zredukujte nepotrebné informácie – napr. z bočných stĺpcov.

Zminimalizujte rozvrstvené menu na stránku O nás, Home, Produkty.

Pridajte call-to-action prvky.

Dodržujte pravidlo – jedno reklamné posolstvo na 1 stránku.

 

5. Typografia a webfonty

Pre dobrú web stránku alebo e-shop je typografia jedným z najdôležitejších faktorov.

Nezaškodí zopakovať si zlaté pravidlá typografie na web stránke:

  • ideálna veľkosť fontu je 16 px so 150% výškou riadku
  • 11 – 16 slov na riadok, teda 55 – 80 znakov
  • používajte webfonty s vysokou čitateľnosťou
typografia na web stránke

typografia na web stránke

6. Jednostránkové web stránky 

Ako zefektívniť šírenie vášho reklamného posolstva? – prostredníctvom microsites.

Vďaka jednostránkovým podporným webom uľahčíte vašim zákazníkom proces rozhodovania o výbere vašich produktov alebo služieb.

Takýto podporný spôsob je vhodné využiť pri produktoch, softwaroch, aplikáciách, taktiež u menších firiem, pri projektoch alebo kampaniach.

one-page-site

one page site – simplygum.com

 

7. Rozprávanie príbehov

Tvorte pôsobivé príbehy, ukážte manipuláciu alebo zážitky s vašimi produktami.

V centre vášho záujmu by mal byť samotný produkt alebo váš zákazník.

Tobias pridáva ukážky stránok, ktoré vedia rozprávať príbehy:

Ak sa pre storytelling rozhodnete, počítajte s vyšším budgetom a zvýšeným nárokom na váš čas.
Lacnejšou alternatívou môže byť aj video marketing.
storytelling na National Geographic

storytelling National Geographic

8. Mriežkový layout

Je vhodné využiť v prípade, že prevádzkujete stránky s množstvom fotografií.

Zvoľte fixnú alebo automaticky sa prispôsobujúcu veľkosť mriežky.

Samozrejmosťou je pridanie popisu a alternatívnych popiskov k obrázkom, odkaz na Homepage alebo portfólio vašich služieb.

grid

mriežkový layout

9. Off-canvas navigácia

Navigačné prvky ako napr. ikonka menu v mobilnej verzii web stránky či e-shopu, alebo vyrolovanie kategórií napr. na Youtube.com

off-canvas

off canvas navigácia

dokážu ušetriť miesto pre cenný obsah.

10. Animácie

Využijete ako pre vaše tabuľky, grafy alebo obrázky, tak aj pre samotný obsah.

Skvelé efekty, ktoré taktiež môžete zakomponovať do vášho webdizajnu sú napr. hover efekt alebo zoom-in:

zoom-in

príklad zoomovania na BiznisWeb.sk

Príklady stránok so skvelými animáciami od Tobiasa:

 

Na záver si dovolím ešte poznamenať, že rok 2015 bude viac zameraný na UX (user experience), konkrétne na osobný používateľský zážitok, takže by sme sa mali sústrediť na osobný prístup a spokojných zákazníkov.

Zahraničné zdroje upozorňujú na stránky s dlhším scrollovaním a to nielen na Home page, ale napr. aj na stránke O nás či na produktových stránkach – skvelým príkladom je napr. http://www.apple.com/iphone-6/

 

tvorba eshopu, tvorba e-shopu, vlastný eshop

Tvorba web stránky, vytvorenie web stránky

 

 

 

 

avatar
Autor: Jana Kvasnicová V BiznisWebe pracujem od r. 2009, začínala som na supporte, kde som mala skvelú príležitosť zoznámiť sa s reálnymi potrebami a otázkami podnikateľov či majiteľov e-shopov a webstránok. A preto sa snažím hľadať také témy, ktoré vám ponúknu užitočné odpovede. Máte iný názor? Budem vďačná za váš feedback - kvasnicova@irisoft.sk :)

Diskusia k článku

Všetky dôležité informácie o podnikaní na internete, inšpiratívne príbehy a tipy od úspešných e-shopárov nájdete aj v našom ebooku Ako a v čom začať podnikať

Ako a v čom začať podnikať