Le 10 regole fondamentali per una buona progettazione grafica

Progettare un sito web, un catalogo, una pagina pubblicitaria o un logo può essere divertente ma, per certi versi, potrebbe diventare anche stressante. Queste 10 regole di progettazione grafica ti aiuteranno ad avere un’immagine del tuo brand coerente ed in sintonia con il tuo pubblico di riferimento. Naturalmente, gli elementi visivi della tua immagine sono importanti; coltivare questi elementi è un passaggio necessario nella gestione del brand e non dovrebbe essere fatta a caso e senza seguire alcune importanti regole di progettazione.

Le 10 regole fondamentali per una buona progettazione grafica In molti di anni di lavoro in comunicazione ho avuto a che fare con molte aziende che si presentavano al loro pubblico di riferimento con un’immagine a dir poco sbagliata, completamente disallineata sia con il proprio “essere”, sia con il proprio pubblico di riferimento (in particolare siti Web). A tal proposito, quindi, voglio comporre un elenco di regole da prendere in considerazione nello sviluppo delle immagini di un brand, soprattutto se è il tuo. Non infrangendo mai queste regole, il tuo brand e la tua immagine generale sarà in ottima forma e il tuo pubblico ti ringrazierà.

1

Le 10 regole fondamentali per una buona progettazione grafica In molti di anni di lavoro in comunicazione ho avuto a che fare con molte aziende che si presentavano al loro pubblico di riferimento con un’immagine a dir poco sbagliata, completamente disallineata sia con il proprio “essere”, sia con il proprio pubblico di riferimento (in particolare siti Web). A tal proposito, quindi, voglio comporre un elenco di regole da prendere in considerazione nello sviluppo delle immagini di un brand, soprattutto se è il tuo. Non infrangendo mai queste regole, il tuo brand e la tua immagine generale sarà in ottima forma e il tuo pubblico ti ringrazierà.

1

PROGETTARE CON COERENZA

01

Palette dei colori È meglio se non usi più di cinque colori incluse le diverse sfumature dei colori scelti. Due o tre colori sono probabilmente ottimali per la “corporate identity”, quindi scegli saggiamente.

L a coerenza è un fattore importante per l’immagine di un brand. Senza coerenza, non puoi avere un’identità vera, giusto? Coerenza tra immagine visiva ed “essenza” aziendale assicurerà che il tuo pubblico di riferimento non ti confonda mai per qualcun altro o che consideri il tuo intero “know how” mal rappresentato. Le cose più importanti che aiuteranno a creare un progetto grafico coerente sono la tavolozza dei colori e i caratteri.

Font Non si dovrebbero mai usare più di tre caratteri nella progettazione grafica, ed è altresì importante, quando si scelgono i font, attenersi alla stessa famiglia. Ciò darà uniformità al testo.

2

3

PROGETTARE CON COERENZA

01

Palette dei colori È meglio se non usi più di cinque colori incluse le diverse sfumature dei colori scelti. Due o tre colori sono probabilmente ottimali per la “corporate identity”, quindi scegli saggiamente.

L a coerenza è un fattore importante per l’immagine di un brand. Senza coerenza, non puoi avere un’identità vera, giusto? Coerenza tra immagine visiva ed “essenza” aziendale assicurerà che il tuo pubblico di riferimento non ti confonda mai per qualcun altro o che consideri il tuo intero “know how” mal rappresentato. Le cose più importanti che aiuteranno a creare un progetto grafico coerente sono la tavolozza dei colori e i caratteri.

Font Non si dovrebbero mai usare più di tre caratteri nella progettazione grafica, ed è altresì importante, quando si scelgono i font, attenersi alla stessa famiglia. Ciò darà uniformità al testo.

2

3

-

EVITARE UNA SCARSA LEGGIBILITA

La leggibilità entra in gioco quando si selezionano i font. Se il tuo font non è leggibile, non sarai in grado di trasmettere il tuo messaggio previsto e potresti perdere l’attenzione del pubblico. Quando scegli il font, considera il segmento demografico a cui ti stai rivolgendo; dovrai assicurarti che il carattere corrisponda alla sensazione che emana il tuo brand, ma deve anche risultare in sintonia con la tipologia del tuo pubblico di riferimento.

4

