ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

L’USO DELLE TRASPARENZE NEL WEB DESIGN

Argomenti: ,

Autore: Andrea Baccolini

Trasparenze nel web design
Gen
07
2013

Traduzione dell’articolo “USING TRANSPARENCY IN WEB DESIGN: DOS AND DON’TS” del blog “CODROPS

 
Sperimentando con le trasparenze è un ottimo modo per espandere il tuo repertorio di design.
Come molti altri effetti, questa tecnica è da utilizzare con parsimonia provandola in più situazioni per garantire che funzioni e si presenti come previsto.
La creazione di un web design utilizzando la trasparenza può essere bella e difficile.

La trasparenza è l’effetto creato quando un blocco di colore, testo o immagine è “reso più sottile” o desaturato in modo che il colore è diluito e si vede cosa c’è dietro.
L’effetto può essere abbastanza sorprendente quando eseguita correttamente – creando un luogo ideale per il testo o come un modo per portare a fuoco una certa parte di un’immagine.
I progettisti devono prestare attenzione però quando si utilizza la trasparenza.
L’effetto può essere difficile da fare bene, preoccupandosi anche della leggibilità.
Box trasparenti e testo a livelli sbagliati possono essere fonte di distrazione.
Seguono degli esempi di siti dove l’esecuzione della trasparenza è stata resa splendidamente.

 

USARE LE TRASPARENZE PER CREARE CONTRASTO

sanofigrey

deodesigngrey

Il vantaggio n°1 di utilizzare la trasparenza come tecnica di progettazione è creare contrasto.
L’effetto permette ai progettisti di stabilire un punto focale con un tocco di colore, grande testo sopra un’immagine o come uno schermo a colori variabili con la dimensione.
La trasparenza è utilizzabile anche per aiutare testo ad evidenziarsi su uno sfondo non adatto.
È particolarmente importante considerare il contrasto quando si lavora con le trasparenze.
Una trasparenza funziona solo se sia l’immagine (o sfondo) e il testo sono leggibili.
Quando si considera un effetto di trasparenza, chiedetevi: questo faciliterà gli utenti a capire il testo/immagine?

 

NON COPRIRE PARTI ESSENZIALI DELL’IMMAGINE

Le trasparenze non dovrebbero comprendere parti di sfondo o immagine importanti per il messaggio.
Essere consapevoli di ciò che si “perde” quando si determina il posizionamento dei telai trasparenti.

 

USARE TRASPARENZE SU PIU’ LIVELLI

ultimagrey

suaviagrey

Non c’è nessun perfetto livello di trasparenza.
Per alcuni progetti una trasparenza dell’80 per cento è l’ideale; per gli altri il 15 per cento potrebbe essere migliore.
E’ preferibile giocare con vari livelli di trasparenza per ogni progetto.

 

NON PENSARE CHE LA TRASPARENZA RENDA IL TESTO PIU’ LEGGIBILE

Solo perché si sta utilizzando una finestra trasparente per testo non significa che il testo è leggibile automaticamente.
Dobbiamo pensare al contrasto sia per un box trasparente di testo che per l’immagine di sfondo.
Quando si utilizza una trasparenza per immagini, testo o box colorati, è estremamente importante considerare la leggibilità delle parole.
Ricordate, il vostro messaggio non verrà comunicato se gli effetti nella progettazione rendono il testo illeggibile.

 

USARE LA TRASPARENZA IN PICCOLI SPAZI

webundergrey

line25grey

Le trasparenze non sono solo per la parte principale del tuo sito.
Questo effetto possono andare bene anche in piccoli spazi.
Pensare a usare una trasparenza per mostrare altri elementi come un effetto hover per pulsanti cliccabili. Basta cercare di non impazzire troppo con trasparenze multiple.
Scegliere un elemento e lo stile di trasparenza e applicarlo in tutto il design del sito.

 

NON USARE LA TRASPARENZA SULLE IMMAGINI CON CONTRASTO

