SlideShare une entreprise Scribd logo
1  sur  11
tra design e interattività: la progettazione dell’interfaccia web. comunicare è facile, farsi capire è un’impresa 16  novembre  2009
la prima cosa da tener presente nella progettazione di un sito web sono gli  scopi  funzionali  che quest’ultimo si prefigge.  naturalmente a seconda delle funzionalità il sito web  presenterà l’interfaccia  adatta a soddisfare le funzionalità stesse . è quindi chiaro che, a seconda della destinazione d’uso, il sito web potrà  essere impostato su una sorta di pattern non riconosciuto al livello teorico ma  riconoscibile nei casi d’uso ed, in un certo senso, formalizzato da essi.  a tal proposito prima di progettare un’interfaccia web è fondamentale  riconoscere dei modelli o pattern che siano vicini alle funzionalità e gli obiettivi  che il sito si pone. un’accurata  analisi di benchmarking  ci aiuterà nella  realizzazione del nostro progetto.
un esempio di interfaccia utente in cui è chiara la  distinzione funzionale fra le  macroaree  e sono ben distinti gli scopi specifici del sito.
distinzione delle  macroaree funzionali  dell’interfaccia utente presa in esame.  header focus news box informativo su un argomento specifico approfondimento news approfondimento su un argomento  specifico. box di servizio box di servizio box di servizio
altro esempio di best practice e di definizione delle macroaree funzionali;  è individuabile  un pattern differente  data la diversa destinazione d’uso.
distinzione delle  macroaree funzionali  dell’interfaccia utente presa in esame.  header box  novità box  di  servizio box  di  servizio elenco categorie e ricerca area utenti vetrina prodotti focus prodotti
nel progettare un sito web un passo fondamentale è costituito dalla  progettazione e razionalizzazione  dei contenuti a seconda degli obiettivi che  si vogliono ottenere. nel caso che presentiamo oggi ci troviamo di fronte al sito istituzionale di  un’azienda che offre ai clienti  servizi a 360 gradi in ambito multimediale .  il progetto del sito deve tener conto innanzitutto di cosa vogliamo che l’utente  percepisca  ad un primo sguardo. bisogna in pochi istanti di visualizzazione  della pagina far comprendere all’utente di cosa stiamo parlando,  che servizio stiamo offrendo per aumentare la capacità di recapture  del sito stesso.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
wireframe di progetto per il sito istituzionale di estensa:  distinzione delle  macroaree funzionali. header area  comunicati aziendali area  portfolio area  contatti footer focus servizi e prodotti
wireframe di progetto per il sito istituzionale di estensa:  descrizione delle  funzionalità e dei contenuti  delle macroaree . contenuti dell’header:  marchio, menù di servizio, menù di primo livello (visibile su tutti i livelli di navigazione),  accesso area riservata clienti, richiesta preventivo contenuti area comunicati aziendali: news, blog,  banner di un prodotto  in evidenza contenuti area portfolio: alcuni brand  individuati  come case study contenuti area  contatti: newsletter,  richiesta contatto per  preventivo on line,  direct line, estensa  sui social network contenuti area footer:  link di secondo livello sempre visibili su tutti i livelli di navigazione, tag cloud,  link consigliati da estensa. dati aziendali. menù di servizio footer. contenuti focus servizi e prodotti:  presentazione interattiva realizzata mediante framework javascript.
ed ora uno sguardo al sito.

Contenu connexe

En vedette

Slide SMXL milan 2016 ivano di biasi
Slide SMXL milan 2016   ivano di biasiSlide SMXL milan 2016   ivano di biasi
Slide SMXL milan 2016 ivano di biasiIvano Di Biasi
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webJservice
 
Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"Roberto Polillo
 
Seo basics
Seo basicsSeo basics
Seo basicsDML Srl
 
Un modello di qualità per i siti Web
Un modello di qualità per i siti WebUn modello di qualità per i siti Web
Un modello di qualità per i siti WebRoberto Polillo
 
6. Architettura informazione
6. Architettura informazione6. Architettura informazione
6. Architettura informazioneRoberto Polillo
 
2. Evoluzione del Web: dal Web 1.0 al Web 2.0
2. Evoluzione del Web: dal Web 1.0 al Web 2.02. Evoluzione del Web: dal Web 1.0 al Web 2.0
2. Evoluzione del Web: dal Web 1.0 al Web 2.0Roberto Polillo
 
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il WebElementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il WebAlberto Rota
 
Slide corso SEO Copy Novembre 2015
Slide corso SEO Copy Novembre 2015Slide corso SEO Copy Novembre 2015
Slide corso SEO Copy Novembre 2015Giovanni Sacheli
 
Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...
Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...
Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...Valetrave
 