Se hai a che fare con un pubblico di età avanzata, ad esempio, vorrai una dimensione in pixel più grande e, ad esempio, un font sans-serif. Ciò aumenterà la visibilità e migliorerà l’esperienza utente. Potrebbe anche essere utile aggiungere una sovrapposizione di colori contrastanti al tuo carattere. Il bianco contro il nero o viceversa ha il contrasto più alto. Maggiore è il contrasto, migliore è la leggibilità di solito.

02

5

-

EVITARE UNA SCARSA LEGGIBILITA

La leggibilità entra in gioco quando si selezionano i font. Se il tuo font non è leggibile, non sarai in grado di trasmettere il tuo messaggio previsto e potresti perdere l’attenzione del pubblico. Quando scegli il font, considera il segmento demografico a cui ti stai rivolgendo; dovrai assicurarti che il carattere corrisponda alla sensazione che emana il tuo brand, ma deve anche risultare in sintonia con la tipologia del tuo pubblico di riferimento.

4

Se hai a che fare con un pubblico di età avanzata, ad esempio, vorrai una dimensione in pixel più grande e, ad esempio, un font sans-serif. Ciò aumenterà la visibilità e migliorerà l’esperienza utente. Potrebbe anche essere utile aggiungere una sovrapposizione di colori contrastanti al tuo carattere. Il bianco contro il nero o viceversa ha il contrasto più alto. Maggiore è il contrasto, migliore è la leggibilità di solito.

02

5

EVITARE COLORI DISCORDINATI Assicurati di utilizzare colori che si completino a vicenda. Una combinazione di colori complementari, come un giallo o un viola, ad esempio, può usare una luce in contrasto scuro per alleviare la discordanza di colore e chiarire le parole.

0 03

Ricorda: – Scegli colori che siano ”tonalmente” simili, come una tavolozza di toni blu o una tavolozza di toni rossi. – Assicurati che i colori si trovino l’uno di fronte all’altro sullo spettro cromatico. – Scegli colori caldi o freddi per utilizzare un’ampia gamma di colori senza il rischio di interferenze. – I colori caldi sono i rossi, gli arancione, i gialli, mentre i colori freddi sono, ad esempio, il blu e il viola.

6

7

EVITARE COLORI DISCORDINATI Assicurati di utilizzare colori che si completino a vicenda. Una combinazione di colori complementari, come un giallo o un viola, ad esempio, può usare una luce in contrasto scuro per alleviare la discordanza di colore e chiarire le parole.

0 03

Ricorda: – Scegli colori che siano ”tonalmente” simili, come una tavolozza di toni blu o una tavolozza di toni rossi. – Assicurati che i colori si trovino l’uno di fronte all’altro sullo spettro cromatico. – Scegli colori caldi o freddi per utilizzare un’ampia gamma di colori senza il rischio di interferenze. – I colori caldi sono i rossi, gli arancione, i gialli, mentre i colori freddi sono, ad esempio, il blu e il viola.

6

7

NON ALTERARE LE DIMENSIONI DI GRAFICA E TESTO

Una linea guida di base è quella di evitare di allungare o restringere le immagini. Allungare un’immagine, distorcendone la forma originale, è un errore da evitare sempre! Paradossalmente un brutto design attirerà l’attenzione ancor più rapidamente di un bel design, ma in modo totalmente negativo.

8

Questa stella, ad esempio è stata allungata, chiunque, guardandola, prova una sensazione non propriamente piacevole. Puoi ancora parlare alla stella, ma i tuoi occhi non possono fare a meno di continuare a guardarla per capire cosa c’è che non va.

04

9

NON ALTERARE LE DIMENSIONI DI GRAFICA E TESTO

Una linea guida di base è quella di evitare di allungare o restringere le immagini. Allungare un’immagine, distorcendone la forma originale, è un errore da evitare sempre! Paradossalmente un brutto design attirerà l’attenzione ancor più rapidamente di un bel design, ma in modo totalmente negativo.

8

Questa stella, ad esempio è stata allungata, chiunque, guardandola, prova una sensazione non propriamente piacevole. Puoi ancora parlare alla stella, ma i tuoi occhi non possono fare a meno di continuare a guardarla per capire cosa c’è che non va.

04

9

