Colori smorzati: Definizione e come usarli in siti web e applicazioni

Pubblicità

Il concetto di usare colori tenui nel vostro design non è certo nuovo. Quando lo si confronta con la tendenza dei colori vivaci che abbiamo quasi ovunque, sembra sicuramente qualcosa di nuovo.

Ogni moderno UX designer sa che la tendenza minimalista e piatta ha preso piede negli ultimi anni.

Ci sono aziende del calibro di Microsoft, Apple e Twitter, e stanno tutte approfittando di questo stile emergente quando progettano i loro prodotti digitali.

Il design piatto va di pari passo con l’approccio minimalista.

Il design piatto elimina la profondità non usando ombreggiature e gradienti, e favorisce la geometria monodimensionale.

FireShot-Capture-1789-BO Muted Colors: Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

Rendere le cose troppo semplici ha avuto in realtà l’effetto opposto a quello richiesto, e gli utenti trovano più difficile capire dove possono cliccare e perché.

Grazie a Dio, c’è una terza tendenza che aiuta. Anche i colori tenui hanno preso piede.

exploration-pastel-color-2- Muted Colors: Definizione e come usarli in siti web e applicazioni

esplorazione-colore pastello-2- Colori attenuati: Definizione e come usarli nei siti web e nelle app

Le combinazioni di colori tenui sono ovunque nella pubblicità a stampa. Tuttavia, in una campagna di stampa, non è necessario un design minimalista o un effetto piatto, perché l’utente non sta interagendo con un pezzo di carta, ma ha solo bisogno di guardare.

Tuttavia, la palette di colori tenui ha effettivamente assunto un nuovo ruolo oltre a quello primario nelle pratiche di UX funzionale.

FireShot-Capture-1776-Air Muted Colors: Definizione e come usarli in siti web e applicazioni

Se cercate di trovare una definizione di colori tenui, troverete che la migliore risposta alla domanda “Cosa sono i colori tenui” sta nel fatto che questi colori rappresentano il moderno, l’efficienza e la progressività.

Trasmettono all’osservatore che qualsiasi sostanza stiano guardando, è rilevante e non obsoleta. Per esempio, si può vedere il colore smorzato nel video “Hotline Bling” di Drake.

FireShot-Capture-1778-Rot Muted Colors: Definizione e come usarli nei siti web e nelle app

Questi colori e i pastelli smorzati erano molto intenzionali, e parlano alla cultura moderna e alle masse. Significano anche qualcosa del momento. Essendo molto più facili da guardare rispetto ai colori duri e netti, sono anche concettualmente alla moda.

FireShot-Capture-1780-Vic Muted Colors: Definizione e come usarli in siti web e applicazioni

Pubblicità

Al giorno d’oggi, gli UX designer dovrebbero sapere che le loro scelte di colore sono in realtà le loro scelte di design, e il colore può indicare molto, proprio come il flusso, il contenuto, l’usabilità e la funzione.

Scegliere tra un verde vibrante o toni tenui di verde può fare la differenza tra l’utente che rimane sul sito, e l’abbandono istantaneo. Proprio come il modo in cui un’interfaccia utente goffa può sembrare un po’ analogica, quei colori vivaci e brillanti possono sembrare un’esplosione del passato.

I colori tenui appaiono così a causa di:

FireShot-Capture-1781-VR- Muted Colors: Definizione e come usarli in siti web e applicazioni

  1. Basso valore
  2. Bassa saturazione
  3. Miscelazione con colori adiacenti
  4. Combinazione di uno qualsiasi dei precedenti

Ci sono variazioni della palette di colori piatti che hai visto migliaia di volte, e spesso non si adattano all’estetica del design che stai cercando. Anche quando tutto il resto ci piace.

Ecco dove un’opzione di colore tenue può fare meraviglie, poiché quando la si usa con un’estetica piatta, è un look classico e raffinato che è abbastanza diverso per distinguersi da tutti gli altri progetti piatti.

animale-800-x-600-large-1 Colori tenui: Definizione e come usarli in siti web e applicazioni

animale-800-x-600-large-1 Colori attenuati: Definizione e come usarli in siti web e app

Ma cos’è una palette di colori tenui?

Per gli scopi di questa conversazione, si tratta di qualsiasi tinta che è altamente satura e l’aggiunta di un tono, una tinta o un’ombra per renderla sommessa e meno brillante. Spesso si ottiene come risultato un colore più morbido e calmo che è più facile da lavorare e da abbinare al design generale.

