Quando ascolti la griglia, qual è la prima cosa che ti viene in mente? Per la maggior parte dei progettisti, è spesso un concetto orizzontale basato su colonne sulla tela. Questo è particolarmente vero quando si pensa a progetti di web e di design digitale.
Ma per quanto riguarda le griglie verticali? È altrettanto importante creare il flusso su e giù per la pagina. E ci sono diversi modi per farlo con i sistemi di rete.
Perché usare una griglia verticale?
Se non stai già pensando alle griglie verticali nei tuoi progetti di design, potresti chiederti perché questo è importante. Una griglia verticale aiuta a raggiungere il ritmo verticale e l'armonia sulla pagina.
La griglia aiuterà a stabilire e stabilire regole per la progettazione, sia stampate che digitali. Questa struttura facilita la progettazione del disegno e fornisce linee guida per la spaziatura, il posizionamento di elementi e il dimensionamento del testo e di altri oggetti sulla tela. Una griglia verticale crea anche un modello ritmico e un flusso per un sito web mentre gli utenti scorrazzano. (Questo può essere particolarmente importante su dispositivi più piccoli.)
L'effetto complessivo è un design che se lo disegna in stile wireframe ha un aspetto con il flusso. Gli elementi sono ben distanziati, le transizioni sono facili da vedere e comprendere e ogni diversa parte del design sembra intenzionale e parte del piano.
Guarda il wireframe qui sopra. È possibile tracciare linee lungo lo schizzo in modo che ogni elemento si allinea sullo stesso piano. Questo flusso visivo è esattamente ciò che vuoi ottenere.
Griglie per il testo
Una griglia verticale è particolarmente importante quando si tratta di testo. Può essere utilizzato in diversi modi per creare il flusso in copia. Tutto si riduce alla griglia di riferimento.
La griglia della linea di base è un insieme immaginario di linee orizzontali equidistanti - pensa la carta a righe che hai usato nella scuola elementare - a cui il testo è allineato. Il fondo (linea di base) delle lettere si appoggia su queste linee in modo che vi sia una spaziatura uguale tra le righe di testo e che le colonne di testo si allineano l'una con l'altra.
Ecco un paio di applicazioni:
- Crea due colonne e mantieni il tuo testo sulla linea di base.
- Usa la matematica per allineare tutti i tipi, indipendentemente dalla dimensione alla scala della linea di base.
Ma come lo fai? Inizia con un po 'di matematica tipografica. (Il concetto è praticamente lo stesso per progetti di stampa o digitali).
- Scegli il carattere e le dimensioni per il corpo del testo.
- Imposta la griglia o la quantità di spaziatura tra le righe di testo.
- Utilizzare la stessa proporzione per altre spaziature nel disegno.
- Puoi anche usare multipli della griglia di riferimento per gli elementi. Quindi se il testo del tuo corpo è di 16 punti, il testo più grande può essere di dimensioni due volte l'altezza della linea.
Questa griglia di griglia di base fa anche qualcos'altro. Ti aiuta a creare una gerarchia tipografica perché ogni nuovo livello di testo è impilato in proporzione ad altri livelli di testo.
Griglie per schermi o pannelli
Le griglie verticali sono uno degli strumenti essenziali nella progettazione pagina per pagina, come i siti Web con funzionalità di scorrimento parallasse. Ogni pagina deve essere delle stesse dimensioni e avere la stessa sensazione in modo che ogni nuova pagina si senta come una parte continua della stessa storia ed estetica.
La maggior parte dei designer fa questo con il colore o con un tocco di animazione per creare degli schermi? in posizione con ogni scorrimento. Quando gli elementi sono allineati in perfetto orientamento verticale, ciascuno schermo è visualizzabile tutto in una volta e non è mezzo acceso, metà fuori dallo schermo. Questa griglia verticale crea l'armonia appropriata e contribuisce alla leggibilità corretta e un'esperienza utente più desiderabile.
La struttura di questo stile di design dipende da un buon flusso verticale. Gli elementi devono essere posizionati in modo simile a quando l'utente scorre. Il tipo dovrebbe cadere in un formato di colonna simile e le dimensioni e la spaziatura di caratteri e elementi dovrebbero essere coerenti da schermo a schermo.
Questi piccoli indizi sono il filo che tiene focalizzato l'utente e crea comprensione visiva e fluisce da una parte di informazioni a quella successiva.
Griglie per carte
Il design in stile card è uno degli elementi più popolari e di tendenza dell'anno e funziona grazie a una griglia verticale. La griglia verticale ti aiuta a creare una carta che ha una sensazione distinta, una spaziatura adeguata e uno spazio confortevole per più elementi in un singolo contenitore.
Pensa a tutti i posti in cui utilizzare una griglia verticale con una carta:
- Spaziatura tra le carte in un disegno. (Una carta per schermo su dispositivi mobili).
- Spaziatura interna del bordo per la carta tra elementi quali immagini, testo o pulsanti.
- Dimensionamento per ciascun elemento.
- Gerarchia e dimensionamento del testo.
Griglie per l'e-commerce
Le griglie verticali (e orizzontali) sono un'opzione popolare per i siti di e-commerce a causa del flusso organizzativo distinto. Gli articoli possono essere posizionati fianco a fianco in modo che gli utenti possano confrontare e fare scelte prima di effettuare un acquisto.
Osserva da vicino e probabilmente scoprirai che anche il resto del framework del sito web seguirà lo stesso ritmo verticale. Il sottile utilizzo della rete è comodo e farà sentire gli acquirenti a proprio agio, si fidano del design grazie alla bella organizzazione e speriamo di fare un acquisto.
Griglie per l'organizzazione generale
Solo perché stai usando una griglia, la progettazione non deve avere una muratura o un aspetto basato sulla griglia. Usa la griglia in più e metà per creare interessanti combinazioni di elementi che cadono in armonia.
E sentiti libero di rompere la griglia ogni tanto. A volte finisci in una situazione in cui la griglia multipla non sembra giusta, in particolare quando si tratta di digitare ascensori o discendenti mancanti. Va bene per fonderlo un po 'allora. Ricorda, anche se stai usando una griglia e sembra divertente, disturberà l'armonia e il flusso. Apporta le correzioni e le correzioni visive necessarie.
Conclusione
Allora perché il ritmo verticale e una griglia sono così importanti? Quando si tratta di testo, aiuta a mantenere un utente stancante durante la lettura. Per altri elementi crea un distinto senso di armonia e flusso.
Le persone amano l'organizzazione per natura e vogliono che i progetti siano facili da capire a colpo d'occhio. Un buon sistema di griglia può aiutarti a farlo con facilità. Una volta stabilita la griglia, i posizionamenti, le dimensioni e le forme degli elementi sono più facili da immaginare perché puoi adattarli alla cornice che hai già disegnato.
Fonte immagine: baldiri.