10 foi grozave pentru design UX/UI

Cheat Sheets UX/UI de salvat

Toată lumea are nevoie de puțin ajutor uneori, chiar și profesioniștii. Este greu să-ți amintești fiecare mic detaliu. Din când în când ajungi să cauți elemente de bază pe care le-ai uitat momentan. Ce pierdere de timp poate fi asta. Așadar, am căutat și am colectat câteva fișe populare de design pentru a vă ajuta pe parcursul zilei și pentru a vă ajuta să aveți cele mai bune strategii UX.

Dacă aceste strategii sunt utile, nu uitați să consultați și aceste sfaturi atunci când îmbunătățiți designul UX al site-ului dvs. web.

1. Cheat Sheet pentru iOS 7 Design

Lansarea iOS 7 a adus multe schimbări în interfață, iar designerii vor trebui să își adapteze limbajul vizual pentru a se potrivi noului design plat al iOS. Sistemele de grilă, dimensiunile, tipografia și iconografia au fost toate actualizate de Apple. Ivo Mynttinen a fost suficient de amabil pentru a crea o foaie de cheat (actualizată) pentru dezvoltatori și designeri, care acoperă toate informațiile pe care trebuie să le cunoașteți pentru iOS 7, inclusiv:

• • Rezoluții pe toate dispozitivele
  • Afișează informații pe toate dispozitivele
  • Dimensiunile pictogramei aplicației (inclusiv informații despre modificările pentru designul colțului rotunjit și de unde să obțineți un șablon, deoarece Apple încă nu a lansat unul pentru iOS7)
  • Detalii despre modificările în interfața cu utilizatorul
  • O listă scurtă de alte resurse pe care le veți găsi de ajutor în timp ce proiectați o aplicație

Acest lucru vă va economisi timp și efort acum că nu va trebui să mergeți să căutați fiecare mic detaliu. Folosind aceasta, nu va trebui să compilați propria listă. În plus, este una dintre cele mai extinse foi pe această temă și este minunat organizată.

2. Android Design Cheat Sheet

Desigur, includem și o foaie similară de design Android pentru tine. Acesta este un infografic superb conceput de Meghan Dever, un designer mobil la Double Encore, Inc. Ghidul de design pentru Android are aceste informații disponibile, dar este mult mai ușor să le găsiți și să le citiți în această foaie de cheat dulce.

A fost creat pentru uz intern în companie, dar au crezut că este o economie atât de utilă de timp încât au vrut să-l împărtășească întregii comunități. Aceasta vine cu:

• • Câmpuri de text Android, bare de căutare, rotitori, selectoare, comutatoare și cazurile de utilizare ale acestora
  • Elemente cu 9 corecții, cu adăugarea de capabilități de aranjare a limitelor optice
  • Dimensiunile dispozitivelor Android și dimensiunile elementelor asociate acestora
  • Umplutura adecvată pentru elementele UI
  • Specificații pentru bara de acțiuni, contextuale și pictograme de lansare
  • Conversii Dp în px

3. Psihologia Color Infografic

Ok, deci există diagrame mai mult decât suficiente care acoperă psihologia culorilor, dar acesta este preferatul meu, deoarece este mult mai extins decât celelalte. În loc să acopere doar elementele de bază (roșu, galben, albastru, violet, verde), vă oferă o descriere a 50 de culori diferite. De asemenea, nu acoperă doar emoțiile și ideile pozitive, ci și pe cele negative cu care pot fi asociate diverse culori.

4. Cheat Sheet HTML5

Actualizare 9/09/16: Această foaie nu mai este disponibilă.

Aceasta este o foaie de referință grozavă în cazul în care tocmai învățați HTML5 sau tocmai s-a întâmplat să aveți un creier bătut și ați uitat o etichetă. Aceasta este o listă extinsă și vă oferă într-adevăr multe informații utile pe lângă etichete. Intră în detalii suplimentare cu privire la locul în care pot fi utilizate etichetele și ce browsere acceptă, chiar și pe dispozitive. Vine cu:

