20 elementi e principi di design che ogni designer dovrebbe conoscere

C'è stato un tempo in cui il design era troppo controllato. Troppo modellato. Troppo sicuro.

Ma l'evoluzione è inevitabile e i designer hanno iniziato a sperimentare un po' di più.

Da lì, i design sono diventati più audaci e migliori. I designer hanno iniziato a scavare più a fondo nella scienza alla base del comportamento del loro pubblico, consentendo loro di diventare flessibili rispetto a ciò che il mercato richiedeva.

“Oggi il design è diventato qualcosa di più di semplici modelli e tendenze. È diventato uno stile di vita. " Qualcosa che è accuratamente intrecciato in ogni reazione e routine umana. E sotto la complessità di questo stile di vita si trovano 20 diversi principi di design che rendono questo mondo un posto più creativo e bello in cui vivere.

Diamo un'occhiata a questi principi e ai suggerimenti per sfruttarli nei tuoi progetti.

Linee

Guarda ovunque intorno a te e vedrai le linee. I bordi dello schermo del tuo computer. I lati di ogni tasto della tastiera. Anche le lettere su quei tasti sono composte da linee, alcune diritte, altre curve, altre oblique.

Questo è esattamente quanto sono importanti le linee. Senza di loro, tutto si mescolerebbe l'uno nell'altro all'infinito, rendendo il mondo un unico blob.

Ciò che rende le linee ancora più sorprendenti, oltre al fatto che definiscono la forma di ogni cosa, è il fatto che si traducono anche in emozioni e idee che sollecitano reazioni equivalenti. Metti una linea ondulata accanto a una linea retta verticale, ad esempio, e inizierai a pensare all'ordine e alla forza da un lato e al caos e alla confusione dall'altro. Questo può essere molto utile se stai chiedendo al tuo pubblico di rispondere a determinati inviti all'azione. Nel momento in cui i loro stati d'animo e le loro emozioni sono stati impostati, è più facile navigare attraverso il tuo invito all'azione.

Un altro ruolo che le linee svolgono nel web design è il fatto che guidano gli occhi del pubblico verso i punti focali di ogni pagina. Ad esempio, linee guida forti sotto il nome del marchio in un mare di altri testi più piccoli aiuteranno quel nome a distinguersi.

Scala

La scala definisce come taglierai diversi elementi in un unico disegno. Fondamentalmente mette la logica in un pezzo, o la toglie. Ad esempio, se dovessi disegnare una formica accanto a un cane, avrebbe senso solo rendere il cane molto più grande della formica (a meno che il design non implichi di deviare dalla realtà).

La scala è anche il modo migliore per creare dramma. Come accennato in precedenza, ci saranno casi in cui dovrai allontanarti dal realismo e creare effetti sbalorditivi ridimensionando alcuni elementi significativamente più piccoli o più grandi di altri.

Il ridimensionamento è anche un ottimo modo per enfatizzare la gerarchia. Prendi le locandine dei film, per esempio. Gli attori con ruoli importanti di solito hanno le loro foto in risalto rispetto agli altri, non perché sono più alti o più grandi degli attori secondari, ma perché i loro personaggi sono più importanti.

Ora, supponiamo che tu stia lavorando su qualcosa che presenta molto testo e non molte immagini. Il ridimensionamento si rivela ancora il modo migliore per enfatizzare alcuni dettagli rispetto ad altri. Le statistiche, ad esempio, possono essere aumentate in modo significativo per attirare gli occhi del pubblico direttamente su quel dato.

Colore

È incredibile quanto impatto abbia il colore su tutto. Sono stati effettuati studi dopo studi sugli effetti del colore non solo sugli stati d'animo e sulle emozioni di una persona, ma anche sulle sue reazioni e sulle decisioni di acquisto.

