Il Dos and Don'Ts di Dark Web Design
I design web scuri sono molto popolari e possono avere un appeal elegante e creativo.
Sono anche perfetti per molti tipi di lavoro client, tuttavia, non sono adatti per tutti i siti Web e dovrebbero essere utilizzati solo quando appropriato.
Nonostante il notevole impatto visivo che questi disegni scuri possono avere, molti designer non sanno come attirarli efficacemente senza spegnere il visitatore.
Con un design scuro viene meno la leggibilità , meno appeal per la maggior parte dei lettori e meno opportunità per gli elementi di design convenzionali.
In questo post, discuteremo alcuni suggerimenti per far sì che il tuo prossimo design del sito dark si rivolga a un pubblico più ampio , lasciando che sia tu, il designer, a esprimere la tua creatività.
UN sondaggio recente suggerisce che i light design sono preferiti dal pubblico generale del web da un enorme 47%. Il motivo principale è la leggibilità . Alla maggior parte delle persone non piace vedere il testo chiaro su uno sfondo scuro sui siti Web perché tese i loro occhi, rendendo l'esperienza molto meno piacevole.
Al contrario, il 10% degli intervistati ha dichiarato di preferire sempre sfondi scuri per i siti Web, mentre un altro 36% ha affermato che la scelta migliore dipende dal tipo di sito Web.
Quindi, qual è la risposta giusta? Quando si arriva a questo, ognuno ha la propria opinione, e basta.
Ma con una percentuale così grande di utenti che affermano che i design di siti Web oscuri sono tollerabili e talvolta persino preferiti, noi, come progettisti di siti web, dobbiamo imparare come creare design scuri efficaci per noi stessi e per i nostri clienti.
Ciò significa convincere tutti i veri credenti di sfondi chiari che il design scuro può essere più leggibile e facile da usare.
Usa più spazio bianco
O dovrebbe essere chiamato "spazio nero"? L'uso efficace dello spazio bianco è importante per qualsiasi tipo di design, ma è essenziale per i siti Web con sfondi scuri.
I disegni scuri hanno la tendenza a sentirsi "pesanti" e ingombrarli può rinforzare questa sensazione. Dai un'occhiata ad alcuni famosi disegni di dark web qui sotto e nota il loro uso liberale dello spazio bianco con grande effetto.
Tenuta Nera è visto su Internet in vetrine di design web scuro. È davvero un bel design e degno di tutta l'attenzione. Una grande quantità di spazio bianco viene utilizzata in tutto il design e ciò che rende unico questo particolare design è il modo in cui lo spazio bianco viene utilizzato per delineare alcuni elementi in modo così efficiente.
Il logo ha molto spazio bianco attorno ad esso ed è la prima cosa che vediamo come visitatori. Vediamo il contenuto principale e la bottiglia a destra accanto. Come vedi, lo spazio bianco è usato perfettamente per evidenziare il testo sulla bottiglia e il titolo del contenuto principale.
I contenuti in primo piano in Tictoc e l'immagine di accompagnamento in questo disegno è incorniciata con lo spazio più bianco. Mentre scendiamo, vediamo meno spazio bianco, il che ci fa prestare attenzione al contenuto mostrato.
Il punto qui è che lo spazio bianco guida gradualmente l'utente fino alla fine della pagina .
Lo sfondo scuro aggiunge profondità al design. Poiché il sito Web si basa in modo così pesante sullo spazio bianco, sarebbe meno interessante senza l'effetto creativo dello sfondo scuro.
Il Mark Dearman sito web ha spazio bianco liberale e uniformemente distribuito in tutto il suo layout.
Lo spazio bianco che inquadra ciascun pezzo del portfolio offre molto spazio per respirare il contenuto che contiene, ed è un buon punto di riposo prima di passare al pezzo successivo.
Un sacco di spazio bianco è essenziale per i disegni scuri perché aiuta non solo a disordinare il layout, ma a inquadrare elementi importanti e ad aggiungere eleganza al look generale.
Spazio bianco testuale
Poiché la leggibilità è la preoccupazione numero uno di coloro che non amano gli sfondi scuri, i designer devono prestare particolare attenzione al testo stesso.
Proprio come nel design generale, un modo per migliorare la leggibilità sui siti Web oscuri è quello di aumentare lo spazio bianco regolando le dimensioni dei paragrafi, la crenatura e l'interlinea .
L'esempio seguente mostra quale sia la differenza tra la spaziatura tra i caratteri e tra i caratteri nel confrontare i layout scuri e chiari.
Un altro modo per migliorare la leggibilità nei progetti Web scuri è aumentare la dimensione del carattere . Come la maggior parte delle altre regole in questo post, le dimensioni dei caratteri più grandi significano più spazio bianco. Più grandi sono le lettere, più spazio bianco apparirà intorno e all'interno di ogni lettera.
Ad esempio, la lettera "a" sotto ottiene più spazio bianco man mano che si ingrandisce, sia nell'area circostante che nello spazio all'interno del recinto di a e sotto la sporgenza.
Nota come leggere un testo di piccole dimensioni è molto più semplice su uno sfondo chiaro piuttosto che su uno scuro. Quando si imposta la tipografia per un nuovo sito Web, assicurarsi di guardare alcuni testi fittizi per assicurarsi che sia leggibile . In caso contrario, vedere se è utile aumentare la dimensione del testo.
Contrasto di testo
Molte persone sono d'accordo sul fatto che i siti Web oscuri più mal concepiti causano affaticamento della vista. Di solito il colpevole è troppo o troppo poco contrastato. Come si trova l'equilibrio perfetto?
Se ti trovi in una stanza che è completamente nera, improvvisamente guardare direttamente nella luce non è piacevole. Ma guardare una luce meno brillante in una stanza meno buia va bene. Lo stesso principio si applica al web design.
Trovare il contrasto perfetto significa bilanciare l'oscurità dello sfondo con la leggerezza del testo .
Di seguito una guida (molto) approssimativa che mostra come funziona il contrasto tra testo e sfondo. Si nota che come lo sfondo diventa più leggero, così fa il testo.
Trovare un contrasto piacevole per il testo è molto più difficile con uno sfondo nero puro.
Per trovare l'equilibrio perfetto, sperimenta diverse sfumature. Il miglior risultato è di solito uno sfondo che non è nero puro e testo che non è bianco puro.
Trattare con i caratteri
I caratteri giocano un ruolo importante nel design e dovrebbero essere presi in seria considerazione con i layout scuri. L'immagine sotto mostra un font di 14 punti su uno sfondo scuro in entrambi i font serif e sans-serif.
Il font sans-serif è ovviamente più leggibile . Ma molti designer scelgono ancora i caratteri serif per la loro eleganza.
Il trucco, tuttavia, consiste nel mettere solo un testo più grande in caratteri serif, in modo che lo spazio bianco extra si riempia di ogni carattere e renda il testo molto leggibile.
Lo screenshot qui sotto è di un sito web discusso in precedenza in questo articolo. Caratterizza sia i caratteri serif e sans-serif, ma li usa in modo intelligente.
Il testo più grande, come titoli, navigazione e intestazioni, è in un font serif per una maggiore eleganza. Per migliorare il contrasto e migliorare la leggibilità, il corpo del testo si trova in un font sans-serif pulito.
Utilizzare combinazioni di colori minime
Per dare ai loro disegni scuri un aspetto pulito e ordinato, i designer dovrebbero sempre optare per combinazioni di colori minime .
Dai pochi esempi qui sotto, possiamo vedere che gli schemi di colori occupati interferiscono con gli sfondi scuri, perché il contrasto è troppo marcato.
Attenersi a uno o due colori . Per aggiungere più colore, prova uno sfondo di colore scuro.
Certo, molti progetti di dark web hanno schemi di colori più eccitanti. Quindi questa regola è spesso rotta, ma solo con le giuste tecniche.
In generale, tuttavia, il colore è spesso ciò che rende un sito Web troppo occupato . Poiché i siti Web più scuri hanno già profondità, usa il colore con cautela.
Offrire uno Style Switcher
Sebbene disponiamo di molte buone pratiche a nostra disposizione per rendere i progetti Web più accattivanti, nessuna quantità di sforzo soddisferà ogni utente.
Assicurati di includere uno switcher di stile , in modo che gli utenti abbiano la possibilità di visualizzare testo scuro su uno sfondo chiaro.
Per questo sono necessari due fogli di stile, uno per il layout scuro predefinito e uno per il layout light alternativo.
SitePoint ha un eccellente tutorial su questo: Costruisci uno stile semplice Switcher in CSS . Invece di usare le versioni "arancione", "blu" e "bianco" nel tutorial, usa solo fogli di stile "light" e "dark".
Quando Dark Web Design funziona meglio
Come affermato, gran parte degli utenti del Web ritiene che un design Web scuro possa funzionare per determinati tipi di siti Web. Ma lo studio è vago su quali siano esattamente questi tipi.
In generale, il buio funziona meglio per progetti creativi o eleganti . Per i moderni siti web eleganti, gli sfondi scuri aggiungono eleganza. Per gli stili sgangherati o disegnati a mano, gli sfondi scuri migliorano la creatività del layout.
Design elegante e scuro
Il buio può essere profondo, autorevole e forte, e spesso sembra elegante se usato in modo appropriato. Ecco alcuni esempi e alcune tecniche per far emergere l'eleganza in un design scuro.
Il sito Web per Larissa Meek ha un semplice motivo in stile vintage sullo sfondo, creando un tono elegante. Altre caratteristiche più strane aggiungono un tocco personale al design.
Questa tecnica può essere utilizzata per molti tipi di siti Web. Motivi e trame vintage o classici possono creare un look elegante e adatto all'età .
La maggior parte di noi associa modelli vintage ad alta classe, quindi creare un sito Web di alta classe in questo modo è facile.
Profondità Core ha un design molto pulito, con uno sfondo scuro che aggiunge stile e classe. Un senso di autorità è evidente anche nel design. Questa eleganza potrebbe anche far sì che il lavoro del portfolio di un designer appaia più prezioso.
Si noti che questo design non ha texture o immagini diverse dai pezzi e dal logo del portfolio. Altrimenti, il design sarebbe stato troppo impegnativo; così com'è, il contenuto è ben combinato.
Un buon processo da seguire è quello di aggiungere prima i contenuti essenziali e poi inserire elementi di design secondo necessità . Il progettista può quindi mettere in pausa e riflettere ogni volta che viene aggiunto ogni nuovo elemento, assicurandosi che il layout non venga sovraccaricato.
Proprio come le opere d'arte possono apparire più preziose in un design elegante, così anche i prodotti. Un design scuro ed elegante, come Tapbots e così tanti altri, aiuta a mostrare il prodotto venduto.
Il design riflette il dispositivo stesso , con i suoi gradienti e gli effetti di luce; alcuni disegni imitano persino la trama dei loro prodotti high-tech.
Design creativo scuro
Oltre alla semplice apparenza di design di siti web eleganti e scuri, è possibile ottenere anche risposte più emotive rispetto ai progetti di luci standard, rendendoli ideali per progetti creativi. Diamo un'occhiata ad alcuni esempi dei tipi di design creativi che sono possibili.
Il luogo di seguito ha un contenuto molto piccolo ma ha un layout unico e colori scuri per la profondità. Gli sfondi scuri sono perfetti per siti Web con contenuti molto contenuti .
E poiché richiedono più spazio bianco, il progettista ha più spazio per lavorare.
Il web design del grunge si presenta in molte forme, e poiché il grunge è "oscuro e sporco", gli sfondi scuri sono una di quelle forme.
Disegni grunge scuro come trozo sembrano infrangere tutte le regole: trame impegnate, layout affollato e una vasta gamma di colori. Eppure questo sito funziona ancora. Come è possibile?
Con così tanti elementi disordinati con cui lavorare, il design del grunge può essere complicato per i principianti. Ciò che rende questo lavoro è la sua organizzazione .
Lo sfondo ha blocchi chiaramente disposti che guidano l'occhio dell'utente e aiutano a dividere il contenuto in sezioni gestibili.
In secondo luogo, ha una tonnellata di spazio bianco . Lo sfondo può essere strutturato, ma lo schema ripetuto è visto dall'utente come spazio bianco, contribuendo a schiarire il disegno.
Questo spazio bianco è più evidente a sinistra del logo, sotto la navigazione e lungo il lato destro.
Anche tra "Exhibit 01" e "Exhibit 02" c'è più spazio bianco di quello che normalmente si trova in un sito come questo.
Lo spazio bianco uniforma le cose, anche se non sembra uno spazio bianco perché ha trama . Anche il testo minimale e alcune sezioni (solo tre) contribuiscono a questa apparenza di semplicità.
Il design di Drew Wilson sicuramente infrange la regola dell'uso del colore minimo. Funziona ancora, però, perché l'intestazione dai colori vivaci è una delle poche caratteristiche di questo design sparse, quindi nulla la sovraccarica.
E lo sfondo scuro rende l'intestazione ancora più luminosa e straordinaria.
Gli sfondi scuri sono spesso usati per creare effetti di luce e colori brillanti .
Tali disegni sono un'eccezione meravigliosamente creativa alla regola del colore minimo. Ma la regola dovrebbe essere risolta con cautela: evitare distorsioni, trame e colori che distolgono la pagina.
Avvolgendo
Gli sfondi scuri conferiscono un aspetto elegante e creativo ai design web, rendendoli perfetti per alcuni portfolio, ma non sono adatti per ogni sito.
Per i siti Web di maggiori dimensioni, in particolare quelli per persone con disabilità visive e altre disabilità, i design scuri sono un no-no, anche con uno switcher di stile.
Si spera che quando arriverà il momento che è necessario progettare un sito Web con uno sfondo scuro, questi suggerimenti e strategie aiuteranno.
Scritto esclusivamente per WDD da Kayla Knight .
Ci sono molte più tecniche e strategie per migliorare i design del web scuro, quindi per favore condividi quelli che hai raccolto nella sezione commenti qui sotto.