Dalla grafica al codice: rendiamoci amico lo sviluppatore
Negli ultimi mesi mi sono trovata a dover gestire dei progetti un po’ più complessi del solito, con scadenze particolari e una mole di lavoro abbastanza massiccia. Per seguire in modo ottimale questi progetti, ho cominciato a delegare una parte del lavoro – nello specifico la fase di sviluppo XHTML/CSS della grafica da me realizzata – a terze persone.
Generalmente, quando sono io ad occuparmi sia della grafica che del markup, tendo a lavorare in modo egoistico: non mi metto certo ad ottimizzare i sorgenti di Photoshop per l’esportazione dei singoli elementi grafici. Essendo io a gestire il layout – dal primo mockup all’interfaccia definitiva – ovviamente saprò benissimo dove mettere le mani quando sarà il momento di convertire tutto in XHTML.
Quando si comincia a delegare questa fase, però, occorre lavorare in modo diverso. Bisogna approcciarsi in modo meno grossolano al progetto grafico e impostare il tutto in modo da semplificare la vita a chi dovrà analizzare la grafica e svilupparne il markup. Tradotto in termini spicci: dobbiamo farci amico lo sviluppatore, facendo in modo di rendergli il processo di sviluppo quanto più immediato e intuitivo possibile.
Vediamo come.
1- Un po’ di pulizia nei sorgenti grafici
Non so voi, ma generalmente in un sorgente di Photoshop sono capace di trovarmi anche 100 livelli! Anche se dovremmo sforzarci di ordinare e rinominare i vari livelli durante la fase di design, sono consapevole che generalmente l’ordine, nel bel mezzo di un processo creativo, è l’ultimo dei nostri pensieri: quando si è presi dall’ispirazione e dalla smania di mettere su schermo l’idea che abbiamo in testa, è difficile -e controproducente – interrompere il flusso dei pensieri per riordinare i files del progetto.
Perciò, se i livelli del file sorgente sono in subbuglio, prima di passarli allo sviluppatore dedica una mezz’oretta a sistemare tutto in modo certosino: raggruppa i livelli, dai loro un ordine gerarchico, cominciando dai primi elementi grafici della pagina agli ultimi, dall’alto verso il basso. Scegli nomi chiari e intuitivi per i livelli e per i gruppi: se il file dell’ombra che hai importato si chiama “SX004”, rinominala con “ombra sotto box” e cosi via.
2- Parola d’ordine: precisione
Da quando ho cominciato ad occuparmi solo della progettazione grafica dei siti web di alcune agenzie con cui collaboro, ho rimosso tutti i link dei siti online dal mio portfolio.
Mi irritava vedere come veniva stravolta la mia grafica durante il processo di sviluppo, senza cura nei dettagli, senza un minimo di occhio.
Le interlinee, le spaziature, i margini: tutte cose che mi facevano rodere il fegato. Per non parlare di elementi come form, pulsanti e call to action, che per semplicità venivano lasciati nello stile di default, ignorando volutamente l’impostazione grafica da me suggerita.
Se non fosse per Nando, a cui devo riconoscere una spiccata sensibilità su tutto ciò che è grafica nonostante non sia completamente il suo settore (sapeste quante accese discussioni, sul colore o sul font più giusto!), e poche altre perle rare che ho avuto modo di conoscere negli ultimi mesi, potrei dire che TUTTI – ma proprio TUTTI – gli sviluppatori con cui ho collaborato fino ad adesso mi hanno dimostrato di non avere la benché minima capacità di comprendere le infinite sfumature che fanno di un design un OTTIMO design, sia dal punto di vista estetico che da quello funzionale.
In poche parole: la maggior parte degli sviluppatori che attualmente si occupa di mettere in codice la mia grafica dimostra un senso estetico pari a ZERO, e questo ovviamente fa si che la qualità finale dei progetti, una volta messi online, ne risenta parecchio.
Per smussare il più possibile questa problematica, il mio consiglio è: siate precisi, in modo quanto più maniacale possibile. Se per una svista il testo inserito in un box apparirà disallineato in Photoshop, è facile che chi si occupa del markup non ci faccia caso, si limiti a fare spallucce e a mettere in codice il box cosi come lo vede, anche se l’effetto visivo finale lascerà a desiderare.
Non pensate cose come “si vede che non deve stare li” oppure “ma è chiaro che deve essere centrato, allineato a sinistra non avrebbe senso”. Lo sviluppatore non ha ideato la progettazione grafica del layout e di conseguenza non può sapere quello che avevamo in testa quando abbiamo disegnato la pagina web. Se vogliamo evitare errori di interpretazione, facciamo in modo che il progetto grafico che consegniamo rasenti la perfezione in ogni suo aspetto.
Questo significa: lasciare visibili le guide e i righelli, cosi che lo sviluppatore capisca in modo immediato che la pagina è progettata su uno schema simmetrico e ben visibile, e che ogni elemento ha una propria disposizione e un suo perché; utilizzare gli elementi con coerenza: se abbiamo provato font diversi per i titoli cercando di capire qual è quello più appropriato, nella bozza definitiva facciamo in modo di eliminare le varie prove e di lasciare solo le scelte definitive, e cosi via.
In questo modo avremo anche diritto a recriminare nel caso le nostre direttive non venissero seguite in modo corretto :)
3- Il file di testo “info” per velocizzare il processo di sviluppo
Per velocizzare il processo di sviluppo ho cominciato a fornire agli sviluppatori un file testuale (chiamato genericamente “info”) in cui riassumo le informazioni utili al processo di slicing.
In questo file riporto le informazioni circa i colori (colore del testo, colore dei links, dei links nello stato hover, colore dei titoli, del background del footer e cosi via), la tipografia (i font usati nelle varie sezioni, i link ai font su Google Font in caso di font integrati con questo sistema, ecc.) e informazioni generali circa l’impostazione strutturale del layout (“questa sezione con il tempo potrebbe crescere, la dimensione dell’immagine nell’header è di 960pixel per 350pixel, ecc”).
Si tratta di informazioni che snelliscono notevolmente il lavoro dello sviluppatore, che non sarà più costretto ad analizzare le grafiche alla ricerca dei dati utili al suo lavoro.
4- La cartella con il materiale grafico
La maggior parte degli sviluppatori che conosco si occupa anche della fase di ritaglio del layout e di esportazione dei singoli elementi grafici che compongono lo stesso. Tuttavia, sempre per agevolare la fase di sviluppo, può essere utile impostare una cartella contenente il materiale grafico che lo sviluppatore dovrà utilizzare per realizzare il markup della pagina web. Per esempio, potremmo creare una cartella “slider” contenente le cinque immagini dello slider che sarà inserito in home page; potremmo definire una cartella “buttons” inserendo i vari pulsanti, nei vari stati (active e hover) e cosi via.
E’ utile anche inserire una variante della pagina web che fornisca tutte le informazioni necessarie sugli stili hover: per quanto mi riguarda metto sempre uno screenshot della pagina con tanti cursori posizionati sui links, sulle call to actions, sui pulsanti, su tutto ciò che in un modo o nell’altro prevede interattività con l’utente. In questo modo evidenzio il colore diverso all’hover, lo stato hover del pulsante, o l’effetto fade delle thumbnails al passaggio del mouse: tutti dettagli che altrimenti andrebbero persi durante la fase di sviluppo.
In conclusione
Gironzolando in diversi blog, forum e gruppi di Facebook ho avuto modo di notare che tra designers (inteso come “grafici” nonostante il termine possa sembrare improprio) e sviluppatori c’è sempre una qualche forma di attrito, quasi di rivalità. I grafici dichiarano che la grafica è tutto, che se un sito non fosse accattivante un utente scapperebbe entro tot secondi, e che alla fine l’utente finale vede e interagisce con l’interfaccia, non con il codice che sta dietro di essa.
Gli sviluppatori rispondono che anche “il codice è arte”, che un sito non deve essere bello ma usabile, eccetera eccetera. Con questo articolo ho evitato di fomentare questa discussione (del resto ho già manifestato in più sedi il mio pensiero al proposito), anzi, ho voluto dare qualche piccolo spunto per rendere la collaborazione grafici/sviluppatori più semplice e veloce.
Voi che ne pensate? Quanti di voi delegano la fase di sviluppo o, al contrario, si occupano solo dello sviluppo, barcamenandosi con progetti grafici di terze persone? E cosa pensate del luogo comune che vede grafici e sviluppatori come “cane e gatto” del web design?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
74 commenti
Trackback e pingback
-
Articoli della settimana 25/12/2011 | Saverio Gravagnola
[...] Dalla grafica al codice: rendiamoci amico lo sviluppatore (Your Inspiration Web) [...]
Da sviluppatore di Markup mi sono trovato spesse volte con questo problema. File PSD che erano un MACELLO COMPLETO!!!
Ho la fortuna di sapere anche usare Photoshop per cui ci sono sempre saltato fuori, ma ho la forte tentazione di consigliare questo articoli ad alcune persone!! :-)
Confermo quanto dici, in genere i coders non hanno un minimo di senso estetico. Anche in questo caso mi reputo un fortunato MANIACO della precisione…
Grazie dell’intervento Sarah.
Fortunatamente ci sono le eccezioni :) Come detto, anche Nando è molto pignolo, anzi, più pignolo di me…!
Non posso che condividere quando dice Sebastian e quotarlo in toto. Grazie Sarah, ora il problema è far leggere questo articolo alle persone giuste… Idee? :D
Ahum…potreste passarmi gli indirizzi e-mail delle persone “incriminate” e io con molta nonchalance gli invio l’articolo nella casella di posta, con oggetto: “ehi tu, si, dico proprio a te: leggi e impara” :D
Ahahah l’immagine finale è spettacolare, mi ci vedo proprio in quello sviluppatore :D
Cmq, io lavoro in un’azienda e mi occupo solo dello sviluppo dei template che ricevo dai grafici.
Per fortuna, seguo anche quella parte di lavoro, cercando di consigliare cosa sarebbe meglio eliminare o aggiungere (cosa sarebbe più facile per me sviluppare o no) quindi alla fine mi ritrovo con dei template che già in parte conosco e so già come svilupparli.
…Alla fine la collaborazione è l’arma migliore. Io in realtà trovo sempre un pò di ostruzionismo da parte degli sviluppatori con cui mi trovo a collaborare, ma credo sia dovuto al fatto che, occupandomi anche di XHTML e di CSS, mi vedano come una potenziale concorrente, qualcuno capace di dire la sua sulla qualità del loro lavoro (quando generalmente chi è solo grafico non ha modo di contestare un layout a tabelle o un codice sporchissimo).
Si sentono sotto pressione, sotto esame :)
Bhe io veramente non lo vedrei come esame, anzi sarebbe un’ottima occasione per confrontarsi con chi, magari, ne sa più di me.
…non tutti hanno questa capacità autocritica e di aprirsi al confronto, credimi :)
Parole sante! La massima precisione nel disegnare la bozza grafica aiuta chi andrà a tagliarla. Io personalmente da web designer preparo al programmatore tutte le pagine template xhtml.
Bè, se già ti occupi dell’xhtml e del css, il programmatore si trova la tavola già apparecchiata, quindi non fa testo :)
Ottima riflessione Sara: oramai è una guerra che dura da secoli, ma qualche tentativo di pace c’è :) . Mi trovo spesso nella stessa situazione, oramai faccio più fatica a spiegare, preparare i file e monitorare il programmatore piuttosto che creare il file graficamente (ovviamente faccio parte del “dark side” della rappresentante grafica, sono un mediatore).
La maglietta “there’s not place like 127.0 0.1” è fantastica!
…sicuramente più originale della maglietta con “Helvetica” che ormai hanno cani e porci :D
Personalmente io non uso photoshop per creare layout in quanto non è lo strumento adeguato per fare questo tipo di lavoro. Esiste un altro programma della adobe che molto spesso viene ignorato soprattutto in Italia ed è fireworks. Questo programma è stato ideato e creato con lo scopo principale di aiutare i webdesigner nella creazione e nello sviluppo dei layout. Il programma è semplice e non richiede troppo tempo per impararlo ed ha moltissimi strumenti che facilitano il lavoro. Se lavoro con altre persone cerco sempre di far conoscere questo programma e in molti casi trovo un riscontro positivo.
Photoshop non può fare tutto ed è un errore pensare che questo strumento possa essere quello giusto per i webdesigner. Fireworks non ha rivali in quanto solo adobe ha sviluppato un programma simile.
Vi invito a riflettere su questo programma e provare ad utilizzarlo. Vi lascio anche un link che illustra varie differenze tra photoshop e fireworks: http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html
Marco, questa mi è nuova. :-) Conosco Fireworks di “fama” ma non l’ho mai usato.
Mi stai dicendo quindi che è FATTO APPOSTA per i Web Designer?
Qualcuno di voi lo usa?
Ciao Marco, la discussione “Fireworks contro Photoshop” è stata affrontata su YIW più volte :) per chi è agli inizi e ancora deve approcciarsi ad un programma piuttosto che un altro sono d’accordo, Fireworks è senz’altro più orientato al Web Design. Per quanto mi riguarda mi sono “formata” con Photoshop, ormai lo conosco come le mie tasche e mi sono semrpe trovata più che bene. Non ho alcuna motivazione che mi spinga a passare da Photoshop a Fireworks, ormai, sarebbe come abbandonare un fidato compagno di avventure che non mi ha mai tradito :)
Condivido con Marco l’opinione su Fireworks
Un ottimo programma per il Web Designer.
Permette di gestire sia grafica bitmap che vettoriale. Io lo uso dalla versione 3 e quando Adobe ha acquisito Macromedia ho temuto per la sua scomparsa.
@Sara
Per il discorso Photoshop vs Fireworks, credo che non ci sia proprio battaglia. Sono due prodotti diversi, rivolte ad attività diverse.
Non mi sognerei mai di fare fotoritocco con Fireworks, come reputo l’export per il web di Photoshop non adeguato.
E’ corretto che l’idea grafica parta da Photoshop, poi con Fireworks si possono ottimizzare il “ritaglio” e l’export con il vantaggio di poter modificare velocemente il materiale exportato in caso di variazioni.
Io ed io grafico con cui collaboro, lavoriamo in questo modo e viviamo felici :)
Si, ripeto: visto che il tempo libero scarseggia non mi ci metto proprio a smanettare con un altro programma. Ma il vostro discorso è fuori dubbio, ci mancherebbe :)
Noi in azienda invece usiamo quasi per niente Photoshop. Anche per le bozze dei siti, usiamo sempre Illustrator.
Abbiamo molti problemi in meno, e ottimizziamo i tempi. Intendo che se per caso io al grafico ho detto 960px e lui me lo fa di 1000px o magari poi mi rendo conto che quel box da 500px non ci sta, non ci vuole niente a ridimensionarlo senza perdere di qualità o altro.
Non serve che ogni volta ricontatto il grafico perchè magari quell’ombra sotto il box, essendo stata ridimensionata e non essendo vettoriale, si deforma.
Sono curiosa: posso vedere alcuni dei siti che fate su Illustrator? personalmente non amo l’effetto “vettoriale” tipico di questo programma, credo che sia parecchio limitante quando si vuole lavorare con texture o pennelli particolari, anche perchè generalmente le risorse scarseggiano. Mi piacerebbe avere modo di studiare un layout realizzato interamente in Illustrator e vedere se i dettagli confermano la mia ipotesi o se sto prendendo una cantonata :)
http://www.catenazzosrl.it
http://www.mgfweb.it
Gli altri sono solo ricostruzioni dal flash in HTML.
E altri 3 non posso farteli vedere poichè ancora non sono online.
Su mgfweb.it ci sono altri siti nel portfolio, molti dei quali sono fatti in illustrator.
Scusami sara, il primo è http://www.catenazzo.it
Fantastica comparazione! Ci do sicuramente un occhio dopo… Grazie!
(hai postato un doppio commento! argh)
Ops… non mi sono accorto del doppio commento!! :(( Spero che lo staff del sito lo possa cancellare!
Fatto :)
@ sebastian: si il programma è stato studiato appositamente per i webdesigner e molti grafici ignorano la sua esistenza!! Fireworks integra strumenti per le le immagini bitmap ma anche strumenti per il vettoriale. Si possono importare file di photoshop e di illustrator mantenendo quasi inalterato il lavoro. Dico quasi perchè dipende come sono stati creati i vari file!
Ci sono moltissimi altri strumenti come l’esportazione in pdf, il supporto a più pagine che photoshop non ha. Il supporto alle master page come in indesign, ecc. Insomma uno strumento completo ma allo stesso tempo semplice ed intuitivo.
Ho spesso usato Fireworks proprio per questo. Creo il layout in Photoshop e poi lo apro in Fireworks per lo slicing e il salvataggio immagini. Purtroppo però capita spesso che Fireworks non “legga” alcuni stili di Photoshop, e li visualizza diversamente.
Questa guida è ottima soprattuto se lo sviluppatore
e il grafico sono la medesima persona ;)
Fireworks è eccezionale. Ha una immediatezza unica. Addirittura si puó testare direttamente il sito prima del coding. Con tutta l’interattività del caso, quindi anche gli :hover. Vero è che viene poco considerato. Non esistono ad oggi manuali in italiano e nemneno tradotti in italiano, come i book in a classroom ufficiali (tradotti e pubblicati da Mondadori).
E’ per questo che è piu facile avvicinarsi a Photoshop. Ogni risorsa, tutorial e guida esistente sul web è orientata all’utilizzo di Photoshop, mentre di Fireworks a malapena se ne parla :)
Non sarà quella frase mia…”il codice è arte”? Ahahahah. A parte gli scherzi, io ho la mia idea semplice semplice.Sviluppatori e grafici dovrebbero cooperare per un tal fine,per un progetto.Io amo la precisione e l’ordine del codice, tutto dev’essere progettato col minor codice possibile.Potrai definirmi anche arrogante e presuntuoso,ho fatto la stessa a domanda a molti:”provate ad immaginare due siti,uno interamente di grafica,l’altro solo xhtml/css,anche se il più spartano possibile, quale sarà il più usabile e fruibile perchè tutti lo possano navigare? E’ chiaro che ho citato un caso estremo…Io odio presunti grafici che dicono,come d’altronde tu stessa hai detto: “Gli utenti non guardano cosa c’è dietro,ovvero il codice, il cliente vuole essere attirato dalla grafica”.Questa frase te la smentisco in 10secondi.Ci vuole un compromesso………”Code is a poetry”.
Ciao Ivan, devo dire che alcune delle discussioni da te generate mi sono state…d’ispirazione. :)
“Gli utenti non guardano cosa c’è dietro,ovvero il codice, il cliente vuole essere attirato dalla grafica”
Non è una mia frase, ho citato un discorso che ho letto, sempre in occasione di una discussione su Facebook.
Comunue, come tu odi i “presunti grafici” che dicono determinate cose, io sopporto poco i “presunti sviluppatori” che sembrano non capire che il Web Design E’ COMUNICAZIONE, e che come tale tutto, dalla scelta dei font ai colori utilizzati, ha una determinata valenza. Se un sito ha un codice con le palle ma è INCAPACE di attrarre, informare o VENDERE, è un sito completamente inutile. Quindi inutile fare esempi stupidi: un buon sito deve essere BELLO e FUNZIONALE, entrambi le cose, è inutile inneggiare ad una componente solo perchè nell’altra non si sa dove mettere le mani..
Era ovvio che il mio discorso era generalizzato eh….io mi riferivo non a te, ma a molti commenti che leggo in diversi gruppo ed a molti siti.E come ho specificato deve esserci un compromesso tra grafica e codice.Un po’ come yin e yang. ;)
che bello questo articolo!! :D
Oh, Antoninuzzo, è dedicato anche a te…che devi sopportare i miei PSD sconclusionati :)
..ma faccio fioretto, in questo 2012 vedrò di migliorarmi, promesso!
Hai ragione, è proprio un bell’articolo!
Hi faticato non poco per trovare nell’ultimo anno chi mi montasse i miei psd in maniera precisa…alla fine mi sono dovuto appoggiare ad un sito americano…soltanto che rimane un pò difficile la spiegazione di alcune cose….Antonino, tu saresti disponibile per una collaborazione nel caso ci sia bisogno? :)
grazie e buon lavoro a tutti
Meraviglioso articolo… Sarebbe tutto più semplice se si rispettassero le best practices.
E’ che è cosi difficile darsi un pò di disciplina, soprattutto quando si è freelance :)
Bell’articolo …
Da far leggere a molti programmatori che conosco … :)
Stampiamo l’articolo e lasciamolo un pò in giro con finta nonchalance, sperando che chi di dovere recepisca il messaggio :D
Bell’articolo
Uso Ps da un po’ di tempo e di recente mi sto dediando al wed design ma mi piaceebbe anche metter mano al codice (i css li conosco) solo che non so come “tagliare” il layout (slicing se non erro)
Esiste qualche tutorial in italiano?
Noi ne abbiamo fatti tre: il primo è inserito nella guida completa alla realizzazione di un sito web, e puoi leggerlo qui:
https://www.yourinspirationweb.com/2009/09/27/come-trasformare-un-psd-in-xhtml-e-css-senza-perderci-la-ragione/ (è diviso in due parti), il secondo è un tutorial in due parti, la prima fa vedere come sezionare un psd, il secondo come mettere in codice le varie sezioni :)
Io sono fortunato.
Capita a volte però di lavorare su PSD di personaggi che hanno sì fatto grafica ma mai per il web. Questo vuol dire riprendere in mano il layout e “riformattarlo” per il web. Provvederò a girare a loro questo articolo, grande Sarah come sempre!
Una volta ho dovuto mettere in codice un layout a 300 dpi largo 3000px! ahahah
Poveri noi… :)
Ti capisco, è successo anche a me. L’ultima volta mi hanno consegnato un layout che nel background aveva una forma sferica, di conseguenza la pagina non poteva crescere sulla base dei contenuti. I grafici che provengono dalla grafica tradizionale trovano sempre qualche difficoltà ad approcciarsi al web :)
Il grande problema grafica-sviluppo si ha soprattutto lavorando su codice compilato come ASP.NET. In questi casi bisogna tener presente sia l’xHTML che la parte di code-behind che viene generato automaticamente. Soprattutto quando si utilizzano controlli di terze parti per .NET per ad esempio creare una griglia complessa, il risultato non è mai quello voluto e desiderato dal grafico. Per fortuna Microsoft ultimamente si sta interfacciando meglio con jQuery che risolve in parte questi problemi. In questi casi dico sia a grafici che sviluppatori: collaborare, collaborare, collaborare.. :)
QUOTO QUOTO QUOTO !!!! (Avrei voluto metterne di più, ma si è capito che QUOTO). Grazie sarà, invierò il link a questa pagina ad un bel po di persone mi sa!!! :)
Vi segnalo naturalmente il documento ufficiale che ho usato finora per cercare di inculcare il modus operandi ai grafici con cui ho collaborato: http://photoshopetiquette.com/.
Naturalmente essendo in inglese e molto rigoroso nelle specifiche, avere questo in italiano credo sia una maniera più light per dire “non puoi fare come c#$%o ti pare!” :D
Avevo visto questa mappa infografica qualche mese fa ma me n’ero completamente identificata. Molto bella, e fatta bene :)
Sono l’unico alieno qua a pensare che sia design che codice funzionale è arte? Io riesco ad arrangiarmi in entrambe le cose e sono talvota pignolo anche troppo e mi lamento anche perchè non si ha tutto il tempo di questo mondo per dedicarsi al massimo della perfezione nei lavori!Eheheh!
P.s Per quanto riguarda i programmi di grafica, anche io Photoshop a vita, è da quando avevo 15 anni adesso 23, che lo uso per tutto, si presta bene anche per il webdesign, sia per mockup che per dividerlo in sezioni ed esportarle!
Comunque bell’articolo , sicuramente utile per chi lavora in team e ognuno ha il suo compito!
Assolutamente devo deluderti Fabio! :D
Non sei l’unico alieno a pensarla così! Programma da quando sono piccolo e ho sempre affermato che il programmatore è un artista.
Quando poi inizia l’indirizzo informatico alle superiori mi accorsi con amarezza che la gran parte dei programmatori in realtà – senza offesa per nessuno – sono molto bravi con i numeri e formule, ma in quanto a creatività… siamo proprio lontani!
È un peccato. Fare un sunto tra due cose apparentemente aliene tra loro come codice e arte grafica è un grande punto di forza che aiuta ad emergere dalla massa senza volto.
Keep Coding & Styling! ;-)
Non ho mai detto il contrario! :)
Eheh bene grazie di aver condiviso il pensiero! A me non da fastidio esistano queste due figure separate, anzi se devo essere sincero ammiro un certo senso chi proprio si dedica a 360 gradi sul design o programmazione, ma allo stesso tempo per quanto mi riguarda a me fa piacere sapermi dedicare sia per cosi dire ai motori che alle carrozzerie e avere il controllo totale senza limiti, sento la stessa passione sia quando disegno con Photoshop, che quando genero righe di codice di programmazione, quello che importa è appunto sentire che quello che stai facendo ti sta ispirando a continuare e immergerti sia nel design che nel codice!
Mi ricordo che quando ho cominciato a far pratica da giovanissimo con i primi sitarelli amatoriali, non vedevo mai il termine webdesigner o webdeveloper usato in rete,raramente, piuttosto solo webmaster! Adesso il termine webmaster sembra stia svanendo!? O sbaglio?
Comunque sia viva webdesigners, webdevelopers, e webmasters! ;D
La solita montagna dicazzate che si incontra regolarmente girovagando per il web….
MA ANDATE A LAVORAREEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE :D è arrivato il furbega di turno!!!
Intanto firmati pagliaccio.
Questo articolo ci voleva proprio, e comunque non è vero che tutti gli sviluppatori sono insensibili al design, io se mi metto d’impegno ci faccio caso ;)
non ho detto “tutti gli sviluppatori”, ho detto “tutti gli sviluppatori con cui ho collaborato finora”, è diverso :) sono certa che ci siano taaante eccezioni, per fortuna.
FIREWORKS RULES.
Ho adottato in azienda Fireworks fin dal 2000 ai suoi albori, questi i motivi per cui è perfetto per il designer e di grande aiuto per lo sviluppatore (aggiungo essenziale per chi fa entrambe le cose):
– gestisce le pagine: un sito non è solo una home, e avere in un file solo le pagine aiuta a fare modifiche comuni alle parti
– gestisce i fotogrammi: ogni pagina di un sito ha dei “casi”, gli hover, le slideshow, se ogni pagina ha i suoi fotogrammi il file grafico diventa un vero e proprio file system che lo sviluppatore può capire e usare
– gestisce i livelli, che in photoshop vengono usati impropriamente spesso per gestire fotogrammi o pagine differenti
– fa uno slicing e una ottimizzazione dei ritagli perfetta e di molto superiore in prestazioni agli altri software
– permette di creare smart objects come photoshop che per chi ha rework da gestire è perfetto
– permette di gestire i vettori come in illustrator (creazione, composizione, elaborazione, effetti…)
– permette l’uso di strumenti di modifica bitmap (timbro, pennelli, …) sicuramente da usarsi per piccoli ritocchi o per la pura grafica, non al livello di fotoritocco, ma quanto basta nella consueta operatività del layout
– permette l’uso di effetti parametrici al pari di photoshop (volendo gli stessi e compatibili)
– permette rapida prototipazione (crea menu o interazioni semplici generando html e javascript) da usarsi ovviamente SOLO per la prototipazione
In sostanza è completo e soprattutto permette una organizzazione strutturata e gestibile di un intero sito (ci abbiamo fatto siti web, gestionali, crm, elearning e ogni tipo di applicazione web tenendo tutte le risorse in un file solo.
Minori perdite di tempo, massima chiarezza del “desiderata” grafico, minimo effort per lo sviluppatore.
Purtroppo a livello statistico non è contempalto come standard, ma in 10 anni di lavoro il numero di volte che ho dovuto “esportare” in PSD il lavoro fatto si conta sulle dita di una mano.
Ciao Sara, quest’articolo ci voleva :D
Condivido pienamente, poi io sono un maniaco della precisione, figurati poi in photoshop…anche se il processo di riordino delle cartelle lo faccio alla fine proprio perchè come dici tu…è meglio non bloccare il flusso creativo.
Da poco ho iniziato anche io ad occuparmi del layout grafico/estetico del sito e collaboro con il mio attuale datore di lavoro per la messa in codice del sito stesso e devo dire che mi sto togliendo diverse soddisfazioni
E’ vero quando dici che molti developer non hanno per nulla il senso estetico (non è esteso a tutti ovviamente) a volte mi sono trovato in alcune aziende a dover rifare anche il layout per il back-office del cms perchè totalmente inusabile
l’estetica nel web conta…eccome! :D
…che soddisfazione sentirlo dire da uno sviluppatore :)
Ciao Sarah, buonasera a tutti.
Articolo molto interessante. Io sono un art director che si sta approcciando al web design da poco anzi da ancora meno, però leggendo la prima parte dell’articolo mi conforta il fatto che l’ordine e la pulizia nella creazione dei file la fa da padrona sia per voi che per noi. E’ fondamentale che ci sia, oltre ad un ordine mentale anche uno tangibile; soprattutto quando si lavora in team. Non si sa mai, per svariati motivi i nostri progetti possono essere “presi in mano” da terze persone e per agevolare il lavoro di tutti è fondamentale che questo inizi bene. Insomma non a caso è stato coniato il modo di dire “chi ben inizia è a metà dell’opera”!
Complimenti
Grazie Sara, bellissimo articolo come sempre e devo dire ceh casca gisuto giusto a fagiuolo!!!! Io sto dalla parte dei grafici, ma me la cavicchio anche col codice xhtml/css, infatti fin ora quasi tutti i siti che ho fatto li ho fatti completamente da me. Ora però sto spero x avviare una collaborazione con dei programmatori a cui dovrò fornire la grafica su psd che poi implementeranno su un loro cms e mi è venuto in mente di questo articolo ceh avevo letto velocemente prima delle feste. Lavorando solo per me, solitamente non faccio il layout in psd, ma mixo l’uso di photoshop per le parti grafiche e indesign per l’organizzazione dei contenuti (la gabbia) e poi passo direttamente al css. Quindi parecchi elementi grafici, come background, ombre, le faccio già come file singoli separati dal resto. Insomma ho un modo tutto mio, che mi sa dovrò rivedere un po’ in vista di questa collaborazione ^_^
Sia l’articolo che i commenti mi lasciano abbastanza sgomento. Sono un semplice programmatore, non ho gusto estetico, ma francamente sono anni che non ho bisogno di ritagliare slice da Photoshop o simili per creare le mie pagine web.
Un buon lavoro fatto a mano, ragionando correttamente, riesce a ricostruire tutte le paturnie che ogni grafico riesce ad inventarsi… e di grafici ne ho incontrati parecchi.
Sinceramente non capisco il tuo commento. Cosa vuol dire che sono anni che non ritagli da Photoshop? Che non usi grafica nei tuoi siti web?
E cosa intendi con un “lavoro fatto a mano”? O___o
Quoto quello che dice Sarah!
E come fai a ricreare in HTML il file grafico? Lo mando ad un software che fa tutto in automatico (faccelo conoscere!!!!)?? :-)
Attendiamo con curiosità…
Io forse sarò di parte ma è come dire… sono un ragazzo (sesso maschile) carino e francamente sono anni che non guardo la bellezza in una ragazza ma solo se ha un b..o dove infilarci qualcosa. ( e scusatemi il francesismo oxforiano!!!!
Ma a me commenti del genere oltre che a farmi letteralmente inc…are mi mettono molta tristezza. Nel 2012 ci sono ancora programmatori che pensano che l’estetica non sia importante?! Ma secondo te l’utente si sofferma sui siti che fai per la bellezza della tua programmazione html5???
Intanto premetto di non essere il Nico che ha scritto c***** offensive qualche commento sopra ^^
Per il resto, ottimo articolo, complimenti. Devo dire che un programmatore che sceglie il web come “ambiente di sviluppo” (perchè di scelta trattasi) non può permettersi il lusso di snobbare il lato estetico di un progetto (il confine è davvero sottile), altrimenti andava tipo di java in cui ci sono, ad esempio, Swimg e AWT già pronti per l’interfaccia. Se vuoi essere un bravo web developer devi anche avere uno spiccato buon gusto grafico, scendere dal tuo piedistallo e lavorare a braccetto con il grafico smettendola di considerare tutto il suo operato semplice “estrosità creativa o paturnia (come dice Fabio) messa a naso perchè sta bene” e capire che dietro un buon design (di un buon grafico eh! ) c’è un accurato lavoro di progettazione (oltre che di studio) e una miriade di regole, dalla psicologia cognitiva allo studio dei colori e degli spazi. Se ad esempio il grafico ha scelto di mettere quella call to action a 20px dal bordo e non 15, un motivo c’è sicuro, quindi fidati e fallo!!!! E lo dico da programmatore che si occupa anche della maggior parte della grafica dei miei progetti.
@Nico
…non sempre è cosi, fidati…;)
@Vanessa
O__O ommioddio..aahahhahahahahahahaha :D
No, certo che no XD Infatti ho specificato “un buon grafico” che sa il fatto suo, non il designer improvvisato, è ovvio!
@Sara
Si lo so…sono stata forse un pò… volgare?!… Di norma giuro non lo sono… ma il Ragionamento di sto Nico…mi fa prudere le mani… ecco si dai diciamo così. Me la passi! :-D
Ottimo articolo, grazie :] hai salvato la vita a molte persone
Adesso mi attiro le flame di tutti gli utenti del sito. :D
Il problema è che nel 2013 ancora usate Photoshop per fare i siti. O anche Fireworks o Gimp, cambia poco, ma Photoshop è il peggiore.
Photoshop non è vettoriale, ma se ne frega dei pixel. È impossibile (a meno che il grafico non sia stato un certosino e abbia zoomato al 1000% per allineare gli elementi) ritagliare in modo decente qualsiasi pezzo. E se appena il grafico ha messo tre bottoni che dovrebbero essere identici uno di fianco all’altro, stai sicuro che uno diventa 249px, uno 251 e il terzo 250.
Se poi applichi effetti, grazie alla sua “intelligenza”, l’effetto con gli stessi parametri avrà un risultato LEGGERMENTE diverso se appena cambia il colore o il font del livello su cui è applicato.
E, in comune con tutti gli altri, ha che… è statico! Cosa succede se c’è un po’ più di testo e sborda il box? O se il font ha un rendering diverso tra PS/FW/Gimp e il browser, o tra browser diversi, o tra S.O. diversi, e il blocco di testo occupa spazi differenti? (cercate come funziona il rendering in OSX, il Cleartype di Windows e l’antialias di Linux. Lo stesso testo ha differenze anche del 5-10% in spazio occupato)
O se l’utente ridimensiona il browser? O se vede il sito sul tablet o sul cellulare? O su una TV 40″?
Su schermi a 200 dpi? 300? 400? (I nuovi ultrabook hanno schermi 13″ da 3000×2000… da oltre un anno, i cellulari 1280×720 da 5″ da 2 anni)
Fornite 6-7 PSD per ogni pagina, tutti a 400 dpi, con gli elementi riarrangiati per far capire cosa volete ottenere? E come fate a vedere il risultato finale su un cellulare? Esportate la png e la aprite sul cellulare?
PS/FW/Gimp vanno bene per fare alcuni elementi grafici, non il sito (o la pagina).
Il sito va fatto in HTML(5) e CSS(3), tenendo sempre conto che il risultato non sarà mai identico per tutti, che ci saranno piccole differenze (mai scontrati coi profili colore di OSX, Windows e Linux sulle PNG, che fanno apparire i colori diversi?), che ci vorranno dei fallback per i browser che non supportano certe cose, ecc.
E quando i css non bastano (o diventano troppo ingestibili) per fare un effetto grafico, quel pezzettino lo si fa in Photoshop, lo si esporta in jpg/png e lo si usa come immagine o (meglio) come background.
Altrimenti facciamo come negli anni 90, una bella jpg di sfondo e via di .
Il web è andato avanti.
Anche Adobe se n’è accorta. Sta facendo tool di realizzazione di siti online, sta proponendo decine di estensioni ai CSS3, sta abbandonando un pezzo alla volta la Creative Suite.
All’estero i designer (persona che PROGETTA il sito, UI, UX e GFX, non solo UI) hanno abbandonato (totalmente o quasi) PS. Addirittura spesso usano Illustrator o Inkscape, fanno vettoriale e poi esportano se serve. Se non serve, usano le SVG.
Capisco che in Italia il mercato sia abbastanza indietro, ma se volete un futuro nel campo del web, date un’occhiata a quello che succede all’estero, perché anche in Italia molte aziende si stanno spostando in quella direzione, e se non siete pronti… :)