Riesci a immaginare di vedere un'azienda ambientale che utilizza nient'altro che bianco e nero per il proprio marchio? O un'azienda che vuole trasudare un'aura professionale e valori tradizionali utilizzando vivaci colori al neon? Questa, penso, sia una spiegazione sufficiente per mostrare quale ruolo gioca il colore nel design.

Consistenza

Quando pensi alla Coca-Cola, immagini i colori verde o blu? Probabilmente no: la tua mente passa automaticamente al colore rosso.

Questa è la coerenza.

Progettare per un marchio è tutta una questione di coerenza. Si tratta di utilizzare esattamente le stesse sfumature, toni e tinte dello stesso identico colore, nonché gli stessi identici tipi di carattere. Rapporti d'ufficio, cartelloni pubblicitari, banner pubblicitari: ogni singola cosa associata al marchio dovrebbe essere sempre coerente. Dopotutto, se la Coca-Cola cambiasse la sua combinazione di colori ogni anno o giù di lì, pensi che porterebbe comunque lo stesso ricordo del marchio che ha ora? Penso di no.

Spazio bianco

Frame Inc. Biglietti da visita

Lo spazio bianco non significa necessariamente che sia bianco, ma significa sempre la stessa cosa, indipendentemente dal colore. È lo spazio inutilizzato tra i tuoi elementi, quello spazio negativo che fa impazzire molti designer.

Per alcuni, tutto quello spazio inutilizzato sembra essere un tale spreco. Ma aspetta fino a quando non usi quello spazio a tuo vantaggio lasciandolo strategicamente vuoto. Puoi aprire un livello completamente nuovo di creatività che lascerebbe a bocca aperta le menti del tuo pubblico.

Non mi credi? Dai un'occhiata a Sky and Water di MC Escher e capirai esattamente cosa intendo.

Simmetria

Ares Patch di Garrett Godsey

Sapevi che i tuoi occhi sono naturalmente attratti da qualsiasi cosa simmetrica? Questo è il concetto di cui hanno approfittato marchi come Target e Chanel, rendendo i loro loghi incredibilmente memorabili.

La simmetria è una cosa che porta un senso di equilibrio e ordine a qualsiasi progetto. Potrebbe non essere così ovvio a volte, ma per ogni grande opera d'arte arriva un modo unico di formare simmetria per soddisfare l'occhio.

Opacità

L'opacità di un elemento di design mostra quanto sia "trasparente". Detta quanto tutto sia trasparente. Tutto ciò che ha un'opacità inferiore è fondamentalmente più chiaro, mentre gli elementi che hanno un'opacità maggiore sono più solidi alla vista.

L'opacità può aiutarti a sovrapporre elementi diversi senza eliminare completamente la presenza di quelli sottostanti. Viene anche utilizzato per aggiungere un senso di movimento a un'immagine.

Struttura

Senza texture, qualsiasi design potrebbe sembrare vuoto e semplice. Aggiungi un po' di texture e il design prende vita, facendo sembrare che sia pronto per uscire dallo schermo o dalla superficie su cui è stampato.

Ciò non significa che ogni pezzo di design richieda una trama. Ci saranno sempre progetti di design che starebbero meglio quando sono puliti e nitidi. Tuttavia, ci saranno anche casi in cui un po' di consistenza non farebbe male.

Puoi ravvivare la trama del tuo design aggiungendo uno sfondo che aggiunge profondità alla superficie. Puoi anche provare a goffrare alcuni elementi.

Bilancia

Tocca di Eddie Lobanovskiy

L'equilibrio a volte può essere confuso con la simmetria, ma in realtà sono due cose diverse. Quando le cose sono simmetriche, ogni elemento potrebbe terminare sullo stesso margine o potrebbe esserci lo stesso numero di elementi su entrambi i lati di una pagina. Anche se questo di solito si traduce in un senso di equilibrio, puoi anche ottenere quella sensazione senza usare un design simmetrico.

Supponiamo, ad esempio, di voler progettare una pagina di informazioni con del testo e un'immagine. Puoi trovare un senso di equilibrio con un layout a due colonne anche se il testo non è un elemento identico all'immagine.

