ux/ui third course

UX UI

Studiereautilizatorilor

Arhitecturacontentului

InteractiuneDesign vizual

Culori

Fonturi

Forme GUI

• Abordare creativa

• Gandire critica

• User flow-uri

• Scenarii

• Design concentrate pe om

• Gandire convergenta

• Gandire creativa

• Culori

• Font-uri

• Design vizual

StructuraCursului

3

Photoshop Mobile Livrabile UI Review Prototipuri

Photoshop Document.PSD

Photoshop layers

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

Smart objects

• Pastreaza claitatea imaginilor

• Pastreaza formele initiale

• Sursa comuna

• Schimbarea contentului

Photoshop etiquette

• Files • Layers • Images • Typo • Exporting

PAUZA15 min

MobilePlatforms

Apple iOS

Google Android

Microsoft Windows Mobile

iOS vs Android

UIDeliverables

Resurse

icons

logo

font

font icons

Specs

Dimensiuni (px)

Marime font

Culoare font

Type face

Spacing

Lungime

Spatiere

Dimensiuni

TypoOpen SansBold 14 #ffffff

TypoOpen SansBold 30 #888888

TypoOpen SansReg 12 #888888

100 px

380 px

40 px

400 px

Specs - Spacing

Apple iOS

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

Google Android

Mdpi HdpiXhdpiXxhdpiXxxhdpi

Dimensiuni pentru resurse

PAUZA15 min

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

UIReview

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.

Crearea de prototipe

https://youtu.be/zNoBmjg-NnQ

7 motive pentru a folosi invison pentru a crea prototipuri

• Prezentare

• Control asupra designului

• Notite

• Mobile

• Sincronizare• Hover states

• Live share

Multumesc, ne vedem in data de

28 MARTIE