Un flusso di lavoro basato su componenti per Sketch

Il modo in cui progettiamo sta cambiando, così come i nostri strumenti.

Offri alle persone uno strumento e troveranno diversi modi per utilizzarlo. Non ci sono due designer che lavorano allo stesso modo, ma prevedo che cambierà nei prossimi due anni. Il moderno design digitale è nato dall'hacking di fotoritocco per disegnare interfacce utente, perdere traccia del lavoro all'interno di sistemi progettati per non perdere lavoro e un ciclo infinito di ricreare schermi esistenti quando le cose si perdono nella traduzione ...

Nell'ultimo decennio, i progettisti hanno iniziato a rivalutare il loro approccio e si sono orientati verso un flusso di lavoro basato su componenti. Photoshop ha introdotto Smart Objects (essendo in grado di "posizionare" altri file Photoshop in un PSD). Questa nuova funzionalità ha permesso ai progettisti di condividere una versione centralizzata di un componente, senza preoccuparsi di avere duplicati di quel componente attraverso i propri file. Purtroppo, questo non si è mai veramente trasformato in un flusso di lavoro tra i team di progettazione: è stata più un'eccezione che una regola.

Quando Sketch ha introdotto i simboli, il valore dei componenti è diventato più chiaro. Nonostante siano limitati a un singolo file, i simboli rendono i componenti estremamente facili: crea un componente e riutilizzalo all'infinito in tutto il file attraverso tavole da disegno e pagine. Inizialmente statici, i simboli sono presto diventati una funzionalità più solida con ridimensionamento reattivo e la possibilità di sovrascrivere i valori. Sono convinto che i simboli avranno opzioni di personalizzazione più potenti in futuro.

La vera svolta è arrivata quando Sketch ha abilitato l'annidamento di simboli all'interno di altri simboli. Anche come singolo designer, c'è un enorme valore nel definire correttamente, nominare e strutturare i simboli. Per coincidenza, è così che anche gli sviluppatori strutturano i componenti: partendo dal basso dove definiscono le cose a livello micro, fino a interi schermi a livello macro.

Uno dei punti di forza di Abstract è fornire ai designer un modo per eseguire la versione e gestire il proprio lavoro. L'abstract tiene traccia delle modifiche apportate a qualsiasi componente all'interno di un file di Sketch, consentendo a te e al tuo team di confrontare diverse versioni a livello di componente. Ciò significa che più simboli in un file di Sketch, minore è la probabilità che tu (o uno dei tuoi colleghi) vi imbattiate in conflitti. Con Abstract, la modifica di un'icona utilizzata su ogni singolo livello non dovrebbe causare conflitti con altri che stanno lavorando allo stesso file. E se dovesse verificarsi un conflitto, Abstract gestisce questa situazione con garbo.

Ad esempio, ecco come strutturo i file di Sketch che utilizziamo per la progettazione di Abstract. Molti dei miei team di progettazione preferiti utilizzano flussi di lavoro simili e sembra ridimensionare bene, non importa quanto sia grande / piccolo il team.

Primitivi

Colori

Ogni progetto inizia con la definizione di una tavolozza di colori. Colori del marchio, colori del testo, colori dell'interfaccia utente, colori per diversi tipi di azioni ... Da quel momento in poi, in genere non è una buona idea usare un colore che non fa parte della tavolozza, a meno che non ci sia una ragione davvero, davvero buona (che significa che probabilmente dovrebbe andare nella palette comunque).

Stili di testo e stili di livello

Il secondo della lista è la tipografia. Crea un elenco delle dimensioni dei caratteri necessarie nel progetto. Più breve è l'elenco, più facile sarà mantenere. Come per i colori, in genere non è necessario deviare da questo elenco.

L'aggiunta di alcuni modificatori agli stili di testo fa avanzare ulteriormente questo elenco (colore, spessore del carattere, trasformazioni del testo ...), ma ciò rende anche difficile la scansione dell'elenco aggiungendo tutte le diverse permutazioni, o forzerà una personalizzazione costante degli elementi sul elenco. (Questa è un'area in cui sento che Sketch può e migliorerà nel tempo. Una semplice sovrascrittura dell'allineamento non dovrebbe interrompere la connessione con lo stile di testo definito.)

componenti

