Va 06rapidprototyping

20
rapid prototyping kelly ludwig, assistant professor kcai graphic design department (excerpted from http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/) rapid prototyping

description

Rapid prototyping

Transcript of Va 06rapidprototyping

Page 1: Va 06rapidprototyping

rapid prototyping

kelly ludwig, assistant professor kcai graphic design department

(excerpted from http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/)

rapid prototyping

Page 2: Va 06rapidprototyping

1. Examine

2. Understand

3. Ideate (brainstorming, thumbnails, rapid prototyping)

4. Experiment

5. Distill/Implement

design process

Page 3: Va 06rapidprototyping

• What will get your audience to reconsider or change their position?

• What resources are available to address the change? • What are your modes of appeal? • What role will the information you use play in this?

How are you going to do it?

Page 4: Va 06rapidprototyping

• What role will the information you use play in this? • What technologies can you use to deliver the campaign?

• What will capture your audience? • How will the design of the info support the content?

• What will be the campaign’s communication power?

How will you implement it?

Page 5: Va 06rapidprototyping

Rapid prototyping & continuous beta • Try something out • Make some things • Fail cheap and fast • Exhaust those ideas and prototype like crazy • Get feedback from audience and test

04 Experiment

Page 6: Va 06rapidprototyping

what is rapid prototyping?

Page 7: Va 06rapidprototyping

The process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers.

rapid prototyping

Page 8: Va 06rapidprototyping

It is NOT meant to become a fully functioning solution, but to help create the experience of the final product.

It is to show what the essence to the design will be without prototyping each component

rapid prototyping

The word prototype often conjures images of a coded, fully functioning version of an application or interface. Rapid prototypes are not intended to evolve into fully functional solutions, but are meant to help users visualize and craft the user experience of the final product. With that in mind, when scoping a prototype, decide on a few key issues before beginning any prototyping work.

Page 9: Va 06rapidprototyping

Start with a broad and wide plan, THEN deep dive into different areas of the solution.

Don’t get hung up on the details at this stage.

Build different scenarios

iterations

Page 10: Va 06rapidprototyping

Fidelity refers to the level your design is fleshed out.

Your prototypes should start with low fidelity and they you can crank up the volume.

fidelity

Depending on the various stage of your design process you will select the fidelity for each

Page 11: Va 06rapidprototyping

If you go high fidelity too soon, you and your audience will be too focused on the design and not on the content

As your prototyping progresses, you will increase the visual fidelity such as elements of style, color branding, etc.

visual fidelity

Page 12: Va 06rapidprototyping

If you are going to have an interactive component, start with showing how your solution will work (static) then progress your iterations by adding functionality functional (interactive)

functional fidelity

This is less of a distraction to your audience, and allows you to work out the overall solution

Page 13: Va 06rapidprototyping

Greeking is useful in early stages, but as you refine the prototype you will refine the content to reveal

functional fidelity

Page 14: Va 06rapidprototyping

Pencil sketches to create rough mock ups of design approaches for feedback.

Static with low visual and content fidelity

Lends itself well to rapid iteration and rapid prototyping

Prototyping spectrum — low fidelity

Page 15: Va 06rapidprototyping

Computer is now involved.

Wireframes, task flow and scenarios are being created that look more formal and refined.

Stage 1: Consider b/w or sketch-style software to keep the audience aware that the design is still in draft stage

Balsamiq https://balsamiq.com

Stage 2: Give the prototype a higher visual fidelity (photoshop/illustrator) to focus on visual look and feel

Prototyping spectrum — medium fidelity

perception is everything. Clients/audience are very literal

stage 2: add color, logo, type, imagery, etc.

Page 16: Va 06rapidprototyping

Often mistook for the final product.

time-intensive

functional, application simulation

Prototyping spectrum — high fidelity

If you are having an interactive component in your project, and not planning to build it out, this would be your final deliverable.

Page 17: Va 06rapidprototyping

dos and don’ts

Page 18: Va 06rapidprototyping

• Collaborate with your stakeholders while rapid prototyping for valuable feedback and their sense of ownership

• Begin every review session with a disclaimer “This is just a mock-up, prototype, etc, not the actual solution.”

do

Page 19: Va 06rapidprototyping

• Don’t show features or functionality that cannot be implemented

• Don’t begin a review with your stakeholders without clear guidelines for feedback. • Is it meeting your objectives? • Does it reflect your mission? • Does it reflect your audience’s needs as we discussed

in the research? • Don’t ask “Do you like it?”

don’t

otherwise they will get hung up on the color

do you like it? gives up your status as an “expert”

Page 20: Va 06rapidprototyping

• Design better faster with rapid prototyping http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/