Web Design  »  Articoli  »  Web design 

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.

Figura 1 - L'applicazione Adobe Photoshop CS4 vi ha rovinato la giornata

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:

Figura 2 - Testo in Photoshop (a sinistra) e su Safari (a destra)

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.

Altri articoli

Altre guide

Altre newsletter