wireframes?

1. wireframes? Wireframes and Interaction Design Documents

2. Wireframes and Interaction Design Documents

3. About wireframes • Sono un modo rapido e semplice per mostrare la struttura di un prodotto (es. sito web)… di fatto rappresentano un versione preliminare di prototipo. • Non mirano a rappresentare il visual design (ad esempio caratteri, colori), Gli elementi grafici, in questa fase, possono introdure rumore di fondo e distrazioni nella analisi del wireframe • Servono per discutere e raffinazione il processo di progettazione - il numero di pagine, il tipo di immagini, il numero di immagini e di tool accessori • Il wireframepuo includere parti ipertestuali cliccabili permettendo di testare anche il flusso di navigazione vero e proprio. • Non possono includere la versione reale del prodotto finale, ma devono includere una descrizione di come sarà il prodotto finale.

4. Questi non sono esempi corretti di wireframing Wireframes and Interaction Design Documents

5. wireframes? wireframes? • Rappresentazione dei contenuti • gerarchia • relazioni • Disposizione dei contenuti • Come essi sono rappresentati • La loro funzione • Interazione con I contenuti • Non rappresentano il visual del sito • Non contengono elementi grafici definiti, ma solo rappresentazioni degli elementi grafici • Non trasmettono lidentità aziendale o del brand per cui il sito nasce

6. wireframes? wireframes? • In sostanza rappresentnao la struttura e le funzionalità che avrà il sito, descrivendolo nei dettagli ma senza entrare nel merito dell’aspetto grafico che lo caratterizzera.

7. Tipologie di wireframes • Sketches • Rapidi e adatti al brainstorming • Buoni per feedback iniziali a stretto giro • LOW-FI wireframes • Diagrammi a blocchi • Ottimi per il flusso della pagina • HI_FI wireframes • Versione dettagliata • Commentati e descritti a parole • Descrizione delle azioni • Descrizione delle funzionalità (x il successive sviluppo) • Devono essere comprensibili senza essere spiegati

8. types of wireframes • Sketches • Rapidi e adatti al brainstorming • Buoni per feedback iniziali a stretto giro • LOW-FI wireframes • Diagrammi a blocchi • Ottimi per il flusso della pagina • HI_FI wireframes • Versione dettagliata • Commentati e descritti a parole • Descrizione delle azioni • Descrizione delle funzionalità (x il successive sviluppo) • Devono essere comprensibili senza essere spiegati Wireframes and Interaction Design Documents

9. types of wireframes • Sketches • Rapidi e adatti al brainstorming • Buoni per feedback iniziali a stretto giro • LOW-FI wireframes • Diagrammi a blocchi • Ottimi per il flusso della pagina • HI_FI wireframes • Versione dettagliata • Commentati e descritti a parole • Descrizione delle azioni • Descrizione delle funzionalità • Devono essere comprensibili senza essere spiegati Wireframes and Interaction Design Documents

10. Wireframes and Interaction Design Documents

11. DESIGN TIMELINE Wireframes and Interaction Design Documents

12. DESIGN TIMELINE Wireframes and Interaction Design Documents

13. Obiettividei wireframes • Individuare soluzioni a problemi di progettazione • Comunicare le scelte principali di progettazione • Fare in modo che tutti (sviluppatori, progettisti e committenti) si concentrino sugli stessi problemi Wireframes and Interaction Design Documents

14. Obiettividei wireframes • Differenti wireframes per obiettivi diversi: Flussi, user testing, revisioni dei contenuti, etc • Teniamo sempre presente quale è il nostro obiettivo! Wireframes and Interaction Design Documents

15. IDD : interaction design document Wireframes and Interaction Design Documents

16. Interaction design documents Interaction Design Document (IDD) Wireframes and Interaction Design Documents

17. what are they? E’ un documento contenente una collezione di wireframes ad alto livello descrivendo contenuti, azioni e scenari/interazioni dell’interfaccia.

18. Requisitiminimi – pagina del IDD • Titolodellatavola e descrizione • Numerodellatavola • Diagrammi e blocchicontenuti • Spazio per le annotazioni e le descrizioniprincipali Adobe.com Homepage – Not logged in P02 Wireframes and Interaction Design Documents

19. Commenti e descrizioni Wireframes and Interaction Design Documents

20. Wireframes and Interaction Design Documents

21. Struttura del IDD • Cover page • Tabelladeicontenuti • Descrizione del progetto • Wireframes • Componentiedelementispecifici vistineldettaglio Adobe.com Homepage – Not logged in P02 Descriptions & Scenarios Table of Contents Cover page Wireframes and Interaction Design Documents

22. Componentiedelementispecifici? Wireframes and Interaction Design Documents

23. ‘wireflows’ • Descrivono le funzionalità di una porzione del sito interattiva, che non puo essere descritta dalla staticità del wireframe classic • Descrivono lo scorrere dell’infromazione Wireframes and Interaction Design Documents

24. Utilizzatetestirealistici.. • Loremipsum dolor sit atem… • Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. • http://www.google.com http://www.google.comhttp://www.google.comhttp://www.google.com Questoperchenei wireframes è giusto concentrarsisullastruttura del sito, e sullefunzionalità, sulleinformazioniveicolati. Nellafase di progettazione del visual, iltestoinvecedovraesserefittizio

25. wireframes: DIMENTICATE il visual design • Dimenticare I colori! (A menoche non sianonecessari per descriverel’esperienzautente, come semaforirossi/Verdi) • Utilizzateformeilpiusemplicipossibili ‘boxes and arrows’ • Non usateangoliarrotondati, ombreggiture, decorazioni… Concentratevisull’interazione! Wireframes and Interaction Design Documents

26. Attentialleproporzioni • Punti ed elementi vettoriali possono avere dimensioni differenti…usate testi corti! Wireframes and Interaction Design Documents

27. Non reinventiamol’acquacalda! • Design patterns: “re-usable solution to a commonly occurring problem” • http://developer.yahoo.com/ypatterns/ • http://www.welie.com/ Wireframes and Interaction Design Documents

28. Design Patterns (cont) • Sono soluzioni a problemi specifici • Facilmente riutilizzabili e facili da comprendere • Fanno risparmiare un sacco di tempo! Wireframes and Interaction Design Documents

29. Dinamicitànei wireframe I wireframe sonoestremamente static Sonoradiografie di come saràilsito finite. Come modellareaspettidinamicidell’interfaccia? • Frame-by-frame wireframing • Lo-fi Animations • Wireframes with keyframes Wireframes and Interaction Design Documents

30. Frame-by-frame Wireframes and Interaction Design Documents

31. Wireframes with keyframes Wireframes and Interaction Design Documents

32. ‘3 keys to success’ • I wireframe sono un buon punto di partenza nella progettazione • Sono la base di un buon progetto finale • Permettono di concentrarsi tutti sugli stessi aspetti (designer, developer, project leader, etc) Wireframes and Interaction Design Documents

33. Quali software utilizzare? • Visio (OsX, Windows) • OmniGraffle (OsX) • InDesign (OsX, Windows) • Illustrator (OsX, Windows) • Powerpoint (OsX, Windows) • Impress (OsX, Windows, Linux) • Dia (OsX, Windows, Linux) • Balsamiq (OsX, Windows, Linux)

34. Esercizio (gruppi di 2 persone) Scegliete una pagina web Analizzate gli elementi della pagina Analizzate gli elementi interattivi e dinamici della pagina Provate a realizzare un low-fi wireframe della pagina Provate a realizzare un low-fi wirflow della parte dinamica Navigation tabs Drag & drop collapse