Custodia di design Aurora

Dec 07 2022

Come sapete, diversi designer possono essere coinvolti nella creazione di progetti in via di sviluppo e complessi in momenti diversi. È molto conveniente utilizzare un sistema organizzato di elementi e regole per il loro utilizzo mentre si continua a lavorare sul progetto di qualcuno.

Questo è esattamente il metodo che serviva per uno dei nostri progetti, Aurora. Il nostro compito era creare un concetto di elementi di base per costruire ulteriormente un'interfaccia completa per una piattaforma nel campo della gestione dell'e-commerce da loro.

Il cliente ha fornito il sistema Carbon come esempio, che include il Design-Kit, i colori, i caratteri, i casi d'uso e altro ancora. Oltre a un analogo del loro prodotto. Inoltre, mi sono concentrato sugli esempi di Material Design, poiché il loro sito Web ha opzioni di componenti che possono essere utili nello sviluppo.
Nel corso dei lavori sono stati proposti innanzitutto font, icone e colori principali del progetto. Allo stesso tempo, ho creato pulsanti e input di esempio per mostrare come i caratteri e le icone selezionati interagiscono tra loro. Sulla base di ciò, il cliente ha scelto i caratteri, i colori e l'aspetto delle icone. Quindi, uno dei colori del logo, il rosa, viene utilizzato come colore primario e il secondo, grigio, come colore secondario.

Tutti gli stili di carattere utilizzati con ruoli contrassegnati vengono salvati negli stili del progetto Figma e possono essere selezionati dall'elenco.

I colori sono conservati in modo simile. Ma sono divisi in cartelle nella sezione Stili colore: Primario e Aggiuntivo. Per espandere la tavolozza dei colori, ho utilizzato il metodo per aggiungere il bianco e nero al colore selezionato in diverse proporzioni in sequenza (20%, 40%, 60%, ecc.). La cornice con la disposizione dei colori indica anche i ruoli cromatici previsti.

Inoltre, sono state aggiunte diverse opzioni di ombra per scegliere da un set già pronto offerto dal cliente.

Successivamente, è stato scelto l'aspetto dei pulsanti, degli input, del menu a discesa e del pulsante di selezione della lingua. Tutti i pulsanti sono componenti il cui aspetto può essere modificato direttamente nel progetto, a seconda dello scopo. L'icona nel pulsante può essere modificata anche nel menu Layout automatico.

L'aspetto del pulsante a discesa per la selezione della lingua è stato leggermente modificato (è diventato più compatto) dopo aver creato la pagina di accesso di esempio.

L'input ha 9 opzioni e può essere utilizzato con o senza un'icona. Il campo di immissione della password ha più opzioni perché può essere utilizzato in diverse situazioni e ha proprietà specifiche. Ad esempio, una scala che mostra la forza della password e gli elementi evidenziati in verde se l'utente ha inserito il numero di caratteri richiesto. Ho anche creato un componente separato per il campo di immissione del codice di verifica.

Successivamente, sono stati creati componenti per la casella di controllo e l'interruttore, nonché componenti per gli stessi elementi con testo. Inoltre, ho aggiunto avatar di diverse dimensioni, componenti con gruppi, suggerimenti ed esempi di utilizzo insieme a un elenco a discesa.

Per mostrare come funzionano gli elementi e il testo nella vita reale, ho creato schermate di accesso, tenendo conto dei desideri del cliente. Successivamente è stato aggiunto un tema scuro, per il quale ho creato componenti separati.

E per impostare i componenti per il tema scuro, ho utilizzato un layout di accesso già pronto e ho selezionato combinazioni adeguate di colori e trasparenza. Per alcuni elementi non è stato necessario modificare nulla. Ad esempio, per il pulsante Principale.

Pertanto, in un tempo abbastanza breve, il cliente riceve un semplice kit UI con la possibilità di modificare elementi in Figma. Questo è un ottimo modo per mostrare l'obiettivo stilistico principale di un progetto senza spendere molti soldi.