Chi ormai è nel campo del web non può non essere a conoscenza dell’eterna lotta per la reciproca intesa tra Designer e Developer, le due principali figure necessarie per la creazione e lo sviluppo di un sito internet.
Con questo articolo spero di riuscire a passarvi dei semplici suggerimenti per sopravvivere nel mondo del web: migliorando i rapporti di lavoro con le figure professionali che vi stanno attorno, potendo così ottimizzare e, perchè no, anche migliorare la qualità dei vostri progetti.
Come per ogni situazione della vita di tutti i giorni, il metodo migliore é sempre quello di partire fin da subito con il piede giusto: vediamo quindi insieme i vari accorgimenti che potrebbe essere utile prendere all’inizio di una collaborazione con il vostro programmatore o designer:
Designer/Developer: La divisione dei compiti
Se da una parte sarebbe comodo potere (e sapere) gestire un lavoro completamente da soli, dall’altra è utile avere altre persone che ti aiutino nelle scelta e nella realizzazione dei nostri prodotti ma anche più semplicemente a rispettare le tempistiche sempre più strette che i clienti ci impongono.
Il primo step da seguire sarà sicuramente la suddivisione dei compiti:
Un Designer, naturalmente, seguirà la parte grafica, a partire dalla stesura di layout e unit experience, fino ad arrivare alla scelta dei font e dei colori delle varie pagine.
Dall’altra parte il Developers si occuperà di far funzionare il tutto con l’utilizzo di vari linguaggi come ad esempio PHP, MySQL, ASP, ActionScript, ecc…
Come dite? Mi sono dimenticato qualcosa?
Ho lasciato da ultimo i linguaggi più utilizzati, quali HTML, CSS e JavaScript. Linguaggi che oramai sono di uso comune e che anche un Designer dovrebbe conoscere a menadito per poter comunicare al meglio tra le due parti.
Per tutti i grafici che ancora non conoscono HTML e CSS consiglio vivamente di apprenderne almeno le basi: è possibile trovare tantissimi siti e blog stracolmi di guide sull’argomento, un esempio ne è proprio Webhouse stesso o il mio blog personale.
Una risorsa molto ben fornita è sicuramente il sito HTML.it per quanto riguarda le guide in italiano ma, se masticate bene l’inglese, consiglio vivamente il W3C, il consorzio ufficiale dei linguaggi di Markup (tra cui appunto HTML e CSS).
Ora che abbiamo chiarito con precisione le varie competenze delle due controparti, possiamo dividere un lavoro in quattro step fondamentali:
Step 1: Creazione del progetto grafico ed esportazione
Dopo aver parlato con il cliente e stabilito un briefing sul progetto è arrivato il momento di iniziare il nostro lavoro, realizzando un mockup chiaro e conciso sia per il cliente che per il Developer il quale dovrà metterci le mani sopra in seguito.
Realizzeremo il nostro progetto con Photoshop, stando attenti a disporre ogni elemento nei giusti livelli ed utilizzando le varie cartelline per raggruppare ogni layer in maniera logica.
Saremo noi in seguito a ritagliare ogni elemento, non il programmatore! Questo perchè siamo noi che abbiamo realizzato il mockup e siamo coscienti di ogni ombra e ogni bagliorino che abbiamo inserito: in questo modo non rischieremo di arrivare a lavoro finito e accorgersi che i pulsanti del menu hanno le ombre tutte tagliate.
Per svolgere questa parte del lavoro molto noiosa, in maniera precisa e veloce, possiamo utilizzare un utilissimo software: Slicy. Questo software riconoscerà ogni livello e ogni raggruppamento fatto tramite le cartelline dei livelli stessi e ci ritaglierà automaticamente ogni elemento in maniera impeccabile, salvandoci infine ogni file in .png, già ottimizzato per il web. Tutto questo trascinando semplicemente il nostro file .psd all’interno di Slicy!
Se avete fin da subito raggruppato i livelli e rinominato ogni raggruppamento in modo logico avrete già fatto! 🙂
Step 2: Mappatura dei Mockups
Non basterà semplicemente consegnare i vari elementi grafici spezzetati al nostro developer: per non far sprecare lui parecchio tempo a capire dove ogni parte debba andare, creeremo quindi una copia del mockups dove scarabocchieremo, o con una tavoletta grafica o a mano, le misure esatte e i colori in scala esadecimale, senza dimenticarci naturalmente di aggiungere i nomi dei font con i rispettivi file allegati.
In questo modo saremo sicuri che ogni cosa andrà al suo posto e che non avremo spiacevoli sorprese dell’ultimo momento, quando ormai di tempo non ce ne sarà più.
Step 3: Creazione degli Sprites
Prima di passare il testimone al developer, avremo il compito di creare gli sprite CSS: anche in questo caso non sarà un lavoro molto lungo, grazie al servizio offerto dal sito CSS Sprite Generator, il quale, oltre a creare uno sprite con tutte le immagini che gli forniremo, ci compilerà anche un foglio di stile CSS con le varie coordinate in pixel da utilizzare per ritrovare ogni immagine nel minor tempo possibile.
Non dovremo far altro che caricare i file su questo sito, seguire le procedure che ci verrano poste e consegnare il documento appena creato al nostro developer.
Step 4: Passaggio del testimone
È finalmente arrivato il momento di passare tutti i vari elementi al developer, il quale adesso avrà tutti i requisiti e le indicazioni necessarie per poter lavorare tranquillamente, potendo pensare solamente a codici e funzionalità da implementare alla nostra grafica la quale, da sola, non servirà a granché; adesso non ci saranno più perdite di tempo dovute a dubbi come: “Di che colore devo fare il footer? – Quanto devo fare grandi gli h2?“.
Sarà poi naturalmente compito del programmatore rispettare ogni indicazione fornita, stando attendo a non strechare le immagini o aggiungere elementi senza prima aver informato il designer.
Ultimi consigli per una buona convivenza
Adesso che abbiamo creato un buon flusso di lavoro, rispettando le esigenze dei nostri sviluppatori, dobbiamo magari tener conto di alcune, chiamiamole regole, che stanno più al vostro buon senso che alla professione di designer in se per sé:
- Parlare sempre alla vostra controparte chiaramente, senza pretendere che tutto ci sia dovuto;
- Rispettare il lavoro di uno sviluppatore evitando di mettere bocca sul suo operato quando non sarà strettamente necessario;
- Essere aperti a suggerimenti e varianti: a volte può esserci sfuggito qualcosa o semplicemente il nostro collega ha avuto un’idea brillante, che sarebbe da sciocchi ignorare;
- Ricordarsi sempre che developers e designers lavorano con lo stesso obiettivo: ottenere un buon prodotto, cooperando nel miglior modo possibile;
E voi? Cosa ne pensate? Avete sempre avuto un buon rapporto con il vostro collega Designer/Developer?