L'equilibrio è solo qualcosa che rende un pezzo di design completo. Quando un'immagine è sbilanciata, può sembrare semicotta o, peggio, priva di ispirazione.

Gerarchia

Gerarchia di Melanie Taube

La gerarchia mostra quali elementi sono più importanti rispetto a tutto il resto. Questo non significa che gli elementi alla fine della gerarchia (i bottom feeder, per così dire) siano cose di cui puoi fare a meno. Dopotutto, senza gli elementi dall'altra parte della gerarchia, non saresti in grado di ottenere la quantità di impatto a cui miri.

La gerarchia può essere espressa in tanti modi diversi oltre al ridimensionamento. Puoi usare colori più luminosi per quelli in cima alla catena alimentare, con il colore che diventa più chiaro man mano che ti sposti più in basso.

Contrasto

Il contrasto è la regola degli opposti. Fondamentalmente distingue la luce dall'oscurità, grande e piccola. Per i designer che mirano sempre a far risaltare uno o due elementi dal loro design, il contrasto è solitamente uno degli approcci che usano.

Ma il contrasto va molto più in profondità della semplice estetica. Il contrasto influisce anche sulla leggibilità. Usa due colori che sono quasi gli stessi per il testo e lo sfondo e probabilmente ti gratterai gli occhi cercando di leggere ciò che dice il testo. Utilizzando due colori ad alto contrasto, i tuoi occhi vedranno immediatamente ciò che dovrebbero vedere.

Inquadratura

La migliore fotocamera è quella che hai con te di Sean McCabe

Vedi come una cornice mette un confine attorno alle immagini che ci hai inserito? È esattamente a questo che serve l'inquadratura. Fondamentalmente ti mostra cosa dovrebbe e non dovrebbe far parte dell'immagine.

Contorni del riquadro, margini: tutte queste sono forme di inquadratura. Ti consente anche di evidenziare determinati elementi sugli altri, come una singola citazione nel mezzo di una pagina piena di testo.

Puoi anche essere creativo e usare altre cose per la tua cornice oltre alle solite linee e margini. Ad esempio, un poster a tema spiaggia potrebbe utilizzare conchiglie allineate attorno al testo per inquadrarle in modo efficace.

Griglia

Cercare di allineare le cose su uno spazio vuoto può essere difficile, motivo per cui le griglie sono molto importanti nel design.

Le griglie aiutano i progettisti ad allineare e disporre gli elementi. Un perfetto esempio di questo sarebbero le colonne su una pagina di una rivista o un giornale. Riesci a immaginare di avere tutto quel testo posizionato casualmente senza la guida di una griglia? Sarebbe un disastro a cui cercare di dare un senso.

D'altra parte, se stai cercando un design un po' meno rigido, rompere la griglia è un modo meraviglioso per creare istantaneamente un senso di caos. I nostri occhi tendono a cercare naturalmente il layout e la griglia di un disegno, quindi uscire da quella struttura contribuirà a creare un senso di disordine.

Spontaneità

Certo certo. Abbiamo bisogno di equilibrio. Abbiamo bisogno di simmetria. Segui la griglia. Usa le linee per inquadrarlo. Ma tutto ciò non significa che tutto debba essere fatto secondo il manuale. A volte, è necessario anche un po' di follia per creare un design straordinario.

Solo perché hai già una chiara divisione tra colonne e righe non significa che non puoi mettere improvvisamente una virgoletta nel mezzo senza seguire i frame esistenti. Se questo è il modo migliore per far risaltare quella linea, allora così sia.

Mentre stai progettando, prenditi una pausa dalle tue "regole" e trova spazio per un po' di spontaneità, qualcosa di inaspettato. Questa potrebbe essere proprio la cosa di cui il tuo design ha bisogno.

Direzione

Spirale Artcrank Design di Allan Peters

