rapid design prototyping

Rapid Design Prototyping

https://www.linkedin.com/in/ayako-sayama

I’m Saaya. Nice to meet you

- Web and UI/UX Designer from Japan- Worked at Kayac.Inc- Learning mobile application coding at

Cornerstone, - Working remotely at startups.

- Passions besides work: - photography, adventures,

manga/anime, kung-fu

What is rapid prototyping?- quickly mocking up the future state of a system- making the core part- less important parts are skipped (until the launch)

* Prototyping can have different meanings.

- for designers: a prototype = what it looks like - for developers: a protoype = a system that works

Why do we need to do this?1. Eliminates Redundency

- reduces needless discussions- early feedbacks- reducing the need for changes during

development.

2. Fills the Gap of Communication

- “A picture is worth a thousand words.”

just start designing it.In other words, limit discussion time and

The Mockup Flow

Before you start designing anything..

DEFINE what you are making...

Q. How big is this project?

Q. What(which part) needs to be prototyped?

- You don’t need to prototype everything.- (Usually about 20% is the core part, which 80% of the energy should be spent.)

Q. What is the key concept of this app?

Q. What are the key features of this app?

...so you can count backwards.

The Design Mockup Flow

1UX flow

2Wireframing

3Design

Mapping the features in a page and how it connects to other pages.

The blueprint of the interface. Sketches of that give you rough ideas of component sizes and positions. includes Research

4Transition

The closest screen to the final product.Applies exact color, font, space and size to the wireframes.

Diagrams or Animated Screens that shows how the screens are connected.

1. UX flow charts

Low Fidelity High Fidelity

2. Wireframes

Skechted APP Wireframe

Web Wireframe

3. Design

game app design responsive website

4. Transition/Interaction

Fidelity Level

Low Fidelity High Fidelity

(accuracy; exactness: )

Prototype Example1:Whereabts

@Startup Weekend Vancouver (1.5 days to make a design mockup)

https://twitter.com/search?q=swvan&src=typd&lang=ja

Whereabts:

= A social app that introduces travel plans.

Tools I used

1. UX flow

40%-mostly discussion-pencil and paper

Tools I used

1. UX flow 2.Wireframing

40%-mostly discussion-pencil and paper

10%- adobe XD

Tools I used

1. UX flow 2.Wireframing 3.Design

40%-mostly discussion-pencil and paper

10%- adobe XD

25%-photoshop

Tools I used

1. UX flow 2.Wireframing 3.Design 4.Transition

40%-mostly discussion-pencil and paper

10%- adobe XD

25%-photoshop

25%- inVision

https://projects.invisionapp.com/share/P99EVLKYF#/screens

Prototype Example2:MyMentor

@ladyHackathon / 1day

http://ladyproblemshackathon.com/

https://prottapp.com/app/#/projects/5828998886e46547b233d41d

1. UX flow 2.Wireframing 3.Design 4.Transition

15% only discussion 30%pencil and paper

40%-photoshop

20%- prott

Cool Tools(fairly easy to learn)

1. Adobe XdGreat for 2.Wireframing 3.Design 4.Transition

http://www.adobe.com/products/experience-design.html

- Contains most features needed for UI/UX Designing- Great for Wireframing- Complex designing can tricky - It is free if you have adobe cloud account.- Otherwise, 1 month free

2. inVisionGreat for 4.Transition

- Very easy UI interface: no learning cost- Sharable- Smooth movements- Free for 1 project- You can sync with Photoshop- You can sync with your device realtime

https://projects.invisionapp.com/d/main#/console/9664057/206781594/preview

3. ProttGreat for 4.Transition

- Very easy UI interface: no learning cost- Sharable- Smooth movements- Free for 1 project- UX Flow is not free.- You can connect with Slack / Dropbox / Sketch- You can sync with your device-

1.UX FLOW

https://prottapp.com/app/

4. Xmind

http://www.xmind.net/share/

Great for 1.UX Flow

- Tons of Templates: You can download other people’s works as well- Super Easy to learn.- Core parts are Free - You can publish to jpg.

5. Sketch2.Wireframing 3.DesignGreat for

- You can make detailed design easily- has all the important features of Illustrator- Free for 1 month- otherwise $135- slicing/exporting pngs is super-easy

https://www.sketchapp.com/

Recap1. Rapid prototyping: Focuses only on making the core part2. Merits: Less redundent explaining, faster feedback3. Define:

a. What you are going to make. b. Count backwards on what time to spend where.

4. The mockup flow: A great process to understand the project you’re doing.5. Fidelity:

a. Higher fidelity lets you communicate with teammates better.b. But you might have to skip steps / make low fidelity leveled

diagrams, depending on the time you’re given. 6. Tools: Helpers to process your mockup-flow

Use ones appropriate & comfortable

Thanks for Listening

by Ayako Sayama (Saaya)

https://www.linkedin.com/in/ayako-sayamaayakosayama1987@gmail.com

Reference

1. Google Developers Design Sprint

https://developers.google.com/design-sprint/downloads/DesignSprint-NewFormFactors.pdf

2. Smashing Magazine: Design Better and Faster with Rapid Prototyping

https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/