Come utilizzare suggerimenti ed esempi sugli allineamenti centrati

Oggi torneremo alle origini con un? Design 101? discussione sugli allineamenti. Gli allineamenti centrati sono un posto facile dove andare male e se non sai come maneggiarli correttamente, il risultato è una pagina molto mal strutturata.

Unisciti a noi mentre diamo un'occhiata al motivo per cui gli allineamenti centrati tendono ad essere deboli, dove dovresti evitarli e come dovresti usarli.

Allineamenti centrati

Una delle prime cose che imparerai in qualsiasi classe di layout di progettazione di base è che gli allineamenti centrati sono deboli. Ora, questa è una dichiarazione generale che potrebbe causare immediatamente la tua protesta, ma la esamineremo più approfonditamente in un minuto.

Gli allineamenti centrati non sono affatto usati solo da principianti e non designer, ma in realtà tendono a essere l'opzione giusta per questi gruppi. La ragione di questo è complicata. Per qualche ragione, sentiamo istintivamente che le cose dovrebbero essere centrate. Sappiamo che il design riguarda l'equilibrio e gli allineamenti centrati non sono nulla se non equilibrati, quindi hanno senso. Segretari, amministratori delegati, insegnanti e tutti gli altri modi di altri professionisti che si affidano al design del piede quasi sempre procedono dritti verso allineamenti centrati su qualsiasi progetto.

In pratica, gli allineamenti centrati sono spesso la fonte di problemi in un layout. Imparare sia come identificare che come risolvere questi problemi è un passo importante nella tua educazione iniziale alla progettazione.

Il problema con gli allineamenti centrati

È difficile spiegare i difetti degli allineamenti puramente centrati con la teoria, quindi diamo un'occhiata a un esempio. Diciamo che stai facendo piccoli volantini da distribuire per una festa imminente. Il risultato che otterrà un non-designer sarà quasi sempre simile a questo:

Questo non è un volantino orribile, anzi, ho visto molto peggio nel mondo reale. Tuttavia, per una serie di motivi, non è sicuramente quello che definirebbe un design forte. Se mi hai consegnato il volantino sopra e mi hai detto di migliorarlo il più possibile in soli tre minuti mantenendo la personalità generale, questo è quello che ti darei:

Questo design si sente semplicemente migliore, e non solo perché mi rifiuto di usare sempre il? Party LET? carattere tipografico, soprattutto quando si digita la parola "festa". Ho anche diviso il contenuto un po 'meglio, ho aggiunto alcuni punti di enfasi e, soprattutto, ho cambiato l'allineamento a sinistra.

Nota come l'allineamento a sinistra si sente molto ancorato. Il testo sulla pagina ha un chiaro punto di partenza e puoi seguire quel lato duro da cima a fondo. Nonostante il fatto che il primo volantino si senta? Equilibrato ?, non si sente affatto vicino come strutturato.

Quando stare lontano dagli allineamenti centrati

Va bene, così ottieni il punto: gli allineamenti a sinistra sono buoni, gli allineamenti centrati sono cattivi, quindi? La realtà è un po 'più complicata di così. Non c'è nulla di intrinsecamente negativo in un allineamento centrato, devi solo sapere come ottenerne correttamente uno se lo applicherai con qualsiasi successo.

La prima cosa che devi imparare è quando non implementare un allineamento centrato. La risposta qui è piuttosto semplice: quando hai un sacco di contenuti.

Come abbiamo visto nell'ultimo esempio, gli allineamenti centrati sono piuttosto scadenti per grandi blocchi di testo. La mancanza di un hard edge rende la lettura difficile e irregolare. Lo stesso vale per il fatto di basarsi su un layout centrato per la pagina nel suo complesso, la maggior parte delle volte, semplicemente non è l'idea migliore. Il wireframe del sito Web sottostante è piuttosto problematico dal punto di vista del layout.

Ora, non leggerlo come consiglio di non centrare il contenuto sulla pagina. C'è una differenza tra la creazione di un sito Web che utilizza un contenitore centrato e un sito Web che utilizza un allineamento del centro. Puoi facilmente avere il contenuto allineato a sinistra o a destra che è ancora centrato nella finestra del browser usando margine: 0 auto. Questa è un'altra conversazione interamente.

Estetica

Inoltre, non confondere questo come una questione di estetica. Come mostra la pagina qui sotto, puoi creare bellissimi siti che si basano molto sugli allineamenti centrati.

È molto importante in qualsiasi progetto analizzare i tuoi obiettivi. Se un grado significativo di leggibilità è uno di questi, e spesso dovrebbe essere, l'attrazione estetica è spesso completamente separata o addirittura direttamente in contrasto con questo obiettivo. Il trucco è trovare l'equilibrio tra i due.

