Share
Il web design è essenzialmente solo un'evoluzione dei principi e delle teorie create durante l'evoluzione della stampa. L'industria del design ha portato molte tecniche sul Web, ma alcune hanno impiegato più tempo per padroneggiare in un ambiente virtuale. Sfortunatamente, non abbiamo una singola piattaforma in cui i nostri contenuti possano apparire; dobbiamo combattere con più browser, sistemi operativi e dimensioni dello schermo.
Come il web si è sviluppato, così abbiamo i principi di progettazione che osserviamo. Negli ultimi anni il design a griglia è aumentato, in base al quale i progettisti possono disporre il proprio sito secondo una griglia a colonne. I sistemi a griglia sono stati un modo molto popolare per organizzare e allineare elementi e per aggiungere un ordine generale a una pagina, applicando proporzioni e equilibrio.
Basando le nostre conoscenze sull'utilizzo della proporzione e dell'equilibrio, è possibile utilizzare un altro principio di progettazione di stampa: la griglia di riferimento.
La griglia di base è una tecnica utilizzata per migliorare la tua tipografia basata sul web. Essenzialmente, allinea tutto il tuo testo a una griglia verticale in cui il fondo di ogni lettera è posizionato sulla griglia, proprio come scrivere su carta a righe. Il risultato finale è un corpo di testo perfettamente organizzato, con un riconoscimento inconscio di equilibrio e congruenza.
Come ho detto prima, la stampa è un mezzo statico. La progettazione di un formato di stampa ti consente di specificare cosa vedranno tutti gli spettatori. Tuttavia, a causa delle piattaforme alternative che il tuo design può essere interpretato dal Web, il tuo CSS renderà inevitabilmente l'altezza della tua linea e altri valori tipografici, in modo diverso per i diversi utenti. Per molti designer, questo risulta essere solo una congettura e prevedere ciò che l'utente finale vedrà.
Molti progettisti di stampa utilizzano le griglie di riferimento in combinazione con la propria suite di progettazione, che si tratti di InDesign o altro. Le griglie in stampa risalgono ai primi anni del 1200 e non sono limitate al solo web design. In realtà, tutto, dalle griglie al rapporto aureo (cioè, la maggior parte delle teorie basate sulla matematica) sono condivisi in altri aspetti della vita, in particolare l'architettura.
La griglia consente di portare tutti gli elementi del design - caratteri di tipo, fotografia, disegno e colore - in un rapporto formale tra loro; vale a dire, il sistema a griglia è un mezzo per introdurre l'ordine in un progetto. Un disegno deliberatamente composto ha un effetto più chiaro, più ordinato e più efficace di un annuncio messo insieme a caso. - Josef M? Ller Brockmann
Ora, diamo un'occhiata a come effettivamente creiamo la nostra griglia di base.
In primo luogo, dobbiamo definire un'altezza di linea per la griglia di base basata su un rapporto con la nostra dimensione del carattere; per questo esempio, 1: 1.5 è una buona quantità che ci offre un vantaggio generoso del 50%. Se avessimo una dimensione del testo di 12px, l'altezza della linea (usando questo rapporto 1: 1.5) sarebbe 18px. Il 150% è una bella quantità che ci offre un design che sarà facilmente leggibile, ma questo valore può essere diverso. Tuttavia, quando si prende in considerazione l'altezza della linea, si dovrebbe cercare di attenersi a un intervallo di circa il 130% -160%.
Prima di andare avanti, dovresti sapere esattamente come funziona la proprietà line-height di CSS. L'altezza della linea è l'altezza collettiva complessiva della riga di testo, non il testo stesso. Funziona aggiungendo il riempimento sopra e sotto il testo per spaziarlo. Se prendiamo effettivamente del testo e lo mettiamo su uno sfondo governato, vedremo il testo posizionato tra le righe, non necessariamente su di loro.
Per semplificare le cose, supponiamo che il nostro testo abbia una dimensione base di 10px. Attaccando al nostro rapporto approssimativo, significa che la nostra altezza della linea sarà di 15px, anche se potremmo variare questo. (Per fare una nota a margine, 10px è piuttosto piccolo e non lo consiglierei necessariamente nella maggior parte dei casi, ma lo sto usando solo per renderlo più semplice nel reparto matematica). Per fare in modo che vari elementi si adattino al nostro sistema di griglia di base, è necessario impostarli nel nostro CSS.
Prima di continuare, tuttavia, questi esempi presuppongono che si stia utilizzando una sorta di reimpostazione CSS. Se non lo sei, i margini predefiniti potrebbero interferire con il lavoro che facciamo oggi.
Per dare il via, dopo aver impostato l'altezza della linea, dobbiamo applicare un margine coerente sotto ogni intestazione e paragrafo. Dato che stiamo lavorando con una griglia di 15px qui, diamo il via a qualcosa sovrascrivendo il margine inferiore standard di un tag di paragrafo (per impostazione predefinita, questo è 1em che, in questo caso sarà 10px) per essere uguale all'altezza della linea all'interno del testo. Questo crea una linea vuota proporzionale sotto ogni paragrafo che è uguale all'altezza se il testo risiedeva lì.
p margin-bottom: 15px;
Analogamente, per le intestazioni, abbiamo semplicemente bisogno di continuare ad obbedire agli incrementi di 15 pixel. Semplicemente taggando il nostro margine oltre l'altezza della linea del 150%, creiamo una rottura simile e coerente.
h1 font-size: 20px; altezza della linea: 30px; margin-bottom: 15px;
Prima di andare oltre, voglio sottolineare che il tuo testo potrebbe non essere sempre in linea, se ne hai applicato uno al tuo background. Non preoccuparti, a patto che l'altezza della linea resti la stessa. Se il testo fluttua nel mezzo delle linee, puoi facilmente giocare con i tuoi margini, ma non è necessario.
Quindi, come gestiamo le liste? In primo luogo, vogliamo applicare il nostro margine standard nello stesso modo in cui lo abbiamo fatto ai nostri paragrafi. Questo dà alle pause un livello di coerenza con il contenuto.
ul, ol margin-bottom: 15px;
Questo sta iniziando a diventare facile ora! Se hai ancora un'altezza di riga di 15px definita altrove, le tue liste si adattano bene al resto del contenuto.
Le immagini sono dove inizia a diventare un po 'più difficile. Preferibilmente, vogliamo avere la stessa coerenza nei nostri margini, quindi l'immagine viene trattata allo stesso modo di un blocco di testo. Significa che le tue immagini devono essere ridimensionate in multipli del valore di altezza della linea che, in questo caso, è 15.
Nel mio esempio, ho l'immagine flottata a destra, quindi ho un margine di 15px applicato a sinistra e in basso. Accanto al margine esistente al di sotto del paragrafo, questo ci ha dato un margine consistente pari al resto della nostra griglia di riferimento.
img.left float: left; margine: 0 0 15px 15px;
Naturalmente, questi non sono gli unici elementi che dobbiamo modificare per conformarci alla nostra nuova griglia di riferimento. La chiave è assicurarsi di lavorare con un incremento consistente, quindi tutto è ristretto alla stessa griglia. Ciò può comportare l'armonia e l'equilibrio diventano evidenti in tutta la tua pagina Web quando vengono utilizzati con grandi quantità di testo.
Ecco il nostro esempio finito, una semplice pagina web con paragrafi, titoli, un'immagine e un elenco. Se vuoi uscire dal tuo righello, puoi, ma posso assicurarti che tutto segue la griglia coerente basata sulla nostra tipografia.
Abbiamo appena rotto la superficie dell'uso delle griglie di base. Può diventare molto più difficile quando inizi a provare ad applicarli a progetti più complessi, che in pochi sono utilizzati sul web. Tuttavia, è possibile e può risultare in un design proporzionato e bilanciato che possa contribuire a migliorare l'esperienza dell'utente finale.
La griglia di base è un ottimo modo per aggiungere un po 'di equilibrio e proporzione alla tua tipografia. È una di quelle implementazioni sottili che possono aggiungere un tocco naturale ai tuoi progetti. Nel caso della griglia della linea di base, la nostra tipografia diventa coerente con la spaziatura standard, dandole quel tocco armonioso.
Sfortunatamente, tuttavia, dobbiamo ancora combattere la minaccia di incompatibilità del browser che può rendere il nostro CSS diverso per i diversi utenti quando navigano su browser alternativi, sistemi operativi o dispositivi. Questo è un compito che non sembra essere alla sua uscita, anche se l'aggiunta di una griglia di base fornisce altri vantaggi. Ad esempio, questo tipo di sistema di griglia può essere di grande aiuto quando si ridimensiona e, quindi, forzare un browser a ri-renderizzare il proprio CSS. Le griglie di base offrono un po 'più di flessibilità e incoraggiamento per il browser a fare le cose correttamente.
Questo è stato un articolo più breve del solito, ma questo perché le griglie di base non hanno davvero molto da spiegare o mostrare come usare. La vera magia arriva quando i designer eseguono ritocchi e test per assicurarsi che la sua griglia di base funzioni, e, soprattutto, rende il design visivamente accattivante (un po 'più). Per una rotazione alternativa sulle cose, leggi l'articolo di A List Apart su questo argomento. Alla prossima, felice progettazione!
Accentsconagua