STARE LONTANI DALLE IMMAGINI BASATE SU RASTER Utilizzare immagini basate su raster creerà problemi di “pixelizzazione”. L’utilizzo di Adobe Photoshop per creare le tue immagini è un modo sicuro per ottenere immagini basate su raster che potrebbe avere problemi di pixel durante un eventuale ridimensionamento. L’utilizzo di un’immagine vettoriale, invece, manterrà le immagini nitide. A differenza di Photoshop, queste immagini evitano i bordi sfocati e “pixelati”. Queste immagini possono essere create in Adobe Illustrator.

10

05 5 11

STARE LONTANI DALLE IMMAGINI BASATE SU RASTER Utilizzare immagini basate su raster creerà problemi di “pixelizzazione”. L’utilizzo di Adobe Photoshop per creare le tue immagini è un modo sicuro per ottenere immagini basate su raster che potrebbe avere problemi di pixel durante un eventuale ridimensionamento. L’utilizzo di un’immagine vettoriale, invece, manterrà le immagini nitide. A differenza di Photoshop, queste immagini evitano i bordi sfocati e “pixelati”. Queste immagini possono essere create in Adobe Illustrator.

10

05 5 11

MANTERE L’ALLINEAMENTO

Dopo aver trascorso tanto tempo a creare e a scrivere contenuti, sono sicuro che l’ultima cosa che vorresti è che il tuo progetto grafico risulti disordinato. Un design disordinato ti darà un immagine poco professionale e rifletterà negativamente sul brand. Un semplice consiglio è quella di scegliere una linea, da qualche parte sulla pagina, e allineare la grafica e il testo con essa. Tale linea può essere orizzontale o verticale e farà in modo che il tuo testo e la tua grafica non appaiano casuali.

12

Un modo ancora più semplice per farlo è quello di aggiungere un allineamento a sinistra alla tua pagina. Questo darà un ordine alla stessa invece di avere un guazzabuglio di testo e immagini sparsi qua e la; puoi anche aggiungere colonne per dare ulteriore organizzazione alla tua pagina, conferendo all’impaginazione un aspetto più da opuscolo, ma dovrà prima essere pensato per garantire che sia attraente per il pubblico.

06 13

MANTERE L’ALLINEAMENTO

Dopo aver trascorso tanto tempo a creare e a scrivere contenuti, sono sicuro che l’ultima cosa che vorresti è che il tuo progetto grafico risulti disordinato. Un design disordinato ti darà un immagine poco professionale e rifletterà negativamente sul brand. Un semplice consiglio è quella di scegliere una linea, da qualche parte sulla pagina, e allineare la grafica e il testo con essa. Tale linea può essere orizzontale o verticale e farà in modo che il tuo testo e la tua grafica non appaiano casuali.

12

Un modo ancora più semplice per farlo è quello di aggiungere un allineamento a sinistra alla tua pagina. Questo darà un ordine alla stessa invece di avere un guazzabuglio di testo e immagini sparsi qua e la; puoi anche aggiungere colonne per dare ulteriore organizzazione alla tua pagina, conferendo all’impaginazione un aspetto più da opuscolo, ma dovrà prima essere pensato per garantire che sia attraente per il pubblico.

06 13

SCEGLIERE SOLO TRE CARATTERI L’utilizzo di troppi tipi di carattere peggiorerà, senza ombra di dubbio, l’intero aspetto grafico. L’esagerazione è sempre una componente negativa.

07 7

Assicurati che la scelta dei caratteri sia appropriata per il tuo marchio e il tuo pubblico, ma ricorda che “di più” non significa di meglio, anzi, direi proprio il contrario. Quando scegli i font, assicurati di accoppiarli con saggezza. Ci sono alcune combinazioni provate che ti possono aiutare nella scelta, ad esempio, accoppiare un carattere di visualizzazione ad alto impatto con un carattere sans serif più sottile. Questa è una combinazione ad alto contrasto che fa un ottimo lavoro catturando l’attenzione. Quando si scelgono i font per un supporto formale, attenersi alla scelta di due serie di font provenienti da una famiglia simile. Questo creerà un look classico ed elegante che funziona alla grande per report o libri.

14

15

SCEGLIERE SOLO TRE CARATTERI L’utilizzo di troppi tipi di carattere peggiorerà, senza ombra di dubbio, l’intero aspetto grafico. L’esagerazione è sempre una componente negativa.

07 7