Il risultato finale sarà quasi sempre completamente soggettivo. Il designer sopra ha deciso che questo pezzo di contenuto era abbastanza piccolo da essere allineato al centro. Potrei pensare che stia spingendo un po 'il limite, ma questo non significa che io abbia ragione e che lui / lei stia sbagliando, significa solo che tracciamo la linea in diversi punti.

Come utilizzare gli allineamenti centrati

Ora, con tutto ciò che è stato detto, non vi è alcun motivo per cui dovreste abbandonare del tutto gli allineamenti centrati. Fare ciò significherebbe rimuovere un elemento chiave dalla propria casella degli strumenti di layout. Ancora una volta, devi solo sapere come usare lo strumento per avere successo con esso.

Esistono un milione di modi diversi per implementare con successo un layout centrato, quindi non immaginare che i seguenti esempi siano completi. Tuttavia, possono servire come modo per iniziare a dare un'idea di un layout solido rispetto a uno debole.

Molto poco contenuto

Uno dei primi posti in cui puoi iniziare a pensare all'implementazione di un layout completamente centrato è quando hai poco contenuto. Guarda l'esempio qui sotto.

Questo ha perfettamente senso, se il problema principale con gli allineamenti centrati è che non reggono bene con un sacco di contenuti, allora probabilmente andranno bene se hai solo pochi elementi. In realtà, sono di solito meglio in queste circostanze. Se hai implementato un allineamento a sinistra con il disegno sopra, la pagina sarebbe probabilmente molto vuota. Tuttavia, con l'attuale layout centrato, sembra elegante e ben distanziato.

Applicazione selettiva

Evitare layout centrati per tutto tranne che per i design più semplici sembra un modo terribilmente restrittivo per progettare, e lo è. La chiave è non evitarli tutti insieme ma invece applicarli selettivamente entro un design più grande con un allineamento più forte.

La classe di layout di un principiante potrebbe insegnarti ad afferrare un allineamento e ad aderire ad esso, ma man mano che migliorerai scoprirai che mescolare gli allineamenti è spesso un ottimo modo per aggiungere una certa varietà a un disegno. Ad esempio, controlla la fantastica pagina qui sotto da Assistly.com.

Qui vediamo, nel complesso, che il layout contiene bordi sinistro e destro abbastanza consistenti. Tuttavia, ci sono parti molto specifiche che ritornano ad un allineamento centrato. Il titolo è il posto più naturale e più popolare per tentare questo. Titoli e sottotitoli grandi e centrati sembrano grandi in schemi giustificati. Notate anche le aree più piccole come le tre colonne in basso a sinistra, un altro posto naturale per l'allineamento centrato da implementare. Ancora una volta, ognuno di questi blocchi contiene una piccola quantità di contenuti, quindi il risultato non è travolgente.

Suggerimento rapido: avvolgere

Nell'esempio seguente viene mostrato uno dei trucchi più semplici e utili per l'implementazione di allineamenti di testo centrati all'interno di un layout più grande.

Per prima cosa, guarda questa pagina come una serie di blocchi. Si noti che tutti hanno un allineamento abbastanza giustificato. Ad eccezione della navigazione allineata a sinistra, c'è un margine a sinistra fisso e uno a destra che definisce il contenuto. Adesso, entro quella struttura ho un po 'più di libertà di giocare. Si noti che? Box One? e? scatola due? in realtà contengono contenuti centrati, ma i dispositivi di contenimento li mantengono perfetti all'interno del layout generale.

Ogni volta che hai dei contenuti allineati al centro che non sembrano funzionare, prova a metterli in una scatola conforme al layout generale della pagina per vedere se il design migliora.

Conclusione

Per riassumere, gli allineamenti centrati sono deboli, ma non male. C'è una distinzione molto importante lì che devi davvero capire per essere un buon designer. ?Debole? implica che possono essere facilmente portati troppo lontano e facili da abusare. Tuttavia, puoi e dovresti usare gli allineamenti centrati nei tuoi progetti.

Assicurati che, se l'intero layout è basato su un allineamento centrato, hai un design molto semplice con solo pochi elementi. Quando inizi ad aggiungere grandi blocchi di testo e molte immagini, gli allineamenti centrati iniziano a sembrare disordinati. Inoltre, prova a costruire un solido allineamento a sinistra, giustificato o anche a destra per la pagina nel suo insieme, quindi prova a lasciar cadere selettivamente gli allineamenti centrati in aree chiave come titoli. Infine, come un trucco veloce quando sei in un inceppamento, prova a avvolgere le parti allineate al centro in una scatola che va con il flusso del resto della pagina.