5 passaggi per la creazione di un sistema di progettazione

Approfondimenti su come abbiamo realizzato il nostro sistema di progettazione in Sketch

Conestoga College Doon Campus Design Foundations Studio

I sistemi di progettazione sono diventati una risorsa di base in qualsiasi team di progettazione e sviluppo. Pionieri di aziende tecnologiche come Google (Materiale), AirBnB, Uber e Facebook, hanno uno scopo importante: fornire un unico punto di riferimento per il design digitale, comprese linee guida, componenti e frammenti di codice. Non sono solo per aziende e app tecnologiche, ma servono qualsiasi organizzazione con una presenza digitale. In questo post, ti mostreremo passo dopo passo come abbiamo creato il nostro sistema di progettazione e le scelte che abbiamo fatto lungo il percorso. Faremo riferimento al nostro circuito del prodotto come esempio nella costruzione del nostro sistema di progettazione e abbiamo scelto Sketch come strumento di progettazione per costruire e catalogare i componenti.

Menu universale del circuito

Informazioni su Circuit e sui nostri problemi di progettazione, sfide e obiettivi

Circuit è una piattaforma di contenuti immersivi utilizzata per creare tour virtuali e esperienze di contenuti incredibili. Sin dal lancio, ci siamo concentrati sul miglioramento dell'esperienza dell'utente perfezionando e aggiungendo nuove funzionalità. Il prodotto ha fatto molta strada in breve tempo, ma c'è ancora molto da fare sulla nostra tabella di marcia. Dato che il design del prodotto è diventato una funzione fondamentale insieme allo sviluppo, ci siamo trovati a colpire ripetutamente gli stessi ostacoli:

  1. È stato difficile progettare e prototipare rapidamente nuove funzionalità, su una varietà di dimensioni dello schermo e incorporando al volo colori, loghi e immagini del marchio del cliente.
  2. Man mano che il nostro team cresceva, c'erano più casi di progetti non sincronizzati e designer che lavoravano con palette obsolete o partivano da zero.

Nel tentativo di semplificare il nostro processo di progettazione, abbiamo deciso di adottare un sistema di progettazione.

Che cos'è un sistema di progettazione e in che modo aiuta?

Un sistema di progettazione (o libreria di progettazione) è una raccolta di linee guida, guide di stile e componenti riutilizzabili che consentono la rapida creazione di modelli e il supporto di una più rapida creazione di funzionalità. Può rispondere a domande specifiche su quali caratteri e colori vengono utilizzati sui siti Web, su come vengono visualizzati pulsanti e pannelli.

Dopo aver implementato il nostro sistema di progettazione, creare modelli e sperimentare progetti è super veloce. Siamo in grado di progettare per una gamma di dimensioni dello schermo, il che ci aiuta a prendere decisioni migliori sull'interfaccia utente. Possiamo facilmente tornare indietro e cambiare al volo testo, dimensioni, immagini e stile. Questo è stato ottimo per personalizzare le schermate per mostrare ai clienti e ottenere feedback. Possiamo anche aggiungere struttura al nostro processo di web design e aiutare a identificare e semplificare il nostro sito Web, app o prodotto attuali in modo che tutti siano sulla stessa pagina. Infine, è un'unica fonte di verità per i progettisti e gli sviluppatori di briefing. Senza scrivere una vasta documentazione, siamo in grado di consegnare un singolo file a un designer in arrivo ed evitare confusione su eventuali dettagli di stile.

Tabella dei pro e dei contro di un sistema di progettazione (grafico realizzato con il nostro sistema di progettazione!)

Non è un compito facile costruire un sistema di progettazione e richiede un lavoro costante per rimanere in linea con il tuo sito web dal vivo. Tuttavia, ne vale sicuramente la pena.

Come creare e organizzare un sistema di progettazione

Ecco i passaggi che abbiamo seguito per creare il nostro sistema di progettazione. Abbiamo scelto Sketch per creare la nostra libreria e alcuni dei consigli saranno specifici per la sua funzionalità, ma i concetti trattati sono universali. Altri strumenti che puoi usare includono Figma, Adobe Xd e Adobe Illustrator.

Il risultato finale potrebbe assomigliare a questo.

Passaggio 1: controlla il sito Web o l'app e crea un elenco

Per iniziare, hai bisogno di un design; questo potrebbe essere un modello, una pagina live o un'app. Nel nostro caso, avevamo una webapp live e una raccolta di componenti e simboli in Sketch. Molti componenti nel file di progettazione erano obsoleti o non sono mai arrivati ​​all'ambiente di produzione live.

Quindi, fai un elenco di tutti i componenti che hai e prendi nota dei vari stati in cui potrebbero trovarsi (inattivo, hover, cliccato, disabilitato, predefinito ecc.). Il nostro elenco era composto da caratteri, colori, tipografia, icone e un lungo elenco di componenti come avatar, pulsanti, carte, piè di pagina, navigazione, barre di avanzamento, ecc.

