Un flux de lucru bazat pe componente pentru schiță

Modul în care proiectăm se schimbă, la fel și instrumentele noastre.

Oferiți-le oamenilor un instrument și vor găsi diferite modalități de utilizare. Nici doi designeri nu funcționează la fel, dar prezic că se va schimba în următorii doi ani. Proiectarea digitală modernă a rezultat din hackerii editorilor de fotografii pentru a atrage interfețe cu utilizatorii, pierzând evidența activității în sisteme concepute pentru a nu pierde munca și un ciclu nesfârșit de recreare a ecranelor existente atunci când lucrurile se pierd în traducere ...

În ultimul deceniu, designerii au început să-și reevalueze abordarea și au gravitat spre un flux de lucru bazat pe componente. Photoshop a introdus obiecte inteligente (putând „plasa” alte fișiere Photoshop într-un PSD). Această nouă caracteristică le-a permis proiectanților să partajeze o versiune centralizată a unei componente, fără a-ți face griji pentru a avea duplicate ale respectivei componente în fișierele lor. Din păcate, acest lucru nu sa transformat niciodată într-un flux de lucru în echipele de proiectare - a fost mai mult o excepție decât o regulă.

Când Sketch a introdus simboluri, valoarea componentelor a devenit mai clară. În ciuda faptului că sunt constrânse la un singur fișier, simbolurile fac componentele extrem de ușoare: creează o componentă și apoi refolosește-l la infinit în tot fișierul pe tablouri și pagini. Inițial statice, simbolurile au devenit curând o caracteristică mai robustă, cu redimensionare sensibilă și capacitatea de a suprascrie valori. Sunt convins că simbolurile vor avea opțiuni de personalizare mai puternice pe viitor.

Adevărata descoperire a apărut atunci când Sketch a permis cuibarea simbolurilor în alte simboluri. Chiar și ca un singur proiectant, există o valoare extraordinară în definirea, denumirea și structurarea corespunzătoare a simbolurilor. Întâmplător, acesta este modul în care dezvoltatorii structurează și componentele: începând din partea de jos unde definesc lucrurile la un nivel micro, până la ecrane întregi la nivel macro.

Unul dintre punctele forte ale Abstract este oferirea unui mod de proiectare pentru a-și versiona și gestiona munca. Rezumatul urmărește modificările aduse oricărei componente dintr-un fișier Sketch, permițând dvs. și echipei dvs. să comparați diferite versiuni la nivel de componentă. Aceasta înseamnă că cu cât sunt mai multe simboluri într-un fișier Sketch, cu atât este mai puțin probabil ca dvs. (sau oricare dintre colegii dvs.) să aveți probleme. Cu Rezumat, editarea unei pictograme utilizate în fiecare strat nu ar trebui să creeze conflicte cu alții care lucrează la același fișier. Și dacă apare un conflict, Abstract gestionează cu grație această situație.

Ca exemplu, iată cum structurez fișierele Sketch pe care le folosim pentru proiectarea Rezumatului. Multe dintre echipele mele de design preferate folosesc fluxuri de lucru similare și pare să se extindă bine, indiferent cât de mare / mică este echipa.

primitive

colorate

Fiecare proiect începe cu definirea unei palete de culori. Culorile mărcii, culorile textului, culorile UI, culorile pentru diferite tipuri de acțiuni ... Din acel moment, în general, nu este o idee bună să folosiți o culoare care nu face parte din paletă, decât dacă există un motiv foarte bun, care ( înseamnă că probabil ar trebui să intre în paletă oricum).

Stiluri de text și stiluri de strat

Al doilea pe listă este tipografia. Faceți o listă cu dimensiunile de font necesare în proiect. Cu cât lista este mai scurtă, cu atât va fi mai ușor de întreținut. Ca și în cazul culorilor, în general nu este necesară abaterea de la această listă.

Adăugarea unor modificatori la stilurile de text face acest pas cu un pas mai departe (culoare, greutatea fontului, transformări de text ...), dar, de asemenea, face ca lista să fie greu de scanat prin adăugarea tuturor permutațiilor diferite, sau va obliga personalizarea constantă la elementele din listă. (Aceasta este o zonă în care simt că Sketch poate și se va îmbunătăți în timp. O simplă rescriere de aliniere nu ar trebui să rupă conexiunea cu stilul de text definit.)

Componente

