Tutoriale de schiță

Un Ghid pas cu pas pentru începerea unui nou proiect de proiectare a aplicațiilor în Sketch

Și de ce niciodată, NICIODATĂ să-i încep de la zero.

Sunt un credincios ferm în transparență, așa că înainte de a începe, vă datorez acest lucru:
Porțiuni din această postare fac referire la un cadru de design pe care l-am construit și pe care îl vând pe lateral. Acestea fiind spuse, acest ghid va fi încă util chiar dacă nu mergeți să îl cumpărați.

Începerea unui proiect de proiectare este greu.

Nu contează dacă sunteți un designer independent, lucrați pentru o agenție de produse fierbinți sau ajutați la susținerea unei mari echipe de proiectare a întreprinderii ... este descurajant.

Lucrez la o agenție de proiectare care semnează noi clienți lunar. Titlul meu neoficial este ceva de genul Product Concept Designer, ceea ce înseamnă practic că de fiecare dată când începem cu un client nou, primesc o treabă interesantă de a crea ecrane conceptuale vizionare care ajută la inspirarea foii de parcurs a produselor pentru anul următor (sau doi ... sau trei ... ).

Aceste concepte vin cu termene stricte și necesită o schimbare rapidă, astfel încât LUMINA mea ACTIVĂ este centrată în jurul eficienței și exactității; machetele mele trebuie să rezolve problema, să ofere viziune și să fie lustruite pentru o tranziție lină în proiectarea producției.

Din câte îmi dau seama, am devenit destul de eficient și am crezut că alți designeri ar putea beneficia de faptul că văd cum încep proiecte noi.

Notă: nu vă arăt cum să faceți întreaga masă ... doar cum să tocați ingredientele și să aprindeți soba

Cuprins / Versiune orientată / „Nu citesc toate acestea”:

  1. Creați dosarele de fișiere (da, de fapt)
  2. Alege Culorile
  3. Alegeți caracterele
  4. Configurați grila
  5. Construiți un „Blockframe”
  6. Convertiți în Hi-Fi

1. Creați fișierele de fișiere

De ce: să-mi păstrez fișierele de design și bunurile organizate!
Instrument (e) pe care îl folosesc: Finder + Automation (mai jos)

Dacă nu porniți pe piciorul drept, veți parcurge până la capăt. Structura folderului meu mă ajută să mă organizez și îmi oferă o modalitate de a împărtăși resurse de proiectare cu diverse părți (marketing, dev, etc.).

Adaug un _underscore pentru a vă asigura că acele dosare rămân în partea de sus a listei.
  • _assets: Acest folder este de obicei partajat cu echipe de devin interne / externe. Acesta include tot ceea ce vor avea nevoie pentru a construi aplicația (imagini / conținut fals, fonturi, pictograme, imagini și logo-uri).
  • _export: de fiecare dată când export un ecran în PNG, ei merg aici. Acest folder este împărtășit cu marketingul, astfel încât au întotdeauna cele mai noi ecrane la îndemână pentru a pune în diferite materiale de marketing (punți, pagini web, social media).
  • ui-design: Acestea sunt fișierele mele sursă. De obicei este doar un fișier, dar dacă vreodată le creez noi, sunt stocate aici.

Am creat o automatizare pentru a crea toate aceste foldere pentru mine ...

... și îl puteți obține aici gratuit:

2. Alegeți Culorile

De ce: Pentru a crea o paletă de proiectare de bază pentru proiectul meu.
Instrument (e) pe care îl folosesc: Coolors.co

Alegerea culorilor este cea mai ușoară modalitate de a începe. Dacă lucrați într-un sistem de proiectare existent, acestea sunt deja definite, în acest caz, adresați-vă cuiva în marketing sau design vizual.

Sistemele mele de proiectare sunt întotdeauna construite pe 5 culori principale:

  • Brand primar
  • Negru
  • Accent 1 (Succes)
  • Accent 2 (Avertisment)
  • Accent 3 (Pericol)

De ce aceste culori? (consultați secțiunea 2 din articolul respectiv)

