Comprensione completa del contrasto nel design
Di solito il tema del contrasto è riservato ai principianti. I libri diranno "bianco e nero hanno contrasto, rosso e arancione no" - ma c'è molto di più.
I libri per principianti di solito toccano solo il contrasto dei colori, ma per quanto riguarda le dimensioni e il contrasto delle forme? Spesso il modo più semplice per dire ad un designer dilettante da un professionista è quello di guardare al loro uso del contrasto.
Creare una struttura di importanza usando dimensioni, forma e colore è ciò che dà un impatto e una leggibilità alla pagina per il lettore.
In questo post, esamineremo il contrasto in dettaglio, esaminando la grande tipografia, le forme funky, le chiare divisioni, le immagini e il modo in cui si adattano correttamente usando il contrasto per una buona esperienza utente.
Un'introduzione al contrasto
Il contrasto può essere definito come "la differenza nelle proprietà visive che rende un oggetto (o la sua rappresentazione in un'immagine) distinguibile dagli altri oggetti e dallo sfondo." In un inglese semplice che potrebbe essere descritto al suo livello più basilare come "cose che sembrano diverse l'una dall'altra. ”
Per i designer in tutti i settori della pratica, ma in particolare per i web designer, il contrasto è alla base di praticamente tutto. Cerchiamo costantemente di stabilire gerarchie di importanza, attirare le persone verso determinate aree di una pagina e comunicare un messaggio chiaro e conciso al centro del nostro lavoro. Creare relazioni tra diversi elementi di un design è solo la cosa più importante che puoi fare. Probabilmente lo hai già fatto molto, consapevolmente o meno.
Esempi evidenti di contrasto sono il bianco e il nero, grandi e piccoli, veloci e lenti, spessi e sottili. Gli opposti sono il modo più semplice per cogliere il contrasto, ma quando si applica il contrasto al lavoro di progettazione non è mai come il bianco e nero. Se ti stavi chiedendo, è da lì che viene il proverbio su una situazione di "bianco e nero", che porta anche a dire che qualcosa è una "zona grigia". Nel design spesso paragoniamo cose diverse ma non opposte, per esempio un pulsante H1 e un pulsante h1, o un pulsante "aggiungi al carrello" e un pulsante "check out". È qui che entrano in gioco maggiori livelli di contrasto.
Diamo un'occhiata ai diversi tipi di contrasto e ad alcuni esempi di come vengono utilizzati nel web design.
Contrasto di colore
L'esempio più comune di tutto, questo è praticamente il punto in cui tutto inizia. Se due colori sono diversi l'uno dall'altro (ad esempio, bianco e nero) hanno un contrasto elevato, mentre se sono molto simili (rosso e arancione) hanno un contrasto basso.
TekRoc utilizza un contrasto cromatico molto evidente qui sovrapponendo un'immagine brillante e vibrante su uno sfondo molto scuro. L'arancione brillante e il blu si distinguono chiaramente e l'occhio viene immediatamente attratto da loro sopra ogni altra cosa sulla pagina.
Tim Van Damme fa un uso superbo del contrasto dei colori nel design del sito GoWalla. Non solo il bordo multicolore nella parte superiore della pagina si distingue e crea interesse visivo in quanto è diverso dallo sfondo chiaro, ma ha anche aggiunto ombre drop 1px estremamente sottili al testo sui pulsanti. L'arancione leggermente più scuro aiuta davvero a creare contrasto tra il testo bianco e lo sfondo arancione.
Envato sono i maestri del contrasto sottile e la tendenza ad usare i bordi 1px per questo può probabilmente essere attribuita a loro più di chiunque altro. Tutti i loro siti presentano più bordi di un singolo pixel per creare contrasto tra le sezioni. Nello screenshot sopra le due aree di contenuto potrebbero essere state divise solo dallo spazio, o da una singola riga, tuttavia usando due linee (una scura, una luce) creano un sottile contrasto tra le due sezioni che è estremamente efficace.
Contrasto di dimensioni
La successiva forma di contrasto più comune sta usando la dimensione. Qualcosa di grande accanto a qualcosa di piccolo indica generalmente che l'oggetto più grande è molto più importante. Esatto, stiamo dicendo che le dimensioni contano!
MadeByWater è il portfolio di design di Jordan Vitanov. Usa il contrasto delle dimensioni con una tipografia estremamente grande per trasmettere istantaneamente una citazione di Bruce Lee che definisce il motivo per cui ha scelto di autoproclamarsi con il nome MadeByWater.
28Thiers è un attraente bar di lusso in Francia. Il loro sito web fa grande uso del contrasto delle dimensioni per attirare immediatamente l'attenzione sulla grande fotografia del Martini con ingredienti assortiti che la circondano. È subito chiaro che questo è l'elemento più importante della pagina e il designer vuole che tu guardi quell'immagine e venga venduta sul fatto che si tratta di una struttura estremamente elegante.
SlideScreen fa più usi di contrasto di dimensioni nel loro sito. Oltre ad avere il loro prodotto visualizzato con uno screenshot di grandi dimensioni, utilizzano anche pulsanti molto grandi per le loro chiamate principali all'azione. Vogliono che guardi il video del loro prodotto in azione, e poi vogliono che tu lo scarichi. Questi sono gli elementi più importanti della pagina, quindi sono sostanzialmente più grandi delle altre cose che li circondano.
Forma Contrasto
Il contrasto della forma significa rendere le cose notevoli grazie alla loro differenza di forma fisica rispetto ad altre cose nella pagina. Al suo livello più elementare questo può essere usato in cose come l'aggiunta di angoli arrotondati ai pulsanti, ma portato a livelli più estremi può attirare molta più attenzione.
Anebstar utilizza il contrasto delle forme per mostrare tre immagini importanti nell'intestazione. Poiché la maggior parte delle cose sul web sono rettangolari, uno dei modi più semplici per ottenere il contrasto della forma è usare un cerchio. Ovviamente anche in questo esempio è stato mescolato un piccolo contrasto di dimensioni, ma puoi vedere chiaramente come gli elementi circolari si distinguono da tutto il resto della pagina.
Carbonmade è un sito straordinario con un vero mix di splendide illustrazioni e contenuti ben presentati. Un semplice pulsante di registrazione qui avrebbe funzionato, ma le dimensioni e il contrasto del colore probabilmente non lo avrebbero distinto abbastanza dallo sfondo occupato. L'aggiunta di un polipo amichevole dietro al pulsante dà davvero quella differenza di forma per attirare l'attenzione direttamente su di esso.
WireframePlus usa un contrasto di forma semplice ma estremamente efficace per evidenziare il prezzo dei loro servizi. Vogliono che tu legga il loro contenuto ma soprattutto stanno cercando di venderti al loro ottimo prezzo mettendo dietro un grosso cerchio.
Contrasto posizionale
La creazione di contrasto nel posizionamento è un modo molto accurato per creare una gerarchia di elementi utilizzando esclusivamente allineamenti diversi. Negli ultimi tempi questa tecnica è stata resa popolare da gente come Elliot Jay Stocks, che l'ha sfruttata all'estremo nel suo più recente sito di portfolio.
Elliot Jay Stocks utilizza una griglia dettagliata per definire l'allineamento di tutti gli elementi sul suo sito. L'attenzione è richiamata su aree specifiche da loro rispettivamente rientrate a sinistra oa destra. In questo particolare screenshot il paragrafo introduttivo si distingue davvero perché è allineato più a sinistra, dove l'occhio guarda prima di leggere qualcosa. Questo tipo di allineamento ha "ispirato" molti altri designer negli ultimi dodici mesi per creare design con contrasto posizionale nello stesso tipo di stile.
SimpleBits è il marchio con cui lavora Dan Cederholm, potresti conoscerlo da progetti come Dribbble . Sulle prime impressioni, il sito SimpleBits non sembra avere alcun contrasto posizionale, tuttavia quando si inizia a scorrere, tutto diventa chiaro. Mentre alcune persone usano un'immagine di sfondo fissa per creare un elegante effetto stilistico, Dan ha reso il suo logo e la sua navigazione completamente fissi in modo che, indipendentemente da dove si scorre, rimangano sempre nello stesso punto sullo schermo. Questo è un grande esempio di contrasto posizionale non standard.
SquaredEye è il negozio di design gestito da Matthew Smith e le pagine di case study nel suo portfolio fanno un uso fantastico del contrasto posizionale. È necessario vedere l'intera pagina per ottenere veramente l'idea, ma in sostanza Matteo ha meticolosamente creato un posizionamento specifico per ogni sezione della pagina. Questo crea un fantastico contrasto tra le sezioni e crea un grande interesse visivo per il lettore senza essere affatto distratto.
Conclusione contraria
C'è molto più da contrapporre che solo "luce e buio" - è uno dei principi più importanti nel design e non si può quasi mai averne troppa, a patto che lo si usi correttamente.
Portare i tuoi progetti al livello successivo non significa trovare il carro successivo per salire su angoli arrotondati e far cadere ombre per tutto, si tratta di trovare modi migliori e più efficienti di comunicare il messaggio dietro al design.
Esplorare il contrasto in dettaglio e utilizzarlo per il suo pieno potenziale è uno dei modi migliori per farlo.
Cosa ne pensi? Quanta attenzione paghi per contrastare nei tuoi progetti? È qualcosa a cui pensi tutto il tempo o è qualcosa che viene naturale?