Úvod do webdizajnu

1. Úvod do webdizajnu Ing. Marián Pecko, PhD.

2. Čo je webdizajn?

3. Nie je remeslo • pokiaľ chceme remeselníka, tak hľadáme toho najnižšieho HTML kódera, ktorý to remeselne dobre spracuje Nie je umenie

4. Slovenská národná galéria

5. National Gallery of Art, Washington

6. Nie je remeslo • pokiaľ chceme remeselníka, tak hľadáme toho najnižšieho HTML kódera, ktorý to remeselne dobre spracuje Nie je umenie

7. Jeho cieľom je zisk

8. Webdizajn z pohľadu návrhu webu

9. Interaktívny dizajn Vizuálna komunikácia 40% 20% Obsahová stratégia 40%

10. Čo chceme od webu!?

11. Chceme dostať na web ľudí • Chceme od nich akciu • Chceme aby sa vrátili

12. Ako to zabezpečíme?

13. Maslowova pyramída webdizajnu • vychádza z Maslowovej pyramídy potrieb (Abraham Maslow, 1943) • psychologická teória • znázorňuje spôsob, ktorým za sebou hierarchicky nasledujú ľudské potreby a v ako poradí by sa mali naplňovať. Pokiaľ nie sú naplnené hodnoty zo spodných priečok rebríčka, nemá zmysel naplňovať tie z vyšších.

14. emócie presvedčivosť dôveryhodnosť použiteľnosť prístupnosť dostupnosť nájditeľnosť

15. Nájditeľnosť • aby ľudia našli náš web • vyhľadávače • umiestniť adresu na: • vizitky • produkty • letáková kampaň

16. Dostupnosť • všetky technické záležitosti • dostupný hosting • nevyhadzuje chybu 404 (stránka nenájdená) • web je bez chýb • web je rýchly

17. Prístupnosť • aby bol web použiteľný aj pre ľudí s nejakou poruchou alebo postihnutím • špecifickým druhom „postihnutých“ sú vyhľadávače • na druhej strane sú ľudia s mobilnými zariadeniami, ktoré majú napr. menšie rozlíšenie obrazovky Záleží na: • technickej stránke – sémantický HTML kód pre čítačky obrazoviek • vizuálnej stránke – dostatočne kontrastné písmo • logickom rozčlenení – omrvinková navigácia

18. Použiteľnosť • nezáleží len na tom či je návštevník schopný sa pohybovať po stránkach a zisťovať informácie, ale i na tom, či mu nie je táto činnosť nepríjemná a neprimerane náročná • či stránka funguje intuitívne • či sa jednoducho používa Po tento bod stále hovoríme o grafickom stvárnení stránky, no ešte stále nie sme pri peniazoch. Vo vyšších bodoch ide skôr o stratégiu, akým spôsobom prinútiť návštevníka aby niečo urobil.

19. Dôveryhodnosť • určuje, či je návštevník ochotný uveriť webu natoľko, že si z neho čokoľvek objedná • či uverí informáciám, ktoré mu web poskytuje • texty od kvalitného copywritera • komentáre od zákazníkov k produktom, ktoré si kúpili • plné fakturačné údaje • referencie od známych značiek • poďakovania svojich zákazníkov

20. Presvedčivosť • úlohou webu je presvedčiť človeka, že daný web udáva o hľadanej problematike najrelevantnejšie informácie, alebo že ponúka najlepšie podmienky nákupu pre určitý produkt • je to o psychológii, psychológii rozhodovania, o spôsobe ako ľudia premýšľajú, ako sa chovajú Príklad: prišiel som na web, dostal som sa naň, dokázal som ho používať, dokázal som si dať niečo do košíka, no nič ma nenúti vyplniť tam kreditnú kartu i keď je firma dôveryhodná Metóda cukru a biča • ponúknuť niečo navyše, ale niečo za to chceme • napr. ponúkneme zľavu, ktorá je časovo obmedzená

21. Emócie • dôležitou súčasťou interakcie medzi používateľom a webovou stránku je vzbudzovanie pocitov • rozhodujúci faktor či používateľ bude chcieť na webe vidieť viac, či sa vráti, či podá referencie ďalej Gamifikácia • uplatňovanie techník herných dizajnov, herného myslenia a herných princípov do neherného prostredia, napr. webové stránky • princíp odmeňovania používateľov za rôzne akcie, ktoré vykonávajú na webe • napr. na fórach – za určitý počet príspevkov získavate rôzne výhody oproti ostatným používateľom

22. Webdizajnér

23. Webdizajnér • sa zaoberá jednou alebo kombináciou nasledujúcich činností • návrh webu (výstupom je dokument) – UX dizajnér, interakčný dizajnér, informačný architekt, ... • grafika (výstupom je PSD) – webový grafik • HTML (výstupom je webová stránka) – webový kóder • HTML + JavaScript (výstupom je webová stránka) – front-end developer

24. Webdizajnér je desaťbojár • UXák + webový grafik + webový kóder + prehľad o SEO, copywritingu, marketingu, brandingu, gamifikácii, stratégii, business problematike, atď. • najjednoduchšie je začať ako kóder alebo webový grafik • + programovanie pre front-enddevelopera • + interaktívny dizajn, informačná architektúra, stratégia, komunikácia a pod. pre UX dizajnéra

25. UX (User experience) dizajnér • zisťuje požiadavky klienta, jeho zákazníkov a prevádza to do obsahovej makety webu • tvorí dokumentáciu popisujúcu web a prototypy webu Interakčný dizajn • zaoberá sa návrhom interakcií • svojim ovládaním používateľ kladie otázky a dostáva na ne odpoveď (dialóg, medzi používateľom a bankomatom, mobilným zariadením, webovou stránkou,...) Informačný architekt • aby sa mali o čom používatelia so zariadením baviť • hľadá spôsob, ako informácie usporiadať do štruktúry, ktorá bude pre používateľa logická, bude v nej schopný sa zorientovať a používať ju

26. Webový grafik • vytvára náhľady webových stránok v grafickom programe (štandard je Adobe Photoshop alebo Fireworks) • UXák mu dodá prototyp a on ich graficky interpretuje

27. Kóder / front-end developer • dostane webovú stránku ako screen a pretvorí ju do HTML + CSS tak, aby sa web zobrazoval pekne v jednotlivých prehliadačoch, zariadeniach, operačných systémoch

28. Ďakujem za pozornosť