Man@go
description
Transcript of Man@go
![Page 1: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/1.jpg)
Man@go
Progettazione interfaccia grafica applicazione web
By Luca Silvestro1/12/2012
![Page 2: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/2.jpg)
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.
![Page 3: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/3.jpg)
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
![Page 4: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/4.jpg)
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.
![Page 5: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/5.jpg)
Fase 2 –Ricerca ed analisi prodotti affini
Media chase software
![Page 6: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/6.jpg)
Fase 2 -Ricerca ed analisi prodotti affini
Kace management center
![Page 7: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/7.jpg)
Fase 2 -Ricerca ed analisi prodotti affini
Goal United 2012
![Page 8: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/8.jpg)
Fase 2 -Ricerca ed analisi prodotti affini
InFlow Inventory
![Page 9: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/9.jpg)
Fase 2 -Ricerca ed analisi prodotti affini
Apple website
![Page 10: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/10.jpg)
Fase 2 -Ricerca ed analisi prodotti affini
Microsoft Office Word 2007
![Page 11: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/11.jpg)
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.
![Page 12: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/12.jpg)
Fase 2 -Ricerca ed analisi prodotti affini
Gmail Prima
![Page 13: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/13.jpg)
Fase 2 -Ricerca ed analisi prodotti affini
Gmail Dopo
![Page 14: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/14.jpg)
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)
![Page 15: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/15.jpg)
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
![Page 16: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/16.jpg)
Fase 3 –Produzione proposta grafica
![Page 17: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/17.jpg)
Fase 3 –Produzione proposta grafica
![Page 18: Man@go](https://reader035.fdocument.pub/reader035/viewer/2022062706/557aa026d8b42a835f8b4e64/html5/thumbnails/18.jpg)
Fase 3 –Produzione proposta grafica