Back to basics- Scrivere per il web
Back to basics- Scrivere per il webBack to basics- Scrivere per il web
Back to basics- Scrivere per il webBarbara Sgarzi
 
Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...
Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...
Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...vincenzo de simone
 
“Facebook come strumento di promozione turistica eccellente: il caso APT Mar...
“Facebook come strumento di promozione turistica eccellente: il caso  APT Mar...“Facebook come strumento di promozione turistica eccellente: il caso  APT Mar...
“Facebook come strumento di promozione turistica eccellente: il caso APT Mar...Valeria Mascolo
 
L'analisi del contenuto di un sito Internet
L'analisi del contenuto di un sito InternetL'analisi del contenuto di un sito Internet
L'analisi del contenuto di un sito InternetAgnese Vardanega
 

En vedette (20)

Slide SMXL milan 2016 ivano di biasi
Slide SMXL milan 2016   ivano di biasiSlide SMXL milan 2016   ivano di biasi
Slide SMXL milan 2016 ivano di biasi
 
Manita presentazione
Manita presentazioneManita presentazione
Manita presentazione
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti web
 
Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"Figure libro "Il check-up dei siti Web"
Figure libro "Il check-up dei siti Web"
 
Seo basics
Seo basicsSeo basics
Seo basics
 
Siti web di qualità
Siti web di qualitàSiti web di qualità
Siti web di qualità
 
Un modello di qualità per i siti Web
Un modello di qualità per i siti WebUn modello di qualità per i siti Web
Un modello di qualità per i siti Web
 
6. Architettura informazione
6. Architettura informazione6. Architettura informazione
6. Architettura informazione
 
2. Evoluzione del Web: dal Web 1.0 al Web 2.0
2. Evoluzione del Web: dal Web 1.0 al Web 2.02. Evoluzione del Web: dal Web 1.0 al Web 2.0
2. Evoluzione del Web: dal Web 1.0 al Web 2.0
 
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il WebElementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
Elementi di Architettura dell'Informazione, Usabilità e Scrittura per il Web
 
Slide corso SEO Copy Novembre 2015
Slide corso SEO Copy Novembre 2015Slide corso SEO Copy Novembre 2015
Slide corso SEO Copy Novembre 2015
 
6. Ricercare nel Web
6. Ricercare nel Web6. Ricercare nel Web
6. Ricercare nel Web
 
13.Progettare il testo
13.Progettare il testo13.Progettare il testo
13.Progettare il testo
 
Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...
Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...
Valutazione della qualità di un sito web: Analisi interna logico-funzionale e...
 
Back to basics- Scrivere per il web
Back to basics- Scrivere per il webBack to basics- Scrivere per il web
Back to basics- Scrivere per il web
 
Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...
Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...
Analisi usabilità sito web \"Club delle Meraviglie Q8\" - metodologia di Robe...
 
“Facebook come strumento di promozione turistica eccellente: il caso APT Mar...
“Facebook come strumento di promozione turistica eccellente: il caso  APT Mar...“Facebook come strumento di promozione turistica eccellente: il caso  APT Mar...
“Facebook come strumento di promozione turistica eccellente: il caso APT Mar...
 
Emotional Web design
Emotional Web designEmotional Web design
Emotional Web design
 
L'analisi del contenuto di un sito Internet
L'analisi del contenuto di un sito InternetL'analisi del contenuto di un sito Internet
L'analisi del contenuto di un sito Internet
 
Corso SEO Base
Corso SEO BaseCorso SEO Base
Corso SEO Base
 

Similaire à Tra Design e interattività : Come progettare un sito web

Webcast 9 aprile 2013 sharepont online
Webcast 9 aprile  2013 sharepont onlineWebcast 9 aprile  2013 sharepont online
Webcast 9 aprile 2013 sharepont onlineCloudea s.r.l.
 
B Human Progetti di Stage 2009
B Human Progetti di Stage 2009B Human Progetti di Stage 2009
B Human Progetti di Stage 2009B Human Srl
 
Crm web client user interface struttura - 1
Crm web client user interface  struttura - 1Crm web client user interface  struttura - 1
Crm web client user interface struttura - 1frbrun
 
Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)Henry Muccini
 
SEO: Search Engine Optimization & Cloud computing
SEO: Search Engine Optimization & Cloud computingSEO: Search Engine Optimization & Cloud computing
SEO: Search Engine Optimization & Cloud computingbsdlover
 
Web X Aziende Scettiche Prova
Web X Aziende Scettiche ProvaWeb X Aziende Scettiche Prova
Web X Aziende Scettiche ProvaGabriella
 