Folosesc o aplicație numită Coolors de Fabrizio Bianchi pentru a mă ajuta să generez o paletă. Apăsați bara spațială și va alege la întâmplare culori pentru tine. Când găsiți o culoare care vă place, blocați-o și continuați să generați până găsiți celelalte culori. Dacă culoarea mărcii dvs. este deja definită, puteți introduce valoarea hexagonală, blocați acea culoare, apoi apăsați bara spațială pentru a genera restul de culori.

Vedeți o culoare bună de „succes”? Blocați-l. Continuați până când veți găsi culori pentru fiecare din cele 5 culori principale. (vezi această paletă)

După ce am identificat fiecare dintre culorile mele principale, le voi conecta în fișierul meu de schițe de design Sketch. Acest fișier șablon are stiluri de strat deja definite, așa că le actualizez doar cu culorile pe care tocmai le-am generat:

Șablonul meu are și o culoare „secundară”, dar nu am întotdeauna nevoie.

Pentru detalii despre cum să creați o foaie de stil completă, citiți acest lucru:

3. Alegeți caracterele

De ce: pentru a oferi aplicației meu un anumit caracter!
Instrument (e) pe care îl folosesc: fonturi Google și pereche de fonturi

Tipul de caractere este la fel de important pentru design ca și culorile, așa că ia-ți ceva timp să alegi una / cele potrivite. Deoarece proiectați o aplicație pentru utilizatori, este extrem de important să alegeți o tipografie bună.

Hei Jon, ce face o tipografie bună pentru proiectările de aplicații?

Hei, mă bucur că ai întrebat Iată câteva întrebări pe care mi le pun atunci când aleg o tipografie:

  • Lectibilitate: se poate citi pe perioade lungi de timp?
  • Scalabilitate: se poate citi atunci când este mare și când este mic?
  • Variabilitate: Există cel puțin două variații de greutate?

Fonturile Google și-au actualizat interfața anul trecut și este într-adevăr fantastic de utilizat. Mă asigur întotdeauna să testez lucrurile pe un fundal alb și negru doar pentru a verifica dacă totul funcționează în continuare.

Setările din panoul din dreapta sunt modul în care îmi place să-mi extind căutarea.

Dacă vă plac mai multe tipuri de caractere - spuneți, una pentru antete și alta pentru conținut - atunci veți săpa pereche de fonturi. Aceștia au făcut munca grea pentru tine și îți vor arăta, în linie dreaptă, cum arată două fonturi unul lângă altul. Este foarte simplu să alegeți o pereche drăguță. În plus, acesta furnizează toate fonturile din fonturile Google, deci nu trebuie să vă faceți griji cu privire la necesitatea de a plăti pentru nimic.

Testați întotdeauna fonturile cu litere, numere și punctuație. Uneori, veți găsi un font frumos, care are un aspect „9” ciudat sau un punct de exclamație ciudat. Nu doriți să vă confruntați cu această ciudățenie atunci când aveți deja 24 de ecrane în profunzime.

După ce ați selectat tipurile de caractere, creați stiluri de text în Sketch pentru lucruri precum anteturile, conținutul corpului și legături. Nu ar trebui să adăugați niciodată text la un desen decât dacă este legat de un stil de text. Dacă decideți să schimbați fontul pe marginea drumului și aveți text „neatribuit”, acestea nu vor fi actualizate atunci când vă sincronizați modificarea fontului.

Fișierul meu de șablon Sketch are toate aceste dimensiuni standard de text deja definite, așa că pot doar să le selectez pe toate, să schimbe fontul și să sincronizez:

4. Configurați grila

De ce: Pentru a stabili coerența alinierii în toată aplicația.
Instrument (e) pe care îl folosesc: Schiță și un Calculator

A devenit destul de comun ca grilele să fie construite din multipli de 8.

De ce 8?

După cum se pare, cele mai populare rezoluții de ecran sunt divizibile cu 8. În tabelul de mai jos, coloanele testează dacă lățimea și înălțimea sunt sau nu divizibile uniform cu 8px:

Mai multe detalii aici: https://spec.fm/specifics/8-pt-grid

