Ajutarea proiectanților să adere la un sistem de proiectare cu Sketch

La Walmart Labs din Bentonville, echipa noastră de proiectare internă creează aplicații pentru asociați (numele lui Walmart pentru angajați) în magazinele noastre, centrele de distribuție și birourile corporative. Proiectăm totul, de la dispozitive portabile la sisteme desktop, iar mediile utilizatorilor noștri variază de la birouri luminate până la depozite. Pentru a-i ajuta pe asociații noștri să se deplaseze rapid pe mai multe instrumente digitale, am creat un sistem de modele interactive și vizuale partajate bazate pe proiectarea materialelor Google. Sistemul nostru de proiectare este construit în Sketch și acest post împărtășește învățături din experiența noastră de gestionare a acestei limbi.

Unde să încep

Dacă sunteți un designer care trebuie să creeze și să gestioneze o bibliotecă pentru a ajuta pe alții să adere la un sistem de proiectare, citiți mai departe. Am găsit următoarele elemente utile deoarece proiectăm instrumente digitale pe care peste 1 milion de asociați le folosesc în întreaga S.U.A.

Coerența proiectării poate fi provocatoare într-un mediu de întreprindere, în special cu audiențe diverse și contexte de utilizare variate. Memorizarea și utilizarea corectă a tuturor specificațiilor pot fi copleșitoare și consumatoare de timp. Este posibil ca proiectanții, chiar și cei experimentați, să fie nevoiți să se referă continuu la specificațiile de proiectare. Acest lucru consumă timp prețios într-un ciclu de proiectare deja agresiv.

Răspunsul? Aduceți sistemul de proiectare proiectanților, în instrumentul lor de proiectare.
Credit imagine: Walmart.

Biblioteca noastră de sisteme de proiectare - cunoscută intern ca Ignite - este construită în Sketch. Am selectat Sketch, astfel încât design-urile nu trebuie să vă faceți griji cu privire la respectarea sistemului de proiectare, ci se pot concentra pe proiectarea experienței ideale. Designerii noștri lucrează mai precis, mai eficient și în mod consecvent cu acest instrument. De asemenea, împuternicește designerii să creeze modele reutilizabile din bibliotecă, moștenind actualizări atunci când biblioteca este actualizată.

Câteva caracteristici cheie includ:

  • Simbol configurabil pentru fiecare componentă din sistemul de proiectare
  • Liniile directoare ca simbol imbricat, adresându-se căptușirea și tratarea fontului
  • Text adaptabil cu alte elemente care răspund la lungimea textului
  • Posibilitatea de a adăuga culori, fonturi și avatare personalizate fără a modifica biblioteca de simboluri

Cuibărirea specificațiilor de proiectare

Sketch nu este un sistem de proiectare. , dar este unul dintre instrumentele noastre preferate. Când este gestionat corect, Sketch îi poate ajuta pe proiectanți să respecte regulile și îndrumările fără probleme. Aducem specificațiile sistemului de proiectare proiectantului prin cuibarea lor în fiecare simbol. Designerii se pot concentra mai mult pe flux și mai puțin pe amintirea regulilor.

Exemplu de ghid orizontal și căptușire cuibărită într-un simbol tab. Credit imagine: Walmart.

Ghid vertical

Ghidurile pot afișa unde să redimensionați simbolurile pe verticală. În exemplul de mai jos, o înălțime a barei de instrumente se schimbă pentru modul peisaj și portret. Această tehnică este utilă pentru redimensionarea înălțimii componentelor de la o dispunere normală la cea densă.

Exemplu de ghid vertical într-un simbol al barei de instrumente. Credit imagine: Walmart

Ghid de bază text

Linia de bază a textului îi ajută pe designeri să schimbe înălțimea unui simbol pentru a se potrivi cu înălțimea textului. Proiectanții schimbă înălțimea simbolului până când linia de bază se află la linia de bază a ultimei linii de text, fără a fi necesară măsurarea.

Ghidurile de bază ale textului sunt utilizate pe scară largă pentru a ajuta designerii să redimensioneze simbolurile pentru a se potrivi textului. Credit imagine: Walmart.

Text adaptativ

Designerii noștri inserează text și informații reale în calculatoarele lor, iar textul și elementele noastre în simboluri răspund la lungimea textului vecin. Simbolurile se mișcă pe măsură ce se modifică lungimea textului pentru a menține umplutura. Decorarea textului și capitonarea sunt setate în simbol, permițând proiectanților să se concentreze mai mult asupra conținutului.