Online Customer Experience
Online Customer ExperienceOnline Customer Experience
Online Customer ExperienceDML Srl
 
Aziende Fornitori Web2.0
Aziende Fornitori Web2.0Aziende Fornitori Web2.0
Aziende Fornitori Web2.0Gabriella
 
Presentazione Sito Web Aziendale
Presentazione Sito Web AziendalePresentazione Sito Web Aziendale
Presentazione Sito Web AziendaleWeb Station
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)armandocarcaterra
 
Mese dell’e-commerce: Settimana 2
Mese dell’e-commerce: Settimana 2Mese dell’e-commerce: Settimana 2
Mese dell’e-commerce: Settimana 2Aruba S.p.A.
 
Designing Flex and AIR applications
Designing Flex and AIR applicationsDesigning Flex and AIR applications
Designing Flex and AIR applicationsmarcocasario
 
Drupal 4 stakeholder
Drupal 4 stakeholderDrupal 4 stakeholder
Drupal 4 stakeholderbmeme
 

Similaire à Tra Design e interattività : Come progettare un sito web (20)

Dnn Evoq per le aziende
Dnn Evoq per le aziendeDnn Evoq per le aziende
Dnn Evoq per le aziende
 
Webcast 9 aprile 2013 sharepont online
Webcast 9 aprile  2013 sharepont onlineWebcast 9 aprile  2013 sharepont online
Webcast 9 aprile 2013 sharepont online
 
B Human Progetti di Stage 2009
B Human Progetti di Stage 2009B Human Progetti di Stage 2009
B Human Progetti di Stage 2009
 
Crm web client user interface struttura - 1
Crm web client user interface  struttura - 1Crm web client user interface  struttura - 1
Crm web client user interface struttura - 1
 
Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)Web Engineering L5: Content Model (5/8)
Web Engineering L5: Content Model (5/8)
 
Web Planning Base
Web Planning BaseWeb Planning Base
Web Planning Base
 
SEO: Search Engine Optimization & Cloud computing
SEO: Search Engine Optimization & Cloud computingSEO: Search Engine Optimization & Cloud computing
SEO: Search Engine Optimization & Cloud computing
 
Presentazione Web ID
Presentazione Web IDPresentazione Web ID
Presentazione Web ID
 
Web X Aziende Scettiche Prova
Web X Aziende Scettiche ProvaWeb X Aziende Scettiche Prova
Web X Aziende Scettiche Prova
 
Online Customer Experience
Online Customer ExperienceOnline Customer Experience
Online Customer Experience
 
Euroweb Solution20082009
Euroweb Solution20082009Euroweb Solution20082009
Euroweb Solution20082009
 
Guida ai servizi del portale trova web
Guida ai servizi del portale trova webGuida ai servizi del portale trova web
Guida ai servizi del portale trova web
 
Aziende Fornitori Web2.0
Aziende Fornitori Web2.0Aziende Fornitori Web2.0
Aziende Fornitori Web2.0
 
Presentazione Sito Web Aziendale
Presentazione Sito Web AziendalePresentazione Sito Web Aziendale
Presentazione Sito Web Aziendale
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)
 
Mese dell’e-commerce: Settimana 2
Mese dell’e-commerce: Settimana 2Mese dell’e-commerce: Settimana 2
Mese dell’e-commerce: Settimana 2
 
Ux activities
Ux activitiesUx activities
Ux activities
 
VS2013 what's new!!
VS2013 what's new!!VS2013 what's new!!
VS2013 what's new!!
 
Designing Flex and AIR applications
Designing Flex and AIR applicationsDesigning Flex and AIR applications
Designing Flex and AIR applications
 
Drupal 4 stakeholder
Drupal 4 stakeholderDrupal 4 stakeholder
Drupal 4 stakeholder
 

Plus de Estensa Srl

Le opportunita' dal territorio grazie al Web Marketing
Le opportunita' dal territorio grazie al Web MarketingLe opportunita' dal territorio grazie al Web Marketing
Le opportunita' dal territorio grazie al Web MarketingEstensa Srl
 
Internazionalizzazione digitale
Internazionalizzazione digitaleInternazionalizzazione digitale
Internazionalizzazione digitaleEstensa Srl
 
I social network, il web 2.0 e il commercio elettronico
I social network, il web 2.0 e il commercio elettronicoI social network, il web 2.0 e il commercio elettronico
I social network, il web 2.0 e il commercio elettronicoEstensa Srl
 