Cu aceste informații, puteți începe să decideți dimensiunea grilei dvs. În primul rând, decideți cum va apărea aplicația dvs.:

  • Lățime completă: o aplicație cu lățime completă este de la margine. Dacă este o aplicație web, designul dvs. se va întinde până la marginile browserului.
Îmi place să îmi stabilesc jgheaburile să fie de cel puțin 24px. În acest caz, jgheaburile sunt divizibile cu 8, dar coloanele nu sunt. Nu este o afacere uriașă.
  • Flotant: o aplicație plutitoare aderă la o grilă cu lățime fixă, de obicei în centrul ferestrei.

Pentru aplicațiile plutitoare, îmi place ca jgheaburile și coloanele mele să fie divizibile cu 8. Iată o ecuație simplă:

(12 coloane * Lățime) + (11 Jgheaburi * Lățime) = Lățimea totală a machetei

  • Hibrid: o aplicație hibridă este un mix de elemente cu lățime completă și elemente plutitoare. Site-ul Medium este o aplicație hibridă, deoarece antetul superior are lățimea completă, dar aria de conținut este fixată la 740px.
Acest aspect este un aspect plutitor cu câteva elemente cu lățime completă.

O notă finală. Distanța implicită Shift + → în Sketch este 10px. Acest lucru va fi SUPER enervant atunci când lucrați pe o grilă de 8px. Din fericire, Sketch vă permite să schimbați acest lucru în preferințe.

5. Construiți un „Blockframe”

De ce: pentru a itera rapid layout-urile aplicațiilor și fluxurile de interacțiune UX.
Instrument (e) pe care îl folosesc: Ei bine ... dreptunghiuri.

Înainte de a intra în modul wireframe, îmi place să construiesc ceea ce numesc „blocaj” pentru a stabili diferitele regiuni ale layout-ului paginii mele. Ideea de aici este să începeți să vă faceți cunoștință pentru grila pe care tocmai ați definit-o și să blocați rapid cele mai importante părți ale paginii.

Iată un cadru pe care l-am făcut pentru o aplicație de chat pe care o proiectez:

Nu există raționamente în spatele culorilor. Se pare că mă simțeam patriot.

Acest lucru mi-a luat doar 90 de secunde pentru a genera, dar sunt toate îndrumările de care am nevoie pentru a începe proiectarea interfeței. Prefer acest lucru decât filframing-ul complet, deoarece tind să fiu în hi-fi când încerc să conectez fiecare element de pe ecran. Poate sunt doar un designer rău? Văd doar o mulțime de cadre care sunt atât de detaliate deja încât, la fel de bine, ați făcut-o cu deplină fidelitate vizuală prima dată. Doar opinia mea!

Aceasta este practic faza UX, în care voi face fluxuri de lucru pentru aplicații blocate pentru a vă asigura că fiecare interacțiune conduce la o experiență pozitivă a utilizatorului.

6. Convertiți în Hi-Fi

Așadar, nu vreau să vă las să atârnați ...

… Dar aici îți faci magia!

Cel mai important lucru în faza de proiectare hi-fi este să respectăm tot ceea ce stabilim în etapele 1-5.

  • Salvați lucrurile în folderul (dosarele) potrivite.
  • Folosiți doar culori în paleta dvs.
  • Nu vă îndepărtați de stilurile dvs. de text.
  • Conformați-vă întotdeauna cu grila dvs.
  • Blocați noi machete înainte de a le face cu o fidelitate ridicată.

rezumat

Așadar, aceștia sunt pașii pe care îi fac pentru a începe un nou proiect de proiectare a aplicației. Dacă vă interesează fișierul de șabloane pe care îl folosesc pentru toate proiectele mele, l-am pus la dispoziție mai jos. Mai multe detalii disponibile aici

Când nu scriu, lucrez la instrumente de proiectare Sketch precum UX Power Tools pentru a vă face un designer mai bun și mai eficient. Toți cei mai buni designeri și echipe de Sketch o folosesc și cred că și ți-ar plăcea. Vezi-l pe Marvel!

Urmați UX Power Tools pe Twitter
Urmărește-mă pe Twitter