Share
Il design è pieno di "forze invisibili", che aiutano a comunicare in modo pulito e chiaro. Per quanto tu possa essere tentato di ossessionare per ottenere il font giusto o scegliere la giusta combinazione di colori, il tuo progetto fallirà miseramente se non presti attenzione a queste forze invisibili.
Questo è il primo di una serie in tre parti su queste forze, quindi iniziamo con l'allineamento, la direzione e la messa a fuoco.
Per pensare davvero attraverso le forze invisibili del design, devi smettere di pensare al tuo design come caratteri, colori, immagini e testo e iniziare a pensare a tutte queste cose come "elementi".
Ciascuna delle tue intestazioni è 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, potresti anche chiamarli "sotto-elementi". Il tuo logo potrebbe avere un elemento "simbolo" e un elemento "testo". E ogni lettera nella parte del testo potrebbe essere considerata un suo elemento.
Tutto questo parlare di elementi mi fa pensare alla lezione di chimica (che non ho mai preso), ma in realtà è appropriata. Quando sistemi gli elementi correttamente, ottieni qualcosa di esplosivo che salta fuori dalla pagina. Quando li disponi a casaccio, ottieni un disastro.
Il design è impegnativo perché devi prendere uno spazio bidimensionale noioso e renderlo interessante, mentre comunichi chiaramente. Soprattutto oggi, con minuscoli schermi mobili e indossabili, è importante farlo nel modo più efficiente possibile. Ogni piccolo pixel deve fare il suo lavoro.
Questo è il motivo per cui l'allineamento è così importante. Allineando gli elementi tra loro, puoi dire molto.
Ad esempio, questi quadrati sono tutti allineati.
E se cambiamo il modo in cui sono allineati, cambia completamente la composizione.
E se rompiamo quell'allineamento, sembra caotico.
Se, al posto dei quadrati, utilizziamo le icone dei social media, puoi vedere direttamente come l'allineamento diventa utile. Cosa succede se queste icone dei social media:
Invece sembrava così:
Quando allinea gli elementi, crei un senso di direzione con una linea immaginaria. I designer davvero fantasiosi chiamano questa linea immaginaria come un "asse". Pensalo come un asse su una ruota: tutto il peso della ruota gira intorno a quell'asse. Deve essere equilibrato. Allo stesso modo, un asse aiuta a controllare l'equilibrio di una composizione.
Vedi tutti questi elementi che sono allineati? Potresti chiamarli un asse su questa composizione.
Se allineare altri elementi vicino a quell'asse, continua a dominare e controlla la composizione.
Tuo nonno aveva ragione: devi stare attento con le tue asce. Ad esempio, evitare di mescolare il testo allineato al centro con una composizione "asimmetrica".
Tuttavia disponi il tuo testo: centrato, a sinistra o a destra (evita di giustificare il tipo sul web), crei un asse lungo quell'allineamento.
Quando si centra il testo, si crea un asse e tutto il peso del testo gira intorno a quell'asse. Anche il resto della composizione vuole essere centrato attorno a quell'asse.
Quindi, se lanci del testo a filo a sinistra accanto a quel testo centrato, la composizione inizia a diventare confusa. Ora hai due assi che si combattono l'un l'altro, e non è un pensiero spaventoso?
L'eccezione a questo è quando un elemento allineato al centro si estende per tutta la larghezza della composizione e gli elementi a sinistra oa filo a destra si trovano all'interno di quella composizione. Quindi gli assi non si combattono l'un l'altro.
Nota che entrambe le colonne di contenuti sono impostate a livello di sinistra.
Questo è uno schema che si vede comunemente nella progettazione mobile. In questa schermata dell'app Yelp, le barre dei menu in alto e in basso hanno un orientamento centrato, mentre il resto dello schermo è impostato a filo a sinistra.
Oppure, puoi creare un asse fuori dalla grondaia facendo una colonna a filo a destra e l'altra colonna a sinistra.
Finora, mi sono concentrato sugli assi verticali. Puoi anche avere assi orizzontali (o diagonali, ma ciò sarà raro nel web e nel design mobile).
Quando due assi forti si incrociano, generalmente creerai un'area focale. L'occhio segue naturalmente qualsiasi asse forte, quindi se due assi si intersecano, l'occhio passerà molto tempo in quel punto.
In un dato momento in un progetto Web o mobile, è probabile che si desideri concentrare l'attenzione dell'utente, quindi è possibile utilizzare gli assi che si intersecano per attirare l'attenzione su quel punto, come in questa pagina di destinazione:
Il testo a filo a sinistra crea un asse e l'allineamento del pulsante "acquista ora" con l'immagine ne crea un altro. Dove si intersecano, ha creato un'area focale.
Utilizzando l'allineamento per costruire assi, controllare la direzione e stabilire le aree focali, è possibile soddisfare meglio gli obiettivi di progettazione: aumentare la leggibilità o generare conversioni.
Attaccati al mio prossimo articolo, dove parlerò di come puoi regolare il dimensionamento dei tuoi elementi per realizzare disegni armoniosi, belli e chiari.
Accentsconagua