La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Wireframes? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 1.

Presentazioni simili


Presentazione sul tema: "Wireframes? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 1."— Transcript della presentazione:

1 wireframes? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 1

2 2

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 wireframe puo 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 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 4 Questi non sono esempi corretti di wireframing

5 wireframes? Rappresentazione dei contenuti gerarchia relazioni Disposizione dei contenuti Come essi sono rappresentati La loro funzione Interazione con I contenuti 5 wireframes? 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? 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. 6 wireframes?

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 7

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 8

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 9

10 10

11 DESIGN TIMELINE WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 11

12 DESIGN TIMELINE WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 12

13 Obiettivi dei 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 13

14 Il wireframe è un modello WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 14

15 Obiettivi dei 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

16 IDD : interaction design document WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 16

17 Interaction design documents WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 17 Interaction Design Document (IDD)

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

19 - Cover page e Tabella dei contenuti (indice) - Descrizione del progetto (riassunto del progetto, dei goal e degli obbiettivi ) - User personas - Alberatura del sito - Wireframes - Componenti ed elementi specifici visti nel dettaglio Struttura del IDD WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 19 Cover page Table of Contents Descriptions & Scenarios Adobe.com Homepage – Not logged inP02

20 E’ una breve intro al progetto, che ne descrive I tratti principali e aiuta il lettore dell’IDD a comprendere quali sono I goal del sito web. Descrizione del progetto goal e obiettivi WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 20 Descriptions & Scenarios

21 User personas WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 21

22 Viene descritta la possibile alberatura del sito web, per capire quante e quali pagine andranno progettate e verificate. Lo si esplica attraverso una descrizione testuale o meglio ancora, un grafo Alberatura del sito WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 22

23 Alberatura WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 23

24 Requisiti minimi – pagina del IDD 1.Titolo della tavola e descrizione 2.Numero della tavola 3.Diagrammi e blocchi contenuti 4.Spazio per le annotazioni e le descrizioni principali WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 24 Adobe.com Homepage – Not logged inP02

25 Commenti e descrizioni WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 25

26 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 26

27 Componenti ed elementi specifici? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 27

28 Descrivono le funzionalità di una porzione del sito interattiva, che non puo essere descritta dalla staticità del wireframe classic Descrivono lo scorrere dell’infromazione ‘wireflows’ WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 28

29 Dimenticare I colori! ( A meno che non siano necessari per descrivere l’esperienza utente, come semafori rossi/Verdi) Utilizzate forme il piu semplici possibili ‘boxes and arrows’ Non usate angoli arrotondati, ombreggiture, decorazioni… wireframes: DIMENTICATE il visual design WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 29 Concentratevi sull’interazione!

30 Design patterns: “re-usable solution to a commonly occurring problem” Non reinventiamo l’acqua calda! WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 30

31 Sono soluzioni a problemi specifici Facilmente riutilizzabili e facili da comprendere Fanno risparmiare un sacco di tempo! Design Patterns (cont) WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 31

32 I wireframe sono estremamente statici Sono sostanzialmente delle radiografie di come sarà il sito finito dal punto di vista strutturale e comunicativo. Come modellare aspetti dinamici dell’interfaccia? Frame-by-frame wireframing Lo-fi Animations Wireframes with keyframes Dinamicità nei wireframe WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 32

33 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 33 Frame-by-frame

34 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 34 Wireframes with keyframes

35 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) ‘3 keys to success’ WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 35

36 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) Quali software utilizzare?

37 Ad esempio potete usare anche illustrator WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 37

38 MA anche a mano libera WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 38

39 Alcuni esempi di wireframe WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 39

40 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 40

41 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 41

42 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 42

43 Lorem ipsum dolor sit atem… Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Questo perche nei wireframes è giusto in prima battuta concentrarsi sulla struttura del sito, e sulle funzionalità. Solo nei wireframes hi-fi potete usare testi verosimili. Nella fase di progettazione del visual, il testo dovra essere fittizio testi nei wireframes realistici..o fittizi? 43

44 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 44 Goals User person as Sketch ing Albera tura Low-fi wirefra mes Hi-fi wirefra mes Visual & graphi cs design Codin g

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


Scaricare ppt "Wireframes? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 1."

Presentazioni simili


Annunci Google