What is a prototype? Design Thinking + 5-Stage Process Design/ - - PowerPoint PPT Presentation

▶
what is a prototype design thinking 5 stage process
SMART_READER_LITE
LIVE PREVIEW

What is a prototype? Design Thinking + 5-Stage Process Design/ - - PowerPoint PPT Presentation

Dec 04, 2023 478 likes •886 views

Quick Review What is a prototype? Design Thinking + 5-Stage Process Design/ Empathize Define Ideate Test Prototype Design Thinking + 5-Stage Process Design/ Empathize Define Ideate Test Prototype What is a prototype? A prototype is

slide-1
SLIDE 1
slide-2
SLIDE 2

What is a prototype?

Quick Review

slide-3
SLIDE 3

Empathize Define Ideate Design/ Prototype Test

Design Thinking + 5-Stage Process

slide-4
SLIDE 4

Empathize Define Ideate Design/ Prototype Test

Design Thinking + 5-Stage Process

slide-5
SLIDE 5

A prototype is a draft version of a product that allows you to explore your ideas and show the intention behind a feature or the overall design concept to users before investing time and money into development.

https://www.usability.gov/how-to-and-tools/methods/ prototyping.html

What is a prototype?

slide-6
SLIDE 6

Why Prototype?

slide-7
SLIDE 7

Why do I have to prototype?

→ Get your ideas down → VALIDATE your ideas → Conduct user/usability testing before building out your actual product → Save on time + costs that could be spent FIXING things you could have caught by testing your prototype

slide-8
SLIDE 8

Prototyping

Methods of

slide-9
SLIDE 9

Fidelities

a.k.a. levels

slide-10
SLIDE 10

Low Mid High

3 Fidelities

slide-11
SLIDE 11

Low-Fidelity Prototyping

PROS CONS → Document ideas early → Quick to make → Easy to iterate → Get feedback earlier → Users may get caught up in the lack of completeness → Harder to communicate ideas

slide-12
SLIDE 12

Low-Fidelity Prototyping

slide-13
SLIDE 13

Low-Fidelity Prototyping

slide-14
SLIDE 14

Low-Fidelity Tools

Pen + Paper Marvel

slide-15
SLIDE 15

Low-Fidelity Marvel

slide-16
SLIDE 16

Mid-Fidelity Prototyping

PROS CONS → Quick & cheap(er than higher-fidelity prototyping) → Easy to test → Translated in digital environment → Easy to iterate → Still note exactly like the final product → Interactions may be limited

slide-17
SLIDE 17

Mid-Fidelity

Tools Sketch Invision Figma Adobe XD

slide-18
SLIDE 18

Mid-Fidelity

Tools Sketch Invision Figma Adobe XD

slide-19
SLIDE 19

High-Fidelity Prototyping

PROS CONS → Closest rendering of final product → Easier to test → Captures your ideal visual styling → Can be used to communicate with developers → Higher-learning curve → Hard to iterate on (should be the last version on an iterative cycle) → Difficult to make pixel-perfect

slide-20
SLIDE 20

High-Fidelity Tools

Framer Origami Principle Code

slide-21
SLIDE 21

Prototyping

Before the

slide-22
SLIDE 22

Empathize Define Ideate Design/ Prototype Test

Design Thinking + 5-Stage Process

slide-23
SLIDE 23

Empathize Define Ideate Design/ Prototype Test

Design Thinking + 5-Stage Process

slide-24
SLIDE 24

UX Flows

Plan out the architecture of your website. Outline potential pages you need.

slide-25
SLIDE 25

Site Map

→ Plan out the architecture of your website and/or mobile app. → Outline potential pages you need.

slide-26
SLIDE 26

Wireframing

→ The “skeleton” of your mockup and prototype. → Takes into account user needs and user journeys

slide-27
SLIDE 27

Prototyping

→ Turning your collection

  • f static

mockups/wireframes into life

slide-28
SLIDE 28

Prototyping

Figma Example

slide-29
SLIDE 29

Prototyping (on Figma)

Dive into

slide-30
SLIDE 30

Making a Connection

slide-31
SLIDE 31

Transitions

→ Make transitions feel more realistics to the viewer → Do so by linking frames to each

  • ther using transition behaviors
slide-32
SLIDE 32

Transitions

→ 9 interaction types ( on top, on drag, hovering…) → 8 animation types (instant, dissolve, move, push) Different Types

slide-33
SLIDE 33

Transitions

<<< What transition does this look like? Example

slide-34
SLIDE 34

Transitions

Answer: Move-in transition → Best used for:

  • Modal Pages
  • Overlaid modal dialogs

Example

slide-35
SLIDE 35

Scrolling

→ Relevant when you have an

  • verflow of content

→ Different Types:

  • Vertical scrolling
  • Horizontal scrolling
  • Both (drag)

→ Need to place elements in a frame and define boundaries

slide-36
SLIDE 36

Overlay

→ Created by linking a item on the screen to an external frame. →Best used for…

  • Filters
  • Pop-ups
  • Modals
slide-37
SLIDE 37

On Drag

→ Great for specific microinteractions. → Do this by linking an item(frame, group, shape) to another item and defining the transition.

slide-38
SLIDE 38

Figma Mirror

For better testing

slide-39
SLIDE 39

Desktop vs. App View

→ Figma Mirror previews your mobile designs on a real device to see how it looks → Connect to Figma account & select the frame you want to start with