Sommario
Una guida completa per imparare le basi del visual design.
La domanda da un milione di dollari: qual è il segreto di un buon design?
Possiamo fare filosofia su questo punto, ma in generale il proverbiale "segreto" di un buon design risiede nel modo in cui si organizzano gli elementi visivi, in relazione alla tela e tra loro. In pratica, abbiamo appena descritto il design del layout che, a pensarci bene, è ovunque si guardi.
Prendiamo ad esempio l'impaginazione di una rivista. Il loro design segue un classico sistema a griglia (impareremo tutto sulle griglie tra poco). Tutto è solitamente allineato a sinistra, a destra e in basso. Le colonne in particolare hanno un allineamento giustificato distinto che rende la pagina non solo visivamente attraente, ma anche facile da leggere e autorevole. I titoli grandi attirano l'attenzione dello spettatore.attenzione, mentre il sottotitolo si presenta come un contrasto di dimensioni per creare una gerarchia visiva delle informazioni.
Linda Gaom, Behance
Tutte queste qualità rendono il design della pagina pulito, strutturato e facile da leggere, e sono in sintonia con i suggerimenti di cui parleremo in seguito. Ma prima, cerchiamo di capire meglio il design del layout stesso.
Che cos'è il design del layout?
Il design dell'impaginazione riguarda la disposizione degli elementi grafici per attirare l'attenzione del lettore e trasmettere un particolare messaggio in modo visivamente accattivante.Non stiamo quindi parlando del design di un logo, ma del design di materiale stampato, come giornali, riviste, poster, e delle loro controparti digitali, nonché del design di web, app o UX/UI.
La parola "layout" ci dà molte indicazioni: significa una disposizione di elementi predeterminati su una pagina.
Quando un layout è efficace, ha un bell'aspetto e guida l'osservatore a capire il messaggio che il design sta cercando di trasmettere. Capire il layout è quindi fondamentale per creare composizioni coinvolgenti, efficaci, facili da usare e piacevoli.
Se un layout non trasmette bene il suo messaggio al pubblico, o in altre parole, non "si legge bene", il design sarà inefficace, a prescindere dall'aspetto trendy. Nel regno del design del layout, il contenuto sostituisce le tendenze e le trovate.
Lo scopo del design del layout
Trasmettere velocemente un messaggio
È fondamentale: il design del layout stabilisce la relazione tra gli elementi grafici per ottenere un flusso fluido di movimenti oculari per la massima efficacia e impatto.
Per creare equilibrio
L'utilizzo dei principi del design del layout è il modo più semplice per creare un senso di equilibrio e simmetria nei vostri progetti di design senza diventare noiosi.
Creare coesione
L'impaginazione aiuta a disporre i numerosi elementi del progetto in modo facilmente digeribile, coeso e logico.
Creare bellezza
L'equilibrio e la struttura creano naturalmente bellezza. Se il design del vostro layout è fatto correttamente, diventerà automaticamente visivamente attraente per l'osservatore. Quanto minore è lo sforzo che l'osservatore deve compiere per comprendere un messaggio, tanto più attraente apparirà il vostro design.
Designer di Frank Philippin per il suo libro "I Used to Be a Design Student: Then - Now" Fonte: DesignBoom
Gli elementi del design del layout
Testo
La scelta dei caratteri tipografici, dei colori e delle dimensioni avrà effetti diversi sul modo in cui il layout verrà recepito dal pubblico.
Immagine
I tipi di immagini più comuni sono fotografie, illustrazioni o infografiche.
Forme
Le forme possono essere geometriche, molto spigolose, oppure organiche, che imitano il mondo naturale. Possono anche essere astratte. Le forme astratte sono state molto di moda nell'ultimo anno, in quanto i web designer le hanno incorporate in composizioni complesse e tentacolari.
Le forme possono sostituire un'immagine o essere utilizzate per aggiungere elementi grafici a una pagina, evidenziare il testo o delineare lo spazio tra altri elementi visivi.
Spazio bianco
Qualsiasi progetto di layout avrà una certa quantità di spazio bianco che permetterà agli elementi di respirare e risaltare da soli.
I principi d'oro del design del layout
Noterete che i principi del design del layout seguono molti dei principi fondamentali del design, come l'uso del colore in un certo modo, la tipografia, la ripetizione, il contrasto, la gerarchia e l'equilibrio.
Principio n. 1. Usare le griglie
Le griglie aiutano i progettisti a posizionare i vari elementi del design, come testo e immagini, in modo che risultino coerenti e facili da seguire.
Danno un senso di ordine, evitano che gli elementi si sovrappongano l'uno all'altro e, soprattutto, correggono l'allineamento, rendendo il lavoro più pulito e professionale.
Fonte: hgmlegal.com
L'anatomia delle griglie
Si potrebbe pensare che si tratti solo di linee verticali e orizzontali, ma una griglia è composta da diverse parti, anzi molte. Ecco la terminologia più importante da conoscere in una griglia di base:
- Formato Se si progetta qualcosa per la stampa, il formato è la pagina, mentre se si è un web designer, il formato è la pagina web o la finestra del browser.
- Margini sono gli spazi vuoti intenzionali tra il formato e il design.
- Linee di flusso Sono le linee orizzontali che separano il layout in sezioni parallele. Le linee di flusso contribuiscono alla leggibilità del progetto e guidano il lettore a seguire correttamente il contenuto.
- Moduli sono i blocchi formati dalle linee di flusso orizzontali e verticali di qualsiasi griglia. Se ci pensate, sono i mattoni di qualsiasi griglia. Tutti i moduli verticali creano le colonne, mentre tutte le griglie orizzontali creano le righe.
- Regioni sono gruppi di moduli collegati tra loro, sia in verticale che in orizzontale. Non ci sono regole su come si decide di organizzarli.
Fonte: Radversity
Tipi di griglie
Le griglie di impaginazione sono state utilizzate per la prima volta per organizzare la scrittura a mano su carta.
Le loro origini risalgono già al XIII secolo, quando l'artista francese Villard De fuse il sistema a griglia con il rapporto aureo per produrre layout di pagine stampate con margini. Questo sistema a griglia è visibile ancora oggi, come dimostra la maggior parte dei layout di libri e riviste stampati. Editori, redattori e designer preferiscono utilizzare griglie standard non solo perché hanno un bell'aspetto, ma anche perché i lettori hanno imparato asi aspettano che alcuni elementi del design si trovino in un posto particolare.
Le griglie possono essere progettate in due modi: simmetriche o asimmetriche. Griglie simmetriche seguono una linea centrale, in cui le regioni verticali e orizzontali sono uguali tra loro e le colonne hanno la stessa larghezza.
Guarda anche: 9 consigli per creare un poster perfettoIn un griglia asimmetrica Come suggerisce il nome, i margini e le colonne non sono tutti identici.
In base a questa classificazione, esistono cinque tipi principali di griglie di layout utilizzate in tutto il mondo su cui è possibile fare affidamento:
Griglie per i manoscritti sono il tipo di griglia più comune per i documenti. Separano l'intestazione, il piè di pagina e i margini, e in pratica creano un rettangolo all'interno del formato (o della pagina) che delimita il testo. Sono la base per le riviste, i giornali e i libri. Quindi è probabilmente il layout con cui avete più familiarità.
Fonte: UXplanet
Fonte: Radversity
Griglie a colonne Le griglie a colonne sono un'altra delle soluzioni preferite nell'editoria di riviste. Il layout tipico di una rivista utilizza le griglie a colonne per separare il testo in sezioni di facile lettura, ma sono molto diffuse anche per i siti web. Si possono utilizzare da due a sei griglie. È possibile utilizzare un numero maggiore di griglie, ma non è comune. Una cosa molto importante delle griglie a colonne è che la distanza tra le colonne, o i canali, sono equamente distanziati da ogni colonna.altro.
Le griglie di colonne simmetriche sono utilizzate, ad esempio, dai giornali, mentre nel web design si preferisce una griglia di colonne asimmetrica.
Fonte: UX Planet
Fonte: Radversity
Griglie modulari Sono simili alle griglie di colonne, ma tengono conto anche delle linee di flusso orizzontali. Questo tipo di griglia è necessario quando si devono organizzare vari elementi nel layout e le griglie di colonne non sono sufficienti.
Le griglie modulari hanno moduli di dimensioni uguali, il che rende molto semplice la visualizzazione delle zone spaziali in modi diversi.
Fonte: UX Planet
Fonte: Radversity
Griglie di riferimento Una linea di base è la linea su cui poggia il testo quando si digita, mentre la spaziatura è la distanza tra due linee di base. Vi chiedete quanto dovrebbero essere grandi i vostri titoli o sottotitoli?
Le griglie di base sono qui per aiutare a dare al testo un ritmo fluido.
Fonte: UX Planet
Fonte: Fragaria
Griglie gerarchiche hanno un aspetto meno simile a quello di una griglia rispetto a tutte le loro controparti, ma sono molto utili per organizzare gli elementi del design in base al loro ordine di importanza. Le griglie gerarchiche possono essere basate su griglie modulari o possono essere create da voi. I siti web utilizzano molto questa griglia, in particolare le riviste digitali e i giornali tendono ad affidarsi maggiormente alle griglie gerarchiche piuttosto che alle griglie a colonne nel loro passaggio alla trasformazione in griglie a colonne.digitale.
Fonte: UX Plane
Principio n. 2. Utilizzare lo spazio negativo
Spesso pensiamo che il vuoto, il silenzio o la mancanza di colore siano una cosa negativa, ma non consideriamo che sono le solide fondamenta del contrasto.
Chiamato anche spazio bianco, lo spazio negativo è quell'area del progetto che non contiene elementi reali. È l'area lasciata vuota. Non si limita a circondare gli elementi, ma crea anche i legami necessari tra di essi. Per questo motivo, lo spazio negativo è un elemento di design legittimo e ha un impatto massiccio sull'efficacia del design del layout.
Spazio negativo buono e cattivo
Lo spazio negativo aiuta a separare le varie aree del progetto, consentendo al tempo stesso al layout di respirare. Contribuisce alla gerarchia visiva e all'equilibrio visivo, consente all'utente di concentrarsi sugli elementi principali, riduce il livello di distrazione e, infine, aggiunge stile ed eleganza al progetto.
I designer inesperti potrebbero avere la tendenza a riempire il più possibile la tela, scalando il testo o ingrandendo un logo o un'immagine. Ma dare spazio agli elementi permette all'osservatore di cogliere più velocemente e più comodamente alcuni spunti informativi.
Se tutto grida per attirare l'attenzione dello spettatore, non si sente nulla.- Aaron Walter, "Design per le emozioni
Un modo semplice per determinare lo spazio negativo è quello di utilizzare una griglia modulare: posizionandola sopra il vostro progetto, potrete visualizzare facilmente quali moduli possono rimanere vuoti e quali devono essere riempiti.
Designer di Brunswicker, Fonte: Codesignmag.com
Principio n. 3. Scegliere un unico punto focale
Un cliente vi ha mai chiesto di ingrandire il logo e poi di ingrandire ancora di più il titolo?
Non si può enfatizzare tutto, perché questo vanifica l'obiettivo di un buon design. Come il tempo, anche la messa a fuoco è relativa: perché un elemento risalti, un altro deve fungere da sfondo. Alcuni elementi devono dominare altri, affinché il design mostri una gerarchia visiva.
Il punto focale di un progetto è l'elemento con il maggior peso visivo, quello che attira l'occhio per primo, più di ogni altro elemento del layout.Un punto focale annuncia al pubblico il punto in cui inizia il suo percorso di visualizzazione sul vostro progetto, quindi è l'inizio della storia che state raccontando.
Guarda anche: La storia delle storie sui social mediaQuesto obiettivo può essere raggiunto utilizzando un'immagine di grandi dimensioni o un'ampia fonte tipografica. Si noti l'efficacia del punto focale sottostante
Progettato da Braulio Amado per Bloomberg Businessweek, Fonte: È bello che
Ma mentre un punto focale attirerà l'attenzione del pubblico, la regola successiva vi aiuterà a guidarlo.
Principio n. 4. Pensare alla prossimità e al flusso
Il principio di prossimità è semplice: assicurarsi che gli elementi che sono in relazione tra loro siano collocati insieme.
La vicinanza indica che le risorse visive sono collegate e diventano un'unità visiva che aiuta a organizzare il layout.Pertanto, raggruppate solo gli elementi di design che hanno una relazione tra loro e utilizzate le sacche di informazioni presenti nel design per guidare il pubblico verso il contenuto pertinente che deve consumare. Questo principio è chiamato anche principio del flusso.
Fonte: Satori Graphics
Un design con un buon flusso condurrà l'occhio dell'osservatore attraverso il layout, da un elemento all'altro, con facilità. I punti focali attireranno l'occhio e diventeranno il punto di sosta, mentre gli altri elementi imprimeranno una direzione.
La grafica è chiaramente separata dal testo, così come gli inviti all'azione, in modo che l'attenzione dell'osservatore navighi da un gruppo di informazioni all'altro.
Principio n. 5. Usare il contrasto
Assicuratevi di avere un contrasto sufficiente nel vostro design.
Il contrasto aiuta a organizzare il design e a stabilire la necessaria gerarchia, ponendo l'accento su ciò che è importante.Inoltre, un buon uso del contrasto aggiunge interesse visivo al progetto. Ammettiamolo, un layout in cui tutto è della stessa dimensione, forma o colore sembrerà noioso. Il contrasto rende le cose più vivaci.
Il primo pensiero potrebbe essere quello del contrasto cromatico, come caldo contro freddo, scuro contro chiaro, blu contro arancione. Ma se il colore è un principio di contrasto estremamente essenziale, esistono anche contrasti di tipo, allineamento e dimensione. E ricordate che il contrasto è anche relativo: ha significato solo in giustapposizione con altri elementi.
Ecco alcuni esempi di layout che utilizzano questa regola in modo intelligente e bello. Notate il contrasto nella tipografia, nei colori e persino nelle dimensioni degli elementi.
Fonte: Piano d'azione per la riconciliazione della IAG
Principio #6. Ripetizione, modello, ritmo
Quando pensiamo alla ripetizione, pensiamo allo stesso elemento più volte.
Ma nel design è diverso: non è assolutamente così noioso. Se usata correttamente, la ripetizione può infatti potenziare il vostro design.
Cercate di identificare e riutilizzare un motivo in tutto il layout, in modo che le varie aree si sentano collegate e facciano parte della stessa composizione. Questo aiuterà il vostro design ad avere un tema. Ripetendo gli elementi, non solo otterrete risultati conformi alle aspettative del vostro pubblico, ma migliorerete anche l'esperienza dell'utente. Essere coerenti fa sentire gli utenti più a loro agio.
È possibile farlo ripetendo forme o simboli, o anche uno schema di colori, un carattere tipografico e lo stesso stile in generale.
Una buona abitudine da prendere è quella di utilizzare un carattere tipografico con un'ampia famiglia. Limitate il numero di motivi, pesi/stili di linea e colori e ripetete tutto. Cercate inoltre di mantenere lo stesso stile di immagini e grafica, ad esempio utilizzando illustrazioni dello stesso artista.
Fonte: Thepentool.co
Ecco i sei principi che vi aiuteranno a organizzare il vostro progetto e a ottenere un layout più pulito, professionale ed equilibrato.
Ma il vostro viaggio non finisce qui. Il design grafico non è una scienza esatta e non dovrebbe limitarsi a suggerimenti e principi. Come è vero in tutti i settori della creazione, non esiste una regola fissa. Uscire da questi suggerimenti in modo sottile aggiungerà profondità e varietà ai vostri progetti.
Tuttavia, sono un ottimo punto di partenza e vi invitiamo a provarli e a farci sapere come hanno funzionato!
Scarica Vectornator per iniziare
Portate i vostri progetti al livello successivo.
Scarica il file
