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