AS2106

UI DESIGN FUNDAMENTALS

User Interface Design (UI Design) creates the look, feel, and style of a digital product, whether it is a mobile
app, website, wearables like Apple watch, and other smart gadgets. UI design creates an impact on the
user’s interaction with the product. It can make it look easier or complicated for them to navigate. So, when
you create a UI design, keep in mind that the design should look functional, communicate the product's
brand values, and enhance the user’s experience of the product.

DESIGNING ACROSS PLATFORMS

Whenever we design especially for digital platforms, we have to remember different types of media where
users will experience your designs.

What are these platforms?

Desktop PCs Laptop Computers Mobile Phones
Tablets Wearables (ex. Smart watches) TV
Smart Displays

What are the things to consider when designing for various platforms?
Your design elements should fit on the screen size of the platform where you’ll put your
SCREEN SIZE design. Take note that it should be responsive. Meaning to say, your content and the
design should not be distorted regardless of screen size.
Consider how your users will interact with the product in a specific platform and how
interactions might affect your users. Why? Because different people will interact with
the product in different ways.
INTERACTION
For example, some will use a screen reader, closed captioning, or switch device.

It will be helpful if you try the product’s interaction first yourself to better understand
how people might interact with the product on different platforms.
CONTENT Content layout is the way how the information is organized on the screen. That’s why
LAYOUT you also need to be familiar with the different screen sizes of every platform.
This means that your UI design should not confuse your users, and they should
FUNCTIONALITY
conveniently interact with your design and the platform.

4 Cs OF DESIGNING FOR MULTIPLE PLATFORMS

Every company has specific design guidelines that need to be followed to have a
consistent brand identity, especially when it comes to visual appearance.

CONSISTENCY So, your design should always be aligned and consistent with the brand across all
platforms to drive brand awareness. Not only will it improve user experience, but it
builds the trust of the users. The users must be familiar with the brand regardless of
the platform.
To provide users with a seamless experience as they move between platforms, UI/UX
designers also have to prioritize continuity. Continuity in design means that users can
CONTINUITY maintain their progress as they move from one platform to the next. The user
experience for each platform might be slightly different, but the product’s
functionality should still be connected. Without continuity, users can become

02 Handout 2 *Property of STI

 [email protected] Page 1 of 18
 AS2106

frustrated if the progress of their experience does not carry across platforms.
("Foundations of User Experience (UX) Design," n.d.)
It’s when and how your users prefer to interact with the features of your product on
different platforms. According to UX Design World, "A UX designer needs to know the
CONTEXT broader vision of the product that is being designed. He needs to know who is going to
use this product. What is its real usage and purpose that users want to achieve? And
what is the environment in which this product will be used?"
One way to create a great cross-platform user experience is to make sure that each
platform's design adds something new for the user. Considering how each platform
COMPLEMENTARY could uniquely enrich the overall user experience is the best way to create
complementary UX designs. ("Foundations of User Experience (UX) Design," n.d.)

DESIGN FOR ACCESSIBILITY

We understood that user experience and user-centered design are all about meeting the user's needs. Here
is how we can put the users in the design process.

The "solve-for-one-extend-to-many" concept. Inclusive design is to focus on

finding and creating a solution to meet different user needs.

It makes design choices that consider personal identifiers like age, gender,
social status, language, race, etc. You solve for one type of user, but the
benefit of the solution you've created for that one user extends to many
types of users.

Our goal as designers is to build experiences accessible to users with the

INCLUSIVE DESIGN widest range of abilities. In other words, no one should be excluded from
using a product that we built because we didn't consider their needs when
creating it.

In inclusive design, there's no such thing as normal. There's no average

