Come presentare la bozza al cliente: consigli ed esempi

Documenti analoghi
Il dibattito: è possibile sviluppare la bozza di un sito direttamente nel browser?

Un layout in stile tipografico: consigli ed esempi

Olìmpo: il template xhtml/css per il tuo portfolio online

Un layout semplice e professionale? Disegniamolo insieme in pochi semplici step

Come realizzare un sito in stile corporate/business?

Web & Tipografia: gli errori da non commettere

Webdesign: comunica nel modo giusto con il tuo sito web

Di verso: un Template HTML Free, versatile e responsive

Come progettare un layout minimalista? attenzione ai dettagli

jquery - Creazione di form con label animate

Tutorial e Psd: creare un Vcard professionale in pochi passi

Tipografia e minimalismo per un layout semplice e bello da vedere

Il Galateo di Photoshop per Web Designer

Come utilizzare i filtri CSS3 per creare immagini accattivanti

Come creare un Menu animato in CSS3 senza Javascript

Impaginare con InDesign: le tabelle

Come progettare un layout web responsive con le media queries?

Sezione aurea e web design: come usarla e perché?

I tooltips nel web design: a cosa servono e come si utilizzano

Come disegnare un layout in stile magazine? tutorial e psd

Come disegnare un layout in stile web 2.0? tutorial e psd

PAGINA AZIENDALE. GUIDA PER GESTIRE UNA PAGINA AZIENDALE SU FACEBOOK a cura di Anna Gori

Un e-commerce di prodotti digitali: aumenta le conversioni in 4 mosse

Esame Web Design Biennio 4 Anno PRE-ESAME GIOVEDÌ 7 GIUGNO AULA A33 ORE 9:00

WordPress: predisporre la sidebar per l'uso di widget

Come realizzare un logo professionale? consigli ed esempi

Come usare Doyouall. Usare il software Doyouall è molto semplice. Questa piccola guida è un aiuto per realizzare velocemente il tuo nuovo sito web.

Accordion: creiamolo usando CSS3

Come disegnare un layout in stile vintage? tutorial e psd

Il pacchetto Office: WORD

Follow Up #1 Presenza Online

ESISTE UN INTERO SPAZIO DA RICONQUISTARE. QUELLO DELLA TUA CITTÀ. VADEMECUM SOCIAL

Canva: come creare una grafica accattivante.

I 10 errori più comuni nella realizzazione di un sito web

jquery Mobile: La gestione dei form

Metti in mostra la tua professionalità con le testimonianze del clienti

Come realizzare un layout in stile grunge?

WooCommerce: come creare un prodotto di tipo semplice sul tuo store

Nuove pagine e collegamenti

WordPress: Diamo Uno Sguardo al Pannello di Amministrazione

Un buon portfolio online? ecco qualche consiglio

Come disegnare un layout in stile organic? tutorial e psd

Come posso creare il mio conto, completare il mio profilo e candidarmi online con. MyManpower. HOW-TO MyManpower

Come mostrare se stessi nel proprio sito web: consigli e tendenze

Portfolio? No,VCard: quando fare le cose "in piccolo" è meglio

Qual è l editor migliore con cui scrivere il proprio codice? Ecco una lista dei più utilizzati dai webdesigner

COS E E COME FUNZIONA MAILCHIMP

Web design sociale: i siti umanitari

Come posso creare il mio conto, completare il mio profilo e candidarmi online con MyManpower

Scopri il nuovo WordPress 5.0

ORDINI ONLINE GUIDA PRATICA

INSERIRE I DATI NEL DATABASE

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ

Manuale versione Mobile (Smartphone Tablet)

Twitter: 5 temi pronti per l uso per visualizzare gli ultimi tweet sul tuo sito

Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 2

Spedizione nazionale e ritiro in sede

YITH Woocommerce Zoom Magnifier plugin, zoomare per vendere

Sito Web Professionale

WordPress: come rendere dinamici Header e Sidebar del template?

Estetica vs usabilità: un mito da sfatare

Tendenze nel web design: che matrimonio sarebbe senza un sito web?

Un tocco creativo in più ai nostri layout: ecco qualche dritta

Come aumentare le performance del mio sito? - CSS Sprites

Dalla grafica al codice: rendiamoci amico lo sviluppatore

ARCHITETTURA DI UN SITO

Guida a WordPress. 1. Iscrizione a Wordpress

Capitolo X Esercitazione n. 10: Word e HTML

Corso di Introduzione all Informatica. Microsoft Word Nozioni di base

Spunti su come ottimizzare un sito web per dispositivi mobili

10 Creare. collegamenti ipertestuali

Tendenze: mettiamo una foto come background del sito?

WooCommerce: come personalizzare la configurazione delle varie

Tutto quello che c é da sapere sulle mascotte nel web design

LINEE GUIDA PER LA PUBBLICAZIONE DELL APP

Regaliamo un ritratto personalizzato per la festa della mamma?

Realizziamo un disegno tipografico?

Usabilità e non solo: come sono messi i siti delle Università italiane?

Documenti Google: Accesso, creazione, modifica e stampa

WooCommerce: come creare un marketplace dove i venditori pagano una fee una tantum per vendere

Corso base Redattore WEB

Ristoranti e web design: best practices e showcase

Panthea - Tema WooCommerce Minimal e Responsive

Interfaccia di Word. Scheda File: contiene i comandi per intervenire sul documento, come Nuovo, Apri, Salva con nome, Stampa e Chiudi.

L INNOVATIVO SHARE&SHOW SOFTWARE PER IL DIGITAL SIGNAGE

M. Editoria elettronica

Negli ultimi dieci anni, il Web è stato completamente

MS Office Powerpoint La formattazione

PRESENTAZIONE E LISTINO

Progettazione e sviluppo WEB

MICROSOFT WORD 2010 CREAZIONE E FORMATTAZIONE DI DOCUMENTI

Cosa sono i siti responsive

CREARE UN ORDINE CON GWEB

4 jquery tricks che non potete non conoscere

Gennaio: preferiti della redazione

MS Office Powerpoint La formattazione

PageSpeed Insights. Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Parte Prima La bozza in Photoshop

COME CREARE UN PROGETTO

WooCommerce: vendere fiori con servizio di consegna a domicilio e dedica (come Interflora)

Transcript:

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. 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: 1 / 8

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. 2 / 8

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? 3 / 8

Lasciamo i rettangoli ai nostri mockup e Inseriamo qualche immagine fittizia, colorata, che ravvivi il layout. Metti la bozza online 4 / 8

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 5 / 8

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: 1. Quando è possibile, è consigliabile presentare la bozza in modo diretto, così da poterne spiegare i dettagli al cliente; 2. 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; 3. 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; 4. 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; 5. 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. 6 / 8

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. 7 / 8

Powered by TCPDF (www.tcpdf.org) 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? 8 / 8