Web Design  »  Articoli  »  Web design 

Creare il mockup del sito nel browser

di: Meagan Fisher     11 Marzo 2010

Modificare i colori

"Il design è troppo scuro, troppo triste con questo blue. Possiamo usare un colore più luminoso? Voglio l'arancione, come quello sul sito di Zeldman".

Apportare modifiche ai colori è un'altra operazione estremamente complicata in Photoshop. Trovare e aggiornare lo sfondo di ogni livello, di ogni ombreggiatura, di tutti i link può diventare un incubo in un file PSD. Tuttavia, se avete creato il bozzetto grafico nel browser usando i colori RGBA e immagini PNG semi-trasparenti, modificare i colori è semplice come aggiornare lo sfondo del body e pochi colori per i font.

Figura 12 - Il nostro bozzetto con uno schema di colori basato sull'arancione

screenshot

Come la mettiamo con Internet Explorer?

Molte delle proprietà CSS che ho suggerito di usare, come RGBA, text-shadow, box-shadow e border-radius non supportate su Internet Explorer. Lo so, la cosa rattrista pure me. Tuttavia, ciò non significa che non possiate usare queste tecniche in un bozzetto grafico basato sul markup. Il punto cruciale in tale contesto è ottenere bozzetti del sito in modo efficace, dando enfasi al markup sin dall'inizio.

Una volta che il design sia stato approvato, insieme al cliente potrete decidere se è il caso o meno di avere un sito che non appaia identico su tutti i browser. È un male se alcuni utenti avranno le ombreggiature e altri no? E se parte dei visitatori non vedono gli angoli arrotondati?

L'idea di premiare gli utenti che scelgono un browser moderno non è nuova; è un tema ben esplorato in Handcrafted CSS, e su di esso si sono espressi anche Aaron Gustafson e Andy Clarke in diverse occasioni. Credo che non dovremmo concepire un design per il minimo comun denominatore (IE6). Dovremmo creare siti che siano belli nei browser moderni, ma che degradino bene per gli altri. Tuttavia, alcuni clienti non sono così aperti, e in qual caso potrete sempre usare immagini di sfondo per le ombreggiature e gli angoli arrotondati, come avete fatto in passato.

Conclusioni

Con l'avvento dei CSS3, i browser sono in grado di fornire la base per la creazione di bozzetti belli e dettagliati, quanto Photoshop, ma impiegando la metà del tempo. Non sono l'unica a propendere per questo approccio. Nel suo articolo Time to stop showing clients static design visuals e nella sua presentazione Walls come tumbling down, Andy Clarke fa un eccellente lavoro per far comprendere la positività di questo approccio.

Per il 2010, dunque, la sfida dovrebbe essere quella di mettere da parte Photoshop per passare a lavorare da subito con il codice. Anche se gli argomenti che ho portato per creare il design nel browser non sono sufficienti per convincervi a modificare approccio permanentemente, vale la pena provare.

Guide Web design

Guida Progettazione siti web

Dall'analisi dei requisiti fino allo sviluppo e alla promozione:...

Guida Pubblicare un sito web

Le verifiche fondamentali da effettuare prima del lancio di un nuovo...

Guida Architettura dell'Informazione

L'Architettura dell'informazione è la disciplina che permette di...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti