Ako nadizajnovať mobilnú aplikáciua neprísť pri tom o gate.
Oliver StahlUI / UX Designer @ Phirational
PRE
VÝVOJÁROV
“Ľudia neznášajú škaredéveci.”
Oliver Stahl, MobCon, teraz
“Ľudia neznášajú škaredéveci.”
Oliver Stahl, MobCon, teraz
“Ľudia neznášajú škaredéa nefunkčné veci.”
Oliver Stahl, MobCon, teraz
Timeline práce dizajnéra - začiatočníka
Spoznávanieproblému
Dizajnovanie
Timeline práce dizajnéra -profesionála
DizajnovanieSpoznávanie problému
Timeline práce vývojára
Dizajnovanie Odhalenie chýb
Fáza opúšťania sa
Spoznáva-nie problé-mu
Timeline práce vývojára
Fáza opúšťania sa
Rýchle odfláknutie dizajnu Odhalenie chýb
Timeline toho, čo chcemedosiahnuť
Spoznávanie problému Dizajnovanie
3 základné krokyk dosiahnutiu pekného & funkčného dizajnu
1. Základné princípy
1. Základné princípy2. Plán a príprava
1. Základné princípy2. Plán a príprava3. Exekúcia
1. Základné princípy
1. Základné princípy
User-centered design
Donald Norman:
“Knowing how people will use something is essential."
“Však toje úplnejasné.”
1. Základné princípy
Dbajte na základy dobréhodizajnu
1. Základné princípy
1. Inovatívny2. Užitočný3. Pekný4. Pochopiteľný5. Decentný6. Dôveryhodný7. Trvácny8. Bohatý na detaily9. Šetrnný k životnému prostrediu10. Mať tak málo dizajnu, ako je možné
Dieter Rams Dobrý dizajn by mal byť:
1. Základné princípy
1. Inovatívny2. Užitočný3. Pekný4. Pochopiteľný5. Decentný6. Dôveryhodný7. Trvácny8. Bohatý na detaily9. Šetrnný k životnému prostrediu10. Mať tak málo dizajnu, ako je možné
Dieter Rams Dobrý dizajn začinajúceho dizajnéra by mal byť:
Dieter Rams:
“Less but better."
2. Plán a príprava
2. Plán a príprava
1. Ideamaking + sketching2. Špecifikácia3. Wireframing4. Konzultácia
Ako pripraviť dobrý základ pre dizajn:
2. Plán a príprava
Ideamaking a sketching je fázadizajnu, pri ktorej vznikajú hrubé rysy interfacu mobilnej aplikáciea vzniká celkom jasná predstavao jej fungovaní
Ideamaking + Sketching
2. Plán a príprava
Špecifikácia je detailný opis funk-cionality aplikácie a slúži ako oporný stĺp pri robení budúcichrozhodnutí alebo zmien
Špecifikácia
2. Plán a príprava
Wireframing je fáza projektu, pri ktorej sa vizuálne prvky umiestniado layoutov, ktoré sú následnezoradené podľa postupnosti(flowchart)
Wireframing
2. Plán a príprava
Verifikácia dizajnových nápadov je pre neskúseného dizajnérato najťažšie, ale zároveň to dizajnposunie ďalej, ako keby na ňom pracoval sám
Konzultácia
3. Exekúcia
Sketch Mirror
PS Play Skala View
3. Exekúcia
DIZAJNUJTE NA MOBILE!
3. Exekúcia
1. Buďte konzistentní2. Nevymýšľajte koleso3. Používajte guidlines4. Nebojte sa whitespacu5. Udržujte všetko vo vektoroch6. Používajte pekné fonty
Moje UI pravidlá:
3. Exekúcia
Moje UI pravidlá:
1. Buďte konzistentní2. Nevymýšľajte koleso3. Používajte guidlines4. Nebojte sa whitespacu5. Udržujte všetko vo vektoroch6. Používajte pekné fonty
3. Exekúcia
Moje UI pravidlá:
1. Buďte konzistentní2. Nevymýšľajte koleso3. Používajte guidlines4. Nebojte sa whitespacu5. Udržujte všetko vo vektoroch6. Používajte pekné fonty
3. Exekúcia
Moje UI pravidlá:
1. Buďte konzistentní2. Nevymýšľajte koleso3. Používajte guidlines4. Nebojte sa whitespacu5. Udržujte všetko vo vektoroch6. Používajte pekné fonty
3. Exekúcia
Moje UI pravidlá:
1. Buďte konzistentní2. Nevymýšľajte koleso3. Používajte guidlines4. Nebojte sa whitespacu5. Udržujte všetko vo vektoroch6. Používajte pekné fonty
Toto je headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Button
Toto je headlineLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
TUNAK KLIKAJ
3. Exekúcia
Moje UI pravidlá:
1. Buďte konzistentní2. Nevymýšľajte koleso3. Používajte guidlines4. Nebojte sa whitespacu5. Udržujte všetko vo vektoroch6. Používajte pekné fonty
3. Exekúcia
Moje UI pravidlá:
1. Buďte konzistentní2. Nevymýšľajte koleso3. Používajte guidlines4. Nebojte sa whitespacu5. Udržujte všetko vo vektoroch6. Používajte pekné fonty
Questions & AnswersFB: fb.co/oli.stahl