![\"photoshop_icon\"](\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg\"){kind=icon}
Ci sono principalmente due diverse scuole di pensiero sul workflow di progettazione di una proposta grafica: il primo, il pi\u00f9 “antico e arcano” \u00e8 quello di creare una proposta grafica come immagine, un mockup grafico, la seconda \u00e8 quella di creare un mockup HTML studiando la grafica direttamente sulla struttura HTML.<\/p>\n
L’idea di creare una proposta grafica come immagine e non direttamente sullo strumento (il browser) nasce dal fatto che le professionalit\u00e0 della comunicazione <\/strong>visiva, nel momento di buttarsi sul web hanno sfruttato il loro know-how tecnico sugli strumenti <\/strong>che avevano gi\u00e0 a disposizione per la grafica tradizionale<\/strong> (Illustrator, Freehand, Photoshop, Xpress). Oggi a causa di una naturale<\/em> evoluzione di mercato la scelta dei software in ambiente professionale si \u00e8 un po’ ristretta con la stragrande dominanza di Photoshop.<\/p>\n 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\u00e0.<\/p>\n Io mi sono reso conto che preferisco l’immagine grafica: riesco a inserire pi\u00f9 dettagli, riesco a modificarla con maggiore velocit\u00e0 in caso di cambiamenti, trovo che ad oggi non esista <\/strong>un strumento visivo per la creazione di documenti per il web che metta l’enfasi sul design risolvendo in automatico le problematiche tecniche <\/strong>con <\/strong>la stessa flessibilit\u00e0 con cui uso Photoshop.<\/p>\n Questo per\u00f2 non significa non tenere in considerazione le limitazioni ed i vantaggi del media <\/strong>con cui si andr\u00e0 a lavorare. Non mi metter\u00f2 a creare un mockup in cui non prenda in considerazione che le voci di men\u00f9 possano aumentare, che lo schermo non abbia una dimensione fissa, che la pagina possa allungarsi, lo stato dei tasti (scusa Ale! \ud83d\ude42 ) e tanti altri errori di questo genere.<\/p>\n A livello tecnico, fornire un elemento di interfaccia che il programmatore o il web designer non possano ricreare o si trovino in difficolt\u00e0 di fronte all’utilizzo reale e pratico \u00e8 un da considerarsi un fallimento<\/strong>. Nella stesura del mockup \u00e8 doveroso affrontare queste problematiche e trovare una soluzione chiara per chi deve trasformare l’elemento in HTML.<\/p>\n Il grafico che ci consegna un mockup da trasformare in struttura HTML, nove volte su dieci ci consegner\u00e0 di un file creato in Photoshop<\/strong>.<\/p>\n Alcune volte mi \u00e8 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<\/strong>, ci sono situazioni in cui l’effetto finale unificato in un livello unico non \u00e8 estraibile.<\/p>\n Inoltre, l’idea di consegnare la bozza con i livelli separati <\/strong>organizzati in set differenti, se fatto con criterio, pu\u00f2 comunicare\u00a0 al web designer come si \u00e8 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\u00f2 snellire di molto il processo di lavoro negli step successivi <\/strong>di altri componenti del progetto che ai fini pratici guadagnano di indipendenza dal settore grafico.<\/p>\n Cominciando ad orientarci nell’applicazione specifica (Photoshop), i livelli generati con effetti particolari non dovrebbero essere rasterizzati<\/strong>. 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 <\/strong>ed \u00e8 su questi che pi\u00f9 avanti vorrei provare a fare qualche test.<\/p>\n In conclusione, \u00e8 bene che se un grafico vi passa uno studio di interfaccia, lo passi in un formato a livelli <\/strong>ed in caso di effetti dinamici, che questi siano ancora modificabili. Nella preparazione del file il designer non deve mai scordare il media finale<\/strong> (il browser) e le sue limitazioni o vantaggi. Nella progettazione deve mettere in conto che il suo file verr\u00e0 trasformato in markup e che quindi dovr\u00e0 esso stesso avere conoscenza dell’HTML e dei CSS.<\/strong><\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":"Da dove si parte<\/h3>\n
Ci sono principalmente due diverse scuole di pensiero sul workflow di progettazione di una proposta grafica: il primo, il pi\u00f9 “antico e arcano” \u00e8 quello di creare una proposta grafica come immagine, un mockup grafico, la seconda \u00e8 quella di creare un mockup HTML studiando la grafica direttamente sulla struttura HTML.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[150,42,151,152,66],"class_list":["post-2891","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-photoshop","tag-grafica-web","tag-mockup","tag-proposta-grafica","tag-web-design"],"yoast_head":"\n