Man@go

Progettazione interfaccia grafica applicazione web

By Luca Silvestro1/12/2012

Richieste del committente

• Sapere sempre dove si è• Saltare sempre alla funzionalità madre• Stile Apple• Bottoni tondeggianti• Piace molto lo stile della tabbar nera Apple in

basso.

Fase 1 - Analisi layout software

Menu navigazione

Contenuto pagina

Barra preferiti

Il menu di navigazione contiente 7 sezioni con relative sotto-sezioni.Il livello di profondità Max raggiunto= 4

La barra dei preferiti contiente link alle sezioni del sito maggiormente utilizzate

Fase 1 - Analisi elementi softwareIl menu di navigazione contiente 7 sezioni con relative sotto-sezioni.Il livello di profondità Max raggiunto= 4

La barra dei preferiti (posizionata in basso) contiente gli ‘accessi rapidi’, link alle sezioni del sito maggiormente utilizzate.

Fase 2 –Ricerca ed analisi prodotti affini

Media chase software

Fase 2 -Ricerca ed analisi prodotti affini

Kace management center

Fase 2 -Ricerca ed analisi prodotti affini

Goal United 2012

Fase 2 -Ricerca ed analisi prodotti affini

InFlow Inventory

Fase 2 -Ricerca ed analisi prodotti affini

Apple website

Fase 2 -Ricerca ed analisi prodotti affini

Microsoft Office Word 2007

Fase 2 -Ricerca ed analisi prodotti affini

Gli screenshots selezionati sono in gran parte di applicazioni desktop.

La ricerca e lo sviluppo di nuovi software e’ sempre piu’ deciso a sfumare la linea di confine che oggi separa le applicazioni desktop da quelle web.

Fase 2 -Ricerca ed analisi prodotti affini

Gmail Prima

Fase 2 -Ricerca ed analisi prodotti affini

Gmail Dopo

Fase 2 -Ricerca ed analisi prodotti affini Tutti I prodotti affini,sotto il profilo tipologico,al tema progettuale,

presentano macro-caratteristiche strutturali comuni.

• barra di navigazione sempre visibile (stile applicazione desktop)• Scrolling del frame ‘contenuto pagina’ sciolto dagli elementi di navigazione

(Nav bar e menu a scomparsa)

Fase 3 –Produzione proposta graficaLa mia proposta contiene I seguenti elementi strutturali :• Barra di navigazione in alto con 7 icone e con un massimo di 3 livelli di menu-

figli a scomparsa.• Necessario il click per l’apertura dei menu-figli (e non l’hover).• Memoria dei menu per facilitare l’orientamento dell’utente (una volta cliccato

su di una sezione e relativa sottosezione,voglio poter passare da un ‘fratello’ ad un altro senza dover riaprire I sottomenu che avevo aperto in precedenza ).

• Titolo pagina aperta con relativo percorso (links clickable) e bottoni back ,forward.

• Frame-contenuto pagina che va ad occupare tutta la parte di schermo fruibile (al netto della barra del browser,del menu navigazione dell’app e del nostro footer)..Piu’ lo schermo e’ grande meglio e’.Scroller laterale esclusivo.

• menu laterale a scomparsa contenente sezione Preferiti e Azioni .Con barra di ricerca .

• footer

Fase 3 –Produzione proposta grafica

Fase 3 –Produzione proposta grafica

Fase 3 –Produzione proposta grafica