Ecco dove le cose si fanno davvero eccitanti. Incorporando simboli all'interno di altri simboli, crea livelli e livelli di componenti di facile manutenzione e aggiornamento.

LIVELLO 1: Fondazione

I simboli di livello 1 non includono altri simboli. Sono il livello più basso nella nostra pila di componenti.

  • Iconografia: varianti scure, chiare e colorate del nostro set di icone, con il slicing impostato in modo che gli sviluppatori possano facilmente aprire il file Sketch e afferrare le risorse di cui hanno bisogno
  • Avatar: un set di 8 avatar che utilizziamo in tutta l'app. Sono foto imperfette di un diverso gruppo di persone.

LIVELLO 2: blocchi di livello inferiore

I simboli di livello 2 combinano primitivi e simboli di livello 1.

  • Elementi del modulo: pulsanti, input, caselle di controllo, radiocomandi ...
  • Celle: persone, commenti, commit, file, pagine, tavole da disegno ...
  • Sottomenu: intestazioni con azioni o icone opzionali
  • Banner: combina testo, icone e pulsanti

LIVELLO 3: blocchi di medio livello

I simboli di livello 3 combinano i simboli del livello 2 e del livello 1. Questi sono simboli più avanzati, che di solito finiscono per essere utilizzati nel progetto reale.

  • Barre laterali: elenchi di celle, potrebbero fungere da navigazione
  • Principali aree di contenuto: tutto, da una griglia di progetti a un dettaglio di impegno, tra cui azioni, titolo, descrizione, anteprime e commenti
  • Intestazioni app: Wayfinder, che aiutano le persone a sapere dove si trovano all'interno dell'app, mix di etichette di testo e icone
  • Modali: azioni, conferme di azioni, flussi completi ...

In genere raggrupperò i simboli di livello 3 su una pagina in modo da poterli confrontare rapidamente per coerenza.

LIVELLO 4: Composizioni

Avendo una collezione così ampia di componenti, le tavole da disegno che contengono i disegni reali di solito non contengono più di una manciata di simboli. La prima pagina nel mio file Sketch contiene tutte le schermate chiave della nostra app, mentre altre pagine sono dedicate ai flussi, compresi tutti i possibili casi limite.

Come cambierà il design?

I flussi di lavoro di progettazione e ingegneria si stanno lentamente avvicinando. Alla fine della progettazione, strumenti di disegno come Sketch creano nuove e più potenti funzionalità con ogni aggiornamento che, se combinato con Abstract, crea un flusso di lavoro solido, prevedibile e affidabile. Dal punto di vista ingegneristico, ci sono nuovi sviluppi nella costruzione di componenti migliori per una varietà di piattaforme. Entrambe le parti stanno standardizzando processi simili e questo mi entusiasma.

La standardizzazione, combinata con ampi nuovi strumenti e un vocabolario condiviso, eleva il processo di progettazione al livello su cui le nostre controparti ingegneristiche operano da decenni. Getta Abstract nel mix, e improvvisamente tutti in una squadra hanno accesso a una ricca storia del perché le cose sono come sono, le decisioni che hanno portato allo stato attuale del lavoro e un modo per iniziare immediatamente a contribuire in modo significativo .

Costruire prodotti di alta qualità è uno sforzo di gruppo e tutti noi di Abstract siamo entusiasti di svolgere un ruolo fondamentale nell'evoluzione di questo processo.

Abstract è attualmente in Alpha privato. Stiamo lavorando per una beta pubblica alla fine del secondo trimestre. Il feedback dei nostri tester è stato incredibilmente utile in quanto abbiamo perfezionato i flussi e migliorato l'esperienza complessiva. Oggi più che mai crediamo sia giunto il momento per i progettisti di disporre dell'infrastruttura adeguata per evidenziare il valore del design. Nuovi lotti di inviti escono ogni settimana. Grazie per il tuo supporto e incoraggiamento. Non vediamo l'ora di fare cose straordinarie insieme.

Se non ti sei registrato alla lista d'attesa di Private Alpha, puoi farlo qui. E se sei interessato ad aiutarci a ridisegnare il processo di progettazione, stiamo cercando persone straordinarie con una varietà di esperienze, prospettive e competenze. Dai un'occhiata alle nostre posizioni aperte e richiedi subito!