Wireframe Notes
Wireframe Notes
>>True
>>true
Mockups exhibit __________.
>>high fidelity
Are word processing software such as Microsoft Word and Apple Pages
used for creating wireframes?
>>Yes
Defining the information hierarchy is not important for working out the
possible options for arranging the content on a page.
>>false
Apart from basic wireframes, what are the other type of wireframes that
are available?
>> all
What is Wireframing?
Wireframing is a process to design an application at the structural level
using wireframes.
They are also the visual representations of an interface, which are used to convey the
application details to everyone evenly.
Anyone who is involved in the product can use wireframes. Wireframes are typically
used by
Interaction designers
Programmers
Graphic designers
User experience designers
Product managers
Information architects
Business analysts
Structure – How will the different parts of the application be put together?
Content – What content will be shown on the application?
Informational hierarchy – How is this content displayed and organized?
Functionality – How will the application's interface work?
Behavior – How will the application behave and interact with the user?
Wireframes are not intended to represent the graphic elements, visual design, or
communicate the identity or brand.
Advantages of Wireframing
Offers an early visual that is useful for reviewing with the client.
Can be reviewed as an initial feedback mechanism for prototype usability testing.
Ensures the functionality and page content are positioned rightly based on
business and user requirements.
Can be changed easily than concept designs.
Offers confidence to the UI designer, once users and the client approve the
wireframes.
Acts as a good dialogue among the project team members to agree on the scope
and vision of the project.
From the flowchart seen in the previous card, you can notice the following traits.
Prototypes are
o dynamic
o clickable
o interactive
Wireframes are
o static,
o exhibit low-fidelity
Mockups are
o static,
o exhibit high-fidelity
Note: Design fidelity is the level of functionality and details incorporated into a prototype. Fidelity is
of three types: low, mid, and high.
A clickable prototype,
####Low-Fidelity Prototype
When numerous pages of wireframes are made as clickable, these wireframes can
be converted as a prototype. This is termed as a low-fidelity prototype.
Wireframe Styles
Here the most commonly used analog/non-digital tools and mediums used for wireframing.
Sketching
Blackboarding and Whiteboarding
Stenciling
Paper Cutouts/Paper Prototyping
Note: There are many more tools available for use and you can choose the best one that
suits you.
Here the most commonly used digital tools and mediums used for wireframing.
Note: There are many more tools available for use and you can choose the best one that
suits you.
Block Diagrams
Grey Boxes
High-Fidelity Text
High-Fidelity Color
High-Fidelity Media
High-Fidelity Interactions
Additional Details
After choosing the right tools and mediums, and the appropriate level of detail, you have to
include the finishing touches. Few wireframe details may require description and display
interactions. Sometimes, many wireframes may be joined together to display the user
flows.
Basic Wireframes
Annotated Wireframes
Wireframes With User Flows
Interactive and Click-Through Wireframes
Standalone Libraries
Web and Mobile
I Love Wireframes
Wireframe Showcase
Web Without Words
Wireframes Magazine
Patterntap by Zurb
UX Archive
Behance
Dribbble
Google Image Search
Pinterest
Web Only
UI Patterns
Mobile Only
Pttrns
Android App Patterns
Inspired UI
Mobile Patterns
MOObileFrames
ow-fidelity
When numerous mockup pages are made as clickable, these mockups can be
converted as a prototype. This is known as a ________ prototype.
Low-fidelity wrong