wireframe prototyping

369 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
369
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

wireframe prototyping

  1. 1. Storyboarding, Wireframing, and Code-Free Prototyping for Your Web, Desktop, and Mobile Apps Goal : Progettare le interazioni e l’interfaccia utente mantenendo il focus sulla User Experience
  2. 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. 3. Considerazioni generali • Cos’è un wireframe? – E’ la prima bozza di un’applicazione/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 all’interno 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, l’insieme dei wireframe. – Lo storyboard deve mostrare l'integrazione delle varie pagine/contenuti con i controlli e le loro funzionalità • Cos’è un prototipo? – Un prototipo è l’evoluzione dello storyboard – definisce l’interfaccia utente UI – Aiuta a progettare e a verificare la User Experience UX aCrm net training course Apr 2014 3
  4. 4. Wireframe: alcuni esempi aCrm net training course Apr 2014 4 Il wireframe è una rappresentazione schematica di una singola pagina
  5. 5. Wireframe: alcuni esempi aCrm net training course Apr 2014 5
  6. 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 un’app.
  7. 7. Storyboard: alcuni esempi aCrm net training course Apr 2014 7 Lo storyboard è una serie di wireframe legati tra loro
  8. 8. Storyboard: alcuni esempi aCrm net training course Apr 2014 8
  9. 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. 10. Prototipi: Alcuni esempi aCrm net training course Apr 2014 10
  11. 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 l’intento 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. 12. Wireframing e Storyboarding aCrm net training course Apr 2014 12 E’ ora di fare qualche esempio pratico e alcune esercitazioni!
  13. 13. Prototipo: Indigo Studio aCrm net training course Apr 2014 13 Se non siete amanti del bricolage Interaction Design Tool
  14. 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 l’aggiunta di codice
  15. 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 dell’utente 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 un’azione dell’utente) – Navigation (il passaggio da una schermata all’altra o ad un URL esterno)
  16. 16. Prototipo: Indigo Studio aCrm net training course Apr 2014 16 Screen Elements: • Gli screen elements sono elementi utilizzati per la creazione dell’interfaccia utente del prototipo, sono divisi in: – Layout – Common content – Lists & pickers – Shapes – Stencils – Annotations/markup
  17. 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 l’ordine
  18. 18. Prototipo: Indigo Studio aCrm net training course Apr 2014 18 Interactions • Le interazioni accadono quando l’utente compie un’azione e possono essere cambiamenti di schermo (in-screen interaction) o di schermata (navigazione)
  19. 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. 20. Prototipo: Indigo Studio aCrm net training course Apr 2014 20 States • Ogni schermata ha uno stato iniziale chiamato “start”. L’interazione con gli elementi all’interno della schermata si traduce in cambiamenti di stato.
  21. 21. Prototipo: Indigo Studio aCrm net training course Apr 2014 21 Navigation • Alcune azioni dell’utente possono portare alla navigazione tra schermate dello stesso progetto o URL esterni .
  22. 22. Prototipo: Indigo Studio aCrm net training course Apr 2014 22 Navigation • Esempio di navigazione all’interno del progetto.
  23. 23. Prototipo: Indigo Studio aCrm net training course Apr 2014 23 Proviamo a fare qualche esempio pratico!

×