Per motivi di leggibilità, è meglio evitare l’uso di trasparenze su oggetti che già contengono elementi contenenti componenti nettamente contrastanti – sacche di bianco e nero o colori che sono opposti sulla ruota dei colori.
Utilizzando una trasparenza su questi tipi di elementi, a meno che non siano davvero saturi, può avere un impatto negativo sul vostro disegno perché può essere difficile creare l’effetto corretto attraverso tutte le parti dello sfondo. Si consideri invece un’insieme di tinte.

 

USARE LA TRASPARENZA IN MODO ARTISTICO

squarespacegrey

exploventgrey

Le trasparenze non sono effetti solo secondari.
È consigliabile creare un’immagine dominante per il tuo sito usando questo effetto.
Una grande trasparenza può essere un modo sorprendente per creare contrasto, enfasi e intrighi visivi.

 

NON USARE LE TRASPARENZE COME DECORAZIONI

La trasparenza non è un effetto da aggiungere come un ripensamento perché siete annoiati con il design.
Utilizzando questo effetto come decorazione è un modo infallibile per ottenere una “salamoia di design”.
L’uso delle trasparenze dovrebbe essere progettato e pensato in anticipo.
La trasparenza non è un semplice effetto come il grassetto e può risultare sciatta e poco professionale se non fatto bene.

 

USARE LE TRASPARENZE NELLO SFONDO

chestergrey

bressanegrey

Gli effetti trasparenti non sono solo per gli elementi all’avanguardia del vostro disegno, questo effetto può essere usato pure sulle immagini di sfondo.
Alcuni dei migliori elementi trasparenti sono delicati.
Le trasparenze possono essere posizionate tra i livelli delle immagini.
Sito di Tony Chester utilizza ad esempio una brillante serie di tecniche di stratificazione con trasparenza per creare una struttura multidimensionale.

 

NON USARE TROPPE TRASPARENZE SIMULTANEAMENTE

Limitare l’uso di diversi tipi di effetti trasparenti a uno per ogni progetto.
Esse dovrebbero creare distinzione, contrasto e interesse visivo. Usandone troppe può essere fonte di distrazione per gli utenti.

 

UTILIZZARE LA TRASPARENZA CON LE IMMAGINI ANCORA E/O ROTANTI

designblvdgrey

dsigncollectorsgrey

L’uso delle trasparenze non è limitato a una singola pagina o design. Possono anche lavorare con diverse immagini e sfondi. Utilizzare lucidi in entrambi i modi.
La creazione di una trasparenza per immagini a rotazione può essere una delle esecuzioni più difficili dell’effetto, ma anche uno dei più impressionanti.
Pensare a immagini di sfondo più attenta.
Scegli le immagini che hanno simili schemi di colore e contrasto, in modo che una singola trasparenza funzionerà mentre l’ immagine di sfondo sarà dietro di esso.
Prestare attenzione a come la trasparenza si adatta sopra ogni immagine per mantenerne l’integrità, creare una foto leggibile o altro testo e sfondo e mantenere coerenza visiva.

 

CONCLUSIONE

Sperimentando con le trasparenze è un ottimo modo per espandere il tuo repertorio di design.
Come molti altri effetti, utilizzare questa tecnica con parsimonia provandola in più ambienti per garantire che funziona e si presenta come previsto.
Le maggiori sfide con le trasparenze sono la loro creazione in modo che il testo sia leggibile quando vengono utilizzate immagini e assicurandosi che l’elemento trasparente non copra le parti sbagliate di ciò che è sotto di esso.
Sperimentare con diversi livelli e usi di trasparenza – con immagini, con sfondi, come un effetto hover – per determinare che cosa funziona meglio per ogni progetto.

Traduzione dell’articolo “USING TRANSPARENCY IN WEB DESIGN: DOS AND DON’TS” del blog “CODROPS

 

 

L’USO DELLE TRASPARENZE NEL WEB DESIGN ultima modifica: 2013-01-07T11:18:21+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

Ultimi articoli della stessa categoria:

2 commenti

  1. Thank you so much for this article, it’s very very useful! 🙂

      Quote

COMMENTA QUESTO ARTICOLO!

Per favore compila il captcha (richiesto):

Andrea Baccolini | Web designer Copyright 2012 - 2017 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.