Sketching & Prototyping Techniques for Rapid Iterative Design - - PowerPoint PPT Presentation

▶
sketching prototyping
SMART_READER_LITE
LIVE PREVIEW

Sketching & Prototyping Techniques for Rapid Iterative Design - - PowerPoint PPT Presentation

May 13, 2023 131 likes •544 views

Sketching & Prototyping Techniques for Rapid Iterative Design Web2.0 Expo 2009 Prototypes are artifacts. These are things developed along the way. Prototyping is a process. Prototyping is a process that is bigger than prototypes.

slide-1
SLIDE 1

Sketching & Prototyping

Techniques for Rapid Iterative Design Web2.0 Expo 2009

slide-2
SLIDE 2

Prototypes are artifacts.

  • These are things developed along the way.
slide-3
SLIDE 3

Prototyping is a process.

  • Prototyping is a process that is bigger than prototypes.
  • Sketching, prototyping, validation.
slide-4
SLIDE 4 http://www.flickr.com/photos/98736785@N00/1589941777/

Inspired by the design studio

slide-5
SLIDE 5

6-8-5

slide-6
SLIDE 6 !"#$%&'$("#%)*!+* ,,
  • ./01*2.0345.6
,, #789#:';<'==%>'?#:=@ABC< ,,
  • The 8UP template
slide-7
SLIDE 7 !"#$%&'$("#%)*!+* ,,
  • ./01*2.0345.6
,, #789#:';<'==%>'?#:=@ABC< ,,
  • The full page template
slide-8
SLIDE 8 !"#$%&'$("#%)*!+* ,,
  • ./01*2.0345.6
,, #789#:';<'==%>'?#:=@ABC< ,,
slide-9
SLIDE 9
  • 1. Sketch out your ideas
slide-10
SLIDE 10

Lots of ideas

slide-11
SLIDE 11
  • 2. Present to team
slide-12
SLIDE 12
  • 3. Critique with team
slide-13
SLIDE 13
  • 4. Bring it to life
slide-14
SLIDE 14

ITERATE & REPEAT

slide-15
SLIDE 15

! " # $ % " & ' ( ) * & * & + ( '

! " # $ % & ' ( # ! # ) $ % ( * $ * + , # ! " # $ % & ' ( # ! # ) $ % ( * $ * + , #
slide-16
SLIDE 16

Why prototype?

slide-17
SLIDE 17

Reasons to Prototype

➡ Work through a design ➡ Communicate concepts ➡ Sell an idea ➡ Gauge technical feasibility ➡ Test concepts with customers

slide-18
SLIDE 18

What happens if you don’t...

slide-19
SLIDE 19
  • You’ll end up with domino efgect
  • Unwanted, unused, and poorly designed/developed features
slide-20
SLIDE 20
  • Or really frustrated customers
slide-21
SLIDE 21

8 Guiding Principles

slide-22
SLIDE 22

Know your audience and

slide-23
SLIDE 23

Plan a little. Prototype the

slide-24
SLIDE 24

Set expectations.

slide-25
SLIDE 25

You CAN sketch.

slide-26
SLIDE 26

It’s not the Mona Lisa.

slide-27
SLIDE 27

If you can’t make it fake it.

slide-28
SLIDE 28

Prototype only what you

slide-29
SLIDE 29

Let’s talk paper prototyping

slide-30
SLIDE 30

Paper Prototyping Pros

➡ Fast. Cheap. Easy. ➡ Manipulate on the fly. ➡ No computer necessary. ➡ Not bound by SW/HW limitations. ➡ Mobile and gestural interfaces. ➡ Collaboration.

slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33

Paper Prototyping Cons

➡ Imagination required. ➡ Can get messy. ➡ Some interactions can be diffjcult. ➡ Distributed teams. ➡ The visual CEO.

slide-34
SLIDE 34

Techniques

➡ Handlebars ➡ Transparencies ➡ Dental floss

slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38

Let’s talk Fireworks

Great tool for end to end design: wireframes, visual design, prototyping

slide-39
SLIDE 39
slide-40
SLIDE 40

Prototyping Book

➡ rosenfeldmedia.com/books/

prototyping

➡ toddwarfel.com ➡ @zakiwarfel