Drop-Shadows and Gradients: essere coerente nelle tue metafore visive
Le ombre e le sfumature sono due degli elementi di design più comuni sul web.
Li troverai che accompagnano molti stili diversi. Sono effetti pratici per i web designer perché sono attraenti, utili e facili da creare con qualsiasi programma di grafica. Ma hanno un lato oscuro: vengono spesso maltrattati .
Usare ombre o sfumature amatoriali è quasi un male come apporre una lettera scarlatta alla tua maglietta per far sapere al mondo che sei un principiante o un hack. Anche gli errori impercettibili, quasi impercettibili, possono creare tensioni che mettono a repentaglio disegni altrimenti belli ed efficaci.
In questo articolo, vedremo cosa fanno le ombre e le sfumature , parleremo di come usarli efficacemente e vedremo alcuni esempi di errori e come risolverli.
Cosa fanno le ombre e le sfumature?
Il lavoro di un web designer è creare pattern di colore per schermi luminosi bidimensionali . (Ci sono alcune eccezioni a questo: i siti Web possono essere visualizzati su, ad esempio, uno schermo Kindle, che non si illumina, e i siti Web possono essere stampati su carta.) Questi schermi non riflettono il mondo reale; non sono nemmeno molto simili al mondo reale. Per questo motivo, non abbiamo alcun reale imperativo di fare in modo che i modelli sui nostri siti web abbiano alcuna relazione con gli oggetti nel mondo tridimensionale in cui viviamo.
I sistemi operativi come Unix e DOS hanno un'interfaccia che non è altro che testo colorato su uno schermo. Altri, come Windows e Mac OS X, sono pieni di illusioni di oggetti reali. OS X, ad esempio, ha un dock che assomiglia ad un tavolo con una superficie lucida che retrocede in lontananza, una barra dei menu i cui bordi smussati fanno sembrare che sporga leggermente, e scorri barre che sembrano avere losanghe traslucide.
Tutti questi effetti sono metafore. Trattano alcuni elementi con cui possiamo interagire sullo schermo come se fossero oggetti tridimensionali che interagiscono con le sorgenti luminose nel modo in cui gli oggetti nel mondo non digitale fanno. È una cosa divertente da fare, in un certo senso: tutte queste fonti di luce, i bordi e le forme sono pura fantasia. Poiché gli oggetti sullo schermo sono immaginari, perché dovremmo metterli in relazione con gli oggetti nel mondo reale?
L'illusione dello spazio connette l'immaginario a un mondo in cui viviamo comodamente.
Il motivo più importante per il quale leghiamo gli oggetti immaginari a quelli del mondo reale è che siamo esperti nell'interagire con gli oggetti nel nostro mondo tridimensionale. Abbiamo esperienza nell'affrontare oggetti tridimensionali e abbiamo accumulato conoscenza del codice visivo che ci racconta le relazioni degli oggetti tra di loro nello spazio.
In parte perché la prodezza dell'interpretazione della luce è così notevole che ci dilettiamo nell'illusione o nella creazione di oggetti. Spesso siamo più coinvolti da dipinti drammaticamente realistici di oggetti comuni come case e mele che non dagli oggetti stessi. Noi umani abbiamo creato disegni per migliaia di anni che hanno lo scopo di presentare le idee degli oggetti. Le losanghe ei tavoli illusori sullo schermo non sono altro che la manifestazione più recente di questa lunga tradizione.
C'è molto di più del piacere, però. Forma e posizione ci danno informazioni su come gli oggetti si relazionano tra loro. La lunga forma verticale a losanga della barra di scorrimento nella finestra di Safari, ad esempio, crea l'illusione di trovarsi "più in alto" o più vicino a me rispetto agli elementi che la circondano. Ciò gli conferisce maggiore importanza nella progettazione, che è appropriata in quanto la barra di scorrimento è un elemento di interfaccia essenziale per la navigazione della pagina.
Le metafore visive creano l'affordance percepita.
Apparendo come un oggetto, la barra di scorrimento crea "percepito" affordance "Cioè, si collega tramite metafora alle proprietà di oggetti reali che si prestano a usi particolari. Un pulsante smussato su una pagina web, ad esempio, comunica che è possibile premere . Possiamo rendere qualsiasi cosa su una pagina cliccabile, ma associare un elemento cliccabile con l'immagine di qualcosa di pressabile suggerisce la sua funzione in modo chiaro, ovvio e persino piacevole.
Le ombre e le sfumature sono strumenti base per creare l'illusione dello spazio.
Le ombre e le sfumature sono due strumenti che aiutano a creare l'illusione della tridimensionalità e suggeriscono le relazioni spaziali degli oggetti sulla pagina. Se fatto bene, questa informazione tridimensionale rende il design più bello e più comprensibile.
Nel mondo reale, le ombre esterne vengono create quando un oggetto impedisce a una fonte di luce di colpire una superficie dietro di essa. Questo è uno dei motivi per cui la gente dice che le ombre creano disegni "bidimensionali" bidimensionali: perché fanno apparire oggetti che sporgono o galleggiano sopra altri elementi.
I gradienti appaiono quando una parte di un oggetto è più vicina a una sorgente luminosa rispetto a un'altra parte. Di conseguenza, la parte più vicina appare più chiara e la parte più lontana appare più scura. (Le sfumature diventano più complesse, ovviamente, quando più fonti di luce interagiscono o quando le fonti di luce hanno colori diversi.)
Così, imitando gli effetti della luce nel mondo reale, le ombre e le sfumature comunicano informazioni su oggetti metaforici, fonti di luce immaginarie e le loro relazioni.
Come usare Drop-Shadows e Gradients in modo efficace
Ecco una possibilità: non usare affatto ombre o gradienti.
Intendo questo, sul serio. Questo è il modo più sicuro per evitare errori di ombreggiatura e sfumatura e l'opzione dovrebbe sempre essere considerata.
Perché lanciare ombre su oggetti casuali è così facile, possono essere una scusa per evitare soluzioni più semplici e migliori ai problemi. Per i frammenti di testo che devono essere più importanti, ad esempio, i progettisti spesso trascurano il colore, le dimensioni, il peso del tipo e molti altri elementi a favore di un'ombra esterna.
Allo stesso modo, i progettisti usano spesso sfumature per rendere meno noioso un campo di colori, senza capire perché la composizione generale non sia dinamica.
Se stai lavorando a un comp per un sito web, salva tocchi tridimensionali come ombre e gradienti per la fine , se possibile. Usa spaziatura, posizionamento e colore per rendere il design efficace prima di aggiungere lo strato finale di lucido. Se ti concentri a far funzionare i tuoi progetti senza questi trucchi, potresti scoprire di non averne bisogno più spesso e di essere più efficaci quando li usi.
Prima di plop in un'ombra esterna o in un gradiente, chiediti: " È necessaria una metafora tridimensionale per questo disegno?" Lo sto utilizzando per aggiungere informazioni utili sul modo in cui gli oggetti sono correlati o come componente efficace di un suono approccio estetico, o lo sto usando come una scusa? "
The Subtler, the Better
Per le ombre esterne , non utilizzare quasi mai le impostazioni predefinite di Photoshop. L'ombreggiatura predefinita di Photoshop è molto scura e viene proiettata nell'angolo in basso a destra di un oggetto (la sorgente di luce globale predefinita è 120 °, in alto a sinistra).
Le ombre ti parlano della luce nel tuo ambiente. Immagina di trovarti in una stanza buia senza finestre e accendi una torcia. Qualsiasi oggetto su cui lo fai brillare getterà un'ombra quasi nera. Questo perché l'oggetto sta bloccando la luce dall'unica fonte di luce, il che significa che nessun'altra luce proviene da nessun'altra parte per illuminare quell'area.
Ora, l'ombra non sarà completamente nera a causa della luce riflessa. Parte della luce della tua torcia rimbalzerà sui muri e colpirà l'area in ombra da una direzione che non è bloccata dall'oggetto. E se accendi una lampada in un altro angolo della stanza, l'ombra si illuminerà notevolmente. L'oggetto proietterà una seconda ombra: la nuova ombra apparirà dove la luce della lampada è bloccata, ma sarà riempita dalla luce della torcia, mentre l'area della prima ombra sarà ancora bloccata dalla luce della torcia ma sarà riempito con la luce dalla lampada.
Quando aggiungiamo ombreggiature ai nostri progetti, suggeriamo un ambiente immaginario per la nostra pagina web. Ombre scure e spigolose suggeriscono una stanza buia con un'unica fonte di luce. Ombre leggere e morbide suggeriscono una stanza ricca di luce diffusa.
Una stanza ben illuminata è l'ambiente più confortevole per gli utenti, perché è simile al tipo di ambiente in cui utilizziamo i nostri computer: un ufficio o uno studio. A meno che non desideriamo volutamente evitare quella zona di comfort, dovremmo portare le impostazioni dell'ombra esterna in Photoshop in modo discendente rispetto ai valori predefiniti. Riducete l'opacità al 30 o al 40% o anche più in basso.
Inoltre, mantieni le cose semplici in modo che le persone comprendano la metafora senza pensarci. Una sorgente di luce a 120 ° non ha molto senso. Mac OS X, ad esempio, mette la sua sorgente luminosa a 90 ° o direttamente sopra, il che sembra più logico. Mi piace renderlo ancora più semplice e mettere la sorgente luminosa direttamente perpendicolare allo schermo. Per fare ciò, basta portare a zero l'impostazione della distanza dell'ombra-ombra (questa rappresenta la distanza dall'oggetto che proietta l'ombra esterna sull'oggetto sottostante). A questo punto, la luce globale non ha importanza: è semplicemente come se una grande fonte di luce diffusa provenisse da dietro l'utente per illuminare il progetto.
Questo effetto è molto comune nei disegni "trompe-l'œil" , il più comune dei quali presenta l'immagine di sfondo o la cornice di una superficie della scrivania, come se la si guardasse da sopra. Registi come Alfred Hitchcock, Martin Scorcese e Wes Anderson impiegare lo stesso effetto per i loro colpi firmati God's-eye-view. Tali progetti web hanno una sorta di comprensibilità senza sforzo e il mantenimento della coerenza attraverso un design diventa più semplice per il progettista.
Se hai portato la distanza a 0 e l'opacità a circa il 30%, sei un buon punto di partenza per un'ombra. Gioca con le dimensioni per cambiare quanto sembra lontana la superficie dell'oggetto dallo sfondo su cui si trova. Ad esempio, impostando la dimensione su 1 pixel, si ottiene un effetto bellissimo che è quasi invisibile ma piuttosto piacevole. progettista Dan Cederholm ha reso gli effetti piccoli e semplici come questo una parte integrante del suo stile (come dimostrato nel suo articolo Un List Apart su " Angoli dei monti “).
Puoi certamente aumentare l'opacità se l'effetto è invisibile, ma iniziare a livello sottile e poi comporlo è molto meglio del contrario. L'effetto non dovrebbe essere un po 'più esplicito di quanto dovrebbe essere.
Per le sfumature, Photoshop ha un sacco di impostazioni predefinite di fantasia. Questi possono avere alcuni buoni usi, ma certamente hanno un uso scarso e illimitato, quindi è meglio evitare di usarli.
Invece, seleziona la sfumatura da nero a bianco predefinita. Quindi seleziona sia il nero che il bianco e rendili entrambi il colore di base del tuo elemento. Ora che hai una base, scegli il lato oscuro o quello chiaro e regolalo solo leggermente più scuro o più chiaro. Di nuovo, il più sottile, meglio è . (Alcuni dei migliori gradienti che ho incontrato dovevo verificare con lo strumento eyedropper in Photoshop per assicurarmi che fossero lì!)
Maggiore è il contrasto tra la luce e il buio, più apparirà la superficie. Per alcune cose, come i menu e i pulsanti di navigazione, è necessaria una certa rotondità. Ma per gli oggetti che dovrebbero apparire piatti, mantenere il contrasto basso.
E ricorda, il lato più leggero dovrebbe essere rivolto verso la direzione della sorgente luminosa.
Questo tipo di gradiente è meraviglioso perché imita i gradienti che vediamo intorno a noi tutto il tempo. Nulla nel mondo reale è davvero un campo a colori, perché ha sempre un qualche tipo di relazione con una fonte di luce. Osserva attentamente le pagine di un libro o al soffitto intorno alla tua plafoniera: troverai gradienti ovunque.
Esempi di errori e come risolverli
Il web ha molti gradienti ovviamente brutti, ma questi non sono solitamente fatti da designer professionisti. Piuttosto che mostrare errori eclatanti, illustrerò alcuni modi in cui gli errori sottili possono creare tensioni in disegni altrimenti eccellenti.
Ombre uniformi per oggetti sovrapposti
Oggetti sovrapposti implicano una differenza nella loro distanza da te (determinata in parte dal loro spessore). I progettisti, tuttavia, usano frequentemente ombre esterne identiche per oggetti sovrapposti. Quindi, le informazioni trasmesse dalle ombre si scontrano con le informazioni trasmesse dalla sovrapposizione, minando l'illusione della dimensionalità.
Vedere conflitti come questi mi mette a disagio, e più mi concentro su di loro, più mi fa male la testa. Gli utenti dovrebbero prendere piacere nel tuo design, non provare dolore!
Puoi leggere ulteriori informazioni su questo problema in " Costruisci una migliore ombra , "Una guida di Jacci Howard Bear on About.com.
Bordi bruschi
Gli angoli delle ombre reali non avrebbero bordi duri a meno che non avessero assolutamente alcuna luce riflessa, il che sarebbe una situazione molto insolita. Piuttosto, i loro angoli sono solitamente arrotondati dai raggi di luce che si insinuano intorno a loro.
Ecco un drop-shadow con un bordo irrealisticamente difficile:
Questo design altrimenti adorabile non ha quasi nessuna illusione dimensionale, ma ha un'ombreggiatura lungo la barra laterale destra. Il progettista forse voleva abbassare la gerarchia della barra laterale sulla pagina, un effetto che il suo sfondo blu aiuta a raggiungere. Non solo è inutilmente oscuro, però, ma il lato meno plausibile fissa il visitatore in faccia.
Nella parte inferiore della barra laterale, puoi vedere una transizione arrotondata, in cui il designer ha creato un effetto più plausibile. Ma puoi capire perché non l'ha ripetuto in alto, perché sarebbe un vaso con la linea orizzontale pulita impostata dagli elementi superiori ben allineati. Piuttosto che richiedere il realismo di questa transizione arrotondata, risolviamola abbassando il più possibile l'ombra esterna.
Qui, ho reso l'ombreggiatura così leggera che non fa altro che suggerire che è seduto più indietro. Perché è così leggero, la linea di transizione pulita non è brutta o distraente.
Cosa diavolo sta succedendo dietro quell'oggetto?
A volte, un drop-shadow diventa matto per nessuna ovvia ragione, come con la scatola blu che circonda il logo W3C qui sotto.
Perché l'ombra iniziale è così indietro dall'oggetto e così arrotondata? Più cerco di capire la storia raccontata da questa ombra, più mi confondo. La mia ipotesi è che il progettista volesse dare più importanza e peso al logo, che l'ombra esterna aiuta a realizzare, ma sconvolge l'armonia della pagina così tanto che non ne vale la pena.
Non lasciare che i tuoi gradienti suggeriscano fonti di luce diverse.
In questo disegno altrimenti eccellente per WolframAlpha, gli oggetti sulla pagina hanno sfumature che vanno dal bianco all'arancio. Il problema è che il gradiente nella regione dell'intestazione è bianco nella parte superiore, che implica la luce dall'alto, mentre gli elementi della pagina in basso hanno il bianco nella parte inferiore, che implica la luce dal basso.
Potresti sostenere che sto pensando troppo, che le sfumature non devono necessariamente coincidere con le fonti di luce. È possibile, ma sfumature sottili come queste hanno una relazione metaforica intrinseca con i gradienti che vediamo nel mondo reale. Cambiamo la direzione dei gradienti più in basso sulla pagina in modo che implichino una fonte di luce dall'alto:
E otteniamo l'armonia della fonte di luce.
In definitiva, sei libero di fare come ti pare.
Poiché gli oggetti su una pagina web si riferiscono a oggetti reali solo per metafora, la loro efficacia è essenzialmente soggettiva. La connessione tra l'immagine di un pulsante e un pulsante reale non ha realtà oltre la mente dell'utente.
Noi designer non siamo tenuti a rendere le nostre metafore coerenti con la realtà, ma essere attenti e attenti ai molti livelli di comunicazione in un design ci aiuta a rendere i nostri siti Web più armoniosi.
E la nostra cura e coerenza aiuta a rendere l'esperienza dell'utente del sito web comoda e persino piacevole.
Scritto esclusivamente per WDD da Nate Eagle . Ha studiato filosofia al college, un'istruzione che lo ha preparato perfettamente per progettare e sviluppare pagine web per PBS KIDS. Puoi leggere di più da lui e dai suoi collaboratori di PBS a Design.PBS .
Pensi che questo livello di dettaglio sia importante nella progettazione di ombreggiature e sfumature? Hai i tuoi animaletti domestici su come vengono utilizzate le ombre e le sfumature?