Tabele și indicatorul activ răspund la lungimea textului. Credit imagine: Walmart.Bordul și cursorul casetei de text se mișcă pe măsură ce se modifică lungimea textului. Credit imagine: Walmart.

Culoarea ca simbol

Walmart are mai multe divizii și filiale, fiecare cu propria paletă de culori. Anterior, ar fi foarte obositor să actualizezi toate culorile unui design pentru o altă zonă a companiei. Ar trebui să duplicăm fișierul și trebuie să avem două exemplare principale pentru orice actualizări.

Fiecare culoare din paletul nostru este un simbol, inclusiv culoarea primară și secundară și sunt cuibărate oriunde este nevoie de culoare. Acest lucru a redus foarte mult necesitatea detașării simbolurilor și oferă flexibilitate a culorii.

Designerii pot schimba culoarea și opacitatea unui simbol din meniul de anulare. Credit imagine: Walmart.

Actualizați instantaneu culoarea tuturor simbolurilor

Designerii pot explora culorile pe întreaga aplicație schimbând opțiunile de culoare ale bibliotecii. Pagina de personalizare a culorilor le permite să vadă rezultatele în timp real, pe măsură ce schimbă culoarea textului primar, secundar și acționabil, nefiind necesare pluginuri. Simbolurile care folosesc culori-simbol sunt actualizate instantaneu. Culorile textului acționabile sunt gestionate prin stilul de text al lui Sketch. Acest lucru permite actualizarea culorii textului, permițând simbolurilor să aibă text adaptativ.

Tema de culoare a bibliotecii este modificată modificând simbolurile de culoare primară și secundară. Credit imagine: Walmart.

Actualizările sunt simplificate și ele. Designerii sunt invitați să actualizeze biblioteca atunci când deschid un fișier care folosește biblioteca. Când sunt acceptate, se aplică culorile noi.

Această tehnică permite, de asemenea, proiectanților să creeze, să salveze și să aplice biblioteci personalizate cu teme color la orice alt proiect. De asemenea, reduce foarte mult numărul de simboluri de creat și întreținut în biblioteca de simboluri.

Simboluri configurabile

Meniul de înlocuire permite configurarea simbolurilor în orice stare sau variație descrisă în sistemul de proiectare. Proiectanții le pot personaliza în continuare selectând imagini, icoane și culori relevante.

Un simbol de listă cu 1 linie este configurat pentru a afișa un avatar și caseta de selectare selectată. Credit imagine: Walmart.

Reducem meniurile inutile de înlocuire făcând puțin lucru suplimentar în bibliotecă. De exemplu, simbolurile cu fundal întunecat vor afișa doar versiunea albă a pictogramelor.

Nu este nevoie să selectați culoarea pictogramei în unele simboluri. Pictogramele de culoare albă sunt furnizate pentru fundaluri întunecate, iar pictogramele negre pentru fundaluri deschise. Credit imagine: Walmart.

Modelul foii de autocolant

Folosind simbolurile bibliotecii, foaia autocolantă oferă modele comune și o pagină mixin pentru a face culori, icoane și avatare personalizate să apară în simbolurile bibliotecii relevante. De asemenea, conține o pagină de rezumat pentru furnizarea de note, comentarii și culorile primare și secundare utilizate în proiectare

Mixine: adăugarea de culori, pictograme și avatare personalizate

Prin iterațiile noastre, am găsit designeri necesari pentru a adăuga icoane, culori și avatare personalizate. Detectarea unui simbol l-a împiedicat să primească viitoare actualizări și Alegeți imaginea funcționează numai pentru o singură instanță a simbolului.

Fără a modifica biblioteca Ignite, designerii pot adăuga pictograme personalizate, culori și imagini apar în simbolurile Ignite. Schița folosește dimensiunile simbolului pentru a popula meniurile care înlocuiesc. Tablele de artă cu dimensiuni adecvate sunt prevăzute în foaia de autocolant.

Când plăcile de artă din foaia autocolantului sunt convertite în simboluri, acestea apar în toate meniurile relevante relevante. Credit imagine: Walmart.

Pentru a adăuga o nouă pictogramă, designerii convertesc placa de pictogramă oferită într-un simbol. Simbolul apare acum în orice meniu de înlocuire cu pictogramele existente Ignite furnizate.

Exemple de configurare a simbolurilor

Un singur simbol poate fi configurat în mai multe moduri. Foaia autocolantă afișează diferitele configurații pentru cele mai comune simboluri.

Această pagină din foaia autocolantă conține doar 3 simboluri, dar arată diferitele configurații care sunt posibile. Credit imagine: Walmart.

