Come creare un framework di progettazione efficace (include un framework per l'interfaccia utente di Sketch gratuito)
Pubblicato: 2022-03-11Se sei nel mondo del design da un po', probabilmente hai sentito questi termini: design framework, UI framework, UI kit o pattern library. Si riferiscono tutti alla stessa cosa: un sistema di standard di progettazione, modelli, modelli di interfaccia utente e componenti che vengono utilizzati in un prodotto e servono il suo linguaggio di progettazione.
Se non hai mai creato un framework di progettazione in precedenza, avviarne uno può sembrare opprimente e richiedere molto tempo, ma accelererà il tuo lavoro di progettazione e lo renderà complessivamente più efficiente.
Descriviamo i principali problemi risolti da un framework di progettazione, il motivo per cui ne hai bisogno e i componenti che dovrai creare durante la creazione di uno. Più avanti nell'articolo troverai un framework dell'interfaccia utente di Sketch scaricabile gratuitamente che ti consente di creare il tuo framework di progettazione.
Che cos'è un framework di progettazione?
Ogni design dell'interfaccia utente inizia con una tavola da disegno vuota e ogni designer ha un processo che utilizza per trasformare quella tela bianca in un prodotto completamente funzionante. Questo processo include tutti i piccoli componenti di design creati e i passaggi che il designer segue per costruire un insieme coeso, dai colori ai pulsanti e tutto il resto.
Spesso, questo lavoro è ripetitivo e può essere consolidato e reso più efficiente creando un sistema di modelli e componenti interconnessi. In altre parole, una struttura progettuale .
I framework di progettazione risolvono diversi problemi, tra cui:
- Eliminazione delle incongruenze nella progettazione del prodotto.
- Aumento della collaborazione, dell'efficienza e della comunicazione tra i team di progettazione e di prodotto.
- Rendere gli aggiornamenti di progettazione più avanti nel processo di progettazione meno frustrante.
Il primo problema: l'incoerenza nel prodotto
La coerenza trasforma un buon design in un ottimo design. La coerenza migliora l'esperienza utente, l'usabilità generale e l'efficienza con cui gli utenti possono utilizzare i prodotti digitali. Che si tratti di un piccolo sito Web, di un'app o di un grande prodotto SaaS, le incongruenze nel design compromettono l'aspetto, la sensazione, la credibilità e l'esperienza utente del prodotto.
Spesso si verificano incoerenze quando un team o un designer fa le cose troppo velocemente o apporta modifiche al volo. A volte un designer risponde a un cliente o a una parte interessata che chiede qualcosa di diverso mostrando loro rapidamente come sarebbero tali modifiche. Improvvisamente, il team di progettazione si ritrova con quattro diverse tonalità di verde e nessuno è sicuro di quale sia il colore principale del pulsante.
I framework di progettazione risolvono questo problema stabilendo standard coerenti.
Il secondo problema: collaborazione e gap di comunicazione
Spesso durante il processo di sviluppo, quando ci sono più membri del team coinvolti con molti che lavorano al progetto in diversi punti del processo, può creare confusione se non c'è una serie di standard per guidare il team.
Un framework di progettazione migliora la collaborazione e l'efficienza semplificando il processo di comunicazione e fornendo standard e indicazioni chiare. Non dovrai più perdere tempo a correre avanti e indietro cercando di capire quale colore o carattere sia quello corretto da usare.
Il terzo problema: modifiche alla progettazione in fase avanzata
Quante volte i designer devono apportare una singola modifica di colore nel file di progettazione con 120 tavole da disegno già sviluppate? Quante volte è necessario cambiare un'icona che fa parte di 200 componenti?
Il cambiamento è inevitabile durante tutto il processo di progettazione, è il modo in cui il prodotto migliora, ma spesso accade più tardi di quanto i designer vorrebbero. Un framework di progettazione rende molto meno dolorose quelle modifiche in fase avanzata, perché è costruito su un sistema di componenti orientati agli oggetti. Cambialo una volta e si increspa per l'intero design.
Come creare una struttura di progettazione
Ora che sappiamo cos'è un framework di progettazione e i problemi che risolve, parliamo di crearne uno (e cosa c'è nel download del kit dell'interfaccia utente di Sketch fornito più avanti nell'articolo).
Il framework di progettazione utilizzato per questo articolo è un singolo file di Sketch che viene strutturato utilizzando una specifica gerarchia di componenti, nota in Sketch come "simboli". Questi simboli semplificano l'implementazione di modifiche a livello di file con un solo clic. Un cambiamento nel componente "master" - il "simbolo" - si riflette istantaneamente in tutti gli altri casi.
Gerarchia del quadro di progettazione
Per creare un framework di progettazione che funzioni bene, inizia impostando una solida gerarchia visiva. Progetta i componenti più onnipresenti, come prima il colore e la tipografia. Quindi passa a quelli più piccoli, come pulsanti e componenti di input. Pensalo come costruire una casa: costruisci prima le fondamenta, quindi aggiungi gli altri pezzi man mano che il progetto avanza.
Colore
Il colore è l'elemento più importante in una gerarchia del framework di progettazione dell'interfaccia utente: ogni singolo componente di un progetto utilizza il colore. Il colore suscita forti reazioni ed emozioni nelle persone e definisce l'aspetto generale, la sensazione e il tono di un prodotto.
Una buona pratica è dividere i colori in gruppi:
- I colori primari sono i colori principali del marchio, in genere utilizzati per creare la combinazione di colori generale di un progetto e per componenti cruciali come i pulsanti.
- I colori secondari completano la tavolozza principale: spesso sono sfumature, saturazioni o tinte diverse dei colori primari. La scala di grigi è comunemente usata per la tipografia o gli sfondi. Da qualche parte tra cinque e otto livelli di grigio dovrebbero essere sufficienti.
- I colori di feedback del sistema sono un gruppo importante che i designer spesso dimenticano. Questi colori visualizzano i messaggi di sistema, inclusi avvisi, avvisi e notifiche.
Griglia: lo spazio del design
Una volta selezionati i colori, il passaggio successivo consiste nell'impostare una griglia. Una griglia mantiene tutti gli altri componenti della pagina nel posto giusto e nell'ordine. Questo è lo spazio di progettazione generale.
Esistono due tipi di griglie: verticale e orizzontale .
La griglia verticale è quella più usata e mantiene tutto allineato orizzontalmente. Esistono molti sistemi di griglia popolari come Bootstrap o la vecchia griglia 960px.
Una griglia orizzontale non è così comune. Per la tipografia viene utilizzata una griglia orizzontale. Crea un ritmo verticale per i paragrafi ed è comunemente visto sui giornali.
Modificatori: Regole Stilistiche
Oltre al colore e alla griglia, c'è un altro componente che è in alto nella gerarchia del framework di progettazione: i modificatori. Non possono essere utilizzati come componenti autonomi: vengono utilizzati per modificare o dare uno stile ad altri.
Questo gruppo conferisce stile a un progetto e include componenti responsabili dell'estetica, come forme o ombre ; cambiarli singolarmente nelle fasi successive del progetto può essere ingombrante.
Tratta i modificatori come parametri per tutti i blocchi costitutivi successivi. Crea simboli di schizzo da tre forme diverse: rettangolo, rettangolo arrotondato e cerchio. Usa queste forme per creare ogni singolo componente di un'interfaccia utente, inclusi pulsanti, componenti di input, campi modulo, ecc. ed elementi di sfondo.
Questa tecnica consente ai progettisti di concentrarsi maggiormente sull'UX piuttosto che sull'aspetto dei componenti dell'interfaccia utente. Inoltre, è facile tornare alla forma di base, cambiarne lo stile (ad esempio raggio d'angolo) e tutto ciò che è collegato si aggiornerà automaticamente.
Tipografia: il contenuto
La tipografia è l'ultimo importante componente del framework di progettazione. Può essere diviso in due gruppi: copia statica della pagina, come intestazioni e paragrafi; e la copia interattiva dei componenti, come pulsanti, navigazione o campi di input.
Disegna lo stile e le dimensioni di tutte le intestazioni (H1, H2, H3, ecc.) e dei paragrafi. La copia statica della pagina di solito non ha molte variazioni stilistiche (colore o peso). L'unica variazione, in relazione allo stile di copia della pagina statica, è se si trova su uno sfondo chiaro o scuro. Pertanto, è meglio creare due set di colori per assicurarsi che la copia statica della pagina funzioni su entrambi.
La copia che appare sui componenti interattivi, come pulsanti o messaggi di feedback del sistema, può avere più varianti. Ad esempio, i messaggi di feedback del sistema possono essere visualizzati su quattro diversi colori di sfondo in base al tipo di messaggio (avviso, errore, successo, ecc.) - anche le etichette dei pulsanti possono essere su sfondi diversi.
Includere questo gruppo nella struttura di progettazione è utile mentre si pensa globalmente alla tipografia. Innanzitutto, crea il normale testo dell'etichetta del pulsante e, in secondo luogo, crea le sue variazioni; questo aiuterà a evitare di ritrovarsi con troppe dimensioni dei caratteri. Quando crei nuovi componenti dell'interfaccia utente nel framework, controlla sempre se esiste uno stile tipografico esistente adatto.
Icone
Esistono due gruppi di icone in un sistema di progettazione: icone informative e dell'interfaccia utente. Il primo gruppo è in genere parte di un sistema di illustrazione e non viene utilizzato per alcun componente di interazione dell'interfaccia utente (come i pulsanti). Il secondo gruppo, le icone dell'interfaccia utente, aggiunge significato a componenti più complessi: pulsanti, etichette o tabelle, pur occupando una quantità molto piccola di spazio. Le icone nell'interfaccia utente possono anche essere utilizzate come trigger di funzioni come "modifica", "copia", "scarica" e "rimuovi".
Inizia con icone semplici utilizzate per le interazioni dell'interfaccia utente, come frecce, "aggiungi" (+) o "chiudi" (x). Una buona pratica è progettarli in diverse dimensioni (12px, 16px, 24px 32px).
Componenti
Bottoni
I pulsanti sono senza dubbio uno dei componenti più importanti nella progettazione dell'interfaccia utente e nel corso degli anni hanno subito molti cambiamenti man mano che le tendenze del design sono andate e venute.
Quando si progettano i pulsanti, assicurarsi di progettare i loro "stati" individuali. Di norma, un pulsante ha più stati e fornisce un feedback visivo agli utenti per indicare lo stato corrente (inattivo, al passaggio del mouse, premuto, disabilitato, attivo, ecc.).
Esistono due modi per farlo: il primo è progettare l'aspetto dei pulsanti separatamente per ogni stato (normale, attivo, al passaggio del mouse e premuto). Questa soluzione potrebbe richiedere molto tempo, ma di conseguenza offre molta flessibilità. (Questo metodo è stato utilizzato nel framework dell'interfaccia utente di Sketch gratuito incluso di seguito.)
Il secondo modo è progettare tutti gli stati in base a quello iniziale. Ad esempio, crea un simbolo di schizzo che cambierà il colore, la saturazione o la luminosità di ogni stato.
Per fare ciò, posiziona il simbolo come una sovrapposizione del pulsante con uno dei metodi di fusione Schizzo: tonalità, saturazione o sovrapposizione. Usa un rettangolo nero con la modalità di fusione delle tonalità sul pulsante normale per cambiarne la saturazione. La modifica dell'opacità della sovrapposizione in un secondo momento lo rende un pulsante più o meno saturo.
Componenti di input
Gli input consentono all'utente di comunicare con l'applicazione e caricare i dati. L'utilizzo di componenti come i campi di input insieme ai pulsanti consente la creazione di una semplice applicazione Web. Come per i pulsanti, è meglio creare componenti di input con stati diversi. Dipende dal framework di progettazione, ma come minimo, prendi in considerazione la creazione di stati vuoti, pieni e di errore.
Componenti complessi
In questa fase, il quadro progettuale può essere considerato completo perché ha tutto il necessario per creare un prodotto funzionante. Tuttavia, spesso vale la pena dedicare un po' più di tempo alla creazione di componenti dell'interfaccia utente più complessi per il framework dell'interfaccia utente, come schede, tabelle, raccoglitori di date, grafici e moduli.
Sezioni
In questa fase, il framework di progettazione può essere ulteriormente sviluppato creando le sezioni più comuni di applicazioni o siti web. Progettando elementi come navigazione, intestazioni, una sezione "chi siamo" e gallerie, un designer può risparmiare tempo nelle fasi successive di un progetto. La creazione di diverse varianti di diverse sezioni del prodotto renderà più facile l'adattamento a diversi progetti su tutta la linea.
Migliori pratiche del quadro di progettazione
Testare costantemente il Design Framework
I test dovrebbero essere inclusi in qualsiasi processo di progettazione o sviluppo. Evita errori e componenti mancanti creando piccoli pezzi di design e "testandoli da sforzo". Ad esempio, controlla se la modifica di un componente creato all'inizio modifica anche un componente aggiunto di recente.
Crea semplici componenti dell'interfaccia utente
Mantieni i componenti semplici mentre pensi al maggior numero possibile di casi d'uso di progettazione, quindi in futuro sarà possibile coprire qualsiasi stile. È meglio creare componenti dell'interfaccia utente con forme semplici, mantenendoli sufficientemente flessibili da adattarsi facilmente a qualsiasi progetto.
Non concentrarti su un singolo stile
Un framework di progettazione dovrebbe essere universale, quindi invece di concentrarti su uno stile specifico, concentrati sui componenti che possono essere utilizzati per creare uno stile.
Crea la tua struttura di progettazione
Nel tuo prossimo progetto, prenditi del tempo all'inizio per costruire con cura una struttura di progettazione. Scoprirai che migliora il processo di progettazione generale, aumenta l'efficienza e migliora la coerenza del design del prodotto, migliorando l'usabilità. Risparmierai tempo, comunicherai le idee di progettazione in modo più efficace e renderai felici i clienti e le parti interessate quando queste idee prenderanno vita in pochi secondi su 120 tavole da disegno Sketch.
Sei pronto per iniziare il tuo framework di progettazione?
Scarica il file Schizzo qui. Sono incluse le istruzioni su come usarlo.
Sistemi di progettazione stimolanti e framework dell'interfaccia utente
Uno dei modi migliori per comprendere meglio i framework di progettazione è esaminare in che modo le aziende affermate e di grandi dimensioni li utilizzano. Segui questi tipi di aziende e scopri il loro approccio.
Material Design di Google – attualmente uno dei framework di design più popolari al mondo. Scopri come Google stratifica l'intero processo di progettazione e costruisce un'utile gerarchia di componenti.
Design Language di IBM: IBM condivide l'intero processo di progettazione, inclusa una spiegazione approfondita di ogni dettaglio. Condividono anche molte risorse dal loro linguaggio di progettazione, da semplici icone a una libreria di animazioni dell'interfaccia utente.
Atlassian: un'altra grande risorsa di apprendimento. La loro guida allo stile del prodotto è un ottimo sistema di progettazione da studiare. Condividono il loro pacchetto Web GUI, un file Sketch con tonnellate di componenti e concetti.
• • •
Ulteriori letture sul blog di Toptal Design:
- eCommerce UX: una panoramica delle migliori pratiche (con infografica)
- L'importanza del design incentrato sull'uomo nel design del prodotto
- I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
- Principi euristici per interfacce mobili
- Design anticipatorio: come creare esperienze utente magiche