Tra Design e interattività : Come progettare un sito web
-
Upload
estensa-srl -
Category
Design
-
view
1.551 -
download
2
Transcript of Tra Design e interattività : Come progettare un sito web
![Page 1: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/1.jpg)
tra design e interattività:la progettazione dell’interfaccia web.
comunicare è facile, farsi capire è un’impresa16 novembre 2009
![Page 2: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/2.jpg)
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.
![Page 3: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/3.jpg)
un esempio di interfaccia utente in cui è chiara la distinzione funzionale fra le macroaree e sono ben distinti gli scopi specifici del sito.
![Page 4: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/4.jpg)
distinzione delle macroaree funzionali dell’interfaccia utente presa in esame.
header
focus news
box informativosu un argomentospecifico
approfondimentonews
approfondimentosu un argomento specifico.
box di serviziobox di servizio
box di servizio
![Page 5: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/5.jpg)
altro esempio di best practice e di definizione delle macroaree funzionali; è individuabile un pattern differente data la diversa destinazione d’uso.
![Page 6: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/6.jpg)
distinzione delle macroaree funzionali dell’interfaccia utente presa in esame.
header
box novità
box di servizio
box di servizio
elencocategoriee ricerca
area utenti
vetrina prodotti
focus prodotti
![Page 7: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/7.jpg)
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.
![Page 8: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/8.jpg)
abbiamo impostato il workflow di questo progetto creando un wireframe del sito che renda espliciti i contenuti. nel wireframe, sono presenti i contenuti del sito razionalizzati anche se la griglia non pone alcun limite al disegno della pagina, còmpito del designer.
funzioni principali del wireframe di un sito
1. stabilire i contenuti della pagina
2. stabilire le funzionalità tecniche e le connessioni tra le funzionalitàtecniche del progetto web
3. chiarire aspetti tecnici e di design
![Page 9: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/9.jpg)
wireframe di progetto per il sito istituzionale di estensa: distinzione delle macroaree funzionali.
header
area comunicatiaziendali
area portfolio
area contatti
footer
focus servizi e prodotti
![Page 10: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/10.jpg)
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 comunicatiaziendali: 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.
![Page 11: Tra Design e interattività : Come progettare un sito web](https://reader036.fdocumenti.com/reader036/viewer/2022082908/54b5b9f94a79596e0a8b46e5/html5/thumbnails/11.jpg)
ed ora uno sguardo al sito.