Transcript Úvod do webdizajnu

Úvod do webdizajnu
Ing. Marián Pecko, PhD.
Čo je webdizajn?
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
Slovenská národná galéria
National Gallery of Art, Washington
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
Dobré umenie
Dobrý dizajn
inšpiruje
motivuje
je interpretovaný
je pochopený
je záležitosťou vkusu
je záležitosťou názoru
vyžaduje talent
vyžaduje zručnosť
má pre každého rôzny význam
má pre každého rovnaký význam
Jeho cieľom je
ZISK
Webdizajn z pohľadu
návrhu webu
Interaktívny
dizajn
Vizuálna
komunikácia
40%
20%
Obsahová
stratégia
40%
Čo chceme od
webu!?
1. Chceme dostať na web ľudí
2. Chceme od nich akciu
3. Chceme aby sa vrátili
Ako to
zabezpečíme?
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.
Nájditeľnosť
 aby ľudia našli náš web
 vyhľadávače
 umiestniť adresu na:
 vizitky
 produkty
 letáková kampaň
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
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
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.
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
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á
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
Webdizajnér
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
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-end developera
 + interaktívny dizajn, informačná architektúra, stratégia,
komunikácia a pod. pre UX dizajnéra
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
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
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
Ďakujem za pozornosť