SlideShare a Scribd company logo
1 of 16
Download to read offline
Dal cliente al concept design
Analisi di un metodo




  di Massimo Mastromarino
  art director Sitonline




www.designmultimedia.com
Di quali strumenti ci dobbiamo servire?

‣   un iPad? un portatile?
‣   siamo noi lo strumento indispensabile
‣   carta e penna
‣   tanta attenzione



www.designmultimedia.com
Incontro col cliente partiamo da:

‣   Presentazione del cliente
‣   Richieste estetiche
‣   Richieste strutturali




www.designmultimedia.com
Presentazione del cliente:
‣   descrizione attività da parte del cliente
‣   appuntare le “parole chiave”
‣   ottenere una documentazione (testi e foto)
‣   logo della società (meglio se vettoriale)


           Non limitare l’ispirazione
         cominciare a “scarabocchiare”



www.designmultimedia.com
Richieste estetiche:

                       colori template                  effetti audio

                   più testo o immagini              effetti movimento

               testi o box da evidenziare            numero di colonne

              effetti javascript (jquery mootools)           ...

                   finestre modali (lightbox)                 ...




www.designmultimedia.com
Case study:                                                                              Sitonline è una piattaforma CMS per la
                                                                                         creazione di siti web in self provisioning.
                                                                                         Fin dal momento della creazione è
                                                                                         possibile inserire i propri contenuti (testi,
                                                                                         immagini, video...) in piena autonomia e
                                                 dati su un campione di 10.000 clienti   senza la necessità di avere alcuna
    %
100                                                                                      conoscenza dei linguaggi di
                                                                                         programmazione.

      %
 75                                                                                      Per lʼutente avanzato invece, è possibile
                                                                                         applicare qualsiasi tipo di modifica al
                                                                                         codice avendo completo accesso ad
      %
 50                                                                                      HTML e CSS di tutte le pagine sito.

                                                                                         E' una piattaforma ricca di funzionalità,
      %                                                                                  come Photogallery, slideshow, musica e
 25
                                                                                         video nel sito, opzione multilingua ...


    0%
            mp3            video   gallery   header slide movimenti multilingua


www.designmultimedia.com
Richieste strutturali:

               pagine prodotti (o e-commerce)    notizie

                           galleria video         forum

                      galleria immagini           blog

                       pagina contatti          assistenza

                           dove siamo               ...




www.designmultimedia.com
Cosa offriamo noi?



                    Un gran bel Design!
                              è il nostro lavoro e ci mettiamo
                              passione, ed impegno




www.designmultimedia.com
Cos’altro possiamo offrire?



                             Web Usability!
                                - è finito il periodo dei siti quiz
                                - il visitatore deve trovarsi a suo agio
                                - deve leggere facilmente
                                -al cliente ser ve capire che non il suo sito ma
                                il sito è soprattutto dei suoi possibili clienti




www.designmultimedia.com
E non dimentichiamo la...



                                   Visibilità!
                                - un bel sito non rintracciabile sui motori
                                è come un bel biglietto da visita da tenere
                                sempre in tasca

                                - basi di SEO per almeno favorire
                                l’indicizzazione evitare troppi testi nelle
                                immagini

                               - fa parte delle richieste di molti clienti
www.designmultimedia.com
Apriamo Photoshop (ma prima)

                           Abbiamo le idee ben chiare?
                                      oppure



                           Serve un approfondimento?



www.designmultimedia.com
Nel caso di idee ben chiare:

  1. significa che è stato sufficiente l’incontro col cliente
  2. il materiale che ci è stato offerto è sufficiente
  3. partire direttamente con la grafica
  4. confrontare quanto fatto con siti competitor




www.designmultimedia.com
Se serve un approfondimento:
  1. richiedere altro materiale                            Richiedere il materiale a volte è una perdita di
                                                           tempo non sempre sono raggiungibili quando si
  2. visionare siti della concorrenza                      fanno queste richieste

                                                           Vari blog come quello di juliusdesign offrono
  3. usufruire dei siti di ispirazione:                    grade spazio all’argomento inspiration

      •     blog sull’argomento                            oppure sfogliare qualche galleria di siti CSS
                                                           anche se purtroppo devo dire che spesso si esce
      •     gallerie di siti TOP CSS                       demoralizzati da questi siti dalla perfetta


                           se l’ispirazione proprio non arriva
                  alzatevi, guardate un film, fumate una sigaretta...


www.designmultimedia.com
Cosa non deve mancare su un sito Web 2.0 style:

                    testi molto leggibili      colori ben contrastanti (ma non molti colori)

                  interlinea dei testi alta                 sfumature lievi

         abbondanti spaziature e margini                    ombre delicate

               pagine non troppo piene            icone “parlanti” (devono essere intuitive)

                  titoli e bottoni intuitivi                         ...




