Design101: utilizzo di forti allineamenti
Oggi esamineremo uno dei principi di base del design: l'allineamento. Questo argomento ingannevolmente semplice è in realtà piuttosto complesso ed è oggi tra le competenze più carenti nei designer.
Una forte comprensione di come e quando utilizzare determinati allineamenti ti renderà immediatamente un progettista migliore e rimarrà un elemento fondamentale per tutto ciò che creerai durante il resto della tua carriera.
Esplora Envato Elements
Introduzione all'allineamento
Per molti, una discussione sull'allineamento può sembrare un esercizio arbitrario. Tale teoria del design di base è sicuramente solo per gli individui che non hanno mai progettato nulla nella loro vita, non per la comunità professionale che frequenta siti come questi. Destra?
Personalmente vorrei sostenere l'argomentazione secondo cui tale discussione è per i principianti affermando che una solida comprensione dell'allineamento visivo è una base imbattibile per tutti i tipi di design. È il tipo di conoscenza che, una volta acquisita, utilizzerai su ogni singolo layout che crei come designer.
Tuttavia, nonostante l'idea che questi concetti siano alla base di ciò che facciamo come designer, l'allineamento sembra essere una fonte primaria della maggior parte del design scadente che vedo oggi sul web.
I progettisti autodidatti spesso hanno una comprensione intuitiva di come utilizzare gli allineamenti, ma questo può e fallisce senza una conoscenza esplicita per il backup.
Allineare le cose
L'idea essenziale dell'allineamento è la mente insensibilmente semplice: allineare le cose. Al di fuori del design organico, che è un argomento completamente diverso, ogni elemento che inserisci in una pagina dovrebbe essere accompagnato da un processo di pensiero logico per quanto riguarda il suo posizionamento.
Ancora una volta, questa è roba di base, giusto? Tutti lo fanno già ... giusto? Sbagliato. Considera il seguente sito che è stato recentemente inviato alla nostra galleria CSS. Non lo uso come esempio mediocre, ma come strumento di insegnamento. Il designer è un ragazzo fantastico che ha appena iniziato. Migliora quotidianamente le sue abilità ed è desideroso di imparare.
Questo esempio è estremamente tipico ed è esattamente il tipo di cosa che vediamo ogni giorno nelle nostre presentazioni in galleria. 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 segno.
Qui i problemi 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.
Si noti che improvvisamente gli elementi sulla pagina sembrano sparsi. L'area di contenuto principale in basso non si allinea con il banner sospeso in alto a sinistra o gli elementi sparsi in alto a destra. Inoltre, il logo di Facebook sembra piccolo e incagliato da solo, e il titolo è sfalsato dal bordo della navigazione, che è sfalsato dal bordo del contenuto.
Anche se questo design sembrava abbastanza decente quando lo stavamo solo sentendo, ora vediamo che potrebbe usare molta ristrutturazione. 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 concentrazione sugli spazi vuoti e l'applicazione della simmetria di base. Per ulteriori informazioni sul corretto corso dell'azione per quanto riguarda lo spazio negativo, leggi la mia Guida allo spazio negativo su Sei revisioni.
In questo articolo andremo avanti concentrandoci maggiormente su come utilizzare gli allineamenti di base che hai familiarità con layout complessi.
Allineamento al centro
I layout centrati sono il metodo di scelta per quasi tutte le persone sul pianeta ... tranne i designer. Per qualche motivo, centrare gli elementi sulla pagina sembra proprio quello che dovresti fare. Sicuramente il compito principale di un designer è semplicemente quello di centrare gli oggetti!
Mi sono imbattuto in questo problema alcuni anni fa quando ho consegnato un codice che avevo creato a uno sviluppatore per codificare. Quando mi mostrò la versione finita, tutto era stato spostato da sinistra allineata a centro allineata! Spiegò semplicemente che aveva sempre preferito allineare al centro tutto "così sembra bello".
La realtà è che centrare ogni elemento è la scelta di allineamento più debole che puoi fare.
Non ci sono bordi rigidi da seguire, quindi i tuoi occhi devono fare molto più lavoro sia per comprendere il layout generale che per assorbire il contenuto specifico.
Quando usare
Ciò non significa affatto che gli allineamenti centrali debbano sempre essere evitati. Io stesso li ho usati nelle demo proprio per questo sito. La chiave è sapere quando usarli.
Trovo che il miglior scenario possibile per un allineamento centrale sia quando c'è molto poco in una pagina. Più complicato è il layout, meno gli allineamenti centrali funzionano. Se una determinata pagina non ha molto da fare, gli allineamenti centrali possono fare una dichiarazione potente.
Allineamento a sinistra
Gli allineamenti a sinistra, sebbene discutibilmente 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, molti allineamenti a sinistra. Li vedrai su Facebook, sui risultati di ricerca di Google, sui flussi di Twitter e su tutti gli altri siti Web principali.
Gli allineamenti di 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, basta sapere che è la via 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 contiene spesso una serie di paragrafi e immagini allineati a sinistra, ma viene quindi centrato sulla pagina utilizzando CSS.
Allineamento a destra
Gli allineamenti a destra sono probabilmente i più rari. Dato che leggiamo da sinistra a destra, sembra strano che qualcosa si attacchi al bordo destro.
Tuttavia, è un allineamento perfettamente forte che può essere utilizzato accuratamente nei tuoi progetti, specialmente nella stampa (tende ad essere ancora più inaspettato online).
Quando usare
Spesso, sebbene non sempre, un allineamento corretto 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 fortemente quando si collega un intero sito come elemento concettuale.
La cosa interessante della progettazione per il Web è che spesso comporta una combinazione di allineamenti. Probabilmente hai sentito i designer suggerire di non mescolare mai gli 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 della pagina nel suo insieme. Notate come ho iniziato questa discussione guardando un esempio di visualizzazione dell'allineamento di un sito nel suo insieme ma poi ho proceduto alla discussione degli allineamenti di singoli elementi.
Una volta stabilito un allineamento per il testo e le immagini sulla tua pagina, metterlo tutto insieme spesso implica gettare tutto sulla pagina in un allineamento giustificato. Sebbene tu possa avere un bordo irregolare, giustificare tutto può aggiungere quel tocco di riordino finale che mancava nell'esempio originale.
Nota come nel sito sopra c'è un forte allineamento a sinistra, ma anche tutto sul lato destro è stato allineato per creare un aspetto coerente e giustificato. Il piccolo pulsante di accesso si allinea alle immagini del browser, che si allineano con il lato destro dell'icona del calendario.
Questo è un design pulito e professionale. Potrebbe non essere appropriato per tutti i progetti, ma spesso vedo i designer che cercano di raggiungerlo e non ci riescono e volevo affrontare alcune delle probabili cause.
Questo è uno dei motivi per cui i sistemi di griglia 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 forti allineamenti 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 all'aumentare del contenuto di una pagina.
Ricorda che l'allineamento si riferisce a elementi specifici di una pagina e alla disposizione degli oggetti nel suo insieme. Trascorso del tempo in ogni progetto assicurandoti che tutti i tuoi elementi si allineino correttamente con tutto ciò che è presente nella pagina. Questo si applica in verticale e in orizzontale lungo tutti i bordi del disegno.
