Wireframing & Prototyping

Question 1

Interaction designers strive to create meaningful relationships between ______ and the _____ and services that they use.

Answer 1

products and services.

Question 2

Which phase of the design thinking process is “Prototype” in?

Answer 2

Iteration

Question 3

What are wireframes?

Answer 3

Two-dimensional illustrations of a page’s interface that progress into prototypes.

Wireframes are used to plan the information hierarchy of a page, specifically how space should be allocated, where content will go, and what functionalities will be available.

This includes the positioning of menu items, headers, and buttons.

Question 4

Why is it important for you to create a wireframe?

Answer 4

They allow you to test your ideas with your users before spending copious amounts of time and capital developing them into full-fledged products.

Question 5

What is design mainly all about?

Answer 5

Communication

As designers, we communicate information and content visually so that people can accomplish critical tasks and achieve their goals.

Question 6

What are the benefits of sketching?

Answer 6

A sketch acknowledges the incomplete nature of ideas and leaves room for visual exploration and ideation.

1. Cheap: All you need is a pencil and a piece of paper.
2. Disposable: Sketches are an articulation of designers’ very first ideas that can be pushed aside to allow bigger and better ideas to surface.
3. Fast: Designers don’t have to wait to get to their computer or studio to start the ideation process.
4. Ambiguous: A focus on basic structure and functionality prevents designers from getting bogged down in details.
5. Accessible: While not everyone understands complex wireframes and visual design, sketches are universally understood, creating a shared understanding of ideas and concepts.
6. Versatile: Sketching can take many forms, from three-dimensional storyboards to two-dimensional wireframes.

Question 7

What should you think of a wireframe?

Answer 7

Like a blueprint for a house, except it represents a digital interactive system such as a website or mobile application.

Question 8

What don’t wireframes typically include?

Answer 8

Styling, graphics, or color

Question 9

Wireframes can be linked together to create what’s known as a _______.

Answer 9

prototype

Question 10

What is a prototype?

Answer 10

A sample version of a product that allows you to portray a specific function or design solution.

A set of linked wireframes that emulate the functionality of a website or app

Question 11

What is the goal in creating prototypes?

Answer 11

It is to learn as much as possible about how users interact witht he product or service you’re designing before developing the complete project.

The overall goal of prototypes is to be able to move forward quickly while feeling confident that your design decisions are human centered.

Depending on the maturity of the project, a prototype could be a set of hand-drawn wireframes that simulates a user flow or a fully functioning site.

Question 12

What distinguishes prototypes from wireframes?

Answer 12

Their element of interactivity.

This can range from moveable note cards and sticky notes on a pencil drawing to pointing and clicking with a touchpad or mouse.

Question 13

The overall goal of prototypes is to be able to move forward quickly while feeling confident that your design decisions are _____-______.

Answer 13

human-centered

Question 14

What is a design fidelity?

Answer 14

Refers to the level of detail of a wireframe or prototype.

Refers to not only to the visual design, but also the level of functionality or a wireframe or prototype.

Question 15

What is a low-fidelity wireframe?

Answer 15

Contains only very basic details and initial ideas

Question 16

Low-fidelity wireframes and prototypes allows designers to focus on what?

Answer 16

On fundamental structure and navigation over pefect visual design and complex features

Question 17

What are intro screens?

Answer 17

Designed to give users a visual introduction to a product and its functionality.

Question 18

When are intro screens helpful?

Answer 18

When testing a new project or prototype

Question 19

What are login screens?

Answer 19

Let users securely access your product or service.

They’re also a great opportunity to introduce your project, brand, and tone of voice.

Question 20

What is navigation?

Answer 20

Provides proper orientation, organizes information, and allows users to effectively move through the information space of your digital application.

Question 21

What are the two common patterns for mobile navigation.

Answer 21

Hierarchical navigation and flat navigation

Question 22

What is Hierarchical navigation?

Answer 22

It prompts users to make one distinct selection per screen, guiding them deeper into the hierarchy until they’ve reached their desired destination.

At this point, users must either retrace their steps or start over from the beginning, selecting different options to reach different destinations. For this reason, a “back” or “close” option is common in hierarchical navigation.

Question 23

What is Flat navigation?

Answer 23

Flat navigation allows users to switch between multiple content categories.

Question 24

What is commonly represented in a flat navigation?

Answer 24

Bottom navigation bar with three to five categories.

Question 25

What is Onboarding?

Answer 25

Onboarding is the part of your user’s journey that helps them understand how to use your app.

Onboarding means more than just swiping through intro screens when you download an app or sign up for a product for the first time.

Question 26

What does onboarding create for your users?

Answer 26

It creates instant engagement and helps set them up for success.

Question 27

Onboarding process may include what?

Answer 27

After a user has signed up for a product, the onboarding process may include step-by-step tutorials, guidance and support, and milestone celebrations when a user achieves their goals.

Question 28

What is rapid prototyping?

Answer 28

A method of quickly developing designs for a product in order to achieve validation with users.

Question 29

What is the goal of rapid prototyping?

Answer 29

To iterate quickly on prototypes, gradually integrating feedback and increasing the level of fidelity until you end up with a high-fidelity prototype.

Question 30

Wireframing involves creating a static visual representation of a system, while prototyping adds an element of _______.

Answer 30

interactivity

Question 31

Fidelity refers to the level of functionality and visual appearance of a project in relation to the ____ _____.

Answer 31

finished product

Question 32

What is the main goal of creating low-fidelity prototypes?

Answer 32

To test key functionality and features with users and catch major errors before perfecting a design

Question 33

What is time blocking?

Answer 33

A technique in which you try to complete a task in a predetermined short amount of time

Question 34

What is the purpose of design guidelines?

Answer 34

To define best practices for the usage, style, and behavior of commonly-used elements for websites and applications

Question 35

What is a wireframe?

Answer 35

A two-dimensional visual representation of a page’s interface

Question 36

You’ve been working hard to turn your travel journal into a blog. Currently, your travel blog has three distinct categories: Destinations, food recommendations, and local music. You want to keep things simple by showcasing these categories in the navigation bar; which of the following navigation structures would make the most sense for your blog at the moment?

Answer 36

Flat

Question 37

Your colleague on the design team has so many ideas for a viable design solution that he is feeling a bit overwhelmed and unsure where to start. What technique could he use to help him get “unstuck”?

Answer 37

Sketching