Armonia orizzontale È una di quelle cose che sembra solo notare quando manca. L'armonia orizzontale è la relazione tra gli elementi attraverso un design. È più che linee e regole; è anche una griglia invisibile che crea un senso di spazio per elementi di design.
Come puoi creare l'armonia orizzontale? Mentre alcune tecniche sono più facili di altre, non è un concetto travolgente. Ci vuole solo un po 'di pianificazione. Pensando a elementi come una griglia di riferimento, lo spazio tra le righe di testo, il posizionamento degli elementi e l'estetica complessiva, l'armonia orizzontale è solo una parte del processo di progettazione.
Griglie di base
Le griglie di riferimento, uno strumento di design popolare nei progetti stampati, sono meno spesso parlate nel web design. La ragione è semplice: molti progetti web (e digitali) presentano un'unica colonna di testo.
La griglia di base è una linea immaginaria su cui si basa il testo. Ogni lettera nel testo poggerà su questa griglia in modo da allineare più colonne di tipo. (Questo impedisce alle colonne di avere un aspetto frastagliato.)
Le griglie di base possono funzionare praticamente per qualsiasi scopo tipografico e la maggior parte dei software di progettazione include strumenti per la creazione di specifiche della griglia di base. Questo diventa un po 'più complicato online ma ci sono anche linee di base CSS, incluso un bel esempio di Smashing Magazine.
La griglia di base funziona solo se applicata a ogni colonna del layout, dove il tipo inizia e termina nella stessa posizione (comunemente la parte superiore e inferiore di una pagina). Inoltre, la griglia di base viene in genere applicata all'intera pagina di un progetto digitale e alle pagine di diffusione (o di fronte) nei progetti di stampa.
Le griglie di riferimento sono diverse rispetto alle altezze delle linee o alle specifiche principali, principalmente perché una griglia di base determina dove riposano le lettere. La griglia può forzare le linee da digitare per essere più vicine o distanziate più distanti. (In Adobe InDesign, ad esempio, una griglia di base sovrascrive il comando, forzando il testo a vivere sulla griglia appropriata.)
La cosa bella di una griglia di base è la pulizia del testo. Quando tutto si allinea in modo organizzato, il risultato è un lettering che è facile da leggere e guardare. Non ci sono sentimenti sconvolgenti. C'è un motivo per cui libri, giornali e riviste (che si basano su più colonne di testo su una pagina) lo fanno da anni.
Suggerimento: Imposta una griglia di base
- InDesign: nel menu Modifica, seleziona Preferenze, quindi Griglie. È possibile impostare un colore per la griglia della linea di base, dove inizia la griglia (in cima alla pagina o margine superiore) e incrementa (altezza della griglia). Lo snap alle guide si applicherà alla griglia della linea di base.
principale
In primo piano, la quantità di spazio tra le righe di testo è un altro strumento importante quando si crea l'armonia attraverso la pagina o lo schermo. Il testo dovrebbe avere un vantaggio costante.
Pensala in questo modo: se il Paragrafo 1 è di 14 punti con 16 punti di vantaggio e il Paragrafo 2 è di 14 punti con 12 punti di vantaggio, causerà angoscia ai lettori. Questo cambiamento è difficile all'occhio e può rendere la lettura una sfida. Questo è vero anche con una singola colonna di testo.
Soprattutto nei progetti stampati, la combinazione di una guida coerente e una griglia di base complementare sono ideali. Questo abbinamento assicurerà che il tipo si allinea da una colonna all'altra e abbia una sensazione costante dall'alto verso il basso.
Mantieni la distanza coerente
La quantità di spazio tra gli elementi è altrettanto importante. C'è una riga di spazio tra i paragrafi? Che dire tra l'intestazione e il testo principale? O una foto e il testo attorno ad esso?
Determina le regole di spaziatura che funzionano con la griglia di riferimento e le specifiche principali per garantire che gli spazi attorno agli elementi siano coerenti. Sarà più facile creare e mantenere la coerenza con questi spazi se anche questi sono impostati per funzionare con le specifiche del tipo.
Fai un ulteriore passo avanti e considera anche lo spazio verticale: larghezza della grondaia, bordi del testo e margini. Anche questi spazi dovrebbero far parte del tuo schema di spaziatura coerente.
Line It Up
Il testo è 14 punti? Costruisci gli elementi per abbinarli.
Dopo aver avuto una buona sensazione per il testo in un progetto, entreranno in gioco altri elementi. Questi elementi dovrebbero allinearsi anche sulla griglia invisibile. Testo, foto, linee, pulsanti e ogni altro elemento di design dovrebbero funzionare tutti insieme quando li guardi attraverso la pagina o lo schermo.
Questo può richiedere un po 'di pianificazione. Quando si tratta di immagini, delineare i posizionamenti e il modo in cui ognuno poggerà sulla griglia orizzontale. La parte inferiore della cornice digitale deve poggiare sulla griglia della linea di base con il testo e fermarsi in allineamento con la parte superiore delle lettere maiuscole per una perfetta armonia.
Pensa a pezzi piccoli, come pulsanti o elementi di navigazione, allo stesso modo. Con le parti piccole si considerano le altezze verticali di questi elementi in modo che corrispondano alla parte iniziale del testo o a un multiplo di esso. (Ricorda solo di considerare qualsiasi spaziatura aggiuntiva tra le linee).
Pensa in blocchi
Se tutta questa griglia di riferimento e quella di testa ti fanno girare la testa, pensare a una griglia in blocchi potrebbe essere più facile. La carta grafica vecchia scuola che hai usato nella scuola elementare può essere lo scheletro perfetto per questa applicazione. (La suite di software Adobe ha anche una modalità di griglia che puoi applicare allo sfondo durante lo sketch digitale.) Pianifica il tuo progetto di design in modo che ogni pezzo si adatti a un determinato numero di blocchi.
Ad esempio, il testo è alto due blocchi. Altri elementi saranno uguali multipli di testo, rendendo le immagini alte otto blocchi e i pulsanti alti quattro blocchi. La spaziatura tra gli elementi è anche di due blocchi, verticalmente e orizzontalmente. (Prendi l'immagine?)
Suggerimento: Imposta una griglia di documenti
- InDesign: sotto i menu di InDesign Modifica (in Windows), seleziona Preferenze, quindi Griglie. È possibile impostare un colore per la griglia, specificare la spaziatura orizzontale e verticale e le suddivisioni. La griglia può essere impostata per apparire dietro o davanti agli oggetti nel layout.
- Photoshop: sotto il menu di Photoshop Modifica (in Windows), selezionate Preferenze, quindi Guide, Grid e Slice. Imposta le specifiche per ogni griglia, inclusi colore, spaziatura e suddivisioni.
Pensiero orizzontale per progetti verticali
L'armonia orizzontale non è solo qualcosa su cui riflettere quando si lavora su progetti che si estendono su un lungo spazio, può essere altrettanto importante nei progetti orientati verticalmente.
Considera quanto sia importante l'armonia orizzontale per un sito Web con funzionalità di scorrimento parallasse. Ogni? Schermo? deve lavorare in armonia orizzontale mentre si muove su e giù. Un sito web mobile, spesso considerato con orientamento verticale, ha bisogno di muoversi in un modo che abbia senso.
Lo stesso vale per i progetti di stampa più piccoli. Guarda un'etichetta su un contenitore per bevande. Il testo è probabilmente impostato in una griglia che avvolge il contenitore.
Conclusione
L'armonia orizzontale è ovunque. La chiave è che non lo vedi davvero. I progetti sembreranno giusti quando sono lì, e si sentiranno un po 'spenti quando non lo sono.
Come designer, è importante pensare a griglie e allineamento durante tutto il processo di progettazione. Il risultato finale di un progetto è creare qualcosa che sia leggibile, utilizzabile ed efficace. L'armonia orizzontale può aiutarti a raggiungere questo obiettivo.