Prototyping

Question 1

Wireframe

Answer 1

wireframe is a static, visual representation of an interface (just separate pages, no flow)

Question 2

prototype

Answer 2

prototype can be a combination of wireframes and portrays specific interactivity between functional elements rather than merely the visual structure of an interface.

Question 3

design fidelity

Answer 3

design fidelity refers to how closely the wireframe, prototype, mockup, etc. matches the look-and-feel of the final system. Throughout the design process, the level of fidelity is continuously modified and increased based on user feedback, research, and design iterations.

Question 4

Low-fidelity prototype

Answer 4

low-fidelity prototype is meant to highlight only the high-level functionality of a design. It purposefully glosses over the intimate details of a design such as color, spacing and imagery and is usually hand-sketched in black and white or grayscale.

Question 5

Mid-fidelity

Answer 5

mid-fidelity prototypes portray a bit more detail than low-fidelity prototypes, but they’re not as polished as high-fidelity prototypes. They’re usually created using software such as Adobe XD, Figma, UXPin, or Photoshop. The advantages of a mid-fidelity wireframe or prototype are:

It’s digital, so it can easily be shared with others. Many wireframing and prototyping programs have built-in sharing tools to simplify this exchange.
It’s still very easy to make large, rapid changes to a design.

Question 6

high-fidelity prototypes

Answer 6

high-fidelity prototypes take much longer to create as the goal is to flesh out every single detail of a design. They should look and feel like a live system in terms of graphics, spacing, and layout and closely resemble the finished product.

Question 7

Stencil

Answer 7

A stencil is basically a shell that represents a specific platform. Drawing your designs within a shell makes it much easier to visualize how your interactions will feel on the device.

Question 8

rapid prototyping

Answer 8

rapid prototyping, which involves quickly building on existing prototypes or mockups to simulate the future state of a system or application.

Steps

Prototype: Convert user flows, stories, and sketches into a prototype that portrays a specific function or design solution.
Review: Share the prototype with any project stakeholders. You might even share the prototype with users to get their feedback.
Refine: Decide what you should change to improve the current prototype. At this stage, you’ll also decide whether it’s necessary to level up to higher fidelity designs or prototypes in order to portray the finer details of the program.