Se stai cercando griglie per la progettazione di siti Web, sei nel posto giusto. In questo post, abbiamo discusso di 5 diverse griglie di progettazione di siti Web.
Le griglie sono la spina dorsale del design; ti aiutano a stabilire l'ordine e organizzare il contenuto del tuo design. Discuteremo cos'è una griglia, perché dovresti usarne una nel web design e come crearne una in questo post.
Apri la tua applicazione di design preferita ed eccola lì, una tela bianca che ti fissa. A volte è un po' scoraggiante.
Come inizi? Che posizione dai al titolo? Dove collochi le tue opere d'arte e le tue fotografie? Una griglia è tutto ciò che serve per iniziare.
Una griglia è una struttura utilizzata per organizzare il contenuto di un progetto; stabilisce l'allineamento e l'ordine.
Sia che tu stia progettando un layout per la stampa, come una rivista, o unendo foto e testo per creare una pagina di destinazione, una griglia ti aiuterà a fare scelte di design e a fornire un'esperienza utente positiva.
Considera come questo design della pagina di destinazione utilizza una griglia a 12 colonne per organizzare i suoi componenti. L'uso di una griglia elimina la possibilità di prendere decisioni casuali.
Invece di posizionare i pezzi in modo casuale, utilizzando correttamente una griglia, saprai esattamente dove posizionare elementi come un logo, voci di menu, un titolo, contenuto del corpo e fotografie. Inoltre, aiuterà nell'accelerazione del processo di progettazione.
In questo articolo, ti dirò tutto ciò che devi sapere su come utilizzare una griglia nel web design. Quindi, resta con me fino alla fine.
Contenuti
- Da dove vengono le griglie?
- Perché le griglie sono importanti nel web design?
- 5 diversi tipi di griglie
- 4 migliori pratiche per l'utilizzo delle griglie nel web design
- Anatomia della griglia: cosa devi sapere?
- Domande frequenti: griglie di progettazione di siti Web 2024
- 👉 Qual è la migliore griglia per il web design?
- ✅ Che cos'è un sito Web con layout a griglia?
- 👉 Come funzionano le griglie dei siti web?
- 👀 In che modo un layout a griglia migliora il web design?
- ✅ Perché i designer usano le griglie?
- 👉 Quante colonne dovrebbe avere una griglia nel web design?
- 💁 Perché utilizziamo una griglia a 12 colonne?
- ✔️ Cos'è la griglia a 12 colonne?
- 👉 Come usi i modelli di griglia?
- Conclusione: griglie di progettazione di siti Web 2024
Da dove vengono le griglie?
Prima di esaminare come le griglie influiscono sul web design oggi, diamo una breve occhiata alla storia delle griglie e al modo in cui sono state impiegate. Le griglie sono necessarie per l'organizzazione della tipografia.
Le griglie sono state inizialmente impiegate nei layout dei manoscritti per ordinare il tipo. Considera quanto è ordinato questo spread da una prima pagina di testo.
Per uno sguardo più approfondito alla storia della stampa, consulta il nostro saggio sulla storia del design grafico.
Avanti veloce fino alla rivoluzione industriale e all'avvento della produzione di massa, durante la quale giornali, poster, pubblicità e altri articoli stampati venivano prodotti in grandi quantità.
Ai designer piace Jan Tschichold ed Josef Muller-Brockmann ha creato nuovi sistemi di griglia nel ventesimo secolo, che si sono evoluti in quello che oggi è noto come The Swiss-Style o The International Typographic Style.
Hanno stabilito una struttura modulare con abbastanza spazio bianco.
Perché le griglie sono importanti nel web design?
In termini di applicazione al processo di progettazione web, il sistema a griglia aiuta nell'allineamento dei componenti della pagina utilizzando colonne e righe successive.
Una volta che questa base gerarchica è a posto, possiamo disporre testo, grafica e praticamente qualsiasi altro elemento di progettazione all'interno dell'interfaccia in modo coerente e ordinato.
Quando progettiamo per il web e il mobile, le pagine o le interfacce che sviluppiamo hanno lo scopo di facilitare diversi flussi di utenti.
Le griglie facilitano il processo di progettazione di wireframe, modelli o layout standardizzati per siti comparabili poiché i flussi di utenti spesso comprendono più schermate o finestre che ripetono schemi e layout di progettazione simili.
Le griglie consentono la divisione orizzontale e verticale delle pagine in righe e colonne. I sistemi a griglia sono una tecnica sistematica che consente ai designer di disporre gli oggetti in modo ordinato e di sviluppare componenti per più pagine o layout in modo modulare.
Inoltre, le griglie stabiliscono un insieme standardizzato di unità di misura fisse che determinano le dimensioni, la spaziatura e l'allineamento di ciascun elemento di progettazione.
I layout a griglia sono nati nella progettazione di stampa quando sono stati utilizzati insieme alla tipografia per organizzare la scrittura a mano su carta, in particolare in libri e giornali.
Detto questo, molti aspetti del design contemporaneo si basano e prosperano su layout basati su griglia. Ciò comprende il web design, il design dell'interfaccia e, soprattutto, il design reattivo.
Prima di approfondire come e perché i layout basati su griglia sono uno strumento così prezioso per il nostro processo di progettazione come sviluppatori Web, diamo un'occhiata più da vicino ai componenti fisici che compongono un sistema a griglia.
5 diversi tipi di griglie
Le griglie sono classificate in cinque categorie distinte. Mentre alcuni sono più appropriati per il web design rispetto ad altri, quasi sicuramente li hai utilizzati tutti e cinque durante la tua carriera creativa.
1. Griglia gerarchica:
L'uso più diffuso di griglie gerarchiche è nel web design. L'obiettivo di queste griglie è di dare priorità agli elementi. Possono essere più adattabili, ma si basano comunque su colonne, righe e moduli per l'organizzazione.
Sono costruiti naturalmente disponendo prima gli elementi più significativi sulla pagina e poi circondandoli con una griglia.
I siti Web di notizie e media utilizzano spesso questo stile di griglia per attirare l'attenzione su determinati articoli e post. Considera come il New York Times' homepage utilizza una griglia gerarchica.
2. Griglia modulare:
Le griglie modulari sono simili alle griglie di colonne ma includono righe. Sebbene i giornali e le riviste utilizzino spesso griglie modulari per organizzare il materiale, possono anche essere utilizzate nella progettazione di siti Web e app, ad esempio in una sezione di griglia di prodotti.
Considera come Everlane organizza la sua collezione di jeans utilizzando una griglia modulare. Il YouTube homepage è un altro esempio di un sito che fa uso di una griglia modulare.
Sebbene includano una barra laterale sinistra per collegamenti frequenti come le sezioni di trend e abbonamenti, tutto il materiale video è strutturato in una griglia modulare a quattro colonne per massimizzare il numero di video che uno spettatore può esaminare mentre cerca qualcosa da guardare.
3. Griglia di colonne:
Le griglie a colonne aiutano nell'organizzazione del testo, delle immagini e della grafica. Per i siti Web, il numero di colonne che coprono la larghezza di una pagina di destinazione può variare da due a dodici o addirittura sedici.
Il testo e la grafica possono essere contenuti all'interno di una singola colonna o estendersi su più colonne. Le grondaie sono gli spazi tra le colonne; dovrebbero essere di dimensioni uniformi su tutto.
Le griglie delle colonne non devono essere simmetriche. Ad esempio, puoi utilizzare una griglia di colonne asimmetrica in cui alcune colonne sono più strette di altre, il che può essere vantaggioso a seconda della gerarchia del tuo progetto.
Le griglie di colonne asimmetriche vengono spesso utilizzate sui siti Web di blog, in cui il materiale principale è incluso nel contenitore di due terzi più grande del layout, mentre il terzo più piccolo può visualizzare informazioni sul blog e sul suo autore.
Considera come la home page di questo blog utilizza una griglia di colonne asimmetrica.
4. Manoscritto Cinturone:
Tutti i libri, giornali e periodici sono costruiti su una griglia di manoscritti. Chiamato anche griglia a colonna singola, questo è uno dei modelli di griglia più semplici ed è adatto per enormi blocchi continui di testo e grafica.
In sostanza, è un enorme spazio rettangolare all'interno della pagina che funge da riquadro di delimitazione per il testo.
5. Griglia di riferimento:
Una griglia di base è un po' più tecnica; è stabilito dalla posizione del testo. In sostanza, si riferisce all'interlinea o allo spazio tra le linee di base.
Questa griglia aiuta a fornire un'esperienza di lettura positiva per il lettore, in particolare quando c'è molto contenuto da leggere. Sebbene sia vitale per la progettazione di stampa, come i layout dei libri, è ugualmente fondamentale per la progettazione online.
Considera l'effetto dell'interlinea sulla leggibilità di una pagina di destinazione. Se il testo è eccessivamente condensato, l'utente può abbandonare del tutto il sito. Mantieni un mix appropriato di testo e spazio bianco.
4 migliori pratiche per l'utilizzo delle griglie nel web design
Ci sono diverse parole e idee per conoscere e comprendere nel regno del web design, ma niente di più del significato delle griglie nel web design.
Tra i vari componenti che compongono una struttura a griglia, i numerosi tipi di griglia disponibili e il processo cognitivo coinvolto nel determinare quale tipo di griglia si adatta meglio al tuo contenuto e design, c'è molto da capire.
1. Rispettare la regola dei terzi:
Un altro concetto di web design è il Regola dei terzi, che assiste i designer nella creazione di layout della griglia esteticamente equilibrati e nel posizionamento delle immagini.
Questo approccio sovrappone una griglia che divide l'area di progettazione orizzontalmente e verticalmente in terzi. Questo divide qualsiasi immagine o sezione/spazio di pagina in nove segmenti uguali definiti dalle intersezioni delle linee.
Secondo la regola dei terzi, mettere "oggetti di interesse" sui "terzi" di un'immagine indirizzerà l'attenzione dell'utente su di essi in un modo più potente ed esteticamente accattivante.
Nel web design, i designer usano spesso la Regola dei terzi per aiutarli a fare alcune delle scelte più critiche per la griglia e il layout.
2. Rispetta la sezione aurea:
Numerosi designer utilizzano un concetto noto come Golden Ratio per ottimizzare la scala, l'equilibrio e la disposizione dei loro progetti di griglia. Il Rapporto aureo è una proporzione che è uguale a 1.6180 nella sua forma più semplice.
Il rettangolo aureo è un rettangolo la cui lunghezza è 1.6180 volte la sua larghezza in base al rapporto aureo. Ciò indica che se la larghezza dell'elemento è 100 px, la lunghezza sarà 161.80 px.
Questo è vero per l'ampiezza e la lunghezza di immagini, oggetti o forme adiacenti, nonché per lo sviluppo di una singola forma o elemento.
Utilizzando la sezione aurea, i designer possono determinare come dividere lo spazio orizzontale disponibile sulla pagina e quanto spazio lasciare per e attorno a ciascun pezzo, tra le altre cose.
Un caso in cui ciò può verificarsi è durante lo sviluppo della sezione hero di un sito web. Se scegli un layout a larghezza intera e lo dividi verticalmente in due sezioni: l'immagine dell'eroe e il testo dell'eroe.
Inoltre, dovrai decidere la dimensione dell'immagine, la dimensione del testo e così via in questa procedura di micro design.
Tuttavia, devi prima decidere un rapporto di colonna, che ti guiderà nel determinare le dimensioni della tua immagine e del tuo carattere tipografico, nonché quali elementi vuoi sottolineare più o meno, o se vuoi concentrare la stessa attenzione su ciascuno.
Questo è quando entra in gioco la decisione su come dividere la parte dell'eroe in termini di quale componente dovrebbe essere più grande o più prominente. È qui che la sezione aurea è utile.
Questa linea guida tiene conto di una varietà di elementi, tra cui la larghezza della pagina, la dimensione del contenuto e il numero e la dimensione dei moduli di cui il contenuto avrà bisogno su una griglia.
In termini di accessibilità, la sezione aurea dirige l'attenzione dell'utente su determinati punti o posizioni su uno schermo, che è esattamente ciò che i designer mirano a fare quando stabiliscono e implementano il loro contenuto e la gerarchia delle informazioni dello schema di progettazione.
3. Fai spazio allo spazio bianco:
Come web designer, comprendiamo quanto sia critico lo spazio bianco in termini di leggibilità, gerarchia delle informazioni, scalabilità e respiro generale intorno e tra i componenti del design.
Dato il ruolo vitale dello spazio bianco nella progettazione del layout, è naturale che il sito Web e le griglie di layout lo utilizzino.
I layout della griglia sono determinati, in sostanza, non solo dalla larghezza e dall'altezza delle loro colonne e righe, ma anche dalla larghezza e dall'altezza dello spazio bianco tra di loro, denominato spaziatura.
Ad esempio, un metodo di progettazione basato sulla griglia che i web designer utilizzano spesso è noto come 8pt Grid System, un concetto stabilito dalle linee guida di Material Design di Google.
Il metodo Material Design utilizza una griglia di 8 x 8 pt. Ogni elemento sul sito web sarà in pratica multipli di/divisibile per otto.
La cosa affascinante è che questa regola si applica non solo agli elementi della griglia come foto, pulsanti o testo, ma anche alle unità di spazio bianco, che devono essere multipli di otto.
Pertanto, mentre consideri come distanziare le tue colonne o righe, devi anche quantificare e specificare la quantità di spazio bianco, in questo caso in multipli di otto.
Ciò dimostra quanto lo spazio bianco sia critico nella progettazione della griglia, al punto che le sue dimensioni e i suoi requisiti sono altrettanto critici quanto le colonne e le righe.
La home page di Elementor Experts esemplifica quanto può essere potente lo spazio bianco, in particolare sulla home page di un sito web.
Poiché lo scopo finale della home page è costringere gli spettatori ad agire e conoscere la piattaforma Experts, lo spazio bianco supporta questo processo dando priorità alle informazioni.
Ciò implica che, poiché la proposta di valore della piattaforma ha tale importanza e "tempo per brillare" sulla home page, i visitatori del sito Web capiscono immediatamente il valore maggiore che sperimenteranno.
4. Design reattivo all'onore:
Il design reattivo si riferisce alla capacità del layout e del contenuto di una pagina o di un sito di adattarsi a più dispositivi e dimensioni del browser. Ciò implica che quando la dimensione dello schermo varia, anche il numero di colonne e, naturalmente, la loro larghezza varieranno.
Tuttavia, esiste una distinzione intrinseca tra griglie di progettazione standard e griglie reattive.
Mentre le griglie di progettazione sono impostate su una griglia di base, le griglie reattive sono flessibili, consentendo alle colonne della griglia di ridimensionarsi e riposizionarsi a seconda della vista dell'utente.
Con una griglia fissa, la riduzione delle dimensioni dello schermo ti porterà automaticamente al punto di interruzione successivo e anche i margini laterali diminuiranno automaticamente fino al raggiungimento del punto di interruzione successivo.
Una griglia reattiva, o griglia fluida, è ciò che vedi quando gli elementi cambiano dinamicamente in risposta al restringimento del browser/schermo. Le griglie reattive allineeranno e organizzeranno logicamente il tuo materiale.
Ciò implica che quando la vista diminuisce, anche i riquadri e il contenuto della griglia si ridurranno proporzionalmente.
Anatomia della griglia: cosa devi sapere?
Tutte le griglie nella progettazione di siti Web, indipendentemente dalle loro dimensioni o complessità, hanno alcuni componenti che le caratterizzano come layout di griglia:
1. Margini:
I margini sono lo spazio negativo tra il formato e il bordo esterno del contenuto, a volte noto come "grondaie esterne". Sui dispositivi mobili, i margini laterali sono in genere larghi 20-30 px e variano in modo significativo tra desktop e dispositivi mobili.
Margin potrebbe avere familiarità con il gergo HTML e CSS, dove viene utilizzato come proprietà per generare spazio attorno a un elemento di design o contenitore. Tieni presente che la dimensione di un margine non influisce sulla dimensione del testo adiacente.
Specifica semplicemente la quantità di spazio attorno all'elemento, che nel contesto delle griglie di layout si riferisce esplicitamente allo spazio tra il formato e il bordo esterno del contenuto.
2. Grondaie:
Le grondaie sono le linee che dividono le colonne e le righe in singole unità. 20px è una dimensione di grondaia piuttosto tipica. Lo scopo delle grondaie è fornire spazio negativo (di qualsiasi dimensione) tra colonne e righe.
Nel senso più semplice, le grondaie sono l'area tra colonne e righe. Le grondaie sono particolarmente importanti nei layout in muratura, dove la larghezza della gronda è uno degli elementi più critici.
3. Moduli:
I moduli sono le unità di riempimento dello spazio formate dall'unione di file e colonne. I moduli, o moduli di contenuto, come vengono spesso chiamati, sono gli elementi costitutivi di una pagina, poiché ogni elemento di progettazione (testo, grafica e pulsanti, ad esempio) si inserisce nei moduli prodotti dai modelli rettangolari in una griglia.
4. Righe:
Come puoi supporre, le righe sono le parti orizzontali della griglia. Sorprendentemente, il web design spesso trascura l'importanza delle righe in una griglia. Tuttavia, questa non è una grande pratica.
5. Colonne:
Le colonne sono pezzi verticali che si estendono per l'altezza dell'area del contenuto e sono considerati i "mattoni" della griglia. Ciò che rende distintive le colonne è che più colonne in una griglia, più flessibile diventa la griglia.
Affronteremo questo problema in modo più dettagliato a breve. Sebbene le larghezze delle colonne siano sempre a discrezione del progettista, le pratiche comuni impongono di utilizzare 12 colonne su desktop, 8 su un tablet e 4 su dispositivi mobili.
La maggior parte delle griglie ha colonne con larghezze di 60–80px. La larghezza della colonna ha un impatto significativo sulla larghezza del tuo contenuto reale.
Domande frequenti: Griglie di progettazione di siti Web 2024
👉 Qual è la migliore griglia per il web design?
Bootstrap è un framework front-end mobile first fluido, semplice e potente che rende lo sviluppo web più rapido e semplice. Per noi, questa è la scelta più popolare. Spesso dodici colonne con rientri. Un metodo standardizzato e semplice.
✅ Che cos'è un sito Web con layout a griglia?
La griglia del sito web è una tecnica per organizzare e allineare il materiale su una pagina. Serve come scheletro o struttura fondamentale della tua interfaccia utente. Le griglie del sito Web aiutano i designer a fare scelte di design e a produrre un'esperienza utente positiva.
👉 Come funzionano le griglie dei siti web?
I sistemi a griglia sono framework invisibili utilizzati nel web design che raggruppano tutti i componenti di una pagina insieme. La griglia funge da struttura o armatura attorno alla quale un designer può disporre i componenti visivi (immagini, glifi, paragrafi, ecc.) in modo logico e facilmente assorbibile.
👀 In che modo un layout a griglia migliora il web design?
Le griglie possono ridurre e migliorare significativamente i tempi di progettazione fungendo da guida su dove posizionare, posizionare e ridimensionare gli oggetti. Piuttosto che inserire parti arbitrariamente fino a ottenere una composizione piacevole, una griglia dovrebbe aiutarti a trovare una soluzione naturale.
✅ Perché i designer usano le griglie?
Le griglie rendono più semplice per i designer collaborare alle idee delineando dove posizionare i pezzi. I sistemi a griglia aiutano a disaccoppiare il lavoro di progettazione dell'interfaccia consentendo a diversi progettisti di lavorare su componenti distinti del layout pur rimanendo certi che il loro lavoro sarà integrato e coerente senza problemi.
👉 Quante colonne dovrebbe avere una griglia nel web design?
Sebbene non sia necessario formalmente il numero di colonne, la maggior parte delle architetture a griglia di siti Web utilizza una griglia a 12 colonne. Inoltre, una griglia di un sito Web contiene uno spazio regolare tra le colonne, denominato grondaie, e la spaziatura all'esterno della griglia viene definita margini.
💁 Perché utilizziamo una griglia a 12 colonne?
La maggior parte delle versioni di Bootstrap richiede solo 12 colonne per ospitare quanto segue: La creazione del layout è semplificata. Layout ottimizzato per dispositivi mobili. Blocchi proporzionali per mantenere la simmetria.
✔️ Cos'è la griglia a 12 colonne?
Per i siti Web, i designer possono utilizzare da due a dodici o anche sedici colonne per coprire l'ampiezza di una pagina di destinazione. Possono disporre testo e grafica in un'unica colonna o su più colonne.
👉 Come usi i modelli di griglia?
L'attributo grid-template-areas definisce le aree del layout della griglia. È possibile assegnare un nome agli elementi della griglia facendo riferimento ad essi nella proprietà grid-template-areas tramite la proprietà grid-area. Gli apostrofi denotano ogni regione. Per fare riferimento a un oggetto griglia che non ha un nome, utilizzare un simbolo punto.
Link veloci:
- I migliori costruttori di siti Web offline
- Costo per costruire un sito web
- Come creare un sito Web personale
Conclusione: griglie di progettazione di siti Web 2024
Ora che capisci perché le griglie sono fondamentali nel web design e come usarle sul tuo sito web, è tempo di iniziare a misurare e allineare.
Tieni presente che questo principio si applica a ogni elemento di design: allineare widget e componenti orizzontalmente e verticalmente, allineare elementi di testo a una linea di base e centrare correttamente ogni tipo di contenuto sul sito web.
Il tuo processo di progettazione e il prodotto finale saranno molto apprezzati e siamo ansiosi di vedere cosa hai in serbo.
