wireframes?

wireframes?

WIREFRAMES AND INTERACTION DESIGN DOCUMENTS

1

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

Questi non sono esempi corretti di wireframing

wireframes?

Rappresentazione dei contenuti

gerarchia

relazioni

Disposizione dei contenuti

Come essi sono rappresentati

La loro funzione

Interazione con I contenuti

5

• 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

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

Tipologie di wireframes

Sketches R

apidi e adatti al brainstorming B

uoni per feedback iniziali a stretto giro

LOW-FI wireframes D

iagrammi a blocchi O

ttimi per il flusso della pagina

HI_FI wireframes V

ersione dettagliata C

ommentati e descritti a parole D

escrizione delle azioni D

escrizione delle funzionalità (x il successive sviluppo) D

evono essere comprensibili senza essere spiegati

7

types of wireframes

Sketches R



LOW-FI wireframes D



HI_FI wireframes V




escrizione delle funzionalità (x il successive sviluppo) D

evono essere comprensibili senza essere spiegatiWIREFRAMES AND INTERACTION DESIGN DOCUMENTS

8

types of wireframes

Sketches R



LOW-FI wireframes D



HI_FI wireframes V




escrizione delle funzionalità D

evono essere comprensibili senza essere spiegati


9


10

DESIGN TIMELINE


11

DESIGN TIMELINE


12

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


13

Obiettivi dei wireframes

Differenti wireframes per obiettivi diversi: Flussi, user testing, revisioni dei contenuti, etc

Teniamo sempre presente quale è il nostro obiettivo!


14

IDD : interaction design document

Interaction design documents


16

Interaction Design Document (IDD)

what are they?

17

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

Requisiti minimi – pagina del IDD1. Titolo della tavola e descrizione

2. Numero della tavola

3. Diagrammi e blocchi contenuti

4. Spazio per le annotazioni e

le descrizioni principali


18

Adobe.com Homepage – Not logged in P02

Commenti e descrizioni


19


20

Cover page

Tabella dei contenuti

Descrizione del progetto

Wireframes

Componenti ed elementi specifici

visti nel dettaglio

Struttura del IDD


21

Cover pageCover page

Table of ContentsTable of Contents

Descriptions & ScenariosDescriptions & ScenariosAdobe.com Homepage – Not logged in P02

Componenti ed elementi specifici?


22

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’


23

Lorem ipsum 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.com http://www.google.com http://www.google.com

Questo perche nei wireframes è giusto concentrarsi sulla struttura del sito, e sulle funzionalità, sulle informazioni veicolati.

Nella fase di progettazione del visual, il testo invece dovra essere fittizio

Utilizzate testi realistici..

24

http://www.google.com/




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


25

Concentratevi

sull’interazione!Concentratevi

sull’interazione!

Punti ed elementi vettoriali possono avere dimensioni differenti…usate testi corti!

Attenti alle proporzioni


26

Design patterns: “re-usable solution to a commonly occurring problem”

http://developer.yahoo.com/ypatterns/

http://www.welie.com/

Non reinventiamo l’acqua calda!


27

http://developer.yahoo.com/ypatterns/

http://www.welie.com/

Sono soluzioni a problemi specifici

Facilmente riutilizzabili e facili da comprendere

Fanno risparmiare un sacco di tempo!

Design Patterns (cont)


28

I wireframe sono estremamente static

Sono radiografie di come sarà il sito finite.

Come modellare aspetti dinamici dell’interfaccia?

Frame-by-frame wireframing

Lo-fi Animations

Wireframes with keyframes

Dinamicità nei wireframe


29


30

Frame-by-frame


31

Wireframes with keyframes

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’


32

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?

Esercizio (gruppi di 2 persone)

1. Scegliete una pagina web

2. Analizzate gli elementi della pagina3. 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

wireframes?

Documents

Transcript of wireframes?