Questa è la traduzione dell'articolo Make Your Mockup in Markup di Meagan Fisher pubblicato originariamente su 24 Ways il 24 Dicembre 2009.
"Non progettiamo copie di pagine web, progettiamo pagine web". Andy Clark, via Quotes on Design
Come si faceva
Ho sempre pensato che il posto migliore per progettare un sito web fosse un software di grafica. Creavo un PSD perfetto al pixel riempito con contenuto generico, lo mandavo al cliente, procedevo con le revisioni e alla fine passavo alla creazione del markup.
È un procedimento familiare pure per voi? Non siete soli. In un sondaggio molto scientifico e ufficiale che ho condotto, quasi il 90% di quanti hanno risposto hanno detto di iniziare la progettazione del sito su Photoshop per poi passare al browser.
Recentemente, grazie soprattutto all'influenza di un maestro come Dan Cederholm, sono arrivata alla conclusione che la progettazione del design di un sito dovrebbe iniziare là dove il sito vivrà: nel browser.
A morte Photoshop
Alcuni di voi forse si stanno chiedendo: "Cosa c'è di male a usare Photoshop per la maggior parte del mio lavoro di design?" Bene, un designer esperto vi dirà che lavorare in Photoshop è come lavorare in un campo minato: non sapete mai cosa sta per esplodervi in faccia.
La propensione di Photoshop a crashare in momenti cruciali è una barzelletta ricorrente nell'ambiente dei designer, quasi quanto la sua interfaccia poco usabile. E non fatemi nemmeno pensare al modo in cui viene trattato il testo:
Con i problemi relativi ai crash e al rendering del testo abbiamo imparato a convivere. Ma il problema serio derivante dall'uso di Photoshop per le bozze grafiche del design di un sito sono le aspettative che si danno al cliente. Quando mandate al cliente un'immagine statica del design, non gli state fornendo l'immagine reale. Egli non può vedere come funzionerebbe un layout a griglia fluida, come quel design sarà visualizzato nei vari browser, come funzionano interazioni di base come gli effetti :hover o gli script Javascript. Per approfondire sul tema degli svantaggi che possono derivare dal mostrare ai clienti immagini statiche piuttosto che siti web, potete leggere l'articolo di Andy Clarke Time to stop showing clients static design visuals.
Un male necessario?
Nel passato ci siamo tutti affidati a Photoshop perché era per noi vitale ottenere i nostri amati angoli arrotondati, le ombreggiature, gli aloni sfumati, i gradienti. Tuttavia, con la recente adozione di molte nuove proprietà dei CSS3 nella maggior parte dei moderni browser e con la lenta scomparsa di IE6, i browser possono visualizzare al meglio bozze grafiche belle quanto quelle create in software di grafica. Grazie alla potenza di RGBA, di text-shadow, box-shadow, border-radius, PNG trasparenti e @ font-face, potete creare un prototipo splendido e scintillante direttamente nel browser. Nel resto dell'articolo vi mostrerò come.
Iniziamo dalle basi
"Il contenuto precede il design. Il design senza contenuto non è design, è decorazione". Jeffrey Zeldman
All'inizio non pensate nemmeno allo stile. Partite con le basi: il contenuto. Ponete le fondamenta per il markup, per la sua struttura, assicuratevi che il vostro design funzioni anche con le immagini e gli stili disabilitati. È un fattore cruciale per dare priorità ai contenuti e per mettervi sulla buona strada rispetto all'accessibilità e all'ottimizzazione per i motori di ricerca. Non è male come inizio, vero?
Definire il layout
Il passo successivo è quello di strutturare il contenuto in un modo usabile. Con i CSS, fare delle modifiche semplici al layout è semplice come impostare un float. Sperimentate allora per verificare quale struttura sia quella più adatta alle vostre necessità.
Attenzione alle griglie
Ci sono tanti strumenti in grado di far apparire una griglia in sovrimpressione nel nostro browser. Per Mac raccomando l'uso di Slammer; gli utenti PC possono dare un'occhiata una delle bookmarklet disponibili, come 960 Gridder.
Una volta trovato un layout che funziona bene con i vostri contenuti, passate tutto al cliente per una prime revisione. È una cosa che li fa sentire coinvolti nel processo di progettazione e dà loro l'idea di come il sito sarà strutturato una volta completato.
Fine prima parte.
Mettere mano agli stili
Ora viene la parte divertente: iniziate a lavorare sul livello della presentazione. Lasciatevi guidare nelle scelte da considerazioni corrette in fatto di usabilità, specie per il colore e per la tipografia. Usate colori forti e caratteri tipografici contrastati sugli elementi che volete enfatizzare.
Usare RGBA
Introdurre i colori è facile con RGBA. A me piace iniziare con il colore principale della pagina. Poi uso il bianco con varie opacità per dare enfasi alle sezioni dei contenuti.
Tipografia
Proprio come per il colore, potete usare la tipografia per evocare un certo feeling e attirare l'attenzione dell'utente. Usate caratteri tipografici contrastanti (tipo serif per i titoli e sans-serif per il corpo del testo) per raggruppare il contenuto in sezioni significative.
In un articolo recente, il maestro della tipografia per il web, Jason Santa Maria, offre un eccellente consiglio sul modo in cui scegliere i caratteri tipografici:
"Scrivete una descrizione generale delle qualità del messaggio che state provando a comunicare e considerate poi i font che possiedono quelle qualità"
Mi pare molto chiaro. Volevo dare al mio design un tocco classico, con qualche elemento di nostalgia, così ho usato Georgia per i titoli e ho incorporato la lettera & ornata di Baskerville nell'header.
Abbellimenti
Così com'è, il design non è poi così male, ma è ancora un po' piatto. Possiamo fare meglio, e dopo aver messo nel mix un po' di CSS3 e un paio di immagini PNG, tutto sarà ancora più bello.
Giocare con la luce
Gli oggetti nel mondo naturale riflettono la luce. Cerchiamo dunque di rendere il design più organico, aggiungiamo degli effetti che sfruttino la luminosità. Ho ottenuto questo risultato nel design dell'esempio creando due gradienti da bianco a trasparente di opacità variabile. Entrambi hanno un bordo bianco solido sulla parte superiore, cosa che dà al tutto un effetto doppio bordo e un aspetto più preciso. Usando la proprietà CSS3 text-shadow sui titoli e la proprietà box-shadow sui moduli per il contenuto, inoltre, abbiamo aggiunto facilmente profondità al design.
Cura dei dettagli e originalità
OK, forse non avete bisogno di tanta originalità, ma non fa male aggiungerne un pizzico. Sono i dettagli che faranno spiccare in qualche modo il vostro design. Lavorate allora con la grafica, con buone texture, usando immagini PNG con il canale alpha in modo da poter fare poi altri aggiustamenti sul colore.
Mandare tutto al cliente
Ecco, fermiamoci un attimo ad osservare. Abbiamo un bozzetto dettagliato, ben strutturato e pronto per la revisione del cliente. La cosa migliore di tutte è che anche il markup è praticamente pronto. Se il cliente approva il design in questo momento, il template è di fatto completo, pronto per l'uso.
Non abbiate fretta!
Ora, io non so come vadano per voi le cose, ma in passato non ho mai incontrato un cliente soddisfatto del design alla prima revisione, le critiche arrivano sempre. Proviamo allora a valutare le osservazioni che potrebbero esserci rivolte e andiamo a vedere come possiamo fare le modifiche richieste nel browser.
Modificare la tipografia
"La mia ex fidanzata amava il Georgia, on voglio più vedermelo davanti agli occhi. Possiamo eliminarlo? Voglio usare un font che sia grossolano, proprio come la mia ex fidanzata".
Così potrebbe dirci il nostro finto cliente. E allora, per fortuna grazie ai CSS, rimuovere Georgia è facile come fare un trova e sostituisci nel foglio di stile. Ho dunque modificato il bozzetto. Ho usato @font-face e utilizzato il font League Gothic sui titoli per dare alla tipografia quel look and feel che il cliente ci ha chiesto.
Angoli arrotondati
"Non sono sicuro se mi piacerà, ma voglio vedere come viene con gli angoli arrotondati. Mio cugino, un manager di un'azienda Web 2.0, dice che di questi tempi vanno di moda".
Così, ancora una volta, il nostro finto cliente. Passare agli angoli arrotondati lavorando in Photoshop è un incubo, dal momento che dovrebbero essere ricreate tutte le forme e gli elementi dell'interfaccia. Per fortuna, possiamo contare sulla proprietà CSS border-radius. Basta applicarla ad una manciata di classi e otterremo gli angoli arrotondati in un attimo.
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.
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.
