Dark mode: Suggerimenti per creare app e siti web a tema scuro

Condividi

La modalità scura, o dark mode, è una delle più importanti tendenze di design, e aziende come Google, con il suo browser Chrome, Facebook con tutto il suo repertorio, Apple e tante altre hanno preso al volo il treno del design in dark mode.

dark mode

Andiamo quindi a dare un’occhiata a questi marchi e cosa hanno fatto per implementare questa modalità e come fare per inserirla nei nostri progetti. Impareremo i pro, i contro e le best practice essenziali atte ad assicurarci che le nostre app e i nostri progetti funzionino perfettamente e possano vantare un aspetto gradevole.

Ecco un esempio di Dark e Light mode realizzato dai nostri designer per un set di Icone UI.

Cos’è la dark mode?

Si tratta di una UI (interfaccia utente) che utilizza un colore scuro, solitamente nero o al massimo una sfumatura di grigio, per il colore dello sfondo principale. In pratica sigla l’inversione di tendenza del bianco, dell’interfaccia utente bianca predefinita, utilizzata da decenni dai progettisti.

Naturalmente, con il passare degli anni, i tempi di utilizzo dei dispositivi da parte nostra è aumentata esponenzialmente, portando gli sviluppatori a scoprire che tali interfacce aiutano con l’affaticamento della vista, specialmente durante le ore notturne e in condizioni di scarsa illuminazione (il che equivale ad una netta diminuzione dei mal di testa connessa ad una migliore esperienza, soprattutto lavorativa).


In realtà, la modalità scura non è un fatto nuovo; già i primi monitor monocromatici della vecchia scuola vantavano proprio questa modalità (testo verde su sfondo nero), che ha passato il testimone, negli anni ’80, ad uno stile più vicino alla carta stampata, testo nero su sfondo bianco.

Per quasi trent’anni è stato così fin quando, nel 2010, con Windows Phone 7, non ha fatto il suo ritorno la dark mode. Google ha compreso che tale modalità avrebbe portato ad un netto risparmio di batteria ed ha deciso di implementarla nel suo sistema operativo (Android) otto anni dopo, nel 2018. L’anno seguente è stato il turno di Apple che l’ha aggiunta su iPadOS e iOS.

Dark mode e ui design

I vantaggi della dark mode

Piacevole per gli occhi (se fatta correttamente), porta inoltre ad un risparmio nella durata della batteria. Andiamo nel concreto e confrontiamo questi vantaggi rispetto alla light mode:

Riduce l’affaticamento degli occhi

La CVS (acronimo che in sostanza sta a significare “sindrome da visione artificiale”) porta dolore nella zona oculare, visibilità doppia e offuscata, male alla testa, al collo e alla schiena, accompagnati da altri dolori e patologie. Stando alle statistiche, la dark mode può realmente aiutare a ridurre questi problemi, a volte molto complicati.

Migliore visibilità in condizioni di scarsa illuminazione ambientale

Se stessimo dormendo e qualcuno accendesse la luce ci troveremmo dopo qualche minuto con un mal di testa formato famiglia; lo stesso principio funziona con coloro che lavorano davanti allo schermo la mattina molto presto o a tarda notte. La dark mode, grazie alla riduzione della luce intensa, rende più facile la visualizzazione dei contenuti in condizioni di scarsa illuminazione.

dark mode e risparmio energietico

Risparmio di batteria

Gli schermi OLED possono disattivare i pixel neri se non utilizzati, la dark mode consuma un numero maggiore di pixel neri, costringendo il dispositivo a consumare meno energia.

Lavora sulle emozioni

Molti utenti lo utilizzano per i vantaggi sopra descritti, quindi salute e batteria piuttosto che per motivi estetici; l’utilizzo della dark mode ricorda loro che stanno facendo qualcosa di più sano per la loro salute, quindi scatta una bella sensazione, una sensazione piacevole.

Previene la ADD

Almeno…Un po’ dovrebbe. La luce bianca e i colori tendono a far vagare la nostra attenzione, rendendo difficile la concentrazione. L’interfaccia a modalità scura può aumentare la messa a fuoco virando l’attenzione verso le zone di contenuto, lasciando che questo venga visualizzato.

Dark mode: i contro del suo utilizzo

Naturalmente, come in ogni situazione, anche a modalità scura porta degli svantaggi; cerchiamo di far chiarezza e familiarizzare con i motivi che dovrebbero farci optare per il no sulla scelta di implementare, nei nostri progetti, la dark mode:

Potrebbe ridurre la connessione emotiva

I colori vivaci possono creare piacevoli emozioni e se l’utente provasse proprio questo durante la visita sul nostro sito, l’utilizzo della dark mode potrebbe mettere una barriera tra noi e loro. In poche parole, faticheranno a stabilire una connessione emotiva con il tema scuro.

Se la nostra azienda si basasse sull’ispirazione o motivazione, l’UI scura potrebbe essere davvero una scommessa. Quindi, se i colori vivaci possono creare emozioni positive potrebbe essere vero anche il contrario, cerchiamo allora di capire chi è il nostro pubblico e cosa predilige e per quale motivo ci segue.

dark mode vs light mode

Restringe lo spazio

Le stanze con pareti scure possono portare ad un senso di claustrofobia, lo stesso vale per gli schermi; se il nostro obiettivo è quello di creare un senso di spazio, l’utilizzo della dark mode, e quindi le UI scure, possono restringere questo spazio facendolo apparire più piccolo.

Colori a basso contrasto = difficile lettura

Se durante la creazione di app o siti a tema scuro non si ottengono i contrasti e i colori corretti, il testo può risultare di difficile lettura; teniamolo a mente se e quando creiamo un’app, una mail o un sito in dark mode.

Come utilizzare la dark mode nel design

Questa è una a è come il prezzemolo, lo metti ovunque e dove lo metti sta bene e può far progredire il nostro marchio, se fatta bene naturalmente. Se sbagliassimo, raggiungeremmo l’obiettivo opposto con conseguente calo dell’utenza. Di seguito alcuni consigli per l’inserimento della dark mode nei nostri progetti:

Dark mode – quando utilizzarla

Abbiniamo i colori del nostro marchio

Se la tavolozza colori esistente andasse bene per la modalità scura saremmo fortunati.

Se dovessimo cambiare il nostro marchio per adattarlo all’estetica allora pensiamoci più di una volta prima di implementare la dark mode; allo stesso tempo, se il nostro marchio dovesse utilizzare un ampio spettro di colori, consideriamo un’interfaccia utente più leggera. Lo spettro completo di colori non si legge bene su sfondo scuro.

Evidenziamo il nostro settore

La dark mode può essere utile per andare a migliorare specifici settori, facciamo un esempio: se il nostro settore è incentrato in un certo tipo di intrattenimento o nella vita notturna, la dark mode sarebbe perfetta visto che il contenuto è spesso abbinato ad uno “sfondo scuro” nella vita reale.

Vada bene il minimalismo

Se il nostro design è già minimalista, vanta quindi contenuti limitati, sarebbe già perfetto per la dark mode. In un contesto in cui il testo è il contenuto principale, l’interfaccia utente scura può rendere di difficile visibilità la lettura. La dark mode, generalmente, amplifica il disordine visivo portando il caos in uno schermo già di per sé disordinato.

Generiamo emozioni

Se il nostro obiettivo è quello di ottenere una risposta emotiva, visto che la poca visibilità crea una certa curiosità amplificando la tensione emotiva, la dark mode potrebbe essere il mezzo perfetto.

Status symbol

Se la nostra attività è legata ad un certo tipo di artigianato, più raffinato, teniamo in considerazione l’interfaccia utente dark mode; i colori più scuri evocano emozioni legate al benessere e al lusso.

dark mode e ui design

Le migliori pratiche di progettazione per implementare la dark mode

Vi sono una serie di processi che devono funzionale al meglio durante la progettazione della modalità scura, andiamo a vedere quali sono:

1 – Non andiamo troppo sul dark

Nel ramo dell’editoria non viene utilizzato il cartaceo bianco puro perché andrebbe in netto contrasto con l’inchiostro nero; porterebbe il lettore a socchiudere gli occhi e a combattere contro il mal di testa, e lo stesso vale per i dispositivi digitali. Evitiamo quindi il nero puro, gli occhi faticherebbero con uno schermo ad altro contrasto. Quale colore scegliere allora? La risposta è sfumature di grigio combinati con colori desaturati.

2 – Un adeguato contrasto

Gli sfondi in modalità scura devono essere scuri quanto basta a mostrare il testo bianco. Google Material Design suggerisce un livello di contrasto, tra testo e sfondo, di almeno 15,8: 1.

3 – Desaturiamo i colori

No a colori completamente saturi sul sfondi scuri; utilizziamo colori desaturati, pastello o tenui, tonalità che hanno aggiunto grigio e bianco.

Dovremmo anche tenere in considerazione la modifica della tavolozza di colori del nostro marchio; tanto per fare un esempio, il colore blu verrebbe letto in modo diverso rispetto al bianco sulla dark mode. Spesso, al fine di suscitare la stessa risposta avuta in modalità luce, i colori, in modalità scura, devono essere modificati.

4 – Utilizziamo i giusti colori attivi

Il colore attivo è quello che si presenta sopra gli elementi e le superfici chiave e vengono spesso utilizzati nei caratteri. Quello predefinito in modalità scura è il bianco puro, #FFFFFF. Non utilizziamolo, sembra vibrare su sfondi scuri. Utilizziamo invece un grigio chiaro.

5 – Non solo invertire

Se stiamo passando alla dark mode, quindi la stiamo implementando dalla modalità standard, probabilmente ci sono segnali visivi preziosi nel tema originale e, al fine di ottenere il nostro tema scuro, non basta semplicemente invertire i colori. Potremmo trasformare i colori che avevano un preciso scopo in colori tenui, senza alcun senso. Cerchiamo di essere intenzionali sulla scelta.

6 – Entriamo in profondità

Uno strato, più alto è più leggero dovrebbe essere e questo creerà una gerarchia visiva, che va dagli elementi più utilizzati nel display in poi.

7 – Mettiamolo alla prova

Una volta finito, mettiamo alla prova entrambe le versioni, modalità luce e dark mode; il nostro obiettivo è quello di apportare eventuali modifiche in base ai feedback degli utenti. Non diamo loro un obbligo ma una scelta, lasciandoli liberi di utilizzare quello che trovano di loro gusto.

dark mode google chrome
Google è stato tra i primi ad implementare la dark mode sul Browser Chrome

Go dark mode!

Quella della dark mode è appena iniziata, quindi sarebbe meglio saltare adesso sul treno in corsa ed implementarla prima degli altri.

Buona fortuna!

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo