Senior UX designerJana Melišová

Ako si neprekomplikovať

web

Kto som a co robim.. comu sa venujem

- Najradsej robim na velkych a dost zlozitych projektoch, pri ktorych musim rozmyslat nad kazdym jednym elementom na stranke.

- Zaroven vsak vydavam detske knihy a k tomu som si sama spravila eshop - samozrejme WP

780 police cars using this inteligent system

Real implementation

- slovakrail.sk

- vladny maual

- metais??

- a mnoho eshopov roznej urovne

- Preco o tom hovorim?

- Toto vsetko som robila ja.. vyvoj som vsak zacinala z cisteho papiera.. WP je iny, v nom zacinate vacsinou vyberom sablony. Funkcnost ma uz vopred danu.

- Co je vlastne UX a co teda v praci riesim..

- DIzajn musi podliehat dobre j pouzitelnosti.. musi byt co najmenej rusivy

- riesim pismo, jeho velkost a uemistnenie.. riesim samotn yobsaj a jeho rozmiestnenie.. riesim polohu dolezitych elementov (napr. buttony) a samozrejme ich farbu.. riesim logicku naslednost jednotlivych stranok a ich presny obsah

- pouzivatel stranky musi presne vediet, co po nom stranka chce a ako to ma urobit.

Veľké množstvo možností vám zamotá hlavu

Takýmto postupom sa navrhujú weby a aplikácie

a hoci možno nie ste profi dizajnér, zoberte si inšpiráciu

- V prvom rade potrebujete vedieť, co chcete. Maju to fakt zeny tazsie? :-D

- Napíšte si zoznam vecí, elementov a funkcií, ktoré vasa stranka musi mat pri prvom spusteni.

- NApiste si zoznam vecí, ktoré by mal amať v ideálnom prípade.

- NAkreslite si stranku, ako by mala vyzerat - Lo-Fidelity skicu

- NEchajte si to v hlave ulezat a stanovte si finalnu verziu.

- A az potom hladajte vhodny template a pluginy

- Preco toto vsetko?

- Vam to usetri neskutocne vela casu, ktory by ste inak stravili bludenim po tych internetoch

- navstevnici vasej stranky dostanu presne to, co im chcete ponuknut.

- K stranke sa nema dodavat navod, takze myslite na to, ze by mala byt co najnednoduchsia na ovladanie. Bebechajte sa zlakat roznymi pluginmi, ktorym neviete jednoducho bez programatora zmenit umiestnenie

- pouzivatelia vasho webu sa vratia, ak bude stranka poizivatelsky prijemna

Rýchla SKICA (low-

fidelity)

Potrebujeme k tomu fakt málo

LO-FI . skica je rýchla . lacná. ceruzka je vždy po ruke . ľahko ju zahodíte . jasný význam . minimum detailov

Použite post-it papieriky a premiestnujte ich, až kým im nenájdete správne miesto

Nakreslite si aj logiku procesu, ak to nie je úplne bežná stránka.

????

detailnejšia SKICA -

high fidelity

Toto som ucila aj studentov tu na tejto skole

ukazka hi-fi navrhu

Co potom?

- Ano, vytlacte si aspon jednu stranku a majte ju na ociach. Oplati sa.

- Vyberte sablonu, ktora sa vam nie len paci, ale sa co najviac priblizuje tomu, co chcete.

- po naistalovani sa pohrajte s CSS stylmi, aby ste sa co najviac priblizili vlastnej predstave.

- Ak vytvarate specificky alebo zlozitejsi projekt, ukazte ho niekomu este pred spustenim a pytajte si spravne spatnu vazbu. Zistite, ci vsetkemu rozumie a ci na stranke vie spravit to, co je jej podstatou.

- Ukazky z vlastneho eshopu, ako som ho zjednodusila

- povedat, akym nastraham som celila.. chcela som vela funkcii naraz.. bala som sa, z to musim vsetko naraz spravit, lebo co ked to ta sablona potom nezvladne a budem musiet za chodu menit?

- ukazka checkoutu original a mojho - poviem preco som spravila tie zmeny a preco som poskryvala 50% obsahu…

- a to este stale nie je tak, ako by to malo byt.. ale viac uz spravit neviem..

- rozdiel medzi US a europou

- budte narocny na pluginy, ktore instalujete. Hlavne ak vam davaju elementy na nespravne miesto