Tutoriale de schiță

5 lucruri de făcut înainte de a începe următorul dvs. fișier de design în schiță sau, Pregătirea design-ului dvs. „mise en place”

Noul nostru Ghid de stil este disponibil folosind toate sfaturile prevăzute în acest articol!

Absolvirea școlii de bucătari și intrarea în lumea reală nu este la fel de strălucitoare pe cât ai crede (aș fi adunat). Nu vă înțelegeți doar gradul, aruncați pălăria cu un bucătar și nu deschideți un restaurant într-o parte a trendului orașului.

Nu ar fi frumos!

Nu, majoritatea bucătariilor se alătură lumii culinare pregătind punerea în funcțiune. Nu vorbiți franceză? Nici eu! Mise en place înseamnă „totul la locul său” și se referă la prepararea și organizarea ingredientelor înainte de servirea cinei.

Știi cum Rachael Ray are întotdeauna acele boluri minuscule de ingrediente pre-porționate atunci când face una dintre cele 30 de minute-Mâncăruri, care-ți jur, de fapt, ia-cel puțin o oră? Ei bine, așa cum se dovedește, nu este prea departe de ceea ce fac bucătăriile profesionale înainte de fiecare serviciu de cină. Uita-te la asta:

Această organizație mă face să mă simt cu toții călduroși și confuzi.

Tinerii bucătari verzi ajung la orele de bucătărie înainte de serviciu pentru a toca fiecare legumă, a tăia fiecare file și a pregăti toate sosurile (printre multe alte îndatoriri). În acest fel, acestea permit restaurantului să pregătească mâncăruri rafinate cu mai multe cursuri pentru a-ți hrăni fața grasă și te vor scoate pe ușă în mai puțin de două ore. Dacă ar aștepta până când primesc o comandă pentru a pregăti toate ingredientele, serviciul ar dura ore, mâncărurile ar fi inconsecvente, iar bucătăria pur și simplu nu va putea să se întrețină.

Designerii de produse ar trebui să-și pregătească întotdeauna punerea în funcțiune înainte de a se scufunda în „serviciu de cină”.

Înainte de a începe să proiectați zeci de ecrane și fluxuri de lucru, este important să vă pregătiți pentru un succes de design durabil. Iată cinci sfaturi pentru pregătirea punerii în aplicare a designului dumneavoastră:

1. Configurați tipografia și stilurile de text

Primul acesta este evident, dar poate fi o adevărată corvoadă. Nu există un mod mai direct în care utilizatorii să interacționeze și să înțeleagă produsul dvs. decât prin cuvinte, așa că este important să obținem acest drept.

Îmi place să îmi ofer cea mai largă gamă posibilă de dimensiuni și stiluri de text, așa că foaia mea de tipografie arată așa (întotdeauna creez și o versiune întunecată!):

Este foarte rapid să schimb caracterele dacă mă răzgândesc pe drum: 1) Selectați toate, 2) Schimbați fontul, 3) Stiluri de sincronizare. Terminat!

Fiecare stil are patru subtipuri:

  • Implicit (de regulă transparență de 80–100%)
  • Secundar (50–70% transparență)
  • Dezactivate (20–40%)
  • Accent (de obicei culoarea mărcii mele)

De ce folosesc transparența în loc de valori hexadecale?

Este un mic truc bun pentru a vă asigura că textul dvs. arată excelent în orice culoare de fundal. În imaginea de mai jos, transparența (a doua linie) arată mult mai bine decât griul (prima linie), deoarece a luat nuanța culorii de sub ea. Nu există trucuri; a doua linie de text este exact aceeași în fiecare scenariu de culoare. Doar că transparența funcționează pentru dvs. le face să pară stiluri de text diferite. Toate pentru prețul unuia. Cât de convenabil!

Nu voi intra în mecanica alegerii dimensiunilor bune de fonturi în această postare, dar verifică tipografia în zece minute pentru un curs rapid de avarie.

În sfârșit, este imperativ să creezi un stil de text de schiță pentru fiecare stil pe care îl definești. Dacă decideți drumul pe care doriți ca culoarea dvs. „dezactivată” să fie de 25% în loc de 30%, tot ce trebuie să faceți este să o schimbați într-un singur loc și să se încadreze în documentul dvs.

ProTip: Folosirea tastelor în numele stilului dvs. text (a se vedea mai sus) va crea mici submeniuri în stilul dvs. dropdown:

