Come presentare la bozza al cliente: consigli ed esempi
Ecco, ci siamo, ce l’abbiamo fatta: l’ispirazione ha finalmente dato i suoi frutti e la bozza grafica del sito su cui stiamo lavorando è finalmente completa. Un ultima revisione ai dettagli et voilà, pronta da presentare al cliente su un vassoio d’argento. Si, ma come?
Qual è il modo più efficace per presentare la bozza al cliente, in modo che egli ne capisca – e apprezzi – tutte le potenzialità? Come rendere il nostro disegno accattivante e renderlo il più somigliante possibile a quella che sarà poi la versione finale su browser? Scopriamolo insieme.
Occhio ai dettagli
Nella fase di ultimazione di una bozza è facile che alcuni dettagli vengano un po’ trascurati. Prima di presentare il progetto al cliente assicuriamoci che tutto sia corretto e nello stesso tempo rifiniamo alcuni particolari capaci di dare al nostro design un tocco in più.
Stato attivo e hover dei link nella navigazione
La navigazione è uno degli elementi principali del layout e proprio per questo necessita di un look & feel capace di attirare l’attenzione dell’utente (e del tuo cliente) in modo immediato.
Fai in modo che nella bozza sia evidente sia lo stato attivo e lo stato hover dei link, cosi che la navigazione risulti, già dal disegno statico, usabile e gradevole dal punto di vista visivo.
Figura 1 – Menu senza stato attivo e hover dei link
Figura 2 – Menu con stato hover e attivo dei link evidenziato. Nella pagina attiva abbiamo una sfumatura viola in alto, le icone e il testo hanno un colore più acceso, e abbiamo posizionato un indicatore “a freccia” nel pulsante. Il link con effetto hover, invece, è contrassegnato da un’altra tonalità di viola e da una sfumatura, in questo caso posta in basso.
Formattazione del testo, anche se fittizio
Qualche tempo fa un curioso articolo di Design Informer ha attirato la nostra attenzione con un titolo volutamente provocatorio: il Lorem ipsum uccide il design? La risposta, manco a dirlo, è si: non c’è niente di più sgraziato di un layout presentato con una paginata di testo fittizio:
Una soluzione c’è: in attesa dei contenuti reali che dovranno popolare la pagina non resta che formattare in modo adeguato il nostro lorem ipsum, in modo da renderlo piu gradevole e leggibile.
Dividiamo il testo in paragrafi ben distanziati e dall’interlinea corretta, aggiungiamo qualche grassetto, emuliamo il colore dei link nel testo, inseriamo un elenco puntato: rendiamo il testo quanto più realistico possibile in modo che la pagina sia armoniosa ed equilibrata.
Diamo colore con immagini d’esempio
Le immagini sono un altro punto focale di un layout, ragion per cui è bene evitare, nel caso ancora non avessimo le foto definitive da inserire nel sito, di presentare una bozza popolata da sterili quadrati e rettangoli grigi. L’effetto è infatti decisamente antiestetico, non credi?
Lasciamo i rettangoli ai nostri mockup e Inseriamo qualche immagine fittizia, colorata, che ravvivi il layout.
Metti la bozza online
C’è chi dice che c’è un solo modo per evitare recriminazioni e dare una panoramica corretta su quello che sarà il sito una volta online: saltare lo step della bozza in un programma di grafica e strutturare il layout direttamente in html, permettendone cosi la visione su browser al cliente.
Personalmente credo che questo metodo non sia dei più corretti e ho già avuto modo di dire come la penso sull’argomento. Tuttavia un unico particolare mi trova d’accordo: mettere la bozza online e farla visionare al cliente direttamente da browser.
Ovvero: salvo la bozza come un’immagine, metto su una paginetta in HTML di circostanza e assegno al background l’immagine del layout. Niente di particolarmente complesso.
Questo perché?
Prima di tutto l’impatto visivo con il layout visualizzato nel proprio browser è decisamente diverso da quello che il cliente avrebbe visionando una bozza in Jpg o, peggio ancora, visionando una bozza stampata su carta.
Tutto ciò che riguarda colori, dimensioni, distanze, sarebbe cosi facilmente verificabile da parte del tuo cliente, che toccando “con mano” sul proprio computer avrebbe modo di prendere atto di alcuni dettagli altrimenti difficili da notare.
In secondo luogo in questo modo è possibile testare direttamente su browser tutte le caratteristiche del layout interenti le diverse risoluzioni dei monitor: se presenti una bozza con un background a 1920pixel, è preferibile far capire al cliente che dal suo monitor con risoluzione 1280 x 1024 non potrà visualizzare tutta l’immagine, e cosi via.
Ho conosciuti clienti che sono rimasti profondamente contrariati dal fatto che riuscivano a visualizzare nei loro computer solo una piccola parte del background mostrato nella bozza in jpg: meglio chiarire subito questi dettagli grafici per evitare possibili controversie una volta pubblicato il sito online.
Fai vedere gli effetti Javascript in azione
Se la tua bozza prevede l’integrazione, in una seconda fase, di determinati effetti Javascript, non limitarti ad inserire l’immagine dello slider e le due frecce nel design e a liquidare il tuo cliente con una frase generica tipo “ qua ci mettiamo uno slider animato con le foto che scorrono”, ma fagli toccare con mano le caratteristiche e le potenzialità dell’animazione che verrà utilizzata.
Dagli inoltre più alternative, consigliandogli un effetto fade piuttosto che uno scrolling orizzontale e facendogli vedere la differenza tra i vari effetti disponibili.
Ogni effetto javascript disponibile online mette a disposizione un’utilissima ed esauriente pagina demo: usala.
In questo modo il cliente si sentirà coinvolto in prima persona nel processo di strutturazione del sito e avrà modo di capire le reali potenzialità che avrà il suo sito una volta online.
La bozza è pronta..come la presento al cliente?
Sul modo corretto di esprimersi e di porsi con il cliente al momento della presentazione della bozza abbiamo parlato abbondantemente in questo articolo, di cui mi limito a riportare un piccolo sunto:
- Quando è possibile, è consigliabile presentare la bozza in modo diretto, così da poterne spiegare i dettagli al cliente;
- Ricordati che non sei pagato per fare ciò che vuoi e che, soprattutto agli inizi, è essenziale instaurare un rapporto di fiducia reciproca con il tuo cliente. Il tuo compito è quello di capire le sue esigenze e di tradurle in modo appropriato in un prodotto finito;
- Presentare al cliente una bozza grafica, senza accompagnarla con un’esauriente descrizione tecnica delle sue caratteristiche, è uno degli errori più comuni dei web designer alle prime armi;
- Una volta esposte le caratteristiche tecniche del tuo lavoro, cerca di richiamare l’attenzione del cliente sugli eventuali punti di forza del tuo progetto e come le tue scelte costituiscano un reale beneficio per quello che sarà il prodotto finale;
- Anche se non sempre è facile, quando ricevi un’obiezione l’atteggiamento che devi tenere è sempre e comunque di massimo e totale rispetto. Non imporre mai la tua opinione e soprattutto non prendere l’obiezione come un affronto personale: il cliente sta mettendo in dubbio alcuni punti del tuo progetto, non la tua persona o il tuo operato.
Ma qual è il modo migliore per presentare una bozza?
Se presentare la bozza sul browser non ti convince, puoi optare per un metodo più tradizionale e comunque professionale.
Una buona idea, efficace e originale? Crea un’approfondita presentazione delle bozze realizzate, combinando in modo creativo immagini e informazioni.
Inizia con il crearti un piccolo mockup, che potrai poi personalizzare per ogni tuo progetto. Inserisci immagini di alta qualità e di dimensioni minime 900/1000pixel, cosi che il tuo cliente possa vedere i dettagli del design.
Soprattutto se non presenti le bozze in modo diretto ma ti limiti ad inviarle via e-mail e a discuterne telefonicamente con il tuo cliente, è fondamentale creare una presentazione accattivante e informativa.
Dai una panoramica del tuo progetto inserendo più immagini, spiegando nel dettaglio i motivi dietro determinate scelte (colori, tipografia, elementi grafici), rendi la presentazione unica e originale, curata nei dettagli.
Nel nostro caso abbiamo realizzato una presentazione di tre pagine: una copertina grafica, una prima pagina che contiene lo screenshot del progetto e alcune informazioni testuali, e una terza pagina in cui abbiamo inserito alcune informazioni dettagliate circa la testata, la sezione di twitter, le informazioni nel footer, ecc.
Informativa e bella da vedere! Che cosa ne pensi?
E tu? Quando realizzi una bozza, con che metodo la presenti al tuo cliente? Crei anche tu una presentazione grafica del progetto?
L'autore
42 commenti
Trackback e pingback
-
Tweets that mention Come presentare la bozza al cliente: consigli ed esempi | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by Your Inspiration Web and Azzurra Design, Ciro Marandola. Ciro Marandola said: Come… -
Andiamo a letto? - La biancheria da camera piu' divertente | ./lsd - Liquid Sky Design Studio
[...] da camera piu’ divertente » 3 February 2011723 viewsIn attesa dell’articolo di Sara sul conformismo maschile che vede nell’Ikea… -
Diventare un Web Designer Freelance Indipendente
[...] [...]
Articolo molto bello come sempre…
Complimenti…
Grazie :) sono felice che gli articoli abbiano un’utilità per la community di YIW ;)
Complimentissimi, i vostri articoli sono sempre molto esaustivi :)
Grazie Tiz ;)
ps. Passata la crisi? :)
Sono sempre afflitto dalla crisi da Photoshop, ma cerco di non pensarci, per ora appunto tutto su carta :)
Poi in questi giorni sono gasato perché giovedì metto online il sito del mio gruppo (anche se ho problemi con il like box di facebook, ho aperto un topic sul forum per avere supporto in proposito) e poi è in cantiere un progetto con la mia ragazza, un blog relativo a grafica e arti grafiche in genere (raccogliamo un po’ le passioni in comune), per ora stiamo ancora litigando sul nome :))))))
P.S.:Sto leggendo il libro di Jeffrey Zeldman “Progettare siti web standard” segnalato in un vostro articolo, mi ha preso di brutto, ormai è una droga :))))
Allora devi assolutamente leggere ‘Don’t make me think’ di Steve Krug ;)
Ottimo articolo come sempre ;) bravissima Sarah
Grazie Roccuzzo ;)
Ciao Sarah, dalla mia esperienza il modo “preview in browser” dei jpeg è una bella idea. Ma è un arma a doppio taglio. Sembrerà impossibile ma il vedere la grafica dentro a un browser ha causato sinapsi nelle teste dei clienti del tipo “ottimo: quindi hai finito?”.
Io non sono voi, ma a me clienti di questo livello sono capitati, eccome mi sono capitati. Come mi sono capitati clienti che sul mockup mi facevano storie su colore o lorem ipsum (infatti da allora bozze intermedie non ne ho mai più fatte: o mockups fumettosi o bozza definitiva).
Grazie di questo bel post.
Ahahahahahahaha :)
Vaglielo a spiegare che no, quella è solo un’immagine statica :D
Il ‘lorem ipsum’ è qualcosa che rende perplessi anche molti dei miei clienti, che mi chiamano tutti allarmati dicendomi ‘c’è dello strano testo in latino, che è successo???’
;)
Esatto. Se poi ti sogni di mettere N jpg linkate… beh è la fine. Ti dirò di più… ho visto un sito fatto a jpg: non scherzo era una concessionaria di auto.
Sicuramente l’autore non aveva paura della resa sui vari browser!
Ti dirò: ne ho visti molti anche io. E’ un errore comune a molte tipografie che vogliono buttarsi nel mondo del web design senza conoscerne neanche le basi. Fanno un’immagine (che viola da sola tutte le regole del web design) e la mettono online cosi com’è, aggiungendoci giusto quei 2-3 link che permettono di passare da una pagina (immagine) all’altra :(
Possiamo cambiare discorso? A me hanno inviato delle grafiche da htmlizzare in indesign… non vi dico, non vi dico! Dio mi perdoni se ogni tanto…
Ma….i sorgenti della presentazione? Non trovo il link dove scaricarli…
Ehm…non ho messo i sorgenti in download, era solo un esempio, non credo che possano esservi utili.
Se invece pensi che ti possano servire fammi sapere, te li passo ;)
Io sono un sostenitore della bozza online, magari su un dominio di prova, giusto per dare un idea di cosa si troveranno a schermo come prodotto finito. I contenuti sono come dice Sara fittizzi, la solita filastrocca del lorem ipsum, e (molto raramente) immagini free di prova. Molto raramente perchè di solito le foto da utilizzare le faccio come prima cosa in presenza del cliente, che mi decide cosa dove e chi fotografare :D
Le bozze in jpg (meglio png) le presento solo nel caso di lavori cartacei.
……a Sara…….bello quel template……..ma è un lavoro reale…….o solo una prova per l’articolo :) ??
E’ un template fittizio creato per questo articolo:
https://www.yourinspirationweb.com/2010/05/31/prendere-ispirazione-o-copiare-che-differenza-ce-scopriamolo/
Non dirmi che te lo sei perso! ;)
Che bella quella presentazione…è fatta in photoshop? al cliente in che formato la invii?
Grazie!!!
Ciao Molli,
si, la presentazione che ho fatto è realizzata in Photoshop, comunque questo non toglie che possa essere realizzata con qualsiasi software di grafica. Al cliente la invio in formato pdf, ma dato che spesso il file viene pesante invece di inviarlo per e-mail lo carico in una cartella online e gli giro l’indirizzo dove può scaricarlo.
Facile e veloce ;)
Molto interessante Sara, grazie =)
.. e io che finora ho presentato le bozze sui tovagliolini di carta dell’Ikea =P
Claudia, non nominare l’Ikea in mia presenza :D Sono in crisi di astinenza e sto cercando di smettere ;)
Shhhhhhhhh!
Sto per cambiare casa e sto progettando l’arredo con tutti i ritagli del catalogo 2011 e una moodboard – sempre che la mia dolce meta’ non decida di farmi smettere piegandomi in due e abbandonandomi su uno scaffale con il cartello “Ujüükksträääbertijjji” =)
Ma perchè gli uomini sono cosi refrattari all’Ikea? E soprattutto, perchè noi donne ne siamo cosi succubi? Scriverò un articolo al rigardo :D
Ottimi Consigli Sarah!
Grazie Francesco ;)
Grazie Sarah dell’articolo, complimenti!
Sono abituato in azienda a fare presentazioni, sia cartacee che in pdf di come verrà il lavoro sia esso un sito web sia un lavoro di stampa, quindi condivido pienamente le tue scelte. Certo come dice @Merlinox capita spesso che i clienti facciano affermazioni curiose sulla bozza, sta a noi far capire ai clienti che “è soltanto un’anteprima di come verrà il lavoro”….ed in molti casi comprendo pure che non è facile ;)
al prossimo bell’articolo :)
Ciao Ciro, grazie di essere passato ;)
A presto!
Lo attendo con ansia Sara e fin da subito hai tutto il mio supporto =)
Molto bello, concreto, utile. Non vedo l’ora di poterlo un giorno metterlo in pratica :)
Ottim opost, come sempre..per un attimo avevo preso paura leggendo il punto relativo sul caro LOREM IPSUM…ma l’obiezione è ben accolta. Effettivamente se non abbiamo nulla un qualcosa di “accattivante” lo dobbiamo pur fare no?
anche se a volte all’inizio qualce cliente preoccupato mi diceva…”ma io non ho quelle immagini, che si fa? Come le posso procurare” … Erano solo d’esempio per non lasciar lo spazio vuoto… ;)
complimenti l’articolo mi è piaciuto. Sono belli anche i layout che disegni. Purtroppo i grafici hanno sempre un punto in più dei webmaster. Quando faccio dei bei lavoretti grafici (ed è molto difficile), mi trovo clienti che mi trovano degli appigli per rendere il lavoro molto molto peggiore di quello che è smontandomi completamente.
Dura la vita…
E’ un problema assai diffuso nel nostro settore, che tu sia grafico o non, credimi :)
Personalmente avrei un piccolo appunto e vorrei discuterlo con voi:
il LOREM IPSUM :)
Sono sempre stato un fan di questo tipo di testo finto, formattato, messo bene in pagina… per poi ritrovarmi, al momento della costruzione del sito vero e proprio, con un testo o troppo lungo o troppo corto rispetto a quanto avevo preventvato di inserirne, per cui l’effetto gradevole della pagina andava perso perchè mi si scompaginavano tutti gli equilibri.
L’unica soluzione che sono riuscito a crearmi è quella di inventarmi del testo INERENTE all’argomento (o farmelo spedire dal cliente stesso prima di mettermi a progettare), buttandolo giù dapprima su un documento word, facendolo visionare al cliente e poi ad impaginarlo insieme alla progettazione del sito. E’ vero, è più lungo come procedimento, ma spesso mi evita problematiche e sorprese varie.
Voi cosa ne pensate?
Personalmente cerco di studiarmi la grafica in mdo da essere flessibile ed che stia bene anche con testi più lunghi o più corti. Anche perchè mi è capitato che il cliente alla fine di tutto mi abbia cambiato il testo facendolo diventare lui stesso più lungo.
Anch’io per dare un’idea migliore al cliente metto l’immagine jpg sul browser, ma ogni volta comunque devo spiegarlo, e non essendo sempre il cliente della mia città ci possono essere dei problemi.
Penso che d’ora in poi usero sia l’anteprima jpg sul browser che un documento esplicativo, in modo da poterci capire anche meglio via telefono/chat.
Complimenti per l’articolo e per l’idea ^^
Pillole del giorno, fresche fresche di giornata:
– perchè non va il rollover
– il sito si può fare a tutto schermo
– vorrei i pulsanti più chiari (intesi più evidenti)
e altre indicibili.
ps: gli ho mandato una pagina con dentro un jpg di bozza
Grazie per queste dritte. Certo, io non faccio web design, ma loghi e illustration design, però il tuo articolo, assieme ad altri che sto trovando, mi stanno dando delle ottime nozioni per migliorare la presentazione.
Alle volte, con loghi e illustrazioni non è facile presentarle come si deve.
Grazie,
G.E.
Articolo molto utile e puntuale come sempre,
in realtà stavo cercando degli esempi di preventivo per un sito web mostrati con infografica e mi sono imbattuto in questa pagina. Sono stato fortunato!!
Devo giusto mandare una bozza ad un cliente e credo che seguirò senz’altro i tuoi consigli.
Ciao ottimo articolo io utilizzo come bozza un sito gratuito chiamato bozza utilizzo sempre quello per ogni cliente e funziona. Ho provato diverse volte con programmi di grafica ma poi il cliente tutte le volte vuole spiegazioni dettagliate e via dicendo. Provate con me funziona