Sistema di progettazione: cos'è, perché e come crearlo

Il tema dei sistemi di progettazione, a quanto pare, è già stato considerato da tutte le parti: puoi trovare molti articoli, post, rapporti e altro materiale su creazione di un sistema di progettazione. Nonostante ciò, chiunque incontri questo termine ha molte domande. Cercheremo di rispondere nel dettaglio alle principali:

• Cos’è un sistema di progettazione?
• Cosa serve?

Cos’è un sistema di progettazione?

Un sistema di progettazione è una struttura che include componenti visivi, una libreria di codici e linee guida per l'utilizzo.

Spesso i designer alle prime armi commettono l'errore di semplificare il concetto pensando a un sistema di progettazione solo come un kit di interfaccia utente, un documento che contiene elementi dell'interfaccia grafica, tipografia e colori.

Il sistema di progettazione si compone di tre livelli:

A Kit dell'interfaccia utente è il linguaggio visivo di un prodotto per il quale viene creato un sistema di design. Si tratta di colori, caratteri, icone, pulsanti, elenchi puntati, interruttori a levetta, cursori, immagini, animazioni. Gli elementi variano e dipendono dalle specificità del prodotto digitale. Tutti aiutano a creare la parte visibile dell'interfaccia con cui l'utente interagisce.

Il framework è una libreria di codici scritta per ciascuno di questi elementi, oltre a plug-in per animazioni, tag ed etichette per la navigazione.

Linee Guida sono un insieme di modelli e regole per l'utilizzo di elementi che organizzano il processo di lavoro. Grazie alle linee guida, un designer non è coinvolto in compiti semplici, ma uno sviluppatore viene coinvolto immediatamente.

Ad esempio, le linee guida specificano i parametri di una finestra pop-up su un sito web: rientri dal testo, la posizione e la dimensione del titolo e del corpo del testo, una posizione per un pulsante e come apparirà la finestra con meno o più testo.

Tipi di sistemi di progettazione

Non esiste una classificazione unica, ma gli esperti distinguono due tipi di sistemi di progettazione: open source e closed source.

Nei sistemi open source, qualsiasi azienda può utilizzare materiali e adattarli ai propri progetti: modificare i colori dei pulsanti, i caratteri e le icone. Ad esempio, in Ant Design, linee guida per l'interfaccia umana e sistemi di progettazione dei materiali.

I sistemi di progettazione closed source vengono generalmente creati per un'azienda o un prodotto specifico. Si tratta di materiali completamente chiusi, accessibili solo ai dipendenti, o parzialmente aperti.

Come creare un sistema di progettazione

Lo sviluppo dei sistemi di progettazione si basa sui principi della progettazione atomica. La progettazione atomica è una tecnica che include cinque livelli di elementi di progettazione: atomi, molecole, organismi, modelli e pagine.

Struttura del sistema di progettazione:

• atomi sono i componenti più piccoli: pulsanti, icone, campi di input e caratteri.
• Molecole sono una combinazione di diversi elementi semplici: due pulsanti, un titolo e una riga di input, una barra di notifica, una casella di controllo e testo.
• organismi sono componenti completi: intestazione del sito, modulo di autorizzazione, schede prodotto e banner di notifica.
• Modelli – layout di pagina senza contenuto: menu, aspetto del sito.
• Pagine sono pagine piene di contenuti.

L'algoritmo generale è simile al seguente:

• Seleziona colori e caratteri, imposta griglie modulari e seleziona animazioni, immagini e suoni.
• Crea elementi di interfaccia di base.
• Combinazioni e layout di elementi di design.
• Crea un elenco di elementi insieme alle regole. Nella linea guida, specificare cos'è l'elemento, dove viene utilizzato e quali compiti risolve.

In genere, i sistemi di progettazione non vengono creati da zero, ma sono costruiti sulla base di materiale già sviluppato: kit di interfaccia utente, linee guida o libri di marca.

Perché hai bisogno di un sistema di progettazione?

Come per ogni prodotto IT, è fondamentale rispondere alla domanda: “A cosa serve un sistema di progettazione?” Oppure, come sottolineano alcuni colleghi del negozio, “e allora”?

La risposta a questa domanda ti aiuterà a capire il valore del prodotto. In parte lo si vede già da quanto abbiamo descritto sopra. Ma analizziamolo e diamo uno sguardo più approfondito.

Automazione

L’automazione offre il vantaggio più evidente. Un sistema di progettazione ti aiuterà ad automatizzare le operazioni, liberandoti tempo per altri compiti.

Iteratività

Essere in grado di ereditare e applicare automaticamente le modifiche agli elementi del sistema di progettazione è uno strumento prezioso per un team di prodotto. Puoi apportare rapidamente modifiche estetiche o anche grandi in un'unica posizione. In questo modo è sempre possibile valorizzare il prodotto.

Consistenza

La coerenza afferma che gli oggetti e le entità di un prodotto che svolgono la stessa funzione dovrebbero mirare all'unità e alla somiglianza.

Quando utilizziamo funzionalità simili in un prodotto, queste diventano familiari e convenienti: capiamo istintivamente come funziona e appare il pulsante, nonché dove è posizionato.

Ci auguriamo che tutti abbiano imparato qualcosa di prezioso dall'articolo. E ancora una volta eravamo convinti che lavorare su un articolo struttura la conoscenza e motiva lo studio aggiuntivo.