Passaggio 2: organizzare le pagine

Il metodo Atomic Design (a sinistra) e il metodo Pattern Page (a destra)

Indipendentemente dal software scelto, probabilmente utilizzerai le pagine per organizzare i contenuti della tua biblioteca. Ci sono due modi per farlo. La prima è la metodologia di progettazione atomica di Brad Frost in cui gli elementi sono modellati secondo 5 raggruppamenti gerarchici: atomi, molecole, organismi, modelli, pagine. Il secondo metodo, che chiamiamo Pagine Motivo, presenta i componenti correlati nelle proprie pagine come Colori, Tipo, Icone, Avatar, Pulsanti, ecc. In confronto, è una struttura piatta senza molta erirarchia che può renderlo più semplice per progettisti in arrivo per individuare pezzi specifici, ma manca del flusso strutturato di 'building block' della metodologia Atomica.

Come organizziamo il nostro sistema di progettazione

Abbiamo strutturato il nostro sistema seguendo i principi Atomic sebbene lo abbia semplificato considerevolmente. Abbiamo finito con 5 pagine principali:

Una pagina delle Linee guida per la documentazione scritta per spiegare gli standard e gli obiettivi del sistema di progettazione.

Una pagina Sandbox che è il nostro "ambiente di sviluppo" per il design. Lo usiamo per sperimentare nuove funzionalità e design. Una volta che una funzionalità viene approvata, costruita, testata e promossa alla produzione, aggiorniamo il design e lo promuoviamo nella libreria principale.

Una pagina di simboli che contiene tutti i nostri atomi, molecole e organismi, dai semplici pulsanti e icone ai componenti compositi, raggruppati e organizzati in ordine alfabetico. Lo abbiamo fatto in modo che i componenti siano facili da individuare e possiamo spostarci rapidamente nella pagina attraverso tutte le tavole da disegno. Questo potrebbe non funzionare per le più grandi librerie di design, ma per ora va bene per le nostre esigenze.

La pagina dei simboli finita

Una guida di stile che è una raccolta combinata di elementi di design come font, tipografia e icone, componenti, modelli e pagine. Abbiamo annidato i simboli in raggruppamenti in questa pagina ed è facile esportare l'intera guida di stile come documento PDF quando dobbiamo consegnarli a un designer o uno sviluppatore.

Una delle pagine della Guida di stile

Infine, un registro delle modifiche per tenere traccia delle principali modifiche, dei creatori e delle versioni man mano che la libreria di progettazione si evolve nel tempo.

Nel complesso è una tua preferenza e il modo in cui organizzi il tuo sistema di progettazione dovrebbe soddisfare le esigenze del tuo prodotto e del tuo team.

Passaggio 3: creare stili di livello e stili di testo (saltare questo passaggio se non si dispone di Sketch)

Gli stili di livello e testo sono fantastici perché ti consentono di sovrascrivere forme e testo associati agli stili in un secondo momento.

Gli stili di livello ci consentono di salvare le proprietà di un oggetto come riempimento, bordi, ombre, allineamento ecc. E ci consentono di applicarle in modo coerente ad altri oggetti.

Stili di livello del circuito

Aggiunta di uno stile di livello: seleziona il tuo oggetto e nel pannello delle proprietà sotto l'aspetto, fai clic su "Nessuno stile di livello" e "Crea nuovo stile di livello" per salvare le proprietà dell'oggetto.

Stili di livello di denominazione: il modo in cui dai un nome ai tuoi stili determinerà come appaiono nel menu (sopra). Se scopri che arrivare al tuo stile richiede troppo tempo o è difficile da trovare, puoi sempre modificarlo nella finestra degli stili. Livello> Organizza stili di livello. Ecco come abbiamo chiamato i nostri stili di livello:

Circuito / colore / primaria / blu / Medium

Gli stili di testo ci consentono di salvare le proprietà del testo, inclusi dimensione del carattere, carattere, allineamento, ecc. E ci consentono di inserire o modificare rapidamente il testo utilizzato nei simboli in seguito. Qui probabilmente vorrai organizzare i tuoi stili in base alle classificazioni semantiche del testo sulle tue pagine web, ovvero H1, H2, H3, body e così via.

Stili di testo del circuito

Aggiunta di uno stile di testo: seleziona il tuo testo e nel pannello delle proprietà sotto l'aspetto, fai clic su "Nessuno stile di testo", quindi su "Crea nuovo stile di testo".

Denominazione degli stili di testo: simile agli stili dei livelli di denominazione. Abbiamo raggruppato i nostri stili in base ai paragrafi H1, H2, H3, ... e a tutti i componenti che necessitavano del proprio stile di testo.

