wireframes rulez - santangelo

@mirkosantangeloHello World

visual designer

photocredit by

brief

Design

DEVELOP

DEPLOY

…bozza strutturale di un sito, applicativo web o software. I wireframe sono estremamente utili in quanto permettono di individuare subito le dinamiche del progetto in termini di usabilità ed utilizzo pratico, i punti critici e quelli che richiedono uno sviluppo più accurato o miglioramenti….

Wikipedia

prototype

wireframemockup

COST FIDELITY

L

H

L

H

sketch

Tell a Story

modulo

modulo

componenti

modulo

componenti

contenuti

Costruire un sistema, non screenshot.

4EADE1

Blu Ceruleo

79BA63

Cinabro Chiaro

F7B134

Giallo Indiano

EA5C47

Vermiglione Chiaro

0-1-2 1 2 3 4 5

Stupore, Sorpresa

Ammirazione, Fiducia

Gioia, Serenità

Fierezza, Orgoglio

4EADE1

Blu Ceruleo

-2

-1

0

1

2

3

4

5

234E66

347699

4EADE1

63C9FF

74CEFF

84D4FF

A5E0FF

CCEDFF

79BA63

Cinabro Chiaro

-2

-1

0

1

2

3

4

5

426636

649951

79BA63

70DB42

83EB46

8EF760

A5FF82

DBFFD1

F7B134

Giallo Indiano

-2

-1

0

1

2

3

4

5

664814

996E20

F7B134

FFC142

FFCA5F

FFD37B

FFE5B0

FFEDCA

EA5C47

Vermiglione Chiaro

-2

-1

0

1

2

3

4

5

66281F

993B2E

EA5C47

FF765E

FF8A76

FF9D8D

FFC3B9

FFD6CF

4EADE1

Blu Ceruleo

-2 -1 0 1 2 3 4 5

-2 -1 0 1 2 3 4 5

79BA63

Cinabro Chiaro

-2 -1 0 1 2 3 4 5

F7B134

Giallo Indiano

-2 -1 0 1 2 3 4 5

EA5C47

Vermiglione Chiaro

I wireframes sono degli strumenti di comunicazione.

DESIGNER DEVELOPERVS

CLICK

definire il flusso

best practices

non devono essere esteticamente perfetti

for wireframes

best practices

comunicare le scelte sull’organizzazione, priorità e navigazione dei contenuti

for wireframes

best practices

impiegati nei team come documentazione per feedback e analisi

for wireframes

how to

Balsamiq Mockups Omnigraffle Sketch

KeynoteIllustrator Axure

how to

Pop AppInVision App

Wireframes e UX?

Interazioni Complesse

Emotional Design

Responsive Web

Grazie!

@mirkosantangelo