Assicurati che la scelta dei caratteri sia appropriata per il tuo marchio e il tuo pubblico, ma ricorda che “di più” non significa di meglio, anzi, direi proprio il contrario. Quando scegli i font, assicurati di accoppiarli con saggezza. Ci sono alcune combinazioni provate che ti possono aiutare nella scelta, ad esempio, accoppiare un carattere di visualizzazione ad alto impatto con un carattere sans serif più sottile. Questa è una combinazione ad alto contrasto che fa un ottimo lavoro catturando l’attenzione. Quando si scelgono i font per un supporto formale, attenersi alla scelta di due serie di font provenienti da una famiglia simile. Questo creerà un look classico ed elegante che funziona alla grande per report o libri.

14

15

08

STABILIRE UNA GERARCHIA VISIVA La gerarchia visiva è l’uso di dimensioni e colori che enfatizzano un elemento piuttosto che un altro per attirare l’attenzione. Ciò diventa particolarmente importante nelle pagine che evidenziano diversi elementi di testo. In più post di un blog, ad esempio, la dimensione viene utilizzata per stabilire la gerarchia. L’intestazione nella parte superiore dell’articolo dovrebbe essere abbastanza grande da attirare l’attenzione del lettore per prima. Anche le intestazioni di secondo livello dovrebbero essere grandi, anche se non grandi come l’intestazione principale e il testo del paragrafo, invece, deve essere più piccolo. Senza una gerarchia visiva, il lettore non sarà in grado di determinare l’ordine in cui le informazioni dovrebbero essere lette.

16

17

08

STABILIRE UNA GERARCHIA VISIVA La gerarchia visiva è l’uso di dimensioni e colori che enfatizzano un elemento piuttosto che un altro per attirare l’attenzione. Ciò diventa particolarmente importante nelle pagine che evidenziano diversi elementi di testo. In più post di un blog, ad esempio, la dimensione viene utilizzata per stabilire la gerarchia. L’intestazione nella parte superiore dell’articolo dovrebbe essere abbastanza grande da attirare l’attenzione del lettore per prima. Anche le intestazioni di secondo livello dovrebbero essere grandi, anche se non grandi come l’intestazione principale e il testo del paragrafo, invece, deve essere più piccolo. Senza una gerarchia visiva, il lettore non sarà in grado di determinare l’ordine in cui le informazioni dovrebbero essere lette.

16

17

CONTROLLA LA GRAMMATICA, L’ORTOGRAFIA E LA PUNTEGGIATURA

09

Troppe grammatiche, errori di ortografia o di punteggiatura possono rapidamente alienare il lettore. È un segno sicuro che non ti sei preso del tempo per correggere il lavoro dando una sensazione di poca professionalità al lettore. Alcuni piccoli errori di battitura sono comprensibili, ma dovresti sempre dedicare alcuni minuti a ripassare il lavoro e assicurarti di aver corretto tutti gli eventuali errori.

18

19

CONTROLLA LA GRAMMATICA, L’ORTOGRAFIA E LA PUNTEGGIATURA

09

Troppe grammatiche, errori di ortografia o di punteggiatura possono rapidamente alienare il lettore. È un segno sicuro che non ti sei preso del tempo per correggere il lavoro dando una sensazione di poca professionalità al lettore. Alcuni piccoli errori di battitura sono comprensibili, ma dovresti sempre dedicare alcuni minuti a ripassare il lavoro e assicurarti di aver corretto tutti gli eventuali errori.

18

19

10

GLI SPAZI BIANCHI NON SONO SINONIMO DI POCA FANTASIA Non cadere nella trappola di pensare che è necessario riempire ogni spazio disponibile con la grafica. Lo spazio bianco è una parte perfettamente normale e spesso necessaria nel progetto grafico. “Whitespace” è la parte della pagina senza niente, senza immagini, senza parole, senza disegni grafici e serve a dare respiro all’occhio evidenziando solo ciò che è necessario portare all’occhio del lettore.

20

21

10

GLI SPAZI BIANCHI NON SONO SINONIMO DI POCA FANTASIA Non cadere nella trappola di pensare che è necessario riempire ogni spazio disponibile con la grafica. Lo spazio bianco è una parte perfettamente normale e spesso necessaria nel progetto grafico. “Whitespace” è la parte della pagina senza niente, senza immagini, senza parole, senza disegni grafici e serve a dare respiro all’occhio evidenziando solo ciò che è necessario portare all’occhio del lettore.

20

21