Come lavoriamo noi webdesigner? Che modelli o procedure seguire nella creazione dei siti?
Una domanda di un utente sul forum mi ha illuminato in merito ad una questione. Molti non sanno proprio come muoversi e allora perchè non prendere spunto per un nuovo articolo? Al di là di “come andrebbero fatte le cose” voi come vi muovete quando dovete creare un nuovo sito?
Personalmente, dopo una chiacchierata con il cliente (che sia telefonica, via email o skype), cerco i siti concorrenti e cerco di capire gli elementi che debbano essere presenti nel sito. Dopodichè vado di wireframe abbozzato su carta, e se l’impostazione mi piace comincio a guardarmi in giro nelle gallery css per cercare il lampo “grafico”. Dopodichè parto in quarta con una, due, tre bozze al massimo e le sottopongo al cliente.
Dopo l’approvazione prendo il mio bel framework html+css creato da me e comincio a definire i nomi dei box sul wireframe precedentemente abbozzato su carta, e comincio a scrivere il codice, che vado via via completando box per box aggiungendo le classi necessarie nel css.
E voi?
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
29 Commenti
Personalmente queste sono le mie fasi:
fatturazione e si spera saldo lavoro svolto
1) prima chiaccherata informativa con il cliente in cui cerco di capire l’entità del lavoro
2) preparazione preventivo ed eventuali step di sviluppo
3) realizzazione bozza layout sito in photoshop
4) incontro con il cliente (p.s. quando possibile cerco di incontrare fisicamente la persona interessata, il faccia a faccia è sempre più esaustivo anche per eventuali dispute)
5) a bozza approvata parto con lo sviluppo in html e css e, se necessario, assegno al programmatore la sua parte
6) successivo incontro con il cliente per mostrare come stia venendo il lavoro
7) ultime modifiche e completamento
Ciao a tutti e buon lavoro.
In quanti lavorano usando le procedure Agili?
Come designer dell’interfaccia, io collaboro con una struttura che sta iniziando a organizzare il lavoro secondo i criteri Agili. La mia parte nel processo è piccola, ma vedo che loro stanno attuando un grande cambiamento in azienda, che va a toccare tutto: competenze, modi, tempi e finalità.
@Danilo: qui nello specifico ci chiedevamo riguardo l’area “creativa”, non proprio tutto il processo, tu come ti comporti al punto 3 e 5?
@ilaria: mmm conosco poco di procedure aziendali, è uno standard ISO vero?
Sorry…
per quanto riguarda il layout, come dicevo, cerco di impostarlo in photoshop prendendo ispirazione in rete (www.smashingmagazine.com, http://www.psdtuts.com su tutti) ovviamente come dicevi tu con un occhio di riguardo a siti concorrenti e con particolare attenzione alla chiarezza.
Per lo sviluppo in html+css imposto la default di pari passo con lo stile css.
Azzero per il css le varie impostazioni cross-browser e via…
1° incontro con il cliente
2° preventivo firmato e acconto
3° bozze grafiche e giri di bozza al termine 2° acconto
4° mockup (se c’è il tempo)
5° realizzazione sito formazione sul cms e saldo
ecco più o meno i miei step sono questi, poi cambiano sia le condizioni economiche che il percorso in base al cliente e alla tipologia di sito
@danilo: grazie!
@fabry: ci interessa il dettaglio del punto 3 e 4, finanziarie escluse
Non è uno standard ISO, almeno non nel web. Forse lo è per la aziende che producono software. Posso informarmi… Sviluppando in modo agile, cambia il modo di presentarsi al cliente, di stabilire un rapporto con lui, di svolgere il lavoro e persino di fare il preventivo. O_o Ha senso soprattutto su siti web di un certo peso, oppure contenenti applicazioni. Per un sito molto semplice e poco oneroso si può usare sia il metodo agile che quello standard di cui state parlando voi.
Qui un primo link:
http://www.sviluppoagile.it/
@ilaria: grazie del link!! ora me lo studio!
comunque in questo articolo parliamo prettamente della fase di creativa, vedo che molti stanno interpretando male o forse preme molto di più la questione del rapporto con il cliente, ne parleremo ancora
@Lauryn: hai ragione. Forse la mia segnalazione può essere un po’ off-topic. C’è da dire però che a me (che seguo apunto la fase creativa) cambia molto se mi muovo in un contesto agile o meno. Cambiano il numero di proposte (di solito diventa una), l’attenzione dedicata al wireframe, l’attenersi strettamente a microobiettivi…
Gli altri spiegano come arrivano al web finto, ma non dicono come si comportano durante la fase creativa, che è appunto il tema del tuo post
Per prima cosa definisco che “forma” deve avere il sito; ovvero se è un portale o un blog o un sito vetrina già parto con un idea di massima delle dimensioni.
Dopodichè foglio bianco su Fireworks e la prima cosa che faccio e piazzarci il logo su.
Parto sempre da logo; il logo ci dice molto dell’azienda, i colori, il font, lo stile.
Poi navigo in giro guardando non necessariamente solo siti pertinenti e aspetto un lampo un’intuizione, un font particolare, un colore, un elemento che mi fà scattare a disegnare.
In seguito comincio ad abbozzare gli elementi, sempre graficamente, e piazzo subito le voci del menù di navigazione per capire come e che spazio prenderà. Contestualmente analizzo come e quali informazioni dovranno prevalere su altre e come l’utente arriverà ad esse.
Anche se vengo dalla old school web, gli elementi grafici che disegno, i testi, font usati e icone sono pensati già in linguaggio web 2.0.
Quando arrivo ad una bozza di massima che mi soddisfa inizio a lavorare sui particolari.
Una cosa su cui sono maniacale sono gli allineamenti. Li ritengo fondamentali. Non lascio nulla al caso. Misuro tutto.
di solito mi piace disegnare e vado oltre con gli elementi grafici, quindi di solito alla fine cerco di pulire il più possibile il layout dagli elementi che possono essere eliminati per pulire al massimo la grafica.
Poi inizio a togliere
Definiti i particolari, controllo il tutto e presento la bozza al cliente con la consapevolezza che dovrò farne un altra anche se a lui piace la prima.
Secondo me è necessario dare una occhiata ai processi software ovvero alla metodologia di sviluppo. Non li descrivo tutti perchè non si può fare in un commento…ma li cito così chi è curioso può fare una ricerca :
1) Waterfall (a cascata)
2) evoluzionario per esplorazione o Build and Fix
3) eXtreme programming
4) COTS
5) A spirale
6) RUP
Dunque…a parte gli ultimi 2 metodi di sviluppo che sono inadatti al web design ma più adatti a processi molto più ampi, il web design si potrebbe catalogare tra i primi 4 modelli o su modelli misti tra tutti o parte di essi.
Chiaramente, se il web design fa parte di un disegno molto più ampio potrebbe essere a sua volta un tassello di uno schema RUP o a spirale.
In ogni caso queste metodologie sono flessibili e come dicono Danilo e Fabry è importante capire come intende procedere il cliente. Perchè la metodologia di lavoro dipende anche dal cliente.
@Lauryn : ho dovuto scrivere 2 volte lo stesso messaggio…perchè la prima volta non me lo ha inserito..bhooo..strano!
bravo Lorenzo!! è sempre importante “togliere” alla fine, a volte buttiamo dentro fin troppe cose….
@giancarlo: nono, parliamo solo di webdesign, non di sviluppo e programmazione, forse oggi non sono stata molto chiara nell’esporre l’articolo o forse il caldo ci fa finire troppo offtopic.
Io invece dopo la fase burocratica, inizio a guardarmi in giro per la grafica e solo dopo sulle basi anche della grafica butto giu il wireframe e via via tutte le fasi successive che compongono la realizzazione di un sitoweb di tale nome.
Per raggiungere questo obiettivo utilizzo la piattaforma di sviluppo di adobe, anche se prima usavo ulead photoimpact per la realizzare la grafica e homesite per il codice, ma sto parlando di molto tempo fa’ 7/8 anni addietro.
@Lauryn: ahahaah…no no …non sono preso dal caldo. Semplificando :
Build and Fix : costruzione di una prima versione e modifica fino a quando il cliente è soddisfatto
eXtreme programming: sviluppo e consegna di piccoli incrementi di funzionalità
COTS : sviluppo per riuso di componenti (es. lightbox o gadgets jquery ecc..)
Penso che con il webdesign ci sia un nesso..
Tra l’altro Laura Mauric parla proprio di questo….Infatti non conoscevo il termine “processi agili” e facendo una veloce ricerca su internet ho imparato che è sinonimo di quelli che io chiamo processi software…
@giancarlo: ora sì che si parla chiaro ahhaha si imparano sempre nuovi termini associati a processi che già conosciamo. grazie!!
in tema ho trovato un articolo di merlinox che ci riguarda collateralmente:
http://blog.merlinox.com/creare-un-sito-web/
Beh qui almeno mi posso sfogare…che dire, restando sempre attento a non copiare, cerco nella rete le info migliori, stili, cosa va di moda e no, immagini d’effetto e cerco sembre di creare un tuttono tra cartaceo e web (cosa poche volte fatta vedendo esempi in giro), poi fatto un paio di bozze porto al cliente..di li poi si procede alla realizzazione. Certo il web oggi è una mega-enciclopedia e molto spesso quando si cerca qualcosa si trova spesso mille altre idee..si rischia il sovvraccarico, ben venga comunque
Da non trascurare il fatto poi che al cliente si deve giustificare l’uso di colori e grafiche migliori delle sue. E li che ci possiamo far valere.
Io proseguo come scritto nell’articolo che ha citato Laura.
Anche perchè l’ho scritto io
In generale:
pagina in xhtml e poi via con i css (a volte faccio vedere prima solo la home al cliente).
1) parlo con il cliente per capire bene cosa deve fare, cosa deve mettere, e cosa ha già;
2) se il sito è molto complesso faccio la mappa del sito;
3) wireframe (con la tecnica delle grey box così stabilisco solo le ossa del sito);
4) cerco di entrare nel “mondo” che devo rappresentare: vado in giro su google o gallery di siti per vedere cosa già c’è in giro;
5) cerco immagini su flickr, colori su colourlovers o altri simili, se necessario sfoglio riviste, etc. tutto quello che mi riconduce a quel mondo…
6) di solito mi viene già un’idea, ma se non ho ancora le idee chiare vedo un pò di gallery, in questo caso non per forza del settore in questione, più che altro dei colori e dell’impostazione che mi è venuta in mente.
7) riguardo tutto e faccio la bozza, poi se è ok per il cliente vado sui particolari;
9) controllo sui vari browsers e risoluzioni, approvazione del cliente e pubblicazione.
Sul punto 5 di solito creo 1 cartellina sul pc dove raccolgo tutto, e un pò vado a memoria, ma recentemente ho letto di un software di nome evernote che ti permette di creare un mood board elettronico interagendo anche con safari e firefox. L’ho scaricato ma non l’ho ancora provato, qualcuno di voi l’ha usato?
io all inizio cerco di capire cosa vuole preciso il cliente.cerco qualcosa su internet per ispirarmi e poi mi faccio un idea in testa della grafica e la sviluppo
ma nessuno studia i contenuti e l’architettura informativa prima di cimentarsi nella grafica? mi pare di capire fra i vari commenti che queste due fasi siano tralasciate dai web designer che hanno commentato… invece per me sono di fondamentale importanza in quanto un sito prima deve comunicare delle informazioni che devono essere opportunamente realizzate e organizzate e poi solo successivamente il contenuto veicolato tramite la grafica.
@stefano hai perfettamente ragione, nella descrizione, almeno da parte mia, è stata tralasciata. non possiamo liquidare tutto in poche righe in effetti…
Riprendo il discorso dell’Agile Design perché lo considero la chiave di volta per chi vuole staccarsi dall’essere un semplice esecutore e voglia essere percepito come consulente. Vi segnalo a riguardo una serie di articoli che sto scrivendo a riguardo:
http://blog.webgriffe.com/customer-experience-1/
http://blog.webgriffe.com/customer-experience-2/
Buona lettura ciao.
@stefano: il post penso si riferisse soprattutto alla ispirazione grafica, almeno io così l’ho inteso.
Penso che il wireframe sia importantissimo per decidere dove andranno inseriti i contenuti, che non è detto debba deciderli il web designer, in alcuni casi capita che li faccia qualcun altro, e la mappa del sito è utile per decidere i percorsi. Inoltre si può anche creare la grafica, o meglio il prototipo di design per vedere se è anche usabile, poi si crea un puro xhtml semantico senza nessun elemento grafico e successivamente il css con l’aggiunta degli elementi di design, così il sito viene sicuramente più pulito e si usano meno elementi solo presentazionali.
Per il procedimento grafico io procedo:
).
1. guardo i siti concorrenti e segnandomi su un foglio (o al pc, è uguale) i loro punti di forza (da cui prendere spunto) e i punti deboli (che il “mio” sito dovrà evitare naturalmente
2. sempre su un foglio creo approssimativamente come dovrebbe essere il wireframe tenendo conto delle esigenze del cliente.
3. come già è stato detto do un’occhiata alle gallery dei siti migliori per prendere l’ispirazione
4. infine apro photoshop e con la griglia in background metto giù un pò di idee, cercando, come ha già detto aledesign.it, di mantenere lo stesso stile presente nel cartaceo del cliente (naturalmente sempre che esista e sempre che sia qualcosa di decente).
@sadegraphic: si forse hai ragione che il post si riferisce solo alla parte grafica, ma ho visto che molte persone parlano di contatto con il cliente fino ad arrivare ai pagamenti, altre poi parlano di metodologie di sviluppo generali che includono tutto il processo di ingegneria di un software (o di un sito web). Allora mi sono chiesto perché nessuno parlasse di contenuti per me fondamentali non solo per lo spirito comunicativo di un sito ma anche se vogliamo per i motori di ricerca.
Hai perfettamente ragione: sia i contenuti che l’architettura dell’informazione sono una parte importantissima sia per il successo di un sito e la sua facilità d’uso. Quando si ha campo libero su questo si creano siti migliori (ancora meglio se c’è un esperto solo per questo, che interagisca anche con esperti di marketing, nel caso di siti complessi – a ognuno il suo! – ma nel piccolo si fa da se!) e questo vale anche per la pubblicità, anche se purtroppo non sempre è così e spesso il cliente (soprattutto se smanetta un poco, il che è un bel guaio!) decide dove mettere, cosa mettere, scrive anche testi e in alcuni casi impone immagini… per fortuna con l’esperienza si riesce a far cambiare molte idee, soprattutto sull’usabilità (un pò meno sui contenuti) ma non sempre tutto. Per fortuna almeno l’xhtml semantico non si tocca visto che il cliente in questione non crea il sito!
Io vado così:
e funziona sempre (o quasi)!
1. Definisco con il cliente gli elementi necessari per il sito e pagine, cosa deve diventare il punto di maggior attenzione, il focus.
2. Chiedo al cliente di farmi avere degli indirizzi di siti che gli piacciono di altro argomento, non concorrenti (cosa che non ricevo mai di solito eheh) e controllo qualche sito di concorrenti.
3. Faccio 3 wireframe su carta. Se ho già delle idee disegno anche già l’eventuale grafica sul foglio.
4. Visito qualche gallery css e stabilisco 3 mood/stili diversi, uno per ogni wireframe.
5. Genero almeno 3 bozze in photoshop con la 960 grid, per ognuna faccio home page, pagina interna e biglietto da visita. Se il cliente ha richiesto un determinato stile ben preciso, realizzo 3 bozze con quel mood ma grafica e wireframe diverse, poi ne faccio una quarta secondo lo stile che ritengo io più adatto.
6. Mostro le bozze al cliente con ampie spiegazioni dei punti di forza e degli stili cercando di far capire quale secondo me è la più adatta. L’ordine in cui mostro le varie proposte è sempre studiato per far ricadere la scelta su quella che preferisco
7. Scelta la bozza passo a fare l’html con i vari div, ritaglio da photoshop e passo ai css utilizzando un reset css.
8. Carico tutto sul mio spazio web per farlo vedere al cliente.
9. Se tutto è ok, messa online.
Leggendo il commento di sadegraphic ho trovato uno spunto che non ho mai sfruttato in pieno, cercare foto per ispirazione, soprattutto per la palette colori! ci proverò