Foaie de autocolant ca șablon

Foile de autocolant pot deveni dezordonate cu atât sunt utilizate mai mult. Lucrurile se mișcă, când copiez și lipiți de la ele. Oferim o modalitate simplă de a adăuga foaia de autocolant în folderul cu șabloane Sketch. Ca și instalarea aplicațiilor pe un Mac, designerii glisează fișierul în folder.

Un program de instalare este prevăzut pentru a face cu ușurință foile de autocolant disponibile ca șablon Sketch. Credit imagine: Walmart.

Foaie nouă de autocolant din șablon

După instalarea foii de autocolant, designerii pot obține o copie nouă pentru a începe un proiect, selectând foaia de autocolant din meniul șablon.

Din meniul Șabloane poate fi creată o copie nouă a foii de autocolant. Credit imagine: Walmart.

Foaia autocolantă folosește simboluri din bibliotecă, dar poate fi modernizată independent. Acest lucru permite adăugarea de noi tipare la foaia de autocolant, fără a aștepta următoarea lansare a bibliotecii.

Gestionarea și publicarea bibliotecii

Biblioteca Ignite Sketch este tratată ca un produs cu un ciclu de lansare, backlog de funcții, versiuni și note de lansare.

Numerotarea versiunii

Încercăm să actualizăm simbolurile bibliotecii într-un mod care să nu rupă design-urile la actualizare. Numărul versiunii indică proiectanților nivelul de capacitate cu versiunea de bibliotecă pe care o folosesc în prezent.

Credit imagine: Walmart.

Numărul versiunii apare în miniatura bibliotecii de schițe, ceea ce face ușor să vedeți ce versiune este încărcată. Versiunea poate fi găsită și în numele simbolului notelor de lansare.

Numărul versiunii bibliotecii poate fi găsit în miniatura șablonului în numele simbolului notelor de eliberare .. Credit imagine: Walmart.

distribuire

GitHub nu este doar pentru cod. Poate fi utilizat pentru gestionarea fișierelor non-text și oferă o pagină simplă și ușor de creat.

GitHub Page este utilizat pentru a genera pagina produsului. Credit imagine: Walmart.

Proiectanții descarcă un folder cu zip, care conține cea mai nouă versiune și versiunile anterioare. Dacă proiectanții întâmpină o problemă, pot reveni rapid la o versiune anterioară.

Note de lansare

Este important să informăm proiectanții despre noile funcții și corecțiile de erori. GitHub Releases este folosit pentru a publica notele de lansare, cu fișierul de bibliotecă atașat. Ultimele note de lansare sunt de asemenea furnizate în bibliotecă și pot fi accesate din meniul simbolurilor.

Exemplu de note de lansare, folosind GitHub Release. Credit imagine: Walmart.Notele de versiune sunt disponibile în bibliotecă ca simbol. Credit imagine: Walmart.

Urmărirea erorilor și a solicitărilor de funcții

GitHub Probleme oferă o modalitate ușoară de a trimite bug-uri și solicitări de funcții. Fiecare trimitere este un fir de discuție în care oricine se poate implica în conversație. Etichete, proiecte, repere și persoana alocată pot fi adăugate pentru abordare.

Bug-urile și solicitările de funcții pot fi urmărite și discutate folosind GitHub Probleme. Credit imagine: Walmart.

O pagină de proiecte poate fi creată pentru următoarea versiune și toate trimiterile relevante ale erorilor / funcțiilor pot fi adăugate prin intermediul etichetelor, ceea ce face ușor de urmărit exact ceea ce va fi pentru următoarea versiune.

Comunicare

Avem un canal dedicat Slack pentru a fi accesibil designerilor și pentru a anunța noi versiuni. Pentru fiecare versiune, postăm notele de lansare și facem un link către pagina produsului.

Acum e rândul tău

Prin feedback și iterație continuă, ne străduim să îmbunătățim biblioteca și să ajutăm designerii noștri să proiecteze mai precis, mai eficient și mai constant.

Poate merita investiția pentru a crea o bibliotecă de simboluri Sketch, dacă găsiți consecvență dificilă sau dacă petreceți prea mult timp în recrearea acelorași componente.

Poate fi dificil să găsești echilibrul corect între un simbol închis și extrem de flexibil. Începeți de mici, împărtășiți frecvent cu designeri și repetați repede. Dacă biblioteca ajută designerii să fie mai consistenți și să se miște mai repede, nu va trebui să o vindeți. Proiectanții vor cere acest lucru.