() translation by (you can also view the original English article)
Il design è pieno di "forze invisibili", che aiutano con una comunicazione pulita e chiara. Così come potreste essere tentati di ossessionarvi a ottenere il carattere giusto, o scegliere la giusta combinazione di colori, il vostro design fallirà miseramente se non prestate attenzione a queste forze invisibili.
Questo è il primo di una serie di tre parti su queste forze, così cominciamo con l'allineamento, la direzione e la messa a fuoco.
Introduzione degli "Elementi"
Per davvero analizzare a fondo le forze invisibili del design, è necessario smettere di pensare al vostro design come font, colori, immagini e testo e cominciare a pensare a tutte queste cose come "elementi".
Ognuno dei vostri titoli è un "elemento", ogni paragrafo del corpo del testo è un grande "elemento" e ogni immagine è un "elemento".
All'interno di ciascuno di questi elementi c'è un altro elemento – si potrebbe anche chiamarli "sub-elementi". Il vostro logo potrebbe avere un elemento "simbolo" e un elemento "testo". E ogni lettera nella parte del testo potrebbe essere considerato un proprio elemento.
Tutto questo parlare di elemento mi sta facendo pensare a una classe di chimica (che non ho mai fatto), ma è effettivamente opportuna. Quando gli elementi vengono disposti correttamente, si ottiene qualcosa di esplosivo che salta fuori dalla pagina. Quando li disponete a casaccio, ottenete un vero disastro.
Allineamento
Il design è impegnativo, perché dovete prendere un noioso spazio bidimensionale e renderlo interessante, mentre comunicate chiaramente. Soprattutto oggi, con i piccoli schermi mobili e indossabili, è importante fare questo nel modo più efficiente possibile. Ogni piccolo pixel deve fare il suo lavoro.
Ecco perché l'allineamento è così importante. Allineando gli elementi tra loro, potete dire molto.
Ad esempio, questi quadrati sono tutti allineati.
E se cambiamo il modo in cui stanno allineati, cambiamo completamente la composizione.
E se spezziamo tale allineamento, sembra caotico.
Se, invece dei quadrati usiamo le icone dei social media, si può vedere direttamente come l'allineamento diventa utile. Cosa succede se queste icone dei social media:
Invece si presentassero così:
Direzione
Quando si allineano gli elementi, si crea un senso di direzione su di una linea immaginaria. I designer veramente eleganti chiamano questa linea immaginaria un "asse". Pensate a questo come un asse di una ruota: tutto il peso della ruota gira intorno a quell'asse. Deve essere bilanciato. Allo stesso modo, un asse aiuta a controllare il bilanciamento di una composizione.
Vedete tutti questi elementi che sono allineati? Potreste chiamarli un asse in questa composizione.
Se allineate altri elementi vicino a quell'asse, ancora domina e controlla la composizione.
Vostro nonno aveva ragione: dovete stare attenti con i vostri assi. Per esempio, evitate di combinare il testo allineato al centro con una composizione "asimmetrica".
Tuttavia organizzate il vostro testo: centrato, a sinistra o a destra (evitate di giustificare i caratteri sul web), create un asse lungo tale tracciato.
Quando centrate il testo, create un asse, e tutto il peso del testo sta girando intorno a quell'asse. Il resto della composizione vuole essere centrato intorno a quell'asse.
Così, se gettate qualche testo a sinistra accanto a quel testo centrato, la composizione inizia a diventare confusa. Ora avete due assi che sono in lotta tra loro, e non è un pensiero spaventoso?
L'eccezione a questo è quando un elemento allineato al centro si estende lungo la larghezza della composizione, e gli elementi a sinistra o a destra sono all'interno di tale composizione. Quindi gli assi non stanno combattendo tra di loro.
Notate che entrambe le colonne del contenuto sono impostate a sinistra.
Questo è un modello che vedete comunemente nella progettazione per dispositivi mobili. In questa schermata dell'app Yelp, le barre dei menu superiore e inferiore hanno un orientamento centrato, mentre il resto dello schermo è impostato a sinistra.
O, potreste creare un asse fuori dalla spaziatura facendo una colonna a destra e l'altra colonna a sinistra.
Messa a fuoco
Finora, mi sono concentrato sugli assi verticali. Potete avere anche assi orizzontali (o diagonali, ma sarà raro nel web e sui dispositivi mobili).
Quando si incrociano due assi forti, generalmente si creerà una zona focale. L'occhio segue naturalmente qualsiasi asse forte, quindi se si intersecano due assi, l'occhio trascorrerà un sacco di tempo in quel punto.
In un dato momento in un design per il web o per i dispositivi mobili, c'è probabilmente qualcosa che volete su cui l'utente si concentri, quindi potete utilizzare gli assi che si intersecano per attirare l'attenzione su quel punto, per esempio come in questa landing page:
Il testo a sinistra crea un asse e l'allineamento del pulsante "acquista ora" con l'immagine ne crea un altro. Dove si intersecano, ha creato una zona focale.
Conclusione
Utilizzando l'allineamento per costruire gli assi, controllare la direzione e stabilire le zone focali, potete soddisfare al meglio gli obiettivi di progettazione: se sta migliorando la leggibilità, o guidando una conversione.
Restate nei paraggi per il mio prossimo articolo, dove parlerò di come potete regolare il dimensionamento degli elementi per fare design che siano armoniosi, belli e chiari.
