Tra Design e interattività : Come progettare un sito web

1,550 views

Published on

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,550
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
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.

×