È inoltre possibile applicare gli stili di livello agli stili di testo. Ecco come:
Seleziona testo> Livello> Converti in contorni, quindi dovresti essere in grado di aggiungere gli stili di livello al testo come qualsiasi forma normale. Tuttavia, se hai molto testo, farlo troppo può causare l'arresto anomalo del tuo Sketch o renderlo incredibilmente lento.

Passaggio 4: creare simboli / componenti

Questa è la parte divertente. Presta particolare attenzione alla spaziatura, al dimensionamento, alle forme e, se applicabile, ricorda di applicare gli stili di testo e livello alle singole parti dei componenti, ciò consentirà in seguito di sovrascrivere le parti. L'obiettivo è quello di finire con una raccolta completa di simboli e componenti.

Crea un simbolo: in Sketch, raggruppa i tuoi elementi e premi “Crea simbolo” nel menu di navigazione in alto. Inizia in piccolo definendo elementi come pulsanti, avatar e icone, quindi passa alla creazione dei componenti compositi.

Assegna un nome al simbolo: determinerà come appariranno nel menu Inserisci. Per un pulsante, li abbiamo chiamati come tali:

Pulsante / default / Idle
Pulsante / default / Hover
Pulsante / default / disabili

Assegna un nome e ordina i livelli nel tuo simbolo: questo è molto importante perché è così che appariranno nella sostituzione. Pensa a te stesso se l'ordine ha senso ed è chiamato e ordinato come qualcun altro si aspetterebbe?

Sostituisci il pannello di un componente della scheda

Ovviamente, non puoi sempre ordinarli in un modo ragionevole da trovare nell'override perché i livelli determinano ancora quale elemento si trova in cima, ma è comunque bene tenerlo a mente mentre crei i tuoi simboli.

Simboli nidificati: simboli all'interno di simboli. Utilizzando simboli più piccoli per creare simboli compositi, è possibile apportare una modifica in un unico punto e farlo riflettere in tutte le istanze in tutti i progetti. Ad esempio, se cambi le proprietà di dire un pulsante, anche tutti i pulsanti del tuo mockup cambieranno.

Scala sempre un nuovo simbolo per testarlo!

Ridimensiona il tuo simbolo: il responsive design è una pratica comune ora. Quando crei per la prima volta il tuo simbolo, potresti scoprire che gli elementi potrebbero non adattarsi alle tue aspettative. Puoi determinare come ridimensionare le cose nella finestra di ridimensionamento nel pannello delle proprietà. Passando il mouse sull'anteprima ti mostrerà come si ingrandisce.

Nota, è più facile ridimensionare che ridimensionare poiché a volte le cose diventano un po 'traballanti. Quindi, se non sei sicuro, inizia in piccolo!

Crea modelli e pagine: una volta che hai una raccolta di simboli, puoi iniziare a creare modelli e pagine per creare modelli rapidi di interi schermi. È anche una buona idea iniziare a raccogliere i tuoi simboli in una guida di stile per organizzarli e presentarli.

Mockup di uno schermo mobile che mostra come vengono applicate le sostituzioni

Passaggio 5: aggiornamenti in corso al sistema di progettazione

Non saprai mai quanto bene funziona il tuo sistema fino a quando non lo usi per creare effettivamente dei modelli. Quindi potresti scoprire che dovrai tornare indietro e adattare i tuoi simboli perché non si ridimensionano esattamente come volevi, oppure hai scoperto che era troppo noioso applicare alcuni stili di livello e preferirebbe avere meno clic per arrivare a uno stile .

E va bene così! Ricorda che un sistema di progettazione è una libreria vivente e dovrà essere continuamente aggiornato.

Ecco alcuni suggerimenti extra su Sketch per aiutarti a gestire il tuo sistema:

  • Crea cartelle di dati per aggiungere la tua libreria di immagini nelle sostituzioni. Tieni presente che se sposti la cartella dovrai ricollegarla. Schizzo> Preferenze> Dati / Libreria.
  • Aggiornamento della libreria in altri documenti: notifiche in alto a destra → Aggiorna libreria (è necessario prima salvare e chiudere la libreria)
  • L'API di Sketch è una fonte ufficiale aggiornata per ricontrollare i fatti, poiché i siti Web di terze parti a volte hanno informazioni obsolete.
  • Le fonti di SketchApp sono utili per ottenere risorse gratuite per gli schizzi

I plugin rendono molto più semplice l'utilizzo e l'organizzazione del sistema di progettazione. Alcuni che stiamo amando al momento:

  1. Sketch Runner: usa la tastiera per inserire simboli rapidamente!
  2. Symbol Organizer - rendi la tua pagina dei simboli piacevole e organizzata come la desideri.
  3. Unsplash It - aggiungi foto da Unsplash.

Speriamo che questo articolo sia stato utile per mostrare come è possibile ottimizzare il flusso di lavoro con una libreria di progettazione. Buona creazione!