ux/ui third course

25

Upload: iulian-corunga

Post on 06-Aug-2015

190 views

Category:

Design


1 download

TRANSCRIPT

Page 1: UX/UI Third Course
Page 2: UX/UI Third Course

UX UI

Studiereautilizatorilor

Arhitecturacontentului

InteractiuneDesign vizual

Culori

Fonturi

Forme GUI

Page 3: UX/UI Third Course

• Abordare creativa

• Gandire critica

• User flow-uri

• Scenarii

• Design concentrate pe om

• Gandire convergenta

• Gandire creativa

• Culori

• Font-uri

• Design vizual

Page 4: UX/UI Third Course

StructuraCursului

3

Photoshop Mobile Livrabile UI Review Prototipuri

Page 5: UX/UI Third Course

Photoshop Document.PSD

Page 6: UX/UI Third Course

Photoshop layers

• Header • Body -Text - Image - Products• Footer

Page 7: UX/UI Third Course

Smart objects

• Pastreaza claitatea imaginilor

• Pastreaza formele initiale

• Sursa comuna

• Schimbarea contentului

Page 8: UX/UI Third Course

Photoshop etiquette

• Files • Layers • Images • Typo • Exporting

Page 9: UX/UI Third Course

PAUZA15 min

Page 10: UX/UI Third Course

MobilePlatforms

Page 11: UX/UI Third Course

Apple iOS

Page 12: UX/UI Third Course

Google Android

Page 13: UX/UI Third Course

Microsoft Windows Mobile

Page 14: UX/UI Third Course

iOS vs Android

Page 15: UX/UI Third Course

UIDeliverables

Page 16: UX/UI Third Course

Resurse

icons

logo

font

font icons

Specs

Dimensiuni (px)

Marime font

Culoare font

Type face

Spacing

Lungime

Spatiere

Dimensiuni

Page 17: UX/UI Third Course

TypoOpen SansBold 14 #ffffff

TypoOpen SansBold 30 #888888

TypoOpen SansReg 12 #888888

100 px

380 px

40 px

400 px

Specs - Spacing

Page 18: UX/UI Third Course

Apple iOS

@x1 non-retina@x2 retina@x3 HD retina

Google Android

Mdpi HdpiXhdpiXxhdpiXxxhdpi

Dimensiuni pentru resurse

Page 19: UX/UI Third Course

PAUZA15 min

Page 20: UX/UI Third Course

• Elementele de design • Elementele de text • Elementele vizuale • Interactiunile utilizatorului

UIReview

Page 21: UX/UI Third Course

UI review checklis

• Sunt toate elementele de interfață etichetate?

• Sunt caracteristici sau funcționalitatile legate grupate și etichetate în mod corespunzător?

• Exista indicatori vizuali care separa elementele si grupele de elemente ?

• Sunt toate etichetele aliniate corespunzator cu interfetele ? Alinierea orizontala cu boxurile, checkboxurile, butoanele. Folositi masuratorile de ecram pentru a confirma aliniamentul.

• In cazul adaptarii site-ului la alta limba, se poate citit de la dreapta la stanga ?

• Este distanta pe vertical intre elementele individuale sau elementele similar ? Folositi masuratorile de ecran pentru a confirma aliniamentul

• Exista spatiu sufficient in fereastra browser-ului , etichetele permit amplasarea altor texte in toate limbile site-ului ? Spre exemplu cuvintele germane pot utiliza cu 30% mai mult spatiu.

Page 22: UX/UI Third Course

Crearea de prototipe

Page 23: UX/UI Third Course

https://youtu.be/zNoBmjg-NnQ

Page 24: UX/UI Third Course

7 motive pentru a folosi invison pentru a crea prototipuri

• Prezentare

• Control asupra designului

• Notite

• Mobile

• Sincronizare• Hover states

• Live share

Page 25: UX/UI Third Course

Multumesc, ne vedem in data de

28 MARTIE