Restyle web application

1. Man@go
Progettazione interfaccia grafica
applicazione web
1/12/2012
By Luca Silvestro

2. 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.

3. 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

4. Fase 1 - Analisi elementi software
Il 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.

5. Fase 2 –Ricerca ed analisi prodotti affini
Media chase software

6. Fase 2 -Ricerca ed analisi prodotti affini
Kace management center

7. Fase 2 -Ricerca ed analisi prodotti affini
Goal United 2012

8. Fase 2 -Ricerca ed analisi prodotti affini
InFlow Inventory

9. Fase 2 -Ricerca ed analisi prodotti affini
Apple website

10. Fase 2 -Ricerca ed analisi prodotti affini
Microsoft Office Word 2007

11. 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.

12. Fase 2 -Ricerca ed analisi prodotti affini
Gmail Prima

13. Fase 2 -Ricerca ed analisi prodotti affini
Gmail Dopo

14. 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)

15. Fase 3 –Produzione proposta grafica
La 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

16. Fase 3 –Produzione proposta grafica

17. Fase 3 –Produzione proposta grafica

18. Fase 3 –Produzione proposta grafica