Iată că lucrurile devin foarte interesante. Încorporarea simbolurilor în interiorul altor simboluri, creează niveluri și niveluri ale componentelor ușor de întreținut și de actualizat.

NIVELUL 1: Fundație

Simbolurile de nivel 1 nu includ niciun alt simbol. Ele sunt cel mai scăzut nivel din grila noastră de componente.

  • Iconografie: variante întunecate, luminoase și nuanțate ale setului nostru de pictograme, cu setarea setată într-un mod în care dezvoltatorii pot deschide cu ușurință fișierul Sketch și prelua resursele de care au nevoie.
  • Avataruri: un set de 8 avatare pe care le folosim în întreaga aplicație. Sunt fotografii imperfecte de la un set divers de oameni.

NIVELUL 2: blocuri de nivel inferior

Simbolurile de nivel 2 combină simbolurile primitive și cele de nivel 1.

  • Elemente de formular: butoane, intrări, casete de selectare, comenzi radio ...
  • Celule: Oameni, comentarii, angajamente, fișiere, pagini, tablouri ...
  • Subnavigare: anteturi cu acțiuni sau pictograme opționale
  • Bannere: Combină text, pictograme și butoane

NIVELUL 3: blocuri de nivel mediu

Simbolurile de nivel 3 combină simbolurile de la nivelul 2 și nivelul 1. Acestea sunt simboluri mai avansate, care, de obicei, ajung să fie utilizate în designul propriu-zis.

  • Bara laterală: Listele de celule pot servi drept navigare
  • Domenii principale de conținut: totul, de la o grilă de proiecte la un detaliu de angajare, inclusiv acțiuni, titlu, descriere, previzualizări și comentarii
  • Anteturile aplicației: Wayfinders, care ajută oamenii să știe unde se află în interiorul aplicației, amestec de etichete text și pictograme
  • Modale: acțiuni, confirmări de acțiune, fluxuri complete ...

De obicei, voi grupa simboluri de nivel 3 într-o pagină, astfel încât să le pot compara rapid pentru consecvență.

NIVELUL 4: Compoziții

Având o colecție atât de extinsă de componente, tablourile de artă care dețin designurile reale nu conțin, de obicei, mai mult decât o mână de simboluri. Prima pagină din fișierul meu Sketch conține toate ecranele cheie ale aplicației noastre, în timp ce alte pagini sunt dedicate fluxurilor, inclusiv toate cazurile de margine posibile.

Deci, cum se va schimba designul?

Fluxurile de lucru de proiectare și inginerie se încetează încet unul spre celălalt. La sfârșitul proiectării, instrumentele de desen precum Sketch construiesc funcționalități noi și mai puternice cu fiecare actualizare care, atunci când este combinată cu Abstract, creează un flux de lucru solid, previzibil și fiabil. Pe partea de inginerie, există noi dezvoltări care construiesc componente mai bune pentru o varietate de platforme. Ambele părți standardizează procese similare, iar acest lucru mă încântă.

Standardizarea, combinată cu instrumente noi extinse și un vocabular comun, ridică procesul de proiectare la nivelul colegilor noștri din inginerie în care funcționează de zeci de ani. Aruncați abstract în amestec și, dintr-o dată, toți cei din echipă au acces la o istorie bogată a motivului pentru care lucrurile stau așa, deciziile care au condus la starea actuală a muncii și o modalitate de a începe să contribuie instantaneu într-un mod semnificativ .

Construirea de produse de înaltă calitate este un efort de echipă, iar toți cei de la Abstract sunt încântați să jucăm un rol critic în evoluția acestui proces.

Rezumatul este în prezent în Private Alpha. Lucrăm spre o Beta publică la T2. Feedback-ul testerilor noștri a fost extrem de util, întrucât am perfecționat fluxurile și am îmbunătățit experiența generală. Mai mult decât oricând, credem că acum este momentul ca proiectanții să aibă infrastructura adecvată pentru a evidenția valoarea designului. Loturi noi de invitații ies în fiecare săptămână. Vă mulțumim pentru sprijin și încurajare. Așteptăm cu nerăbdare să facem lucruri uimitoare împreună.

Dacă nu v-ați înscris pentru lista de așteptare a funcției private Alpha, puteți face acest lucru aici. Și dacă sunteți interesat să ne ajutați să reproiectăm procesul de proiectare, căutăm oameni uimitori, cu o varietate de experiențe, perspective și abilități. Verificați pozițiile noastre deschise și aplicați acum!