L OW F I D E L I T Y

WIREFRAMES
Dr. Will Kurlinkus

10/2/23 1
 SIGN UP FOR FIGMA
• Set Up a Figma Account:
1. If you are new to Figma, enter your email address and a unique password. Then, follow the prompts to enter your
information.
2. If you have a Google account, you can sign up for a Figma account using your Google account details.
3. When asked, What kind of work do you do? Select Design.
4. When asked, How will you primarily use Figma? Select For teaching or taking a class.
5. Find additional sign up support on the Create a Figma account page.

• Verify Education Status: After signing up for a Figma account, follow the
link: https://www.figma.com/education/apply to verify you are a learner and receive the upgraded Pro
tier. Then, follow the prompts to enter the information.
1. Are you a student or educator? Select Student.
2. Why are you applying for a free Figma Education Plan? Enter To complete my UX Course.
3. What is your school's name? Select University of Oklahoma from the menu.
4. What is your school's website? Enter ou.edu
5. What is your primary field of study? Select UX/UI or Interaction design
6. Expected graduation date? Enter Month + year you expect to finish the course.
7. Find additional support on the Verify education status page.

10/2/23 Sample Footer Text 2

 HOMESCREEN

• There are three main aspects of any

home screen — it represents the idea
of the product, and the features of the
app, and reveals the general flow and
possible paths for the user to go.

10/2/23 Sample Footer Text 3

P RO F I L E

• The profile screen is a must in mobile

app design as it is part of the
personalized user experience.
• It can contain many different things,
such as an image, name, contact or
payment details, points, personal
offers, etc. All this should be accessible
for perception and easy to visualize.
• The profile screen should fit into the
overall concept of the user
interfacebut provide users with a
sense of privacy and securit
FEED SCREEN

• Feed screens display the latest

content, such as news or posts. You’ll
often see them in apps with a constant
stream of data, for example, on social
media.

• Perhaps the best example of a feed

screen is the Facebook feed. Indeed,
it’s also a good benchmark of what
elements should be in a feed screen.
P RO D U C T C A R D S C R E E N

• A screen to give a detailed description

of the position on offer. Be careful it
has a place for all the potentially
needed information.
• The product card must anticipate the
user’s expectations, so it must be
thought out to the smallest detail.
Where to put the product image? How
to distribute info and highlight the
main points? How to direct the user to
purchase? Solving all these issues is a
part of app design.
C H E C KO U T S C R E E N

• The most important part of this

screen is the screen with the
methods of payment — it has to be
clear and transparent. All the
possible ways of payment and
delivery have to be considered.
OTHER SCREEN
T Y P E S : L O G I N , M A P,
C A L E N DA R , C A RT,
H A M B U RG E R N AV,
AUDIO PLAYER

Sample Footer Text 8

B E S T P R AC T I C E S O F L AYO U T:
K.I.S.S.
• Focus on User Goals, but do not overwhelm the user with too much information
• Reduce the effort users have to put in to get what they want. Organize information in a
way that requires a minimum number of actions to reach the destination.
• Break large tasks into smaller, meaningful chunks. Hide secondary actions.
• Make the content the interface and remove unnecessary elements that do not support
user tasks. Cards are a great way to display actionable content. Keep the interface light
and airy.
• Add breathing Room. Use white space to draw attention to important content.
• The most successful apps are highly focused and present a limited set of features.
Limit feature set by prioritizing what’s important and trimming nice-to-have features.
• Chunking helps. Break down long forms into pages, progressively disclosing fields as
necessary. Streamline this process by integrating autocomplete, spell-check, and
prediction text assistance.
• Navigation must be discoverable and accessible, while occupying little screen space.
• Communicate the current location using location indicators.
• Place the top-level menu, frequently used controls, and common action items in the
green zone of the screen, which is comfortably reached with one thumb.
 THINGS TO CONSIDER
FOR WIREFRAMES
• Why create low-fi wireframes first: Establish basic structure of a
page before things that can distract like colors and pictures are added.

• There are many ways to draw wireframes: you can draw messy or you
can use rulers and shapes.

• Industry Standard Elements: the standardized pieces of a wireframe:

• Circle or square with a plus sign: calls to action/buttons
• Square or circles with x through it is an image
• Short horizontal lines: text
• Long horizontal lines: dividers
• Simple icons

• Frame: the phone the elements exist within

10/2/23 Sample Footer Text 10

 WIREFRAME THIS
APP

1. Start with major divisions: navigation,

different parts of the body, copyright,
etc.

2. Add actions: buttons, links, forms

3. Add images and icons

4. Add text: headings first, then other

textual labels

10/2/23
 WIREFRAME 3 DIFFERENT
VERSIONS OF YOUR APP’S
H O M E PAG E

1. List the information/elements/actions that needs to go on the page

2. Start with major divisions: navigation, different parts of the body,

copyright, etc.

3. Add actions: buttons, links, forms

4. Add images and icons

5. Add text: headings first, then other textual labels

6. Label for sharing with arrows and text: describe what things are

10/2/23 Sample Footer Text 12

 PUT STARS NEXT TO
Y O U R F AV O R I T E
F EAT URES OF EACH
WIREFRAME

10/2/23 Sample Footer Text 13

 D U E M O N DAY:
THREE MAJOR
PAG E S PA P E R
WIREFRAMED

10/2/23 Sample Footer Text 14