FireShot-Capture-1784-AMA Muted Colors: Definizione e come usarli in siti web e applicazioni

Il “colore” è in realtà un termine molto impreciso che usiamo quotidianamente. È costituito da tre componenti principali, vale a dire tonalità, saturazione e valore.

Se avete un palloncino dove l’equatore è la tinta su un 360 gradi, l’asse verticale è il valore, e l’orizzontale è la saturazione, i colori possono essere visualizzati sul volume interno.

FireShot-Capture-1785-Des Muted Colors: Definizione e come usarli nei siti web e nelle app

Ci sono altri concetti che possono aiutare con questa domanda, come “sfumatura” e “tinta”. Per esempio, mescolare qualsiasi colore con il nero è noto come “ombreggiatura”, e risulta in un colore un po’ più tenue.

Tuttavia, aggiungere il bianco a un colore è noto come “tinta”, e risulta in un colore più luminoso. Tuttavia, non tutti i colori possono diventare luminosi o scuri, come il giallo per esempio. Renderlo più scuro lo trasformerà in marrone.

Tinte in colori tenui

FireShot-Capture-1783-Tim Colori tenui: Definizione e come usarli in siti web e applicazioni

L’aggiunta di bianco a un colore, o tinta, dà un colore che è significativamente più leggero dell’originale, e di solito conosciuto come un pastello. Possono variare da quasi bianco, a un po’ più leggero del colore completamente saturo.

FireShot-Capture-1786-Kve Muted Colors: Definizione e come usarli in siti web e applicazioni

La loro sensazione è più leggera, più morbida, e ti dà un’estetica più rilassante rispetto alle opzioni più audaci e luminose.

Sono molto popolari con le illustrazioni e funzionano anche a meraviglia sulle foto. Si allontanano dall’estetica principale, e sono più comunemente usati quando si ha un altro punto focale rispetto all’estetica principale.

Tinte in colori tenui

FireShot-Capture-1787-Céd Muted Colors: Definizione e come usarli in siti web e applicazioni

Le sfumature, d’altra parte, fanno apparire il colore più pesante all’occhio, e vanno da un colore quasi nero, a un tocco più scuro di quello originale. Funzionano bene in una varietà di ambienti, specialmente se usati con meno nero.

story-app-exploration-large Muted Colors: Definizione e come usarli in siti web e applicazioni

Ci sono progetti che sono davvero scuri e hanno un sacco di nero che comportano problemi di leggibilità a meno che non li eseguiate eccezionalmente bene. La gente spesso presume erroneamente che le tonalità debbano sembrare nere, ma quando si sta evolvendo uno dei colori tradizionali degli schemi di flat design, non è questo il caso.

Toni nei colori tenui

FireShot-Capture-1782-Wha Muted Colors: Definizione e come usarli in siti web e applicazioni

Combinando il bianco e nero con un colore per farlo apparire più morbido si ottengono i toni. La maggior parte dei colori sono in realtà fatti usando i toni, in quanto sono colori complessi con un appeal quasi universale.

Questo è dovuto al fatto che tirano da alcune parti diverse dello spettro dei colori, ed è per questo che i toni sono la prima scelta di artisti e designer per la maggior parte dei loro progetti.

unsplash-app-exploration-la Muted Colors: Definizione e come usarli in siti web e applicazioni

unsplash-app-exploration-la Muted Colors: Definizione e come usarli nei siti web e nelle app

Pensieri finali sui colori tenui

A prescindere dal fatto che tu ti stia allontanando da alcuni colori tradizionali del flat design, scegliere una delle tecniche di colore di cui sopra non è la tua unica scelta. È possibile combinare sfumature, tinte e toni per creare qualcosa di diverso e assolutamente coinvolgente.

La lezione con questi semplici studi è che non si può essere presi dal dover usare una tendenza “da manuale”. Usate un tipo di tecnica diversa per creare la vostra propria tendenza. La palette di colori e cambiarla può essere meraviglioso, e si può ancora ottenere un design piatto.

Se ti è piaciuto questo articolo sui colori tenui, dovresti controllare anche questi:

  • Sito web fotografico: Design, idee, come crearne uno
  • Sports Websites Design: Suggerimenti, ispirazione e migliori pratiche
  • Siti web per ristoranti: Suggerimenti, Ispirazione e Migliori Pratiche

Download illimitato: 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.