Msc Crociere B2B2C XML
Msc Crociere B2B2C XMLMsc Crociere B2B2C XML
Msc Crociere B2B2C XMLEstensa Srl
 
Presentazione Estensa
Presentazione EstensaPresentazione Estensa
Presentazione EstensaEstensa Srl
 
Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.
Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.
Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.Estensa Srl
 

Plus de Estensa Srl (6)

Le opportunita' dal territorio grazie al Web Marketing
Le opportunita' dal territorio grazie al Web MarketingLe opportunita' dal territorio grazie al Web Marketing
Le opportunita' dal territorio grazie al Web Marketing
 
Internazionalizzazione digitale
Internazionalizzazione digitaleInternazionalizzazione digitale
Internazionalizzazione digitale
 
I social network, il web 2.0 e il commercio elettronico
I social network, il web 2.0 e il commercio elettronicoI social network, il web 2.0 e il commercio elettronico
I social network, il web 2.0 e il commercio elettronico
 
Msc Crociere B2B2C XML
Msc Crociere B2B2C XMLMsc Crociere B2B2C XML
Msc Crociere B2B2C XML
 
Presentazione Estensa
Presentazione EstensaPresentazione Estensa
Presentazione Estensa
 
Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.
Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.
Le nuove tecnologie digitali per lo sviluppo e la promozione del florovivaismo.
 

Tra Design e interattività : Come progettare un sito web

  • 1. tra design e interattività: la progettazione dell’interfaccia web. comunicare è facile, farsi capire è un’impresa 16 novembre 2009
  • 2. la prima cosa da tener presente nella progettazione di un sito web sono gli scopi funzionali che quest’ultimo si prefigge. naturalmente a seconda delle funzionalità il sito web presenterà l’interfaccia adatta a soddisfare le funzionalità stesse . è quindi chiaro che, a seconda della destinazione d’uso, il sito web potrà essere impostato su una sorta di pattern non riconosciuto al livello teorico ma riconoscibile nei casi d’uso ed, in un certo senso, formalizzato da essi. a tal proposito prima di progettare un’interfaccia web è fondamentale riconoscere dei modelli o pattern che siano vicini alle funzionalità e gli obiettivi che il sito si pone. un’accurata analisi di benchmarking ci aiuterà nella realizzazione del nostro progetto.
  • 3. un esempio di interfaccia utente in cui è chiara la distinzione funzionale fra le macroaree e sono ben distinti gli scopi specifici del sito.
  • 4. distinzione delle macroaree funzionali dell’interfaccia utente presa in esame. header focus news box informativo su un argomento specifico approfondimento news approfondimento su un argomento specifico. box di servizio box di servizio box di servizio
  • 5. altro esempio di best practice e di definizione delle macroaree funzionali; è individuabile un pattern differente data la diversa destinazione d’uso.
  • 6. distinzione delle macroaree funzionali dell’interfaccia utente presa in esame. header box novità box di servizio box di servizio elenco categorie e ricerca area utenti vetrina prodotti focus prodotti
  • 7. nel progettare un sito web un passo fondamentale è costituito dalla progettazione e razionalizzazione dei contenuti a seconda degli obiettivi che si vogliono ottenere. nel caso che presentiamo oggi ci troviamo di fronte al sito istituzionale di un’azienda che offre ai clienti servizi a 360 gradi in ambito multimediale . il progetto del sito deve tener conto innanzitutto di cosa vogliamo che l’utente percepisca ad un primo sguardo. bisogna in pochi istanti di visualizzazione della pagina far comprendere all’utente di cosa stiamo parlando, che servizio stiamo offrendo per aumentare la capacità di recapture del sito stesso.
  • 8.
  • 9. wireframe di progetto per il sito istituzionale di estensa: distinzione delle macroaree funzionali. header area comunicati aziendali area portfolio area contatti footer focus servizi e prodotti
  • 10. wireframe di progetto per il sito istituzionale di estensa: descrizione delle funzionalità e dei contenuti delle macroaree . contenuti dell’header: marchio, menù di servizio, menù di primo livello (visibile su tutti i livelli di navigazione), accesso area riservata clienti, richiesta preventivo contenuti area comunicati aziendali: news, blog, banner di un prodotto in evidenza contenuti area portfolio: alcuni brand individuati come case study contenuti area contatti: newsletter, richiesta contatto per preventivo on line, direct line, estensa sui social network contenuti area footer: link di secondo livello sempre visibili su tutti i livelli di navigazione, tag cloud, link consigliati da estensa. dati aziendali. menù di servizio footer. contenuti focus servizi e prodotti: presentazione interattiva realizzata mediante framework javascript.
  • 11. ed ora uno sguardo al sito.