ux/ui third course
TRANSCRIPT
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