Oggi esamineremo uno dei principi più basilari del design: l'allineamento. Questo argomento apparentemente semplice è in realtà piuttosto complesso ed è tra le competenze più in particolare carenti nei designer di oggi.
Una conoscenza approfondita di come e quando utilizzare determinati allineamenti ti renderà immediatamente un designer migliore e rimarrà un tassello fondamentale per tutto ciò che creerai durante il resto della tua carriera.
Introduzione all'Allineamento
Per molti, una discussione sull'allineamento può sembrare un esercizio arbitrario. Tale teoria del design di base è sicuramente solo per le persone che non hanno mai progettato nulla nella loro vita, non per la comunità professionale che frequenta siti come questi. Destra?
Io stesso vorrei sostenere l'argomento che tale discussione è per i principianti affermando che una solida conoscenza dell'allineamento visivo è una base imbattibile per tutti i tipi di design. È il tipo di conoscenza che, una volta afferrato, userai su ogni singolo layout che crei come designer.
Tuttavia, nonostante l'idea che questi concetti siano al centro di ciò che facciamo come designer, l'allineamento sembra essere una fonte primaria della maggior parte del design scarso che vedo oggi sul web.
I designer autodidatti spesso hanno una comprensione intuitiva di come utilizzare gli allineamenti, ma questo può e fallisce senza una conoscenza esplicita a sostegno.
Lining Things Up
L'idea essenziale dell'allineamento è la mente incredibilmente semplice: allineare le cose. Al di fuori del design organico, che è un argomento completamente diverso, ogni elemento che si posiziona su una pagina dovrebbe essere accompagnato da un processo logico di pensiero sul suo posizionamento.
Di nuovo, questa è roba fondamentale, giusto? Tutti lo fanno già? destra? Sbagliato. Considera il seguente sito che è stato recentemente presentato alla nostra galleria CSS. Io uso questo non come un esempio meschino ma uno strumento didattico. Il designer è un ragazzo fantastico che sta appena iniziando. Sta migliorando le sue capacità quotidianamente ed è impaziente di imparare.
Questo esempio è estremamente tipico ed è esattamente il tipo di cosa che vediamo ogni giorno nelle nostre gallerie. Il valore estetico qui non è male. I colori vivaci e le trame interessanti catturano la tua attenzione piuttosto bene. Tuttavia, l'allineamento qui ha davvero mancato il bersaglio.
I problemi qui possono essere difficili da individuare per molte persone. Per questo motivo, consiglio sempre di semplificare un progetto per esaminare le forme di base. Mi vedrai fare questo in molti degli articoli che scrivo sul design e dovresti assolutamente provarlo su alcuni dei tuoi progetti.
Ora che vediamo gli oggetti grafici in uno stato semplificato, possiamo analizzare meglio il volume di spazio che occupano e risolvere eventuali problemi di allineamento.
Notare che improvvisamente gli elementi sulla pagina sembrano sparsi. L'area del contenuto principale nella parte inferiore non si allinea con il banner appeso in alto a sinistra o con gli elementi sparsi in alto a destra. Inoltre, il logo di Facebook sembra piccolo e isolato da solo, e il titolo è scaglionato lontano dal bordo della navigazione, che è scaglionato dal margine del contenuto.
Sebbene questo design fosse abbastanza decente quando lo stavamo solo sentendo, ora vediamo che potrebbe usare molte ristrutturazioni. Da qui ci sono due cose chiave che devi affrontare: allineamento e spazio negativo.
Questi concetti sono strettamente legati l'uno all'altro. Lavorare con lo spazio negativo ha molto a che fare con la focalizzazione sulle lacune e l'applicazione della simmetria di base. Per ulteriori informazioni sulla corretta linea di condotta relativa allo spazio negativo, leggi la mia guida allo spazio negativo oltre alle sei revisioni.
In questo articolo andremo avanti concentrandoci maggiormente su come utilizzare gli allineamenti di base che hai familiarità con i layout complessi.
Allineamento centrale
I layout centrati sono il metodo di scelta per quasi ogni persona sul pianeta? tranne i designer. Per qualche ragione, centrare gli oggetti sulla pagina sembra proprio quello che dovresti fare. Sicuramente il lavoro principale di un designer è semplicemente centrare gli oggetti!
Mi sono imbattuto in questo problema alcuni anni fa quando ho distribuito un progetto che avevo creato a uno sviluppatore per codificarlo. Quando mi ha mostrato la versione finale, tutto era stato spostato da allineato a sinistra al centro allineato! Ha spiegato semplicemente che aveva sempre preferito centrare il centro di tutto, quindi è bello.
La realtà è che centrare ogni oggetto è la scelta di allineamento più debole che puoi fare.
Non ci sono spigoli da seguire, quindi i tuoi occhi devono fare molto più lavoro per prendere il layout generale e assorbire il contenuto specifico.
Quando usare
Questo non significa affatto che gli allineamenti al centro dovrebbero essere sempre evitati. Io stesso li ho usati su demo per questo stesso sito. La chiave è sapere quando usarli.
Trovo che il miglior scenario possibile per un allineamento del centro sia quando c'è pochissima su una pagina. Più il layout è complicato, meno gli allineamenti del centro funzionano. Se una determinata pagina non ha molto in corso, gli allineamenti al centro possono fare una dichiarazione potente.
Allineamento a sinistra
Gli allineamenti a sinistra, anche se forse noiosi, sono solidi e dovrebbero essere il tuo allineamento predefinito per gran parte del lavoro che fai.
Siamo abituati a vedere i contenuti organizzati in modo allineato a sinistra. Apri un libro o un giornale e troverai molti allineamenti a sinistra. Sfoglia gli annunci nella tua posta indesiderata, ancora una volta, un sacco di allineamenti a sinistra. Li vedrai su Facebook, i risultati di ricerca di Google, i flussi di Twitter e ogni altro sito web principale.
Gli allineamenti a sinistra governano il mondo, o almeno quelle società che leggono da sinistra a destra. Non dovresti dipendere completamente da un allineamento a sinistra per tutto, solo sapere che è la strada sicura.
Quando usare
Utilizzare in tutti i tipi di situazioni, ma soprattutto quando c'è molto testo. Dai un'occhiata alla pagina che stai leggendo ora.Se questo fosse allineato al centro sarebbe un incubo.
Nota che, specialmente sul web, allineare a sinistra qualcosa non significa che non puoi centrarlo. Ad esempio, un div HTML spesso contiene un mucchio di paragrafi e immagini allineati a sinistra, ma è centrato sulla pagina usando CSS.
Giusto allineamento
Gli allineamenti giusti sono probabilmente i più rari. Dal momento che leggiamo da sinistra a destra, sembra strano che qualcosa si aggrappi al bordo destro.
Tuttavia, è un allineamento perfettamente forte che può essere utilizzato a fondo nei tuoi progetti, specialmente nella stampa (tende ad essere ancora più inaspettato online).
Quando usare
Spesso, anche se non sempre, un giusto allineamento trasmetterà un senso di unicità. Se stai progettando qualcosa che deve distinguersi e sentirsi diverso, un giusto allineamento è un ottimo punto di partenza.
Giustificare gli allineamenti sul Web
L'allineamento che abbiamo tralasciato è ovviamente giustificato. Questo entra in gioco con forza quando leghi insieme un intero sito come elemento concettuale.
La cosa interessante del design per il web è che spesso implica una combinazione di allineamenti. Probabilmente hai sentito che i designer suggeriscono di non mischiare mai allineamenti, ma questo consiglio non funziona nel mondo reale.
Invece devi prendere decisioni sia per gli elementi all'interno di una pagina che per gli elementi di pagina nel loro complesso. Si noti come ho iniziato questa discussione guardando un esempio di visualizzazione dell'allineamento di un sito nel suo insieme, ma poi ho proceduto con la discussione dei singoli allineamenti degli oggetti.
Una volta che hai stabilito un allineamento per il testo e le immagini sulla tua pagina, mettere tutto insieme spesso comporta il lancio di tutti i contenuti della pagina in un allineamento giustificato. Anche se puoi avere un bordo sfilacciato, giustificare tutto può aggiungere quel tocco di rifinitura che mancava nell'esempio originale.
Notate come nel sito sopra c'è un forte allineamento a sinistra, ma anche tutto sul lato destro è stato allineato per creare un aspetto giustificato e coeso. Il piccolo pulsante di accesso si allinea con le immagini del browser, che si allineano con il lato destro dell'icona del calendario.
Questo è un design pulito e professionale. Potrebbe non essere adatto a tutti i progetti, ma spesso riesco a vedere i designer che cercano di raggiungerlo e fallire e ho voluto affrontare alcune delle possibili cause.
Questo è uno dei motivi per cui i sistemi di grid sono così popolari. Lanciare tutto su una griglia assicura che i tuoi allineamenti siano robusti e facili da seguire.
Conclusione
Per riassumere, quando possibile, utilizzare allineamenti forti che rendano facile per il tuo occhio seguire il flusso di informazioni. Gli allineamenti al centro sono accettabili, ma diventano più difficili da implementare correttamente quando il contenuto di una pagina aumenta.
Ricorda che l'allineamento si riferisce a oggetti specifici in una pagina e alla disposizione degli oggetti nel loro complesso. Trascorri del tempo su ogni progetto assicurandoti che tutti i tuoi elementi si allineino correttamente con tutto ciò che si trova sulla pagina. Questo si applica verticalmente e orizzontalmente lungo tutti i bordi del disegno.