wireframe prototyping

download wireframe prototyping

of 23

Embed Size (px)

description

 

Transcript of wireframe prototyping

  • 1. Storyboarding, Wireframing, and Code-Free Prototyping for Your Web, Desktop, and Mobile Apps Goal : Progettare le interazioni e linterfaccia utente mantenendo il focus sulla User Experience
  • 2. Chi Acrm net -aCrm net una societ italiana specializzata nello sviluppo di CRM open source e di soluzioni ad hoc per il web e il mobile. - aCrm net vanta pi di 50 dipendenti che coprono una vasta gamma di figure professionali e ha ben due sedi in Europa: Roma e Ginevra. Contatti aCrm Via Enrico Berlinguer, 18 (00054) Fiumicino (Roma) Italia www.acrmnet.com info_net@acrmnet.it Phone +39 06 95214464 Fax +39 06 92913681 Le nostre APPS HERMES HEALTY SPIECES PET ISLAND SWAP ISLAND MORE OR LESS NAPOMEMO
  • 3. Considerazioni generali Cos un wireframe? E la prima bozza di unapplicazione/sito una specie di radiografia della struttura. definisce visivamente la struttura del sito e traduce in immagine ci che, prima, era solo testo scritto lo scopo quello di descrivere e tenere traccia della disposizione dei vari elementi allinterno del layout, senza disegni, immagini o colori. Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e le modalit di navigazione: e proprio in quanto immagine, anche se grigia e spoglia, comunica in modo pi chiaro e pi immediato di tante parole. Cos uno storyboard? Molto semplice, linsieme dei wireframe. Lo storyboard deve mostrare l'integrazione delle varie pagine/contenuti con i controlli e le loro funzionalit Cos un prototipo? Un prototipo levoluzione dello storyboard definisce linterfaccia utente UI Aiuta a progettare e a verificare la User Experience UX aCrm net training course Apr 2014 3
  • 4. Wireframe: alcuni esempi aCrm net training course Apr 2014 4 Il wireframe una rappresentazione schematica di una singola pagina
  • 5. Wireframe: alcuni esempi aCrm net training course Apr 2014 5
  • 6. Wireframe: Sketching Your App aCrm net training course Apr 2014 6 Partire da semplici schizzi/bozze uno dei metodi migliori per iniziare a disegnare la UI di un progetto, inoltre veloce, facile da modificare e pu aiutare a far visualizzare una soluzione ad un cliente. Disegnare la vostra applicazione permette di mostrare ai clienti le vostre idee e consente di illustrare come un'idea pu scalare da un telefono a un tablet da 7 pollici ad altri schermi. In pratica, i disegni sono il primo passo da compiere nella creazione di unapp.
  • 7. Storyboard: alcuni esempi aCrm net training course Apr 2014 7 Lo storyboard una serie di wireframe legati tra loro
  • 8. Storyboard: alcuni esempi aCrm net training course Apr 2014 8
  • 9. Prototipi: Alcuni esempi aCrm net training course Apr 2014 9 Un prototipo la rappresentazione completa o parziale di un progetto o di un prodotto
  • 10. Prototipi: Alcuni esempi aCrm net training course Apr 2014 10
  • 11. Considerazioni generali Il wireframe e lo storyboard sono rappresentazioni statiche del design di un progetto e non simulano i suoi vari stati. Un prototipo, a prescindere da come fatto, coglie lintento di un progetto e ne simula i molteplici stati. (tratto dal libro Prototyping di Todd Zaki Warfel) aCrm net training course Apr 2014 11
  • 12. Wireframing e Storyboarding aCrm net training course Apr 2014 12 E ora di fare qualche esempio pratico e alcune esercitazioni!
  • 13. Prototipo: Indigo Studio aCrm net training course Apr 2014 13 Se non siete amanti del bricolage Interaction Design Tool
  • 14. Prototipo: Indigo Studio aCrm net training course Apr 2014 14 Indigo Studio un software in grado di aiutare nella costruzione della GUI utente, permettendo di includere interazioni e gesture. E possibile creare prototipi funzionanti senza laggiunta di codice
  • 15. Prototipo: Indigo Studio aCrm net training course Apr 2014 15 I concetti base del software Indigo: Screen elements (blocchi visuali che si combinano per formare una schermata) Interactions (azioni dellutente che comportano variazioni nella schermata o navigazione) Animations (le modifiche alla visualizzazione della schermata nel tempo) States (il punto di attesa del prototipo prima di unazione dellutente) Navigation (il passaggio da una schermata allaltra o ad un URL esterno)
  • 16. Prototipo: Indigo Studio aCrm net training course Apr 2014 16 Screen Elements: Gli screen elements sono elementi utilizzati per la creazione dellinterfaccia utente del prototipo, sono divisi in: Layout Common content Lists & pickers Shapes Stencils Annotations/markup
  • 17. Prototipo: Indigo Studio aCrm net training course Apr 2014 17 Screen Elements - Layers: Gli screen elements organizzati in Layers (livelli) in modo che vi sia un ordine di visualizzazione, ovviamente possibile modificare lordine
  • 18. Prototipo: Indigo Studio aCrm net training course Apr 2014 18 Interactions Le interazioni accadono quando lutente compie unazione e possono essere cambiamenti di schermo (in-screen interaction) o di schermata (navigazione)
  • 19. Prototipo: Indigo Studio aCrm net training course Apr 2014 19 Animations Le animazioni consentono di animare lo schermata con movimento, cambio di colori o dimensione e dissolvenza.
  • 20. Prototipo: Indigo Studio aCrm net training course Apr 2014 20 States Ogni schermata ha uno stato iniziale chiamato start. Linterazione con gli elementi allinterno della schermata si traduce in cambiamenti di stato.
  • 21. Prototipo: Indigo Studio aCrm net training course Apr 2014 21 Navigation Alcune azioni dellutente possono portare alla navigazione tra schermate dello stesso progetto o URL esterni .
  • 22. Prototipo: Indigo Studio aCrm net training course Apr 2014 22 Navigation Esempio di navigazione allinterno del progetto.
  • 23. Prototipo: Indigo Studio aCrm net training course Apr 2014 23 Proviamo a fare qualche esempio pratico!