www.designmultimedia.com
Trucchi del web designer:

  1. staccarsi spesso dal monitor (non lavorare 8 ore di seguito)
  2. riuscire ad ottenere il parere di altri (meglio se designer ma anche no)
  3. non peccare mai di vanità
      • prendere in considerazione qualsiasi consiglio
      • prendere in considerazione anche i consigli del cliente


www.designmultimedia.com
Grazie per l’attenzione
                             Su Youtube trovate il video conclusivo della presentazione
                             http://www.youtube.com/watch?v=_xHuNb3RF-M




                                Massimo Mastromarino
                               www.designmultimedia.com



www.designmultimedia.com

More Related Content

Similar to Dal Cliente Al Concept Design

SMAU Milano 2015
SMAU Milano 2015SMAU Milano 2015
SMAU Milano 2015Paolo Dadda
 
Come strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressCome strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressSiteGround.com
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignSimone Viani
 
Il tuo sito online con i C.M.S.
Il tuo sito online con i C.M.S.Il tuo sito online con i C.M.S.
Il tuo sito online con i C.M.S.Boris Amico
 
15 - Web designer vs Web developer
15 - Web designer vs Web developer15 - Web designer vs Web developer
15 - Web designer vs Web developerGiuseppe Vizzari
 
Web designer vs Web developer
Web designer vs Web developerWeb designer vs Web developer
Web designer vs Web developerGiuseppe Vizzari
 
Wordpress 3/7. temi e plugin
Wordpress 3/7. temi e pluginWordpress 3/7. temi e plugin
Wordpress 3/7. temi e pluginCity Planner
 
II modulo – come gestire
II modulo – come gestireII modulo – come gestire
II modulo – come gestireBeesolution
 
Le applicazioni web e i CMS (18/19)
Le applicazioni web e i CMS (18/19)Le applicazioni web e i CMS (18/19)
Le applicazioni web e i CMS (18/19)Giuseppe Vizzari
 
Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2Edoardo Sportelli
 
14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ... 14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ... Giuseppe Vizzari
 
Tra Design e interattività : Come progettare un sito web
Tra Design e interattività : Come progettare un sito webTra Design e interattività : Come progettare un sito web
Tra Design e interattività : Come progettare un sito webEstensa Srl
 
Creare web design seo friendly
Creare web design seo friendlyCreare web design seo friendly
Creare web design seo friendlyxalman55415
 

Similar to Dal Cliente Al Concept Design (20)

SMAU Milano 2015
SMAU Milano 2015SMAU Milano 2015
SMAU Milano 2015
 
Siti web vincenti
Siti web vincentiSiti web vincenti
Siti web vincenti
 
07 - Web apps e CMS
07 - Web apps e CMS07 - Web apps e CMS
07 - Web apps e CMS
 
Come strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressCome strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPress
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Il tuo sito online con i C.M.S.
Il tuo sito online con i C.M.S.Il tuo sito online con i C.M.S.
Il tuo sito online con i C.M.S.
 
15 - Web designer vs Web developer
15 - Web designer vs Web developer15 - Web designer vs Web developer
15 - Web designer vs Web developer
 
Web designer vs Web developer
Web designer vs Web developerWeb designer vs Web developer
Web designer vs Web developer
 
7 - Web application e CMS
7 - Web application e CMS7 - Web application e CMS
7 - Web application e CMS
 
Wordpress 3/7. temi e plugin
Wordpress 3/7. temi e pluginWordpress 3/7. temi e plugin
Wordpress 3/7. temi e plugin
 
II modulo – come gestire
II modulo – come gestireII modulo – come gestire
II modulo – come gestire
 
Le applicazioni web e i CMS (18/19)
Le applicazioni web e i CMS (18/19)Le applicazioni web e i CMS (18/19)
Le applicazioni web e i CMS (18/19)
 
Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2
 
14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ... 14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ...
 
8 - Web app e CMS - 17/18
8 - Web app e CMS - 17/188 - Web app e CMS - 17/18
8 - Web app e CMS - 17/18
 
8 - Web App e CMS - 16/17
8 - Web App e CMS - 16/178 - Web App e CMS - 16/17
8 - Web App e CMS - 16/17
 
Tra Design e interattività : Come progettare un sito web
Tra Design e interattività : Come progettare un sito webTra Design e interattività : Come progettare un sito web
Tra Design e interattività : Come progettare un sito web
 
Socialtools
SocialtoolsSocialtools
Socialtools
 
Creare web design seo friendly
Creare web design seo friendlyCreare web design seo friendly
Creare web design seo friendly
 
Expertise2013 def
Expertise2013 defExpertise2013 def
Expertise2013 def
 

