Tipuri de design:- Design grafic- Industrial- Interacțiune

Interfața utilizatorului – designul trb să fie cît mai user friendly etc. :/Designul format din linie, punct, figuri geometrice, direcția, mărimea, textura, culoarea.HSB – mult mai ușor de a controla culoarea, atenție mai multă la studiul ei ;).Principiile designului:- Echilibrul (simetric, asimetric, vizual)- Proximitatea (relație între elemente, oferă punct de focalizare)- Alinierea (conexiunea între elemente)- Repetarea (oferă calm utilizatorului)- Contrast (juxtapunerea elementelor opuse – evidențierea elementelor cheie ale designului)

diferența dintre elemente închise și deschise- Spațiul / white space (spațiul între elemente este important ca elementele în sine)- Greutatea vizuală (greutatea vizuală este relativă, ele atrag atenția mai rapid a utilizatorului)- Adâncimea (focusarea pe un anumit obiect, cu efectul de blur)

Typography/*90% din design.*/ Tipografia arta de aranjare și afișare a textului. Formată din caractere care împreună creează fontul.Anatomia: base line, mid line, descender, ascender, x-height (înălțimea dintre base line și mid line).SERIF – fonturi cu codiță (TIMES NEW ROMAN)SANS-SERIF – fonturi fără codiță (CALIBRIIerarhia – pentru a asigura o relație bună între mărimile folosite într-un material. Relația default de mărimi oferă o ierarhie bună. Astfel textul oferă o lizibilitate mai bună, pentru o interfață mai prietenoasă pentru toate felurile de utilizatori.Evidențierea textului Combinarea fonturilor – concordanță, contrast, conflict. Tips: SCOPUL UTILIZĂRII? CÎTE FONTURI? CARE E NATURA CONȚINUTULUI? CUM POT OBȚINE O CONCORDANȚĂ MAI BUNĂ?Site-uri utile: google.com/fonts , fontpair.coCulorileCooleradobe.comCulorile au o însemnătate culturală, cât și vizuală. De fapt mai mult vizuală :D. Colorile pot fi țipătoare sau liniștite. Schița trebuie să fie alb-negru!, ca culoarea să fie un element final. Uneori culoarea înseamnă Psihologia culorilor – adoptă o culoare; folosește culoarea pentru ceva important; utilizează în toate spațiile aceiași culoare.Repetiția și figurile (pattern)Ochiul cade anume pe grup. O figură anumită poate fi evidențiată dacă este îndepărtată de grup. Astfel atenția utilizatorului poate fi atrasă de un anumit obiect, dorit de designer.

Functional Layout Design

Frumusețea este exprimată prin artă și matematică. Astfel a apărut secțiunea de aur. Phi = 1.618033…

Secțiunea de aur este întâlnită peste tot în natură, matematică, arhitectură, pictură. Raportul a/b = (a+b)/a = 1.618033. Sovpadenie? Ia tac ne dumaiu…

Regula celor 3 secțiuni. Punctul de focalizare este la intersecția celor 3 linii de pe fiecare fotografie.

Balanța. Websiteurile bune aranjează elementele grafice în așa mod ca totul să fie balansat. Acest lucru nu înseamnă că trebuie să fie oglindită partea stânga cu cea dreaptă dar să aibă aceiași greutate vizuală.

White space. Spațiul gol care rămâne în jurul elementelor. Spațiul alb calmează și direcționează ochiul spre conținut, precum și mărește valoarea conținutului. !!!Amplasarea textului sau graficii oriunde pe pagină este o greșeală.

Ierarhia – unele elemente pot fi mai importante ca celelalte. Un design bun accentuează aceste elemente. Un text de mărime mai mare atrage atenția în primul rând la o imagine sau o bucată particulară din text.

Culorile. Un design bun nu are nevoie de multe culori. Nu este nevoie mai de 2-3 culori de bază pentru un design bun. Culorile trebuie să se combine etc.

Adâncimea. Chiar dacă pagina web este un un singur strat bidimensional, se poate crea a treia dimensiune pentru un efect mai specific. Acest lucru poate fi obținut prin drop shadow, sau prin blur.

Simplitatea. Fără elemente bătătoare la ochi sau prea multe. Ele numai distrag atenția, și nu fac un efect atrăgător.

The fold. Dacă utilizatorul este interesat în prima parte, utilizatorul va scrollui mai jos pentru a vedea mai departe. Nu este necesar de a băga toată informația pe prima parte care o vede utilizatorul.

Imaginile. Ele redirecționează ideal utilizatorul. Fețele oamenilor atrag atenția cel mai bine, creează o empatie dacă sunt utilizate cu bine. Cu cât mai multă emoție – cu atât utilizatorul va fi atras mai bine. Potrivit unui studiu, omul are tendința să privească acolo unde este ghidat de privirea altcuiva. Omul atrage atenția mai mare la copiii mici sau femei frumoase ;).

Titlul. Ochii sunt atrași de bucăți de text contrastante din restul contextului. Titlul trebuie să atragă atenția, dar să fie la temă.

Call-to-action (CTA). Formula: verb + beneficiu + urgență sau loc . Dacă formula este mai mică, ea are un succes mai mare. Trebuie să persiste legătura butonului cu acțiunea care o face.

Instrucțiuni. Instrucțiuni scurte, clare, și fără explicații ca pentru proști ;)

Butoane primare și secundare. Butoanele secundare nu trebuie să fie așa de bătătoare la ochi ca cele primare. /*roșul creează alerta*/

Labels. Spații cu text, care .. . Ele trebuie să fie cele mai simple, și ușoare versiuni existente pentru a ușura viața utilizatorului.

Tools and workflow

După un anumit survay, aplicația Sketch (by BOHEMIAM CODING – doar pe MAC :( ) este cea mai des utilizată pentru design. După urmează Photoshop, HTML/CSS, Illustrator, Other, None, Indesign, Fireworks.

Sketchurile pot fi făcute în orice mediu, cu orice lasă urme pe o suprafață :D.

Wireframeurile (scheme bloc) sunt mai aproape de produsul final. Ele prezintă planul pentru a construi o aplicație. Există aplicații deja existente care ne ajută să facem aceste wireframeuri (UXPin etc.).

Paper cutouts - crează o interacțiune interesantă și eficientă. Este însă ineficientă în timp.

Mockups. Designul static al aplicației, sau web-siteului.

”Wireframes are skeletons, mockups are skins.”

Prototipul. Cea mai aproape de varianta finală, unde se găsește experiența aproape de cea finală pentru user.

Prototype tools. IMG în mob :)

După urmează codingul în sine – Prototype.

Atomic design. Creșterea în design lentă. Începem cu începutul :D, chiar de la culori, font și crescând la imagini. Astfel se formează scheletul, care poate fi interschimbat pentru fiecare proiect în parte.

Web User Interface

MENIU

CARUSEL

FORMS

PROMO

IMAGES

PRICES

CONTACTS

TABS

Bootstrap - ?

Concluzie: Nu este UX vs UI, da este UX & UI. Doar împreună ele pot aduce careva rezultate.

Tips and techniques : /*img*/