tra design e interattività: la progettazione dell’interfaccia web. comunicare è facile, farsi capire è un’impresa 16  nove...
la prima cosa da tener presente nella progettazione di un sito web sono gli  scopi  funzionali  che quest’ultimo si prefig...
un esempio di interfaccia utente in cui è chiara la  distinzione funzionale fra le  macroaree  e sono ben distinti gli sco...
distinzione delle  macroaree funzionali  dell’interfaccia utente presa in esame.  header focus news box informativo su un ...
altro esempio di best practice e di definizione delle macroaree funzionali;  è individuabile  un pattern differente  data ...
distinzione delle  macroaree funzionali  dell’interfaccia utente presa in esame.  header box  novità box  di  servizio box...
nel progettare un sito web un passo fondamentale è costituito dalla  progettazione e razionalizzazione  dei contenuti a se...
<ul><li>abbiamo impostato il workflow di questo progetto creando un  wireframe   </li></ul><ul><li>del sito che renda espl...
wireframe di progetto per il sito istituzionale di estensa:  distinzione delle  macroaree funzionali. header area  comunic...
wireframe di progetto per il sito istituzionale di estensa:  descrizione delle  funzionalità e dei contenuti  delle macroa...
ed ora uno sguardo al sito.
Upcoming SlideShare
Loading in...5
×

Tra Design e interattività : Come progettare un sito web

1,187

Published on

intervento al convegno "Comunicare è Facile, Farsi Capire è un’Impresa" di Gennaro Guida Ceo Estensa.it

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,187
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tra Design e interattività : Come progettare un sito web

  1. 1. tra design e interattività: la progettazione dell’interfaccia web. comunicare è facile, farsi capire è un’impresa 16 novembre 2009
  2. 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. 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. 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. 5. altro esempio di best practice e di definizione delle macroaree funzionali; è individuabile un pattern differente data la diversa destinazione d’uso.
  6. 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. 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. 8. <ul><li>abbiamo impostato il workflow di questo progetto creando un wireframe </li></ul><ul><li>del sito che renda espliciti i contenuti. nel wireframe, sono presenti i contenuti </li></ul><ul><li>del sito razionalizzati anche se la griglia non pone alcun limite al disegno </li></ul><ul><li>della pagina, còmpito del designer . </li></ul><ul><li>funzioni principali del wireframe di un sito </li></ul><ul><li>stabilire i contenuti della pagina </li></ul><ul><li>stabilire le funzionalità tecniche e le connessioni tra le funzionalità tecniche del progetto web </li></ul><ul><li>chiarire aspetti tecnici e di design </li></ul>
  9. 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. 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. 11. ed ora uno sguardo al sito.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×