Skip to content
IND- 407 App Development
IND 407 - App Development
More
Share
Explore
Week by Week

icon picker
Week 3

Intro to Wireframes
⁠
This link can't be embedded.
⁠
⁠

The importance of Wireframes

A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.
Wireframes serve multiple purposes by helping to:
Connect the site's information architecture to its visual design by showing paths between pages.
Clarify consistent ways for displaying particular types of information on the user interface.
Determine intended functionality in the interface.
Prioritize content through the determination of how much space to allocate to a given item and where that item is located

Keep it simple!
Do not use colors. If you would typically use color to distinguish items, instead rely on various gray tones to communicate the differences.
Do not use images. Images distract from the task at hand. To indicate where you intend to place an image and its size, you can instead use a rectangular box sized to dimension with an “x” through it.
Use only one generic font. Typography should not be a part of the wireframing discussion. Within the wireframes, however, you may still resize the font to indicate various headers and changes in the hierarchy of the text information on the page.

Getting Started with
@MockFlow
⁠

⁠
Loading…
⁠
PDF File to download ​
Sign-Up for Mockflow.pdf
736.1 kB
⁠
⁠

Assignment

Build the Instagram homepage as a wireframe in
@MockFlow
⁠

Name
Link to Assignment
Reaction
1
Hannah
1
2
Alyssa
3
Brandon
4
Kiani
5
Jameelah
6
Yiwen
There are no rows in this table
⁠

Week 3 Specific Questions

⁠
If at anytime you want clarity or further explanation on a topic, types “@” and then the instructor’s name for a response beneath your question.
ex:
@Cameron Golinsky
⁠
How do I tag you on the page?
@student_who_asked: You just did it!
⁠

Questions

1)
The importance of Wireframes
Getting Started with MockFlow
Assignment
Week 3 Specific Questions
Questions
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.