Share
L'allineamento è una di quelle cose che vengono di pari passo quando si lavora con i sistemi a griglia. Il soggetto dell'allineamento non è semplicemente una questione di scelta se vuoi o meno allineare il testo o le immagini alla sinistra o alla destra di un disegno (sebbene quelle decisioni ovviamente contino ancora), invece, impieghiamo l'allineamento per migliorare i nostri progetti. Il corretto allineamento dei tuoi disegni li renderà visivamente più accattivanti e renderà anche più facile per gli utenti scansionare su una pagina, anche in subconscio offrendo un'esperienza di lettura più tranquilla.
Tutti gli elementi del tuo disegno dovranno essere allineati in qualche modo, che si tratti di un semplice testo sulla tua pagina, di immagini mescolate all'interno del testo (o anche di intestazioni o immagini di eroi), di video, di pulsanti e di invito all'azione, collegamenti (all'interno del testo o in moduli come una sezione di navigazione) o altri elementi che potresti avere.
Le griglie contribuiranno in qualche modo a risolvere problemi di allineamento o decisioni nel tuo progetto, ma ciò su cui dobbiamo concentrarci qui è come i diversi elementi, gruppi di elementi o particolari moduli del tuo progetto lavorano insieme. Ho sottolineato fin dall'inizio l'importanza di un'esperienza utente coesa, e ottenere l'allineamento giusto è una di quelle cose veramente importanti che possono aiutare a migliorare un'esperienza per l'utente.
L'allineamento ci consente anche di prendere decisioni consapevoli su dove sono posizionati gli elementi e su come interagiscono tra loro. Creare un buon allineamento colma il divario visivo tra ogni elemento del tuo progetto, aiutandoci a creare relazioni tra gli elementi che abbiamo. Altrimenti, avremmo un design che ha blocchi di testo e di immagini dappertutto, che ha poco senso senza il senso della struttura.
Come spiegato nei precedenti articoli della griglia, sembra che molte persone non amano le griglie perché le trovano limitanti; che spesso schiacciano ogni possibilità di creatività all'interno di un progetto.
Questo è totalmente comprensibile. Le griglie sono un insieme di colonne e righe che essenzialmente ci aiutano a creare blocchi; Il CSS generalmente stabilisce elementi in una disposizione di scatola. Tuttavia, riconoscere un momento appropriato per uscire dalla nostra rete può essere difficile.
Non tutto deve essere allineato sul design del tuo sito web. A volte, a seconda del tuo design o del tuo modo di lavorare, questo può davvero soffocare la creatività. Invece, pensa a come puoi mescolare i tuoi allineamenti. In questo modo, stai ancora assicurando che ci sia un modello per ogni elemento o modulo sul tuo sito web, ma mescolando gli allineamenti ti stai assicurando che stai ancora creando qualcosa di interesse visivo che manterrà i tuoi utenti ad esplorare il sito web.
La combinazione degli allineamenti significa anche che puoi giocare con i layout e le griglie un po 'di più - invece di usare una griglia a 6 colonne, perché non introdurre anche un'altra griglia con cui puoi sovrapporre - come una griglia a 4 colonne.
Un esempio di sovrapposizione di griglia: sei colonne con quattro colonne sovrapposte. Built in Gridset App. Mentre non stai completamente uscendo dalla tua rete, invece stai introducendo una nuova griglia da cui puoi lavorare, offrendo ancora più opzioni di allineamento e layout nei tuoi progetti.
Gli allineamenti di missaggio non significano solo introdurre nuove griglie, colonne o comparse nella tua struttura. Invece, usa la griglia corrente per mescolare gli elementi allineati a quali colonne. Ad esempio, potresti avere gli elementi di intestazione allineati ai bordi della prima e dell'ultima colonna, ma puoi decidere di allineare il testo del corpo principale alla prima e alla penultima colonna. Il bello è che una griglia offre una quantità quasi infinita di opzioni di allineamento, anche con qualcosa di piccolo come una griglia di 4-6 colonne.
La miscelazione degli allineamenti è un modo per mantenere gli utenti interessati e avvisare mentre navigano in un sito Web. Invece di mantenere elementi simili, introduce un altro livello di attenzione agli elementi del tuo design, per quanto sub-consciamente possa essere.
Le principali opzioni di allineamento che hai per il tuo testo sono molto simili alle opzioni disponibili nel CSS: sinistra, destra, centrato o giustificato. Abbastanza auto-esplicativo davvero; se hai allineato il tuo testo, allora andrà alla deriva a sinistra, se allineati a destra il tuo testo verrà visualizzato a destra.
Invece, quello che vuoi pensare è quanto questi allineamenti siano adatti al tuo testo e al modo in cui si inseriscono nel tuo progetto. Ad esempio, piccole quantità di testo possono funzionare bene in un allineamento centrato, anche se questo sarà più confuso e difficile da leggere su blocchi di testo più grandi. Allo stesso modo, con i titoli potrebbe funzionare bene nel tuo progetto per allinearli centralmente, anche se questo dipende dalla dimensione del testo e da dove viene posizionato. Ad esempio, un'intestazione allineata centralmente potrebbe non funzionare correttamente quando ha una grossa fetta di testo allineato a sinistra immediatamente sotto.
Devi anche pensare alle culture che potrebbero essere esposte al tuo design e al tuo sito web. In alcune culture, leggi da destra a sinistra, anche se nelle culture occidentali è da sinistra a destra e dall'alto verso il basso.
.content direction: rtl; allineamento del testo: giusto;
A causa della cultura occidentale della lettura da sinistra a destra, sarà probabilmente difficile avere una grande quantità di testo allineato a destra. Invece, usa quegli allineamenti che possono essere più difficili da leggere in piccole quantità, in più di una funzionalità di progettazione come in un piè di pagina per l'indirizzo o informazioni di contatto, o in un'intestazione con un elenco di collegamenti di navigazione.
Allineare le immagini può essere difficile, perché l'allineamento che dovresti usare per ogni immagine è relativo alla dimensione dell'immagine. Le immagini più piccole sono naturalmente più facili da inserire nei tuoi contenuti in un modo che non disturba il contenuto, mentre le immagini più grandi tendono a disturbare maggiormente il flusso di lettura e sono quindi più difficili da inserire nei tuoi contenuti.
Hai due opzioni; posiziona le tue immagini al di fuori del flusso di contenuti (ad esempio, tra i paragrafi o all'inizio o alla fine del tuo contenuto) oppure puoi trovare un modo per inserire le tue immagini nella tua griglia.
La prima opzione è abbastanza facile da implementare. Senza interrompere il flusso di testo, è possibile posizionare le immagini a larghezza intera o su una larghezza e un centro personalizzati all'interno dell'area in cui si trova normalmente il testo. Questa è abbastanza semplice e sembra ancora buona, mentre funziona bene quando ridimensioniamo un sito Web se è reattivo.
La seconda opzione può essere un po 'più complicata, a seconda di come decidi di posizionare le immagini all'interno del tuo contenuto. Hai diverse opzioni. Puoi prima avere le immagini che si allineano perfettamente (a sinistra o a destra) con il tuo testo, oppure puoi far apparire le immagini che sporgono leggermente oltre il bordo del contenuto.
In questo modo, le tue immagini potrebbero essere posizionate una larghezza di colonna completa nel contenuto, con il contenuto che scorre intorno all'immagine. Ciò non disturba il flusso di lettura tanto quanto se l'immagine è stata inserita completamente nell'area del contenuto, ma aggiunge anche interesse al tuo design - perché stai creando un'altra area di allineamento per i tuoi elementi che manterrà il tuo design visivamente più fresco e più coinvolgente.
Allineare le immagini di sfondo è uno di quei piccoli tocchi - e di nuovo, è tutto relativo al tuo design e soggetto, così come la dimensione dell'immagine di sfondo stessa.
Come con gli allineamenti del testo, l'allineamento delle immagini di sfondo può corrispondere molto alle regole CSS; fisso, assoluto, in alto o in basso, a sinistra oa destra? In realtà, ciò dipende dal tuo design e dal modo in cui l'immagine di sfondo si adatta a questo. Se il tuo disegno ha uno schema, pensa a come quel modello si allinea con i tuoi elementi - vuoi assicurarti che si allinea bene con i tuoi elementi altrimenti potrebbe buttare via completamente l'intero disegno.
Pensa anche a come appare se hai una grande immagine di sfondo focale e come si adatta al tuo design. Se sono grandi e abbastanza focalizzati, forse pensa a come i tuoi altri elementi e moduli potrebbero adattarsi a quel progetto. Ad esempio, il testo del tuo corpo principale potrebbe essere allineato con i bordi del disegno? Si tratta di mettere in discussione come le tue immagini funzionano con le altre parti del tuo design e come puoi lavorare con loro per rendere il tuo design più raffinato e lavorare insieme molto meglio.
Quando descrivo un gruppo di elementi, penso che sia molto diverso da ciò che descriverò come un modulo.
Quando si pensa in termini di moduli-sia nella progettazione che nello sviluppo del design del sito web, penso a loro come a un gruppo di elementi, collegati tra loro, che sono molto vicini l'uno all'altro. Esempi di moduli per me sono un gruppo di collegamenti, un'immagine di un eroe e testo o intestazione sovrapposti; tutto ciò che può essere raggruppato, è un modello ripetibile o un modulo autonomo.
Tuttavia, a gruppo di elementi è un gruppo di elementi nel tuo design, che non lo fanno necessariamente devono essere vicini l'uno all'altro. Ad esempio, un gruppo di elementi potrebbe essere sia gli elementi di intestazione (logo e collegamenti di navigazione, ad esempio), sia gli elementi del piè di pagina (magari un altro insieme di collegamenti, insieme a una nota di copyright). Questi sono gruppi di elementi e puoi quindi allineare questi gruppi di elementi nel tuo progetto. Sebbene l'intestazione e il piè di pagina potrebbero non essere visibili sullo stesso spazio dello schermo l'uno rispetto all'altro, questi sottili usi dell'allineamento renderanno il design più forte, visivamente accattivante e molto più coerente.
Altri esempi di gruppi di elementi sono semplicemente sia il testo che le immagini della tua copia principale su una pagina, o possono anche essere semplici come un insieme di collegamenti o elementi di navigazione. Ad esempio, in una navigazione più complessa potresti avere i collegamenti testuali di testo, ma anche una "sottorubrica" più piccola al link. Oltre a questo, potresti avere un'icona sopra o sotto il testo del link. Mentre questi sono tutti bit individuali e quei tre bit costituiscono un collegamento, tutti questi singoli collegamenti possono costituire un modulo di navigazione complesso, ma possono anche essere messi insieme come un gruppo di elementi, che è quindi possibile allineare con altri gruppi nel progetto.
Ora sai tutto sull'allineamento nei tuoi progetti (e con le tue griglie). Voglio che inizi a guardare i tuoi disegni e osservi come tutti gli elementi si allineano. Prova a raggruppare diversi elementi, gruppi di elementi e cerca di allineare il testo e le immagini nei tuoi progetti.
Scopri cosa puoi fare per creare un design migliore allineando correttamente ogni elemento del tuo disegno. Usando il sistema di griglia dal tuo ultimo compito, lavora per allineare tutti gli elementi del tuo progetto usando i suggerimenti forniti nel post di oggi.
Accentsconagua