Dal Cliente Al Concept Design

  • 1. Dal cliente al concept design Analisi di un metodo di Massimo Mastromarino art director Sitonline www.designmultimedia.com
  • 2. Di quali strumenti ci dobbiamo servire? ‣ un iPad? un portatile? ‣ siamo noi lo strumento indispensabile ‣ carta e penna ‣ tanta attenzione www.designmultimedia.com
  • 3. Incontro col cliente partiamo da: ‣ Presentazione del cliente ‣ Richieste estetiche ‣ Richieste strutturali www.designmultimedia.com
  • 4. Presentazione del cliente: ‣ descrizione attività da parte del cliente ‣ appuntare le “parole chiave” ‣ ottenere una documentazione (testi e foto) ‣ logo della società (meglio se vettoriale) Non limitare l’ispirazione cominciare a “scarabocchiare” www.designmultimedia.com
  • 5. Richieste estetiche: colori template effetti audio più testo o immagini effetti movimento testi o box da evidenziare numero di colonne effetti javascript (jquery mootools) ... finestre modali (lightbox) ... www.designmultimedia.com
  • 6. Case study: Sitonline è una piattaforma CMS per la creazione di siti web in self provisioning. Fin dal momento della creazione è possibile inserire i propri contenuti (testi, immagini, video...) in piena autonomia e dati su un campione di 10.000 clienti senza la necessità di avere alcuna % 100 conoscenza dei linguaggi di programmazione. % 75 Per lʼutente avanzato invece, è possibile applicare qualsiasi tipo di modifica al codice avendo completo accesso ad % 50 HTML e CSS di tutte le pagine sito. E' una piattaforma ricca di funzionalità, % come Photogallery, slideshow, musica e 25 video nel sito, opzione multilingua ... 0% mp3 video gallery header slide movimenti multilingua www.designmultimedia.com
  • 7. Richieste strutturali: pagine prodotti (o e-commerce) notizie galleria video forum galleria immagini blog pagina contatti assistenza dove siamo ... www.designmultimedia.com
  • 8. Cosa offriamo noi? Un gran bel Design! è il nostro lavoro e ci mettiamo passione, ed impegno www.designmultimedia.com
  • 9. Cos’altro possiamo offrire? Web Usability! - è finito il periodo dei siti quiz - il visitatore deve trovarsi a suo agio - deve leggere facilmente -al cliente ser ve capire che non il suo sito ma il sito è soprattutto dei suoi possibili clienti www.designmultimedia.com
  • 10. E non dimentichiamo la... Visibilità! - un bel sito non rintracciabile sui motori è come un bel biglietto da visita da tenere sempre in tasca - basi di SEO per almeno favorire l’indicizzazione evitare troppi testi nelle immagini - fa parte delle richieste di molti clienti www.designmultimedia.com
  • 11. Apriamo Photoshop (ma prima) Abbiamo le idee ben chiare? oppure Serve un approfondimento? www.designmultimedia.com
  • 12. Nel caso di idee ben chiare: 1. significa che è stato sufficiente l’incontro col cliente 2. il materiale che ci è stato offerto è sufficiente 3. partire direttamente con la grafica 4. confrontare quanto fatto con siti competitor www.designmultimedia.com
  • 13. Se serve un approfondimento: 1. richiedere altro materiale Richiedere il materiale a volte è una perdita di tempo non sempre sono raggiungibili quando si 2. visionare siti della concorrenza fanno queste richieste Vari blog come quello di juliusdesign offrono 3. usufruire dei siti di ispirazione: grade spazio all’argomento inspiration • blog sull’argomento oppure sfogliare qualche galleria di siti CSS anche se purtroppo devo dire che spesso si esce • gallerie di siti TOP CSS demoralizzati da questi siti dalla perfetta se l’ispirazione proprio non arriva alzatevi, guardate un film, fumate una sigaretta... www.designmultimedia.com
  • 14. Cosa non deve mancare su un sito Web 2.0 style: testi molto leggibili colori ben contrastanti (ma non molti colori) interlinea dei testi alta sfumature lievi abbondanti spaziature e margini ombre delicate pagine non troppo piene icone “parlanti” (devono essere intuitive) titoli e bottoni intuitivi ... www.designmultimedia.com
  • 15. Trucchi del web designer: 1. staccarsi spesso dal monitor (non lavorare 8 ore di seguito) 2. riuscire ad ottenere il parere di altri (meglio se designer ma anche no) 3. non peccare mai di vanità • prendere in considerazione qualsiasi consiglio • prendere in considerazione anche i consigli del cliente www.designmultimedia.com
  • 16. Grazie per l’attenzione Su Youtube trovate il video conclusivo della presentazione http://www.youtube.com/watch?v=_xHuNb3RF-M Massimo Mastromarino www.designmultimedia.com www.designmultimedia.com