5 modi per aumentare il contrasto nel tuo web design

Il tuo progetto di design manca di quel pop speciale? È probabile che ciò che ti manca sia abbastanza contrasto. Il contrasto fornisce differenziazione tra gli elementi, facendo apparire ognuno più individuale, prominente e speciale.

Il contrasto del design viene creato in diversi modi e utilizzando tutti i diversi tipi di elementi. Dalla tipografia al colore allo spazio, creare contrasto può prendere un disegno da bleh a wow. Ecco cinque modi per farlo.

1. Rendilo più grande (o più piccolo)

La simmetria e l'ordine possono essere una sorta di trappola quando si tratta di creare un punto focale nel design. Troppi elementi con lo stesso peso finiranno per sembrare uguali.

La soluzione facile è rendere un elemento significativamente più grande o più piccolo.

L'oggetto che è diverso diventa il punto puledro immediato. L'utente sarà attratto da quell'area della tela perché è diversa.

Rendere un elemento, foto o blocco di testo più grande o più piccolo è molto più che una semplice dimensione fisica; è anche un peso visivo. Il modo più semplice per capire questo è con la tipografia. Guarda le immagini qui sopra. Entrambe le parole sono le stesse? Dimensioni? ma nota quanto più peso ha una delle versioni. Questo contrasto è dovuto a tratti spessi o sottili nelle forme delle lettere.

Puoi applicare questo stesso concetto anche a quasi tutti gli altri elementi di design.

Guarda il sito web di Little Flyers, sopra. Presta particolare attenzione alla navigazione basata sul testo nella parte superiore della pagina e ai pulsanti nella parte inferiore dello schermo. Quale testo attira l'occhio più velocemente? Perché? Tutto il tipo è della stessa dimensione, ma il trattamento con una scatola all'interno di una foto colorata lo fa sembrare più grande.

2. Aggiungi un po 'di Texture

Con gli stili piatti e minimali come il driver dominante nelle tendenze del design in questo momento, la trama è meno comune di una volta. Ma lo vedi ancora in molti posti, forse senza nemmeno pensarci.

Passare da un elemento piatto a qualcosa con una trama, uno schema o uno stile tridimensionale aiuterà a creare un'area di messa a fuoco. E mentre aggiungere texture a uno sfondo potrebbe essere la soluzione immediata, può essere utilizzato anche in altri modi.

Prendi in considerazione un elemento di testo con una sensazione strutturata. (Questo è molto popolare con molti stili tipografici vintage.) I tipi principali di texture sono ruvidi e lisci. Possono lavorare l'uno con l'altro o isolatamente per aiutare a creare un focus visivo. Quando si lavora con il design stampato, è possibile aggiungere fisicamente una texture in base al tipo di carta utilizzata, alle opzioni di stampa tipografica e ad altri metodi di pubblicazione.

3. Cambia la forma

Guarda l'immagine qui sopra. Qual è la prima cosa che vedi? Per me è l'oggetto circolare con il punto interrogativo all'interno.

Sai perché? In un'immagine piena di rettangoli, è l'unico cerchio. La differenza dell'oggetto è ciò che lo distingue. Il fatto che il personaggio sia capovolto è anche un driver di attenzione. Cambiare la forma o l'orientamento di un elemento può aggiungere un impatto immediato.

Provalo la prossima volta che il tuo design si sente un po 'piatto. Arrotonda i bordi dei pulsanti. Metti una foto in una cornice circolare anziché rettangolare. Optare per una foto verticale. Usa un posizionamento che è appena un po 'fuori luogo.

Una di queste tecniche potrebbe renderti un po 'a disagio all'inizio. Ma continua a sperimentare e giocare con le opzioni finché non trasformi quello stesso vecchio rettangolo in qualcosa di un po 'più interessante.

4. Aggiungi colore (o prendilo)

La teoria del colore è uno dei concetti più importanti a tua disposizione. Cambiando tonalità, aggiungendo o rimuovendo il colore, puoi modificare l'umore generale di un disegno. Il colore può far sembrare le cose grandi o piccole, audaci o sottomesse. Il trucco per alcune delle più brillanti tavolozze di colori è attraverso l'uso del contrasto.

La forma più semplice di contrasto inizia con la ruota dei colori. L'associazione dei colori lungo la ruota produce varie combinazioni contrastanti:

  • Complementare: Coppie ad alta intensità dai lati opposti della ruota
  • Triadic: Colori intervallati in incrementi di un terzo lungo la ruota.
  • Split-complementari: Un colore e i due colori accanto alla tonalità complementare.

Esistono altre opzioni di contrasto del colore che possono funzionare particolarmente bene se hai già una tavolozza di colori e non ti importa fare aggiustamenti sottili.

  • Mescola i colori caldi, freddi e neutri.
  • Cambia il colore di base aggiungendo tinte e toni in modo che la saturazione sia diversa da colore a colore.
  • Intrecciare i colori chiari e scuri; pensalo come yin e yang.
  • Aggiungi elementi senza colore. Gli accenti neri o bianchi possono aggiungere enfasi negli spazi con molto colore; e il colore può aggiungere contrasto al bianco e nero.

5. Fai qualcosa di inaspettato

Una forma o un dettaglio inattesi possono aggiungere anche la giusta quantità di contrasto. Una sorpresa nel design è tutto ciò che non corrisponde a tutto il resto, ma funziona ancora in armonia con esso.

Questi elementi includono:

  • Un elemento di asimmetria in un design altrimenti simmetrico.
  • Uno spunto visivo che ti guida attraverso il design, come una forma intensa o un modello di tracciamento degli occhi, come quello usato nel sito per Vibrant, sopra.
  • Un cambiamento in un modello o elemento ripetitivo.
  • Cambiare l'orientamento o l'allineamento di un elemento o testo, come nell'Anima (con la lettera? I?), Sopra.
  • Modifica del posizionamento o della dimensione di un elemento in una fila di elementi visivi.
  • Stile di immagini diverso, ad esempio il cambio di foto in un'illustrazione o un pizzico di animazione.
  • Mescolando stili visivi o tipografici complessi e semplici.

Conclusione

La cosa bella del cambiamento del contrasto tra elementi è che può fornire un impatto immediato in un progetto di design. Modificando l'aspetto degli elementi, è possibile modificare l'attenzione visiva e aiutare gli utenti a perfezionare la parte del design più importante per il messaggio.

La mancanza di contrasto è un problema comune e spesso facile da rimediare.Quante volte quando senti il ​​temuto? Fallo pop? da un cliente o un collaboratore, quello che stanno davvero cercando di dire è che vorrebbero vedere più contrasto negli elementi di design. Ora sei armato degli strumenti per affrontare questa sfida.