Una griglia è la base di quasi tutti i progetti di siti web. Queste linee invisibili aiutano a creare lo spazio ritmico e il flusso visivo, quindi ogni progetto porta un senso di organizzazione e armonia.
Ma non devi restare nella griglia il 100 percento delle volte. Puoi persino rompere la griglia di volta in volta senza fare un casino totale. Ecco come lo fai, pur mantenendo un sito Web che è un piacere da usare!
Comprendere i sistemi a griglia
Prima di poter rompere la griglia, è necessario capire perché esiste. Indipendentemente dal tipo di sistema che si utilizza, la griglia è una parte fondamentale del processo di progettazione. Le griglie aiutano a determinare dove posizionare gli elementi, come gli elementi possono rompersi o impilarsi su schermi di dimensioni diverse e generalmente aiutano a mantenere le cose organizzate.
La griglia è una base invisibile che ti aiuta a progettare qualcosa che si sente organizzato, pulito e facile da seguire per gli utenti.
I progettisti hanno utilizzato le griglie praticamente per sempre. Torna indietro e guarda vecchi giornali e libri - il testo è allineato in colonne. Anche i vecchi scritti su tablet includono questa struttura armoniosa.
Le griglie possono fare quanto segue:
- Mantenere il contenuto organizzato e scorrevole. Gli utenti sono abituati agli elementi che si allineano orizzontalmente e verticalmente e seguono da sinistra a destra (e viceversa), dall'alto verso il basso, l'approccio alla lettura.
- Rendi il lavoro di progettazione più efficiente perché vedrai solo dove posizionare gli elementi e lo spazio tra di loro.
- Aiuta un sito Web a essere coerente da una pagina all'altra.
- Crea solo lo spazio giusto tra gli elementi in modo che il design rimanga in ordine.
- L'equilibrio è meno impegnativo. Segui la griglia e gli elementi quasi cadranno in posizione mentre riduci gli elementi all'interno dei parametri impostati.
Quindi, perché dovresti pensare di rompere la griglia?
Rompere la griglia può aggiungere ulteriore enfasi ad un elemento specifico. È una di quelle regole di progettazione che, se raramente interrotte, può migliorare il significato di un progetto. Quando si rompe la griglia, è importante seguire molte delle altre? Regole? di design. (Usa solo questo trucco per sfruttarlo al meglio.)
Crea livelli
Gli elementi di stratificazione ti consentono di spostarti dalla griglia mantenendo l'unità nel design. Poiché gli elementi toccano e attraversano i piani, si sentono parte della stessa unità.
Questa tecnica è diventata piuttosto popolare di recente, grazie alle influenze di Material Design e ad altri designer che hanno rischiato di avere elementi sullo schermo. Può essere complicato però; elementi che si sovrappongono in qualche modo devono rimanere distinguibili per funzionare efficacemente.
Cmmnty lo fa con una linea e un testo ampi, creando una sorta di bilanciamento offset utilizzando la tipografia e lo spazio bianco. Puoi quasi vedere più griglie minuscole nel disegno, come la navigazione e l'allineamento degli elementi di testo a sinistra, ma nessun modello coerente. Questa rottura della griglia è perfettamente bilanciata e facile da comprendere per l'utente.
Design di spazio bianco utile
Un motivo per spostare il percorso di una griglia è creare più spazio bianco con maggiore enfasi nei punti giusti. Questo potrebbe essere per evidenziare elementi di testo o branding o un'immagine stellare.
Una cosa che viene spesso scambiata per lo spostamento dalla griglia è l'allineamento dispari. Mentre l'allineamento continuo può essere parte integrante dell'uso di un sistema a griglia - in orizzontale o in verticale - gli elementi possono essere allineati mentre si allontanano dalla griglia.
Quando si rompe la griglia per aggiungere uno spazio bianco, considera di tenere tutto allineato. Aiuterà a creare un cluster di elementi che attira l'attenzione, come il testo e l'invito all'azione di Surfers Against Sewage, con spazio sufficiente per rendere l'elemento più importante di altri. L'esempio sopra funziona meravigliosamente perché lo spazio aiuta gli utenti a richiamare l'invito all'azione.
Metti gli elementi in un contenitore
Quando gli elementi sono contenuti in qualche modo si sentono insieme anche quando la griglia è rotta. Questo può includere l'uso di uno sfondo colorato, mettere elementi in scatole o sovrapporre testo su una foto o un video, come nell'esempio sopra.
La cosa bella di ogni elemento contenitore è che fornisce un segnale agli utenti che tutto ciò che è in esso è correlato in qualche modo. Il collegamento degli elementi.
Uscire dalla griglia in un modello in stile contenitore è un modo visivamente interessante per rompere ciò che spesso sembra una carta da gioco. Molti design in stile container terminano con un design perfettamente simmetrico; uscire dalla griglia è un modo sicuro per aggiungere scintilla al design e rompere la monotonia.
Gioca con elementi specifici
Il modo migliore per uscire dalla griglia è con un semplice dettaglio. Se l'intero progetto manca di un sistema a griglia, probabilmente finirai con un casino. (Ed è proprio quello che stiamo cercando di evitare).
Inizia con uno sfondo o un elemento di accento per attirare l'attenzione. Raffreddare sciami o forme interessanti sono un buon punto di partenza. Prendi in considerazione l'aggiunta di un colore audace per evidenziare l'elemento.
Il Land of Nod lo fa efficacemente con linee ad angolo spesse per mostrare agli utenti dove grandi vendite sono in tutto il sito web. Queste linee sono talvolta contenute all'interno delle immagini e talvolta attraversano spazi bianchi in immagini. La varianza è visivamente interessante e assicura che la rottura occasionale della griglia sia abbastanza insolita per attirare l'attenzione, ma abbina il resto del design abbastanza per sentirsi come se appartenesse.
Move It Around
Usa movimento e movimento per rimuovere elementi dalla griglia, o forse anche solo spostarlo un po '. Semplici animazioni o elementi che interagiscono con i video possono far sembrare una griglia meno griglia.
Questo concetto funziona molto bene con i progetti che si concentrano su un singolo elemento.
L'enfasi di Trippeo, sopra, è la grafica delle spese di viaggio. Non cambia posizione in tutto il design del sito. Ma tutto il resto intorno si muove, dal video sulla schermata iniziale alle informazioni sull'app che ingrandisce usando lo scrolling di parallasse cliccabile.Questo elemento tiene insieme il resto di un design fuori equilibrio, fuori dalla griglia con un tocco moderno e un tocco di stile.
Crea un'illusione di rompere la griglia
Puoi rompere la griglia senza romperla del tutto.
Usa una piccola griglia verticale per creare interessanti combinazioni di forme e allineamenti rimanendo sulla griglia (anche se non sembra).
La cosa bella di non rompere la griglia per creare questo tipo di design è che si mantengono tutti i vantaggi di un design basato sulla griglia mentre si fa qualcosa che è un po 'diverso. Le migliori opzioni spesso includono progetti che funzionano in multipli multipli della griglia - tre, cinque, sette, ecc. - così che le forme non si allineano mai esattamente, ma si sentono sempre simili.
Marche Notre Dame, sopra, utilizza questo concetto per mostrare le immagini dalla sua posizione. La griglia fuori bordo e il motivo a griglia sono usati verticalmente e orizzontalmente per creare un collage con il giusto spazio bianco. Questo è un buon modo per uscire dagli stessi vecchi schemi in muratura per le foto che sembrano essere praticamente ovunque.
Conclusione
Rompere la griglia non è sempre facile da fare. Molte volte può finire per trasformarsi in un bel casino.
Gli usi migliori vengono applicati a una pagina oa un insieme di elementi per impedire che il design sfugga di mano. Questo è anche utile quando si pensa alla reattività e come affrontare elementi che potrebbero non adattarsi bene agli schermi più piccoli perché non si avranno tante stranezze da gestire.
Rompere la griglia - se fatto bene - può essere un modo divertente e coinvolgente per provare qualcosa di diverso.