3.7: Mid-Fidelity Wireframes & Prototyping Flashcards
What is the goal of a wireframe?
To get an overall idea of how a design will be laid out without having to spend time deciding on colors, typography, iconography, and other small visual details.
What can be low-, mid-, or high-fidelity, and show off specific interactions within an application?
Prototypes
What are static design drafts used to structure information, visualize content, and demonstrate the basic functionalities of a design? In other words, they’re fully fleshed-out design drafts.
Mockups
A mockup, is a finalized design usually created by the…
UI designer
Neither mockups nor wireframes are interactive, a series of wireframes or mockups can be joined together to create an…
interactive prototype
What refers to the level of detail within a design?
Fidelity
A low-fidelity wireframe can only communicate…
basic user flow and user experiences
Which type of wireframe relies on precise placement, spacing, and oftentimes actual copy to portray the look and feel of a design?
High-fidelity wireframes
What are the benefits of a high-fidelity wireframe?
- Show a lot more detail, which makes it easier to produce a mockup
- Provide a preview of what real UI elements might look like
- Effectively communicate functionality to developers and other stakeholders
What type of wireframe is created once basic functionality has been discussed and agreed upon?
Mid-fidelity wireframes
The main difference between wireframes and mockups is…
a. Their level of coding
b. Their level of testing
c. Their level of interaction
d. Their level of fidelity
d. Their level of fidelity
High-fidelity wireframes rely on what three things to portray the look and feel of a design?
a. Precise placement, spacing, and actual copy
b. Animated visuals, colors, and grid-structures
c. Colors, sizing, and visual effects
d. User interactions, frontend coding, and stylized visuals
a. Precise placement, spacing, and actual copy
Fill in the blank: ____ wireframes show a great deal of detail, provide a preview of the real UI elements that will be implemented, and effectively communicate functionality to developers and stakeholders.
a. Mid-fidelity
b. Ultra-fidelity
c. Low-fidelity
d. High-fidelity
d. High-fidelity
You’ve just begun your new UX job in a small start-up, and your team consists of two senior UX designers and a UI designer. As you’re working through your first set of wireframes for an upcoming project, you notice that your teammates consistently call your wireframes “prototypes,” which leads to confusion on your part more than once. What’s your best course of action?
Be flexible and adjust to your team’s interpretation of the terms
One disadvantage in using design software such as Sketch and Photoshop to create wireframes is…
They don’t come with generic, pre-made UI elements