Stilurile mele „Întunecate” sunt configurate și ele, dar sunt albe, așa că nu se afișează bine în acest meniu (se spune „Întunecat” de mai sus unde se spune „Lumină” în al doilea meniu)

2. Configurați culorile și stilurile de obiecte

Există CINCI culori de bază pe care ar trebui să le dai seama înainte de orice altceva:

Culori de bază

  • Brand: Aceasta este culoarea mărcii dvs., destul de simplă.
  • Negru: setați un negru de bază pe care îl veți folosi pentru toate tipurile de design. Îmi place să evit negrul pur și, în schimb, să creez un negru nuanțat cu culoarea brandului meu (sau unul complementar). Vezi imaginea de mai jos.
Luați-vă culoarea mărcii și puneți peste un pătrat negru de 80–90%. Culoarea scade ca negrul de bază. Este subtil, dar va face diferența! Cel din dreapta jos este ceea ce aș folosi.

Culori de stat

  • Eroare: unele variante de roșu. Această stare permite utilizatorilor să știe când ceva s-a întâmplat. Roșul pur este puțin. Nuanțează-o cu galben sau albastru pentru a ușura ochii.
  • Avertisment: unele variante de galben. Această stare anunță utilizatorii când ceva nu s-a simțit încă, dar poate duce la probleme. Nu face acest galben prea electric; a mea este de obicei ceva mai portocalie, așa că este lizibilă pe alb.
  • Succes: unele variante de verde. Această stare permite utilizatorilor să știe că totul este groovy. Prefer culorile aplicației să fie puțin mai reci, așa că îmi voi face verde puțin mai blând.
De la stânga la dreapta: Brand, Negru, Eroare, Avertisment, Succes.

De ce doar cinci culori? Simt cu tărie că culorile trebuie utilizate foarte deliberat într-un produs. Nu faceți ceva purpuriu doar pentru a-l face purpuriu. Modelele mele sunt construite în alb și negru FĂRĂ NU încerc să atrag atenția asupra ceva.

Culori suplimentare sunt potrivite pentru lucrurile precum graficele și graficele, dar ar trebui să utilizeze culori diferite decât culorile stării de bază.

Stiluri obiect

Acestea sunt ceva mai dificil de amenajat în față, dar sunt încă minunate pentru a economisi timp. Stilurile obiect sunt de la fundaluri de carduri până la listarea casetelor de delimitare a articolelor. Iată o foaie cu câteva dintre stilurile mele de obiect:

Folosesc aceste stiluri ori de câte ori creez obiecte și, dacă vreau să actualizez stilul de bază, vin doar la această foaie și o sincronizez în toate paginile mele. Este un economisitor de timp extraordinar, mai ales după câteva luni de proiectare a ecranelor pentru un client într-un fișier cu 97 de ecrane. Mama mea!

3. Creați pagini și planșe de artă

Acesta este destul de ușor, dar vă va ajuta să vă mențineți sănătatea. Decideți în avans cum doriți să vă organizați designurile:

  • După caracteristică: într-o aplicație pentru alimente, este posibil să aveți o pagină configurată pentru toate plăcile de artă „rețetă” și o pagină separată pentru toate plăcile de artă „profil”.
  • După rolul utilizatorului: în aplicația „Medium”, este posibil să aveți o pagină configurată pentru toate plăcile de artă „cititor” și o pagină separată configurată pentru toate plăcile de artă „expeditor”
  • După fluxul de lucru: în aplicația Uber, este posibil să aveți o pagină configurată cu toate plăcile de artă din fluxul de lucru „Comandarea unei mașini” și o alta pentru „Adăugarea unui card de credit”.

Oricare dintre cele de mai sus este în regulă, dar angajează-te la ceva timpuriu și rămâne cu el.

ProTip: Dacă utilizați InVision, este posibil să folosiți Pagini pentru a vă organiza Consiliile de Artă. Am contactat echipa de asistență despre cum se sincronizează plăci de artă și pagini cu InVision, întrebându-le dacă ar crea automat secțiuni pentru mine pe baza titlurilor mele. Adică, fiecare pagină va fi o secțiune și toate tablourile de artă din pagina respectivă vor fi în acea secțiune din InVision. Ei au spus că nu este în prezent acceptat, dar că au primit o mulțime de solicitări pentru aceasta, așa că toată lumea ar trebui să le trimită un tweet care să ceară această funcție. Să adăugăm această funcție [evidentă]!