• • Etichete noi care au apărut pentru HTML5
  • Etichete existente din HTML4 care sunt încă disponibile pentru HTML5
  • Etichete vechi care sunt învechite în HTML5
  • Atributele și ceea ce este vechi și nou și pentru ei
  • O diagramă de pregătire a browserului

5. Ninja UX Cheat Sheet

Pentru etapa de cercetare a procesului de UX, puteți arunca o privire la această fișă de trucuri grozavă realizată de Hilary Little pentru prezentarea ei CodeFest. Acestea sunt câteva dintre cele mai bune practici de care trebuie să țineți cont atunci când testați utilizatorii.

Acesta este un alt excelent reamintire a elementelor de bază pentru profesioniști și perfect pentru oricine nou și are nevoie de câteva sfaturi și sfaturi bune. De asemenea, puteți vedea prezentarea ei din discursul principal aici. Acest lucru va completa destul de bine foaia de cheat și va oferi primului designer UX sau antreprenor o direcție grozavă.

6. Cheat Sheet Web Form Design

Smashing Magazine ne-a adus această frumusețe, astfel încât să o putem folosi și împărtăși. Este o foaie descriptivă pentru a crea forme grozave. Designerii acestui cearșaf pentru pătuț sunt bine versați în proiectarea și testarea formularelor.

Ei au decis să găsească cele mai frecvente probleme și să descrie cum le rezolvă, apoi să pună totul în această foaie grozavă pentru designer. Au vrut să creeze ceva care să îmbunătățească formele tuturor. Conține un șablon Omnigraffle, precum și exemple Photoshop (PSD) și PDF pe care să le descărcați. Vine cu sfaturi excelente, lucruri de făcut și ce nu, și câteva exemple de aspect pe care le puteți folosi.

7. Cheat Sheet jQuery

Aceasta este o listă minunată organizată de elemente jQuery pe care le puteți folosi ca referință atunci când nu vă amintiți ceva. A fost realizat de Oscar Otero, un web designer și dezvoltator care știe cât de utile pot fi aceste lucruri. Vine cu:

• Selectoare
• Atribute/CSS
• Manipulare
• Traversând
• Evenimente
• Efecte
• Ajax
• Miez

Această foaie de design special vine și cu o funcție de căutare minunată. Puteți selecta versiunea de jQuery pe care o căutați și puteți căuta opțiuni specifice. Acesta este un instrument excelent de avut la îndemână ca referință rapidă și ușoară.

8. Terminologie UX

În calitate de designer UX, interacționați cu mulți oameni din cadrul unei organizații și nu toată lumea cunoaște limbajul. Nu ar fi grozav dacă nu ar trebui să-ți explici în mod constant? Acesta este pentru a le oferi colegilor tăi pentru a-i ajuta să înțeleagă despre ce vorbești. V-a fost adus de Bride Trozelli și include:

• Practică UX
• Roluri UX
• Activități UX
• Termenii interfeței cu utilizatorul
• Livrabile UX

9. Cheat Sheet Icons JQuery

Aceasta este o listă rapidă incredibilă de pictograme pe care le puteți face cu jQuery. Mulți dintre voi știți deja o grămadă dintre acestea, dar haideți!

Nu toți putem să le memorăm pe fiecare dintre ele. Acest lucru va fi util pentru aceia dintre noi cărora le este greu să-și amintească informațiile din capul nostru. Este grozav și pentru începători.

Acest lucru v-a fost adus de Pete Freitag de la Foundeo Inc. Personal, acesta este preferatul meu dintre toate fișele de design.

10. Cheat Sheets WordPress

Cititorul Mike Wallagher de la Startbloggingonline.com a distribuit aceste Cheat Sheets WordPress pe care le-a dezvoltat. Acestea sunt grozave atât pentru începători, cât și pentru utilizatorii avansați, deoarece oferă ambele versiuni. Verifică-i! Și dacă aveți nevoie de asistență tehnică, obțineți ajutor WordPress de la WP Buffs!

Aveți vreo fișă de design cool pe care doriți să le împărtășiți? Anunțați-ne în comentariile de mai jos.