Ci sono principalmente due diverse scuole di pensiero sul workflow di progettazione di una proposta grafica: il primo, il più “antico e arcano” è quello di creare una proposta grafica come immagine, un mockup grafico, la seconda è quella di creare un mockup HTML studiando la grafica direttamente sulla struttura HTML.
Due tipologie di proposta
L’idea di creare una proposta grafica come immagine e non direttamente sullo strumento (il browser) nasce dal fatto che le professionalità della comunicazione visiva, nel momento di buttarsi sul web hanno sfruttato il loro know-how tecnico sugli strumenti che avevano già a disposizione per la grafica tradizionale (Illustrator, Freehand, Photoshop, Xpress). Oggi a causa di una naturale evoluzione di mercato la scelta dei software in ambiente professionale si è un po’ ristretta con la stragrande dominanza di Photoshop.
Solo ultimamente alcuni designer hanno cominciato a predicare (devo dire a volte in modo talebano) l’utilizzo di HTML e CSS come strumenti di progettazione. Non entro nella discussione di quale delle due sia la migliore o la peggiore. Ci sono vantaggi e svantaggi. I maggiori detrattori della proposta grafica statica affermano che non sia in alcun modo legata ai contenuti reali che dovrebbero guidare lo sviluppo di un sito intorno ad essi, ed al media finale (il browser) con tutte le sue peculiarità.
Io mi sono reso conto che preferisco l’immagine grafica: riesco a inserire più dettagli, riesco a modificarla con maggiore velocità in caso di cambiamenti, trovo che ad oggi non esista un strumento visivo per la creazione di documenti per il web che metta l’enfasi sul design risolvendo in automatico le problematiche tecniche con la stessa flessibilità con cui uso Photoshop.
Questo però non significa non tenere in considerazione le limitazioni ed i vantaggi del media con cui si andrà a lavorare. Non mi metterò a creare un mockup in cui non prenda in considerazione che le voci di menù possano aumentare, che lo schermo non abbia una dimensione fissa, che la pagina possa allungarsi, lo stato dei tasti (scusa Ale! 🙂 ) e tanti altri errori di questo genere.
A livello tecnico, fornire un elemento di interfaccia che il programmatore o il web designer non possano ricreare o si trovino in difficoltà di fronte all’utilizzo reale e pratico è un da considerarsi un fallimento. Nella stesura del mockup è doveroso affrontare queste problematiche e trovare una soluzione chiara per chi deve trasformare l’elemento in HTML.
Da dove si parte
Il grafico che ci consegna un mockup da trasformare in struttura HTML, nove volte su dieci ci consegnerà di un file creato in Photoshop.
Alcune volte mi è capitato di avere in mano JPG monolivello da cui estrarre gli elementi grafici. Sarebbe meglio evitare un file che non preservi le informazioni di livello, ci sono situazioni in cui l’effetto finale unificato in un livello unico non è estraibile.
Inoltre, l’idea di consegnare la bozza con i livelli separati organizzati in set differenti, se fatto con criterio, può comunicare al web designer come si è pensato a livello progettuale di strutturare la pagina HTML: gli eventuali elementi fissi o dinamici, ridimensionabili o che devono sparire, il bottone attivo o disattivo ecc. In conclusione fornire o meno un file a livelli può snellire di molto il processo di lavoro negli step successivi di altri componenti del progetto che ai fini pratici guadagnano di indipendenza dal settore grafico.
Cominciando ad orientarci nell’applicazione specifica (Photoshop), i livelli generati con effetti particolari non dovrebbero essere rasterizzati. L’editor di Adobe, infatti rende disponibili alcuni effetti che sebbene fino a poco tempo fa erano riproducibili solo utilizzando un’immagine di sfondo, oggi sono implementabili direttamente con i CSS ed è su questi che più avanti vorrei provare a fare qualche test.
In conclusione, è bene che se un grafico vi passa uno studio di interfaccia, lo passi in un formato a livelli ed in caso di effetti dinamici, che questi siano ancora modificabili. Nella preparazione del file il designer non deve mai scordare il media finale (il browser) e le sue limitazioni o vantaggi. Nella progettazione deve mettere in conto che il suo file verrà trasformato in markup e che quindi dovrà esso stesso avere conoscenza dell’HTML e dei CSS.
La prossima volta parleremo di come tagliare un file PSD e di come ricavare le informazioni da inserire nel CSS attraverso l’interfaccia di Photoshop.