Iată paginile din kitul UX Power Tools la care lucrăm, astfel încât să puteți vedea cum am împărțit lucrurile. ProTip: Dacă adăugați o cratimă la începutul paginii sau al numelui de bord de artă, acestea nu se vor sincroniza cu InVision!

4. Configurați-vă sistemul și aspectul grilelor

Sistemul de grilă este atât de important încât am mai vorbit despre asta. Dar va trebui doar să mă asculți vorbind despre asta

Toate aceste sfaturi vizează simplificarea lucrurilor pentru dvs. și reducerea cantității de decizii pe care trebuie să le luați în timp ce proiectați.

Configurarea sistemului dvs. de grilă va face aspectul și poziționarea unui act foarte pasiv; nici măcar nu va trebui să vă gândiți la cât de departe trebuie distanțate lucrurile, deoarece știți că crește sistemul dvs. de rețea și chiar ați ajustat valorile implicite ale Sketch pentru a le respecta.

Grila cu 12 coloane este încă cea mai populară, deoarece are cei mai mulți divizori de coloane: 1, 2, 3, 4, 6 și 12.

Iată o privire asupra setărilor grilei de 8px pe baza ecranului de mai sus:

Aceasta este o aplicație cu lățime completă, cu o zonă plină de conținut. Pe măsură ce lățimea browserului crește, grila de 12 coloane va rămâne în centrul zonei de conținut.

Ceva de remarcat atunci când configurați aspectul. În funcție de aspectul aplicației dvs. (de la margine la plutire sau plutitor), poate fi necesar să aveți ghiduri de dispunere separate pe fiecare pagină.

Acesta este un aspect cu lățime fixă ​​(plutitor) cu antet de lățime completă.

Bonus suplimentar: prietenii tăi dezvoltatori vor să te iubească pentru configurarea și aderarea la această grilă, deoarece fiecare cadru de acolo se află în partea de sus a unui sistem de grile ca acesta.

O notă finală: eu nu am setat personal rânduri în Sketch, deoarece variază atât de mult de la pagină la pagină. Totuși, nu ezitați să faceți acest lucru dacă doriți!

5. Importați și simbolizați activele de branding

Aproape gata! Respiratie adanca.

Ultimul lucru de făcut este să importăm orice / toate activele de marcă. Acest lucru poate fi la fel de simplu ca un logo sau la fel de mare ca un set de pictograme pentru aplicații de marcă. Important este că convertiți fiecare din aceste active în simboluri.

Păstrați-l simplu, dar păstrați-le simboluri!

De ce?

Îmbrăcați-vă bine pantalonii de imaginație și să ne prefacem că ați proiectat 75 de ecrane cu logo-ul și sloganul dvs. în antetul de navigare. Marketingul a decis că vor să renunțe la slogan, deoarece se pare că „Do Do It It” a fost deja luat, iar unele companii mari amenință să dea în judecată. Cum aș fi putut să ratez asta ?!

Ei bine, Danny Designer s-a ridicat și nu i-a simbolizat sigla. Prin urmare, Danny the Designer trebuie să meargă să-l actualizeze pe 75 de ecrane individuale, deoarece sunt utilizate în materiale de marketing și au nevoie de acel slogan eliminat.

Nu va fi ca Danny.

Într-o lovitură de geniu, Sandy Sketcher a decis să simbolizeze logo-ul din start. Ea a actualizat simbolul de bază în ghidul ei de stil, apoi a apăsat butonul de sincronizare pentru a-l actualiza pe toate paginile sale. În timp ce Sandy pleacă din fața lui Piña Coladas, Danny transpiră zeci de pagini care actualizează logo-urile.

Fii ca Sandy.

Asta e! Acum v-ați pregătit punerea în aplicare a designului și sunteți gata să vă începeți „serviciul de cină de design”.

Auto-promovare rușinoasă:

Totul din UX Power Tools Style Guide este construit folosind toate sfaturile prevăzute în acest articol. Acea foaie masivă de tipografie? A fost deja configurat cu zeci de stiluri de text. Acea foaie de stiluri de obiect? Da, și acestea!

Verificați-l la https://www.uxpower.tools și urmați-ne pe Twitter @uxpowertools. Urmărește-mă și pe mine, dacă te-ai distrat: @thejmoore.