Questo può anche essere indicato come segnali visivi o grafici. Posiziona l'immagine di qualcuno che indica il tuo pulsante di invito all'azione e quasi tutti gli occhi di ogni singolo lettore andranno immediatamente direttamente a quel pulsante.

Naturalmente, anche gli occhi seguono determinati schemi mentre guardano su una pagina. Gli studi mostrano, ad esempio, che i modelli più comuni seguiti dagli occhi sarebbero una E, una F o una Z. Questo è il motivo per cui è meglio posizionare il contenuto più importante in alto a sinistra della pagina, poiché l'istinto naturale degli occhi sarebbe quello di spostarsi prima dall'alto a sinistra in alto a destra.

Regole

Sì, anche se la creatività è spesso spontanea, ci sono ancora molte regole di progettazione che dovresti seguire. Ma poi di nuovo, infrangere queste regole ogni tanto ti spingerebbe anche a creare pezzi sorprendentemente belli.

Quindi, come fai a sapere quando seguire le regole e quando infrangerle?

Innanzitutto, devi essere esperto con le basi in modo da sapere esattamente cosa stai rompendo. Quindi, assicurati che infrangere le regole corrisponda al punto che stai cercando di fare.

Movimento

Non hai bisogno della magia per creare movimento sul design stampato. Ci sono così tanti effetti che puoi usare che ti permetterebbero di dare l'impressione che un'immagine si muova.

Su un'immagine di un bambino in sella alla sua bicicletta, ad esempio, puoi sfocare il resto dell'immagine intorno a lui per mostrare che sta solo sfrecciando per tutto ciò che passa. Puoi anche usare le linee di movimento, così come gli effetti d'onda. Puoi anche usare l'opacità per dare l'illusione ottica del movimento, come con questo logo disegnato da Vladimir Mirzoyan sopra.

Profondità

Certo, i design piatti sono di gran moda da un paio d'anni ormai. Devi ammettere però che aggiungere profondità ad alcuni dei tuoi progetti si adatta ancora meglio. Dopotutto, quanto è sorprendente che qualcosa di fisicamente bidimensionale possa effettivamente sembrare come se stesse saltando fuori da una pagina?

Esistono diverse tecniche che puoi utilizzare per creare profondità nei tuoi progetti, come ad esempio:

• Ombre
• Sovrapposizione
• Giocare con la prospettiva (risulta in un effetto 3D)

Se il tuo design sembra che potrebbe usare un po' di vita, prova uno di questi approcci e guarda l'immagine prima di alzarti dalla sua superficie.

Tipografia

Potresti avere tutte le immagini, le trame, gli sfondi e altri elementi del tuo design in ordine, ma se la tua tipografia ha bisogno di un po' di lavoro, l'intero design è compromesso. La tipografia è più di semplici stili e dimensioni dei caratteri. Ha anche qualcosa a che fare con il ridimensionamento, la spaziatura, il colore e molti altri concetti di progettazione di base.

Poiché la tipografia copre molto terreno, probabilmente saresti più illuminato se leggi questi libri su come migliorare la tua tipografia.

Composizione

Waves di Romain Rdb

Invece di essere un elemento a sé stante, la composizione è in realtà una combinazione di alcuni degli elementi di cui abbiamo discusso in precedenza. Scala, gerarchia, profondità: tutto questo e molto altro contribuiscono alla composizione complessiva di un design.

La composizione, nella sua accezione più elementare, copre la disposizione complessiva di ogni singolo elemento del tuo progetto. Immagina tutti gli elementi di cui abbiamo discusso: quando mescolati insieme, il risultato finale funziona o no? È così che misuri la composizione.

20 elementi diversi, 20 modi diversi per creare o distruggere un design. Tieni sempre un elenco di questi elementi accanto a te mentre lavori e lascia che sia la tua guida mentre cerchi di intrecciare le sfide che derivano dal completamento del tuo prossimo progetto di design.