Il web è un arcobaleno di opzioni di colore. Il colore è un ottimo strumento per attirare l'attenzione degli utenti, fornendo interesse visivo e impatto e creando contrasto per la leggibilità. Il colore è anche al centro di molte tendenze del design, compresi gli stili piatti e materiali.
Ma puoi sbagliare con i colori? Ci sono tonalità o combinazioni da cui dovresti sfuggire? In una parola? sì! Oggi stiamo osservando i colori o le combinazioni di colori che dovresti evitare durante la progettazione di siti Web e app. (E sulla possibilità che tu abbia già fatto uno di questi errori, offriamo anche suggerimenti alternativi).
Neon
I colori al neon possono essere divertenti, spigolosi e aggiungere molto pop al design. Sfortunatamente sono incredibilmente duri per gli occhi, dando agli utenti questo? sentirsi dove tutto fa male a guardare.
Il problema con i neon è che sono troppo luminosi per leggere con facilità e causare problemi associati a sfondi scuri o chiari. Quando vengono usati con il testo, i neon presentano problemi di leggibilità poiché le lettere tendono a sanguinare sullo sfondo. Gli sfondi al neon sono spesso opprimenti e distraggono dal messaggio principale del design.
Prova questo invece: Rimuovi parte della luminosità dai colori al neon in modo che abbiano un aspetto più scuro e più sottile sugli schermi.
Orange You Glad fa un ottimo lavoro incorporando? Quasi? colori al neon nel design della loro homepage in vari modi. Il tema comune è che i neon sono usati per elementi più piccoli e con sottili cambiamenti di colore che rendono più facili gli occhi rosa, giallo e verde.
? Vibrazione? Colori
Quando i colori altamente saturi sono accoppiati, creano un effetto vibrante? dove i colori sembrano quasi muoversi in un movimento sfocato o luminoso. Non vuoi farlo.
Questa vibrazione può essere sconvolgente per gli utenti come delineato dal teorico del colore Josef Albers nella sua guida classica? Interazione di colori :? ? Questo effetto inizialmente eccitante si sente anche aggressivo e spesso anche a disagio ai nostri occhi. Si trova raramente usato tranne che per un effetto urlante nella pubblicità, e di conseguenza è sgradevole, antipatico ed evitato.
Puoi quasi prevedere cosa farà vibrare i colori prima di metterli fianco a fianco.
- Alta saturazione di ogni colore
- Complementare sulla ruota dei colori
- Distanziati di 180 gradi sulla ruota dei colori
- La conversione dei colori in scala di grigi produce un contrasto minimo
Un classico esempio è l'abbinamento rosso brillante e verde. Il popolare? Natale? la combinazione è uno dei più grandi (e più ampiamente usati) reati a colori. Queste combinazioni presentano anche un problema di accessibilità perché sono indecifrabili da persone con daltonismo.
Prova questo invece: Se devi usare? Vibra? combinazioni di colori, separarli con qualcos'altro (preferibilmente un neutro) in mezzo.
Luce sulla luce
Questo è uno di quegli errori che accade tutto il tempo. Forse è perché puoi farcela con progetti di stampa, forse è a causa di alcune impostazioni dello schermo che lo rendono praticabile, ma accendi le combinazioni di colori chiari semplicemente non tagliarlo.
Sono difficili da leggere. Ogni singola volta.
È qui che si verificano i reati più gravi: le intestazioni degli eroi che accoppiano un'immagine e un testo bianco, ma il testo ricade su una parte leggera dell'immagine. A questo punto le parole sono illeggibili. Succede molto più spesso di quanto dovrebbe. Se ogni lettera non è chiaramente leggibile, è necessario ripensarla.
Prova questo invece: Per fortuna, ci sono soluzioni piuttosto semplici per questo problema:
- Scegli una nuova immagine con uno sfondo di colore uniforme.
- Usa una casella colorata per il testo sopra le immagini con molte variazioni di colore.
- Considerare una sovrapposizione di immagini a colori per aumentare il contrasto tra lo sfondo e gli elementi di testo.
Qualcosa di color arcobaleno
Mentre è quasi inutile dire che i siti Web color arcobaleno semplicemente non funzionano. (Pensa a quante regole della teoria dei colori stai rompendo solo immaginando un sito web a tema arcobaleno nella tua testa proprio ora.)
Le combinazioni di colori dell'arcobaleno sono travolgenti e opprimenti. Potrebbero attirare l'attenzione di un utente all'inizio, ma quell'utente rimbalzerà sicuramente quando capirà che il contenuto è indecifrabile.
Prova questo invece: Se si desidera utilizzare una tavolozza di colori ad ampio raggio - come la tendenza - optare per il blocco dei colori o per gli stili delle carte, in cui i colori possono essere associati agli elementi. Questo design in stile contenitore consentirà una maggiore flessibilità con il colore mentre crea un senso di organizzazione e flusso.
Luminoso su chiaro / scuro su scuro
Proprio come la luce sulla luce, e la combinazione di saturazione del colore simile causerà problemi. Dovrebbe essere ovvio, ma evitarli.
Se pensi che questo non ti accadrà, fai attenzione quando utilizzi combinazioni di colori monocromatiche. Ecco quando i designer tendono a scivolare qui. (In caso di dubbio utilizzare più contrasto).
Prova questo invece: Pensa in contrasto. Se si desidera utilizzare più colori chiari o scuri, considerarli come opzioni per gli schermi in un sito a scorrimento. Potrai utilizzare tutti i colori scuri o brillanti che ti piacciono e mantenere la leggibilità e l'usabilità. (È una vittoria!)
?K? Nero
Soprattutto se si attraversano spesso progetti di stampa e web, come fanno molti designer, il nero puro può essere inserito per sbaglio in progetti web. Conosciuto come? K? nero in progetti di stampa, perché usa solo una lastra o? Pure? nero (# 000000) nei progetti digitali, questo colore è semplicemente piatto.
Pensa alla realtà, tutte le combinazioni di nero sono effettivamente filtrate con altre tonalità per dargli quella ricchezza. (Anche le piume di un corvo sembrano spesso bluastre o più porpora nella giusta luce.) Usa una combinazione di nero che include altri colori per creare quel colore ricco e scuro e salva il nero puro per la stampa.
Prova questo invece: Prova un nero con sfumature di colore che si abbinino al tuo marchio o aggiungi le giuste connotazioni di colore. Più si schiarisce il nero in grigio, più è facile vedere i colori del trucco. Considerare il nero di concerto con i colori circostanti e pensare al trucco di ciascuno e al modo in cui si relazionano tra loro. (Ad esempio, usa un nero con un po 'più di un tono bluastro per compensare le tonalità arancioni o gialle per il testo o altri elementi.) Ad esempio, il colore per Wonderland, sopra, è # 0a0a0b.
Conclusione
Il motivo principale per evitare questi colori e combinazioni è la mancanza di leggibilità e contrasto. La realtà è con le giuste scelte di colore e un sacco di contrasto, quasi ogni tonalità può funzionare con moderazione.
Ma c'è un problema. Potrebbe essere necessario renderlo un po 'più scuro o più leggero di quanto pensi che funzioni. Ricorda, i colori assumono gli attributi da ciò che li circonda (compresa la retroilluminazione da uno schermo) e devono essere regolati di conseguenza.
Ecco il tuo? Trucco del giorno :? Se devi guardare gli occhi, mettere in discussione o spostare lo schermo per vedere qualcosa, il colore non funziona e devi passare a qualcos'altro.