La formula accettata per il design di un sito Web è uno sfondo bianco, testo nero o grigio scuro e colori del marchio sparsi liberamente dappertutto. La stragrande maggioranza dei siti Web con le migliori prestazioni utilizza questa formula con ottimi risultati. Ma è l'unica formula che può avere successo? In questo articolo, scaveremo a fondo nella creazione di un design con uno sfondo scuro e perché a volte è meglio usare questo concetto, perché a volte i siti Web con sfondo scuro possono outperform bianca.
Avvia un tema WordPress, SquareSpace, Webflow, Weebly o uno dei tanti altri strumenti di web design e caricherà automaticamente una pagina con sfondo bianco con testo nero. Puoi cambiarlo ovviamente, ma questa combinazione è la norma percepita.
Non deve essere così.
Se fatto bene, uno sfondo scuro per un sito web può funzionare meglio di quanto potresti pensare.
La prima preoccupazione di qualsiasi web design è cosa vuole l'utente? Quali colori si adattano al mezzo, al marchio, all'uso previsto, al pubblico di destinazione e cosa funzionerebbe sui dispositivi utilizzati per accedere al sito?
La maggior parte dei clienti presume che sarà uno sfondo bianco con caratteri sans serif neri o scuri. Questa ipotesi potrebbe non essere così in bianco e nero (gioco di parole).
Perché bianco?
Ci sono due ragioni principali per cui la combinazione di nero su bianco è considerata la norma.
Ma questo è in realtà radicato nella storia: stampa e leggibilità.
Quando facevamo tutto su carta, il colore bianco sporco della carta significava che era più facile usare il nero per l'inchiostro piuttosto che colorare la carta. avevi bisogno less tintura ed era un lavoro molto più pulito e più facile. Quei primi opuscoli stampati erano inchiostro nero su carta leggera e i supporti di stampa rimasero tali.
L'altro motivo è la leggibilità. Per molti utenti, in particolare quelli su dispositivi mobili, il bianco su nero non sempre legge bene. Quelli con disabilità visive come l'astigmatismo hanno difficoltà a distinguere il testo bianco su uno sfondo scuro. Tutto ciò che fa espandere la pupilla come uno schermo scuro significa che la menomazione è amplificata, rendendo una pagina molto difficile da leggere.
Tuttavia, un ottimo design può superare queste carenze e può avere un impatto, trasmettere emozioni e influenzare il visitatore in modi che uno sfondo bianco semplicemente non può.
Quello che devi sapere sugli sfondi scuri
Dico molto scuro qui e non nero.
Il nero è la scelta più ovvia per uno sfondo scuro per un sito Web, ma non è la tua unica opzione. Esistono migliaia di varianti di sfondi scuri e il nero è solo una di queste. Rosso scuro, verde scuro, blu scuro e altri possono funzionare con il design giusto nella giusta situazione.
Ci sono molti aspetti dell'uso del colore nel design e non tratterò il punto con tutti loro qui. Mi concentrerò solo su quegli aspetti che riguardano gli sfondi scuri.
Percezione visiva del buio
Un sondaggio molto citato condotto da ProBlogger nel 2009 ci ha mostrato che gli utenti del web non sono così favorevoli agli sfondi bianchi come potremmo pensare inizialmente.
Sebbene abbia ormai dieci anni, il sondaggio ha rilevato che solo il 47% degli intervistati preferisce sfondi sempre chiari. Un ulteriore 36% ha affermato che dipende dal blog, il 10% ha dichiarato di preferire sempre il buio e il 7% non ha saputo decidere. La maggior parte potrebbe preferire uno sfondo bianco, ma il 43% ha affermato di apprezzare il buio o che dovrebbe dipendere dal design generale del sito.
Un ulteriore sondaggio quattro anni dopo su CSS-Tricks ha riscontrato che la maggior parte degli intervistati preferisce in realtà il testo chiaro su uno sfondo scuro. Per essere chiari, questo è stato un sondaggio sull'utilizzo di strumenti di codifica e ha chiesto quale configurazione gli utenti preferissero ai loro editor di codice, scuro su bianco o bianco su scuro. Di coloro che hanno risposto, il 63% ha preferito uno sfondo scuro.
L'aspetto del contrasto
Il titolo accattivante 'L'impatto delle combinazioni di colori di sfondo del testo della pagina Web su leggibilità, conservazione, estetica e intenzione comportamentale'è uno studio interessante.
Ha esaminato come il contrasto tra i colori dello sfondo e del testo all'interno di un web design fosse il fattore decisivo per la sua usabilità e non i colori utilizzati. Non stiamo parlando di estetica qui, puramente di usabilità.
Lo studio ha rilevato che la polarizzazione ha influenzato la leggibilità più del colore effettivo dello sfondo. Quindi il bianco su nero è efficace quanto il nero su bianco fintanto che c'è stato un sufficiente contrasto tra i due colori, la leggibilità, la leggibilità e la facilità d'uso sono mantenute.
Il contrasto è incredibilmente importante nel web design.
Alcuni siti Web moderni cercano di utilizzare design a basso contrasto con risultati contrastanti. Persino Apple l'hanno provato con alcune pagine del proprio sito web.
Le pagine a basso contrasto sono più difficili da leggere, non funzionano per i non vedenti e richiedono uno sforzo maggiore da parte del lettore per dargli un senso. Niente di tutto ciò rende un buon design della pagina.
Questo va contro l'aspetto del contrasto ed è il lettore che ne soffre. A mio avviso, non importa molto se usi scuro su chiaro o chiaro su scuro purché il rapporto di contrasto sia il più ampio possibile per aiutare la leggibilità.
L'aspetto della leggibilità
Gli sfondi scuri possono essere la scelta di design perfetta in alcune situazioni.
I siti web ricchi di testo non sono una di queste situazioni. Mentre il contrasto ha un'influenza maggiore sulla leggibilità di una pagina, anche la scelta del colore ha un'influenza. Secondo Jacob Nielsen, il testo negativo, quello del testo bianco su sfondo scuro, richiede uno sforzo leggermente maggiore per la lettura e viene letto più lentamente del testo positivo che è nero su sfondo bianco.
A parte questo, fintanto che il contrasto tra il testo e lo sfondo è sufficiente, la leggibilità non viene influenzata.
Vorrei aggiungere un po 'a questo. Dicendo che il testo bianco su sfondo scuro non influisce sulla leggibilità fintanto che lo si progetta correttamente.
Per me questo significa:
- Uso intelligente dello spazio vuoto tra i blocchi per evitare perdite di luce.
- Le regole di leggibilità corrette sono seguite in termini di frasi brevi, paragrafi brevi, parole brevi e testo facilmente digeribile.
- Accurata selezione dei caratteri per massimizzare la leggibilità su schermi di dimensioni diverse.
- Mantenere il massimo contrasto quando si lavora con sfondi scuri.
- Evitare sfumature e ombreggiature con uno sfondo scuro.
La scelta dei caratteri è importante in qualsiasi web design, ma lo è ancora di più quando si ha a che fare con sfondi scuri.
Di solito selezioniamo caratteri serif perché aggiungono un tocco di classe o eleganza a un design e utilizziamo il sans serif per la modernità. Quando si ha a che fare con un testo chiaro su uno sfondo scuro, la scelta si restringe solo al sans serif.
I caratteri Serif possono funzionare ma richiedono più lavoro da parte del lettore per poterli comprendere. Ciò è esacerbato quando si utilizzano schermi più piccoli o dispositivi mobili.
L'aspetto della percezione emotiva
Sappiamo tutti che colori diversi possono evocare emozioni diverse. Lo sappiamo da anni e studi più recenti lo hanno supportato con prove. Sappiamo che diverse combinazioni di colori influenzano il cervello in modi diversi e alcuni esperti di marketing pensano che l'uso del colore da solo possa aumentare la conversione.
La psicologia del colore ci dice che quando vediamo i colori, il nostro cervello segnala il rilascio di ormoni che possono farci provare emozioni. Colori diversi provocano il rilascio di ormoni diversi che può influenzare il modo in cui ci sentiamo riguardo a qualcosa di un colore particolare. Questo si combina con la nostra percezione di cosa significhi un colore che può essere usato contro di noi per il marketing e la vendita.
Abbiamo idee radicate su cosa significhi un colore.
Per esempio, Nero è spesso associato come un colore potente, erotico, misterioso, formale ed elegante. White si sente pulito, fresco, moderno, giovane, accessibile e familiare. Rosso è audace, potente, sicuro di sé e sensuale.
Ogni colore invoca sensazioni diverse nel lettore, motivo per cui, come web designer, dedichiamo una quantità così eccessiva di tempo a cercare di trovare la combinazione perfetta e poi ancora più a lungo cercando di convincere il cliente che i colori che abbiamo scelto funzioneranno.
Vantaggi degli sfondi scuri
Gli sfondi scuri non sono adatti per ogni design o progetto.
Quando sono adatti, uno sfondo scuro può aggiungere carattere, impatto, enfasi e una certa risposta emotiva a un web design. Ho già trattato tutto questo, quindi diamo un'occhiata ad alcuni altri vantaggi dell'utilizzo di sfondi scuri nel design.
1. Less affaticamento degli occhi
Apparentemente è più facile leggere più a lungo quando si utilizza uno sfondo scuro. Anche se leggiamo più lentamente, fintanto che il rapporto di contrasto è abbastanza ampio e il design è altrimenti solido, possiamo leggere senza affaticare gli occhi per periodi di tempo più lunghi.
In tema di occhi, gli sfondi scuri influenzeranno il sonno less pure. Lo schermo conterrà less luce blu/bianca rispetto a una pagina web tradizionale. Oggi si pensa che questa luce blu abbia un impatto sul nostro ritmo circadiano e influenzi il nostro sonno, causi malattie e abbia un impatto negativo sulla nostra vita quotidiana.
2. Elegante
C'è un motivo per cui ogni donna ha un vestitino nero o perché le limousine sono nere. Aggiunge un senso di stile ed eleganza che è difficile ottenere altrove. Finché il design complessivo è di alta qualità, l'uso di sfondi scuri trasmette immediatamente quella sensazione che può influenzare una decisione di acquisto, creare un legame emotivo o indurre il lettore a prendere più sul serio ciò che vede.
3. Familiarità
I siti web con sfondi scuri erano molto rari. Quelli che abbiamo visto spesso non hanno seguito affatto le regole di usabilità e non hanno funzionato bene. Con più interfacce di programma che utilizzano sfondi scuri, giochi che utilizzano sempre più sfondi scuri nei menu, navigazione e filmati e modalità notturna in tutti i tipi di dispositivi, il buio non è più così di nicchia.
Lo vediamo ovunque. Da molti prodotti Adobe, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop e Dreamweaver e molti altri programmi leader.
Ora siamo più abituati a vedere testo chiaro su sfondi scuri, non sorprende né influisce negativamente sulle nostre aspettative come una volta.
4. Si distingue
Mentre i siti web con sfondi scuri stanno diventando più accettabili, sono ancora in minoranza. Ciò fornisce un elemento di impatto immediatamente che qualcuno atterra sulla pagina. Anche prima che una parola venga letta o scansionata un'immagine, la tua pagina fa già impressione e fa sì che il lettore guardi con occhi nuovi il design.
Finché quel design si basa su quella prima impressione iniziale con una buona leggibilità, un buon uso dello spazio e alcune immagini di impatto, sei su un vincitore.
5. Sfuma sullo sfondo
Le interfacce utente e gli sfondi scuri forniscono quel primo impatto iniziale, ma possono poi sfumare silenziosamente sullo sfondo per far risaltare il contenuto. Questo è più vero nel design dell'interfaccia utente ma ha rilevanza anche nel web design. Immagini posizionate con cura e contenuti con il giusto livello di contrasto risaltano molto di più mentre lo sfondo stesso si allontana dalla vista.
Questo può aiutare a leggere il contenuto della pagina in ambienti luminosi come all'aperto o sotto una forte luce. In ambienti più scuri, uno sfondo bianco o chiaro può affaticare gli occhi ed essere difficile da leggere. In ambienti più chiari, uno sfondo scuro può essere l'opposto. Anche se non possiamo progettare per ambienti specifici, non è mai cosìless un vantaggio di uno sfondo più scuro che si legge bene alla luce del sole.
Aspetti negativi dell'utilizzo di sfondi scuri
L'uso di uno sfondo scuro nel design non è universalmente positivo. Ci sono alcuni aspetti negativi di questo stile e non dovrebbero essere sottovalutati.
1. Attenta considerazione
Gli sfondi scuri non funzioneranno per ogni cliente o ogni situazione. Questo tema di design richiede molta più riflessione e pianificazione rispetto al tradizionale sfondo chiaro. Richiederà inoltre ulteriori test da parte degli utenti per assicurarsi che il bilanciamento sia corretto prima del lancio. Non tutti gli schemi di marca funzioneranno con sfondi scuri. Non tutti i prodotti o soggetti funzioneranno con esso.
Alcuni clienti percepiscono ancora gli sfondi scuri come facevamo prima, negativamente. Anche se sei convinto che uno sfondo scuro sia la strada da percorrere, potresti avere più difficoltà a convincere il tuo cliente di quanto faresti se seguissi il percorso tradizionale.
2. Pianificazione attenta
Tutte le scelte di design richiedono un'attenta pianificazione, scelta del colore, del carattere e dell'immagine. L'uso di sfondi scuri aggiunge ancora più pensiero a questo. Lo spazio bianco / scuro diventa ancora più importante per fermare l'emissione di luce nell'oscurità e per garantire la leggibilità del testo. Le immagini e gli elementi di design necessitano di una separazione reale per mantenerli leggibili e per impedire la fuoriuscita di luce o colore in altre aree.
Per questo motivo, il processo di sviluppo potrebbe richiedere più tempo con uno sfondo scuro. Potrebbero essere necessari ulteriori test da parte degli utenti e potrebbero essere necessari anche ulteriori perfezionamenti all'esperienza mobile.
3. Attento equilibrio
L'utilizzo di elementi scuri all'interno di un disegno aggiunge peso a una pagina. Troppo peso e la pagina può sembrare ingombrante e pesante. Ciò è ancora più vero quando si ha a che fare con sfondi scuri. Ogni pagina deve essere bilanciata con molta attenzione per evitare che appaia pesante e per far risaltare la sua intrinseca eleganza piuttosto che sgraziata.
È una domanda difficile e richiederà molto raffinamento e molto spazio bianco / nero sulla pagina per mantenerlo bilanciato.
4. Accessibilità
Un aspetto dei design scuri che non riceve molta attenzione è l'accessibilità. Ogni web design dovrebbe avere l'accessibilità in mente nelle primissime fasi della pianificazione. Fortunatamente, se segui le regole generali sull'alto contrasto tra testo e sfondo, la maggior parte degli utenti sarà in grado di leggere e comprendere la tua pagina.
I Linee guida per l'accessibilità dei contenuti web (WCAG) richiede un contrasto di colore 4.5.1 tra il testo e lo sfondo per il testo normale e 3: 1 per il testo di grandi dimensioni. Suggerisce testo bianco per sfondi neri, ma c'è un margine di manovra per altri colori purché il rapporto di contrasto rimanga il più ampio possibile.
Ho menzionato l'astigmatismo in precedenza poiché si tratta di un danno che viene influenzato negativamente dall'utilizzo di sfondi scuri. L'astigmatismo è un'imperfezione della cornea che causa una visione offuscata o distorta. Su uno sfondo scuro, la pupilla deve dilatarsi per leggere, il che accentua la sfocatura.
Sebbene questa sia solo una menomazione in un mondo di molti, circa il 33% degli americani soffre di qualche forma di astigmatismo. Se lo espandi a un pubblico globale, quasi un terzo del tuo potenziale pubblico potrebbe soffrire di astigmatismo in un modo o nell'altro. Questo è qualcosa che ogni progetto deve tenere in considerazione.
Quando dovresti usare uno sfondo scuro
Ci sono una serie di situazioni in cui gli sfondi scuri si prestano bene al web design. Loro includono:
- Quando vuoi creare quell'impatto visivo iniziale.
- Quando il buio si adatta all'identità del marchio del cliente.
- Quando si mettono in mostra prodotti o servizi di lusso o di alto livello.
- Quando il design è moderno o minimalista.
- Quando hai bisogno di creare dramma o mistero in un design.
Quando non dovresti usare uno sfondo scuro
Allo stesso modo, ci sono momenti con uno sfondo scuro non sarà la tua migliore opzione e dovrebbe essere evitato a tutti i costi. Anche se il cliente insiste per usarne uno.
- Quando la pagina è ricca di contenuti.
- Quando la voce del marchio non lo supporta.
- Quando il pubblico di destinazione è noto per non rispondere bene ad esso.
- Quando c'è molto da fare con la pagina e lo spazio bianco / nero è prezioso.
- Quando l'intento è B2B o ufficiale, ad esempio governativo.
10 esempi di temi con sfondo scuro
Per mostrarti cosa intendo per gli sfondi scuri che sembrano sorprendenti se fatti bene, ho raccolto dieci temi eccellenti che li utilizzano. Ognuno è leggermente diverso in termini di design ma tutti hanno una cosa in comune, usano sfondi scuri per ottenere il massimo effetto.
1. Pacchetto layout Divi con Web Freelance
Il tema Divi WordPress deve essere uno dei più flessibili in circolazione. Sebbene molti dei suoi modelli abbiano uno sfondo chiaro, puoi invertirlo in pochi secondi. Aggiungi il Web Freelance Layout Pack a Divi e puoi avere un sito Web eccellente con uno sfondo scuro per qualsiasi uso.
Tutto quello che devi fare è installare i due temi, attivare il tema, aprire una pagina e cambiare lo sfondo su scuro. Quindi utilizza l'opzione "Estendi colore di sfondo" nelle sezioni della pagina per allineare tutto.
Ottieni Divi con uno sconto del 10% fino ad aprile 2024
2. Astra con Photographer Starter Site
L'utilizzo del framework Astra con l'installazione del sito demo del fotografo offre un sito Web eccellente con uno sfondo nero. Un buon uso dello spazio, caratteri contrastanti e un design minimalista fanno risaltare questo tema.
Dai un'occhiata al sito per principianti sulla fotografia
3. Genesis con Parallax Pro
Parallax Pro è un tema per il Genesis framework che utilizza un design monocromatico alternato di grande effetto. È un altro design semplice che fa risplendere il contenuto della pagina e fornisce un eccellente esempio di come gli sfondi scuri possano funzionare così bene.
Guarda la demo live di Parallax Pro
4. Obiettivo di PixelGrade
Lens From PixelGrade utilizza un design a griglia per darci un portfolio o una vetrina di immagini utilizzando un tema scuro. Lo sfondo scuro è realmente visibile solo nel menu laterale e il tema utilizza colori contrastanti in un modo molto interessante, aggiungendo colori diversi dal bianco e nero per risaltare davvero.
NB: Noi abbiamo un Sconto del 20% direttamente da PixelGrade, in esclusiva per CollectiveRay visitatori. Basta fare clic sul collegamento sottostante e lo sconto verrà applicato automaticamente al momento del pagamento. Questa offerta è valida SOLO fino alla fine di aprile 2024.
5. Divi con elettricista Dark Pack
Un altro tema Divi, questa volta la pagina di destinazione dell'elettricista al buio. Questo è un tema di altissima qualità con sfondo scuro, tipografia nitida, buon uso delle immagini e alcuni colori complementari per aggiungere interesse. Questo è il mio preferito e penso che funzioni incredibilmente bene.
6. Aldo di ThemeRex
Aldo di ThemeRex è un tema che rende facile l'aspetto elegante. È uno sforzoless tema che funzionerebbe per molti argomenti e bilancia molti contenuti della pagina con uno sfondo scuro senza sovraccaricare la pagina. È un design molto completo che funziona bene su qualsiasi dimensione dello schermo.
7. Neve Pro con immagini Dark Parallax
Neve Pro con Dark Parallax Images utilizza il tema Neve con tutta la sua potenza, velocità e funzionalità. Combinato con uno sfondo scuro e un tema complementare, questo tema WordPress è uno dei migliori in circolazione. Le pagine sono ben bilanciate, si caricano rapidamente, il contenuto guida il lettore senza problemi lungo la pagina e non ti manca nulla.
Ulteriori informazioni su Neve
8. Raccontare con il layout del giocatore
Il layout di Telling with Gamer è un eccellente esempio di come utilizzare altri colori audaci per arricchire uno sfondo scuro. Non lasciarti ingannare dal moniker del giocatore, potresti usare questo tema per qualsiasi cosa e sarebbe comunque fantastico. Un menu forte, un layout eccellente, nitidezza e contrasto superbi e un buon uso dello spazio sono solo alcuni degli aspetti positivi.
9. Prossima uscita
Nextout è un tema WordPress molto elegante che utilizza uno sfondo scuro più chiaro con colori contrastanti e complementari. Con un attraente cursore superiore, scorri verso il basso in un layout piastrellato che si presta perfettamente per i siti Web orientati alle immagini. Con una navigazione fluida e layout ben ponderati, è sicuramente uno dei migliori temi web qui.
10 Hestia Pro con immagini Dark Parallax
Hestia Pro con Dark Parallax Images è un altro tema molto elegante che bilancia sfondi scuri con elementi chiari, colori contrastanti ed eccellente tipografia. Le pagine sono ricche ma non troppo piene e l'equilibrio è giusto qualunque sia il tipo di schermo che utilizzi. Potrebbe funzionare su qualsiasi dispositivo, per qualsiasi argomento ed è sicuramente uno da provare.
Se vuoi saperne di più su Hestia - dai un'occhiata a questo articolo su Collectiveray.
Conclusione: utilizzo di sfondi scuri nel web design
Una delle cose migliori di Internet moderno è la libertà di esprimersi e infrangere le regole. Mentre alcune di queste regole non dovrebbero assolutamente essere violate, altre sì. Come il tradizionale design nero su bianco che è stato con noi dal 17th secolo.
Penso che gli sfondi scuri possano sembrare sorprendenti se fatti con un occhio attento. Fanno quell'impatto iniziale e poi svaniscono in secondo piano. Funzionano bene nella maggior parte delle condizioni di luce e una pagina ben bilanciata con un uso intelligente dello spazio può far sì che lo sfondo enfatizzi il prodotto o l'intento di una pagina meglio degli sfondi bianchi.
I design scuri non si adattano a ogni progetto o intento e richiedono molta più pianificazione, perfezionamento e test rispetto agli sfondi bianchi. Tuttavia, fatto bene, penso che tutto questo tempo e impegno in più possa valerne la pena!
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
e molti altri ...