person or target audience that we should design for. ("Foundations of User
Experience (UX) Design," n.d.)

However, keep in mind that the concept of "solve-for-one-extend-to-many"

benefits the group of people that you're designing for and the existing users
Accessibility means designing products, services, or environments for
THE IMPORTANCE OF people with disabilities. It’s also called A11Y. Why it’s called like that? It
ACCESSIBILITY stands for the word accessibility, and 11 refers to the letters between the
first letter in the word “accessibility” and the last letters.
• Motor disabilities
WHAT ARE THE GROUPS OF • Deaf and mute
PEOPLE WE CONSIDER FOR • People with vision disabilities
ACCESSIBILITY? • Some people who have concurrent disabilities (i.e., a motor disability
that contributes to speech)

02 Handout 2 *Property of STI

 [email protected] Page 2 of 18
 AS2106

While we prioritize people with disabilities on this, remember that we should still make our designs
accessible to all people, whether they have an obvious disability or not.

In the disability community and as UI/UX designers, we focus on the social model of disability, which
defines a disability as being caused by how society is organized or how products are designed rather than
a person's ability or difference. As designers, we need to account for disabilities that are permanent,
temporary, or situational in our designs.

As UI/UX designers, we need to keep all of these disabilities in mind as we design features or new
products. Designing for accessibility isn't an obstacle but a way to get our products to as many users as
possible. (“Foundations of User Experience (UX) Design,” n.d)

HOW TO DESIGN FOR ACCESSIBILITY?

1. Awareness is This means that you should always be updated on the recent accessibility issues. How do
Everything. you do that? Attend talks, meetups, conferences, learn from people who are accessibility
experts. When you do user research, include participants in your samples.
2. Context Explore why you should consider logistics during your design process to expand your
Matters. product’s usability and usefulness. How do you do this? Do some testing on different
platforms. For example, test your design on a larger screen and a smaller screen. You can
reduce the download size or offer a lighter version
3. Be Inclusive Apply high-contrast in your visuals, and again, test in different platforms.
by Default.

LAWS OF UX
There are several laws that UX and UI designers follow to create an aesthetically pleasing, usable, and
accessible product design.

Why do we need to have UX laws? Because they serve as our guidelines on how we are supposed to create
our designs to meet human needs. Here are some basic fundamental laws that we can follow.

Jakob’s Law
“Users spend most of their time on other sites. This means that users prefer your site to work the same
way as all the other sites they already know.”
Several apps, websites, or digital products are
available, and we choose our preferred outcome out
of those products. Users expect that your
product will work the same as another similar
product they already know or are familiar with.
When you create your product, whether it’s an
app, a website, or a smart product, have at least
a similar (not exact) layout with other similar
products so that users will not be confused with
the navigation.

Image from https://liftedlogic.com/ux-for-web-design/

02 Handout 2 *Property of STI

 [email protected] Page 3 of 18
 AS2106

Gestalt Laws
Describes how the human eye perceives and gives interpretation to the visual elements. These laws
will help you as a designer to easily help your user understand your product's flow.
Law of Proximity
Whether a group is closer to each other is often
what our eyes perceive as part of the same
object, thus based on proximity. This law helps a
vision without division. You can also maximize
white space on this.

Image from https://www.qed42.com/blog/ui-design-guided-gestalt-principles

Law of Similarity
Whatever is similar to each other are often
identified to have the same purpose and
implications. When you do the UI design, the links
and other navigation systems in the app, website,
or any digital product are differentiated from the
normal text elements.

Image from https://www.qed42.com/blog/ui-design-guided-gestalt-principles

Law of Closure
Our minds tend to look for recognizable, often
individualistic patterns from things we have
already perceived before.

Image from https://www.qed42.com/blog/ui-design-guided-gestalt-principles

Miller’s Law
An average person can only keep 7 (plus or minus 2) items in their working memory.
This means that when you design, organize your content into smaller chunks so the users can process the
information and be easily familiar with it. No one wants to digest very long and overloaded information.

02 Handout 2 *Property of STI

 [email protected] Page 4 of 18
 AS2106

Image from https://dribbble.com/shots/11665307--Miller-s-Law-Top-UX-Laws-for-Design-03

Postel’s Law
According to Masooma
Memon, a writer of
Maze.co, “Be flexible in
what you accept from
your users and limit
what you ask of them.”

Image from https://maze.co/collections/ux-ui-design/ux-laws/

Do not ask for too much information in your interface; ask only what is essential so they’ll be encouraged
to act because if you ask too much information, the tendency is that they will not complete the action and
walk away because it looks too much complicated for them.

VISUAL DESIGN FOR UI/UX DESIGN

According to Usability.gov, visual design is “strategically implementing images, colors, fonts, and other
elements to enhance a design or interaction, and engage users.” So, this means that in the perspective of
UI/UX design, visual designs impact user engagement because the visual design is connected to the
functionality of a certain product.

02 Handout 2 *Property of STI

 [email protected] Page 5 of 18
 AS2106

UI DESIGN PRINCIPLES
Unity
It gives a sense of harmony in all
elements. There should be variations so
that designs don’t look boring.

Image from https://dribbble.com/shots/12217973-Car-Dashboard-Concept-for-BMW

Visual Hierarchy
The arrangement of elements
according to importance.

Image from https://blog.tubikstudio.com/9-effective-tips-on-visual-hierarchy/

02 Handout 2 *Property of STI

 [email protected] Page 6 of 18
 AS2106

Balance
The distribution of
elements should be even.

Image from https://dribbble.com/shots/14482326-Swim-Apple-Watch

Contrast
This is important to differentiate an
element from the other.

Image from https://careerfoundry.com/en/blog/ui-design/common-ui-design-mistakes/

02 Handout 2 *Property of STI

 [email protected] Page 7 of 18
 AS2106

Scale
Used to emphasize an element. It
creates a sense of depth, and it’s good
for creating hierarchy.

Image from https://www.pinterest.it/pin/803118546029779809/

Other Things to Consider for UI Design

Inspire Clarity Enable Interactions Using the Right Be Consistent with Conserve
Colors User Experience Attention
Your UI design The interactions in your The colors of Make sure that your UI Your UI design
should be clear product design make your UI design design and should sustain
enough for your navigation easier for the should not be interactions are the attention
users to users. Remember to make too distracting consistent throughout of your users
understand, your product design when users each screen of your towards your
human-centered, which look at it. product design to product.
means the simple the maintain familiarity
better, less is more, and with the experience.
easier to understand.

DESIGN PATTERNS
When we say design patterns, those are repeatable solutions to a recurring design problem. On another
definition by UX Society PH, it is “considered best practices for solving already common usability concerns of
the majority users.” Design patterns also help to know what to do to respond to users’ needs.

02 Handout 2 *Property of STI

 [email protected] Page 8 of 18
 AS2106

Buttons
This is a common component in any website or app.
Recognizable designing buttons can serve the
purpose of your call to action.

Image from Invision

Nav Bar Format
Why there’s always a bar at the top of
a browser that has a logo and links?
It’s because it’s the best practice.
Users don’t want to be dictated
where to go, and they want to have an
easy way to go back to whatever page
they want to go back to. Just be
mindful of the copy that you will put
on the navigation links to avoid
confusion

Image from Jim Raptis

Negative Spaces
Negative spaces enhance the visual
hierarchy of the design and let users focus
on key elements in the product.

Image from https://blog.tubikstudio.com/negative-space-in-design-tips-and-best- practices-2/

Social Media Icons

Social sharing aims to increase the community of followers and make them aware that you always exist.

02 Handout 2 *Property of STI

 [email protected] Page 9 of 18
 AS2106

Having social media icons on

the site leading to other social
media accounts. Social Media
icons are often placed at the
footer of the site, but they are
placed in the upper corner of
the navigation bar. Why? So
that your users will always
remember you. It’s like you
saying, “Hey! You can follow me
anytime!” Image from CodeinWP
Forgiving Format
According to Interaction Design
Foundation, “The forgiving format design
pattern allows the user to make mistakes.
A forgiving format does not just correct
mistakes users make; it also allows the
users to take a variety of approaches to a
problem so that in the event they do not
know or have the ability to take one
particular approach, they can resort to
another.”

Image from Just in Mind

Bread Crumbs
These are navigation elements that
are usually seen on websites. This
shows the user’s journey around
the website. This is generally seen
in news article websites or,
sometimes, e-commerce websites.
This also helps the users be aware
of where they are already on the
website.

Image from Just in Mind

02 Handout 2 *Property of STI

 [email protected] Page 10 of 18
 AS2106

Subscription Plan
Having a proper subscription section
mapping will organize the page to
make it clear for the users.

Image from Just in Mind

Lazy Registration
This is a form wherein you put the
users to the registration. In
designing a registration form,
whether in a site or an app,
simplify it, minimize optional
information fields. Create a
required field marker to alert the
users that this is an important
field to answer.

Image from Guest Survey

Clear Primary Actions

This is about buttons. Make the

buttons stand out with the right
color to let the user know what to
do (ex. Submit button).

Image from https://balsamiq.com/learn/articles/button-design-best-practices/

Progressive Disclosure
According to Interaction Design Foundation, Progressive disclosure is an interaction design pattern that
sequences information and actions across several screens (e.g., a step-by-step signup flow). The purpose is
to lower the chances that users will feel overwhelmed by what they encounter. By disclosing information

02 Handout 2 *Property of STI

 [email protected] Page 11 of 18
 AS2106

progressively, interaction designers reveal

only the essentials and help users manage
the complexity of feature-rich websites or
applications.

Image from Just in Mind

Hover Controls
This hides non-essential information on a
certain page so that the users can easily find
relevant information.

Image from Just in Mind

02 Handout 2 *Property of STI

 [email protected] Page 12 of 18
 AS2106

Step Left Pattern

This shows how many steps a user

needs to go through to complete a
certain task.

Image from Just in Mind

DESIGN SYSTEMS
According to UX Society PH, “Design system is a collection of elements, rules, and guidelines that form the
foundation of a shared visual language used to communicate a brand or product goals, values, and
objectives in an efficient manner that is relevant to the target audience. They help create products in a
scalable and repeatable way that maximizes efficiency and consistency within a design team or project”.
• This will help you translate your research or insights into a visual language
that you can use to communicate with your users.

• People are usually visual thinkers, and they process complex ideas by
classifying objects according to their relationships with other things in their
environment and context. It is these human traits that designers should learn
Why Should We
to create effective designs.
Have Design
• Visual language is important in engaging users. The visual language will help
Systems?
users relate and interact with the product. Your visual language
communicates your ideas to your users.

• Creating a design system will help us package a group of information that users
can clearly understand the relationship of data, the underlying message, and
their functions.
What’s in a Design System?
A design system is composed of the following:

02 Handout 2 *Property of STI

 [email protected] Page 13 of 18
 AS2106

Style Guide
This contains the aesthetics
of your design or the visuals
that you want to put in your
product design. This is where
you put your color schemes,
Typography, etc.

Image from Just in Mind

Image from Adam Kalin, Dribbble

Patterns/Components Library
Before making your design system, you decide first what your direction will be and understand the goals
and motivation of your product so that you know what you will communicate with your users.

02 Handout 2 *Property of STI

 [email protected] Page 14 of 18
 AS2106

Images from Adam Kalin, Dribbble

How to Make a Design System?

Identify who your target is. Why? Because you have to know for whom are you
making the product. You need to understand the users and their motivations to
WHO make design decisions that are aligned with your users.

For example, age will help you have a youthful or a mature look for your visuals.
Identify what kind of product you are building. For example, is it an information
website? An e-commerce app? a smartwatch that has a special feature? Is it a
smart Vendo machine? Is it a social app?
WHAT
Why do you need to know what kind of product you’re building? So that you will
understand the end goals and actions that you’ll be guiding your users to with
your design.
Define why your product exists and your goals, values, mission, and vision—
understanding why you will make your product and the brand identifiable and
WHY
relatable to the users. Defining your “why” will help you choose core principles to
make your product grounded.

WIREFRAMING

It is the blueprint of the designers to communicate the structure of a product.

What is
Wireframing in The goal of creating a wireframe is to capture functionality and content requirements.
UI/UX?
Here, you can see if there will be layout issues, and you can also use it for usability testing.
Showing process structure, content strategy, functional copy direction,
Use Wireframe
When…. Note: Wireframe is not a final design. It is not for creative direction, aesthetics, or brand
love
Types of Wireframing

02 Handout 2 *Property of STI

 [email protected] Page 15 of 18
 AS2106

These are just basic

visual
representations of
the product you
are working on. It’s
like a rough sketch
created without
Lo-Fidelity (Lo- fonts, colors, scale,
Fi) or other details.

Images from Miro

It shows the look and feel of the product. It may already contain the content of the
product, the image dimensions, typefaces, and other branding elements, but this is not
necessarily colored yet.

High-Fidelity
(Hi-Fi)

Images from https://uploads.gravitatedesign.com/2017/09/28185529/wf-blog-hf.jpg

How to Create a Wireframe?

Sketching or creating a paper prototype can be
used when doing lo-fi wireframes since you are
still starting to draft your ideas for your product
design.

Traditional

Image from https://www.behance.net/gallery/43064215/Power-Paper-Prototyping

02 Handout 2 *Property of STI

 [email protected] Page 16 of 18
 AS2106

Using apps like Figma, Adobe XD, InVision,

framer, MockFlow, Miro, etc., can be used
when you are doing a Hi-Fi wireframe. This is
more convenient because it’s done on a
computer, so it’s faster.

Digital

Images from https://www.invisionapp.com/inside-design/wireframe-examples/

PROTOTYPING

It tests the flow of your product

design to gather feedback if
there’s a need for further
improvement. It is the look and
feel of how your actual product
What is will work when it’s launched.
Prototyping?

Image from https://xd.adobe.com/ideas/guides/ux-design-process-steps/

How to Create a First, you should have a visual layout of your product design; then, you can use tools like
Prototype? Figma or Adobe XD to create your prototype
USABILITY TESTING

What is Usability It lets your users test your product design to validate if your solution effectively solves
Testing? their problem or not. It is also gathering feedback for further improvements of the
product.
Why it’s Users can view the product you’ve designed; differently, they have different
important? perspectives, and they can encounter some issues on their end that you didn’t
foresee during the design process.

You can gather user’s feedback during the testing, whether through observing how
they use them and interact with your product or by asking them about their
experience. The user’s feedback is very important to make necessary changes based
on the testing results.
Testing Methods
A/B Testing It compares two (2) versions and measures the difference in terms of performance.

02 Handout 2 *Property of STI

 [email protected] Page 17 of 18
 AS2106

Guerilla Testing It’s gathering feedback from your users by taking your design or prototype to the
public and ask their thoughts.
Blink Testing It’s a 3-5 second period immediately after a person opens up your product like your
website, app, etc. During this time, the user decides if your product is worth staying
with or making further improvements.
Testing Plans
Quantitative The success or failure rate and how long it takes for the user to complete a task.
Qualitative This is where you will analyze why a user will continue using the product or what will
keep them from using it.
How to Do the You do the usability testing by giving your representative a certain task to complete
Usability Testing? using the product that you’ve designed.

References
UX Society PH. (2020). Laws of UX and Design Patterns [Video]. UX Society PH YouTube Channel.

UX Society PH. (2020). Workshop: UXUI Foundations [Video]. UX Society PH YouTube Channel.

UX Society PH. (2020). Workshop: Design for Development [Video]. UX Society PH YouTube Channel.

UX Society PH. (2020). Workshop: Visual Communication and Design Systems [Video]. UX Society PH YouTube Channel.

UX Society PH. (2020). Workshop: Maximize Your Lo-Fi Wireframes with Nica Balisi [Video]. UX Society PH YouTube Channel.

UX Society PH. (2020). Workshop: Prototyping and Interactions [Video]. UX Society PH YouTube Channel.

UX Society PH. (2020). Workshop: Usability Testing Tools & Techniques [Video]. UX Society PH YouTube Channel.

Yablonski, J. Law of Similarity | Laws of UX. Laws of UX. Retrieved 7 July 2021, from https://lawsofux.com/law-of-similarity/.

Yablonski, J. Law of Proximity | Laws of UX. Laws of UX. Retrieved 7 July 2021, from https://lawsofux.com/law-of-proximity/.

Yablonski, J. Jakob’s Law | Laws of UX. Laws of UX. Retrieved 7 July 2021, from https://lawsofux.com/jakobs-law/.

What is User Interface Design?. The Interaction Design Foundation. Retrieved 7 July 2021, from https://www.interaction-design.org/literature/topics/ui-design.

What are Gestalt Principles?. The Interaction Design Foundation. Retrieved 7 July 2021, from https://www.interaction-design.org/literature/topics/gestalt-principles.

What is User Interface Design?. The Interaction Design Foundation. Retrieved 7 July 2021, from https://www.interaction-design.org/literature/topics/ui-design.

UI Design Patterns. The Interaction Design Foundation. Retrieved 7 July 2021, from https://www.interaction-design.org/literature/topics/ui-design-patterns.

Mesibov, M. (2015). How Visual Design Makes for Great UX | UX Booth. Uxbooth.com. Retrieved 8 July 2021, from https://www.uxbooth.com/articles/how-visual-design-
makes-for-great-ux/.

02 Handout 2 *Property of STI

 [email protected] Page 18 of 18