32

Wireframes Rulez - Santangelo

Embed Size (px)

DESCRIPTION

Slides from Mirko Santangelo talk @ codemotion roma 2014

Citation preview

Page 1: Wireframes Rulez - Santangelo
Page 2: Wireframes Rulez - Santangelo

@mirkosantangeloHello World

visual designer

Page 3: Wireframes Rulez - Santangelo

photocredit by

brief

Design

DEVELOP

DEPLOY

Page 4: Wireframes Rulez - Santangelo

…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

Page 5: Wireframes Rulez - Santangelo

prototype

wireframemockup

COST FIDELITY

L

H

L

H

sketch

Page 6: Wireframes Rulez - Santangelo

Tell a Story

Page 7: Wireframes Rulez - Santangelo
Page 8: Wireframes Rulez - Santangelo

modulo

Page 9: Wireframes Rulez - Santangelo
Page 10: Wireframes Rulez - Santangelo

modulo

componenti

Page 11: Wireframes Rulez - Santangelo
Page 12: Wireframes Rulez - Santangelo

modulo

componenti

contenuti

Page 13: Wireframes Rulez - Santangelo
Page 14: Wireframes Rulez - Santangelo

Costruire un sistema, non screenshot.

Page 15: Wireframes Rulez - Santangelo
Page 16: Wireframes Rulez - Santangelo

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

Page 17: Wireframes Rulez - Santangelo

I wireframes sono degli strumenti di comunicazione.

Page 18: Wireframes Rulez - Santangelo

DESIGNER DEVELOPERVS

Page 19: Wireframes Rulez - Santangelo

CLICK

Page 20: Wireframes Rulez - Santangelo
Page 21: Wireframes Rulez - Santangelo

definire il flusso

Page 22: Wireframes Rulez - Santangelo

best practices

non devono essere esteticamente perfetti

for wireframes

Page 23: Wireframes Rulez - Santangelo

best practices

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

for wireframes

Page 24: Wireframes Rulez - Santangelo

best practices

impiegati nei team come documentazione per feedback e analisi

for wireframes

Page 25: Wireframes Rulez - Santangelo

how to

Balsamiq Mockups Omnigraffle Sketch

KeynoteIllustrator Axure

Page 26: Wireframes Rulez - Santangelo

how to

Pop AppInVision App

Page 27: Wireframes Rulez - Santangelo
Page 28: Wireframes Rulez - Santangelo

Wireframes e UX?

Page 29: Wireframes Rulez - Santangelo

Interazioni Complesse

Emotional Design

Responsive Web

Page 30: Wireframes Rulez - Santangelo
Page 31: Wireframes Rulez - Santangelo
Page 32: Wireframes Rulez - Santangelo

Grazie!

@mirkosantangelo