Unit-2

Foundations of UI Design

Visual and UI Principles- UI Elements and Patterns – Interaction Behaviors and

Principles –Branding- Style Guides

Visual Design Principles

When we look at something, we often instinctively know if it looks good or not,

thanks to the emotional response it elicits. Though we may struggle to put it into
words, certain design elements can make visuals more appealing and effective in
user experience.
Here are 5 key visual design principles that impact UX:
1. Scale: The relative size of elements in a design. It helps create emphasis,
guide attention, and add visual interest.
2. Visual Hierarchy: The arrangement of elements to establish a clear order of
importance. It guides users through content and makes information easier to
understand.
3. Balance: Distributing visual weight evenly in a design to achieve stability. It
ensures that no single element overpowers others, leading to a harmonious
composition.
4. Contrast: Differences in color, size, or other attributes that create distinction
between elements. Contrast enhances readability and draws attention to
essential information.
5. Gestalt: The idea that our brains perceive elements as a whole rather than
individual parts. It emphasizes how elements are organized to form a unified
and coherent design.
By adhering to these principles, designers can create engaging and user-friendly
visuals that enhance the overall experience.

1. Scale
Scale in visual design involves using relative size to communicate importance and
rank within a composition. Important elements are made larger than less significant
ones, making them more noticeable. A visually appealing design typically uses up to
three different sizes to create variety and establish a visual hierarchy. By
emphasizing essential elements through size, users can easily understand and
interact with the design
.
Medium for iPhone: Popular articles are visually larger than other articles.
The scale directs users to potentially more-interesting article.

2. Visual Hierarchy

Visual hierarchy is about guiding the user's eye to focus on important elements first.
It's achieved by using various design cues like size, color, spacing, and placement. A
good layout with clear visual hierarchy makes it easy for users to understand the
content and its importance. You can use different font sizes, bright colors for
important items, and muted colors for less important ones to create a clear hierarchy.
Including small, medium,
and large elements in the design helps establish a balanced scale and reinforce the
visual hierarchy..
 Medium mobile app: There is a clear visual hierarchy of title, subtitle, and
body text. Each component of the article is in a type size equal to its
importance.

Uber mobile app: The visual hierarchy is clear in Uber’s mobile app. The screen is
split in half between the map and input form (bottom half of screen), which enforces
the thought that these components are equally important to the user. The eye is
immediately drawn to the Where to? field because of its gray background, then to the
recent locations below it, which are slightly smaller in font size
3. Balance
Balance in visual design is like a seesaw, where you arrange elements to create a
pleasing proportion. It means having an equal distribution of visual elements on both
sides of an imaginary line running through the middle of the screen. This line can be
vertical or horizontal.

To achieve balance, you need to consider the size and space taken by elements, not
just their number. If one side has a large element and the other side has a small one,
the design feels unbalanced.

There are three types of balance:

1. Symmetrical - elements are evenly distributed on both sides of the central axis.

2. Asymmetrical - elements are unevenly distributed, creating a sense of movement

and energy.

3. Radial - elements radiate out from a central point, guiding the eye to the center of
the composition.

The choice of balance depends on the message you want to convey. Asymmetry is
dynamic and engaging, while symmetry is calm and static. Radial balance always
draws attention to the center. Achieving balance ensures that no area overwhelms
others, creating a harmonious and pleasing design.
The Hub Style Exploration: The composition feels stable, which is especially appropriate
when you’re looking for a job you love. The balance here is symmetrical. If you were to draw
an imaginary vertical axis down the center of the website, elements are distributed equally
on both sides of the axis. (Image source: dribbble.com)

4. Contrast
Contrast is a powerful principle in design that highlights differences between
elements. It involves placing visually dissimilar things together to show that they
belong in different categories or serve distinct purposes. For example, using bright
colors like red to signify deletion in a UI design makes the element stand out from
the rest, emphasizing its unique function. Contrast helps users quickly identify and
understand important information, making the design more effective and user-
friendly
 .
Reminders app on iOS: The color red, which has high contrast to its surrounding context, is
reserved for deleting.

Often, in UX the word “contrast” brings to mind the contrast between text and its
background. Sometimes designers deliberately decrease the text contrast in order to
deemphasize less important text. But this approach is dangerous — reducing text
contrast also reduces legibility and may make your content inaccessible. Use a
color-contrast checker to ensure that your content can still be read by all your target
users.

Greenhouse Juice Co: The legibility of the text on the bottle relies on the
color of juice. Although the contrast works beautifully for some juices,
 labels for bottles with light colored juices are nearly impossible to read.
(Image source: www.instagram.com)

5. Gestalt Principles
Gestalt principles are a set of ideas from psychology that explain how humans make
sense of complex images. Instead of seeing individual parts, our minds automatically
organize them into a whole. This means we tend to perceive the complete picture
rather than separate elements.

These principles include similarity, continuation, closure, proximity, common region,

figure/ground, and symmetry and order. One important principle for UX is proximity,
which means that items visually close together are seen as belonging to the same
group. These principles help designers create visuals that are easy for users to

understand and navigate.

It is the Gestalt closure principle that allows us to see two figures kissing
instead of random shapes in Picasso’s painting. Our brains fill in the
missing pieces to create two figures.

We also often see applications of the Gestalt theory in

logos. In the NBC logo, there is no peacock in the white space, but our
brain understands there to be one.
UI Design Principle:
The seven principles of universal design are: Equitable use, flexibility in use, simple
and intuitive use, perceptible information, tolerance for error, low physical effort, and
size and space for approach and use.

1. The seven principles of universal design are: Equitable use, flexibility in use,
simple and intuitive use, perceptible information, tolerance for error, low
physical effort, and size and space for approach and use.

Equitable Use: The design should be usable by all individuals, regardless of

their age, abilities, or background. It ensures that everyone can access and
interact with the product or environment in a fair and inclusive manner.
2. Flexibility in Use: The design should accommodate a wide range of
individual preferences and abilities. It offers multiple ways to interact with the
product or environment, allowing users to choose the approach that suits
them best.
3. Simple and Intuitive Use: The design should be easy to understand and
use, requiring minimal effort to figure out its operation. Clear instructions and
logical layouts make it intuitive for users to navigate and perform tasks.
4. Perceptible Information: The design should present information effectively
to all users, regardless of their sensory abilities. It ensures that important
information is available through multiple senses (e.g., visual, auditory, tactile)
so that users can perceive and comprehend it easily.
5. Tolerance for Error: The design should minimize the risk of errors and
provide ways to recover from mistakes. It avoids critical consequences for
unintended actions and offers clear feedback to guide users in correcting
errors.
6. Low Physical Effort: The design should require minimal physical effort to
use. It considers the needs of users with varying physical abilities, making
interactions comfortable and not overly demanding on strength or dexterity.
7. Size and Space for Approach and Use: The design should provide
adequate space and reach ranges to accommodate users of different sizes
and mobility. It ensures that individuals using mobility aids or who have limited
reach can comfortably access and use the design.
 UI Elements
UI elements are the building blocks of a user interface, the individual parts
that users see and interact with on websites, apps, and other digital product

1. Buttons: Buttons are like interactive squares or circles that you can click or tap
on. They perform actions like "Submit," "Next," or "Cancel."

2. Text Fields:Text fields are areas where you can type in text, like when you
search for something or enter your name.

3. Checkboxes:Checkboxes are like little boxes that you can tick or un-tick to
make a choice from a list of options.

4. Radio Buttons: Radio buttons are like small circles or dots that you can select,
but you can only choose one option from a group of choices.

5. Icons:Icons are small pictures or symbols that represent actions or ideas, like a
magnifying glass for search or a home symbol for the homepage.

6. Dropdown Menus: Dropdown menus are like hidden lists that appear when you
click on a button or a label. They show you more options to choose from.

7. Sliders: Sliders are like bars or scales that you can slide left or right to adjust
settings or choose a value.

8. Tabs: Tabs are like labeled sections that you can click on to switch between
different parts of a website or app.

9.Tooltips: Tooltips are like small pop-up boxes that show extra information when
you hover your mouse over something.

10. Cards:Cards are like little containers that hold information, like a picture, a
title, and a short description, neatly displayed together.
These UI elements help users interact with websites and apps by clicking, typing,
or selecting options, making the overall experience more intuitive and enjoyable.
UI Patterns
User interface (UI) design patterns are reusable/recurring components which
designers use to solve common problems in user interface design. For example,
the breadcrumbs design pattern lets users retrace their steps. Designers can
apply them to a broad range of cases, but must adapt each to the specific context
of use.

Common UI Design Patterns

Some of the most common UI design patterns are:
 Breadcrumbs – Use linked labels to provide secondary navigation that shows
the path from the front to the current site page in the hierarchy.
 Lazy Registration – Forms can put users off registration. So, use this sign-up
pattern to let users sample what your site/app offers for free or familiarize
themselves with it. Then, you show them a sign-up form. For example,
Amazon allows unrestricted navigation and cart-loading before it prompts
users to register for an account. Note:
 When content is accessible only to registered users or users must keep
entering details, offer them simplified/low-effort sign-up forms.
 Minimize/Avoid optional information fields. Use the Required Field
Markers pattern to guide users to enter needed data.
 Forgiving Format – Let users enter data in various formats (e.g.,
city/town/village or zip code).
 Clear Primary Actions – Make buttons stand out with color so users know
what to do (e.g., “Submit”). You may have to decide which actions take
priority.
 Progressive Disclosure – Show users only features relevant for the task at
hand, one per screen. If you break input demands into sections, you’ll reduce
cognitive load (e.g., “Show More”).
 Hover Controls – Hide nonessential information on detailed pages to let
users find relevant information more easily.
 Steps Left – Designers typically combine this with a wizard pattern. It shows
how many steps a user has to take to complete a task. You can
use gamification (an incentivizing design pattern) here to enhance
engagement.
 Subscription Plans – Offer users an options menu (including “Sign-up”
buttons) for joining at certain rates.
 Leaderboard – You can boost engagement if you use this social media
pattern.
 Dark Patterns – Some designers use these to lead or trick users into
performing certain actions, typically in e-commerce so they spend more or
surrender personal information. Dark patterns range in harmfulness. Some
designers leave an unchecked opt-out box as a default to secure customer
information. Others slip items into shopping carts. To use dark patterns
responsibly, you must be ethical and have empathy with your users. Dark
patterns are risky because user mistrust and feedback can destroy a brand’s
reputation overnight.

What is Interaction Design?

 Interaction design (IxD) is about designing how users interact with products,
especially software products like apps and websites. The main goal is to
create products that help users achieve what they want in the easiest and
most effective way possible.

 Interaction designers work on various elements like how things look, move,
sound, and the space they take up. For example, they might create sounds for
user actions. They think about whether the product behaves in a way that
users expect and if users can achieve their goals without much effort.

 In some cases, UX designers are also responsible for interaction design along
with other aspects of product design. Overall, interaction design is about
making products user-friendly and intuitive for people to use.
 How Does Interaction Design Differ from UX Design?
 Interaction design and UX design have similarities, but they are not the same
thing. Interaction design focuses on how users interact with a product, making
sure the interactions are smooth and easy. It deals with elements like how
things move, look, and sound to create a good user experience.

 On the other hand, UX design is broader. It involves understanding the users

through research, creating user personas to know their needs, and testing the
product with real users. UX designers ensure the entire experience of using
the product is great, not just the interactions.

 In simple terms, interaction design is a part of UX design, but UX

design covers more aspects beyond just the interactions.

 Interaction design is a part of UX design, which is about creating a

great experience for users when they use a product. Interaction
designers focus on improving the way users interact with the product.
For example, making sure the TV remote or doorknob is easy to use.
 UX designers look at the whole user journey, not just the moment of
interaction. They consider all aspects of the product that users
interact with. Interaction design is like a small part of the bigger
picture of user experience design. It's impossible to have good
interaction design without considering the overall user experience.
 Why is Interaction Design Important?
In today's digital world, creating a great interaction experience is crucial.
It can be as simple as using a TV remote or as complex as using
software. Smart tech companies understand that a pleasant interaction
leaves users satisfied or delighted. Remember the first time you used an
iPhone?

Steve Jobs, the founder of Apple, emphasized that design is not just
about looks but also about how things work and how users feel about
them.

Here are some important interaction design principles:

1. Match user experience and expectations.
2. Maintain consistency in design throughout the application.
3. Follow functional minimalism by keeping things simple and useful.
4. Reduce mental pressure and make the application easy to
understand.
5. Design interactively to keep users engaged.
6. Allow users to have control, trust, and explore the product.
7. Use intuitive and interactive media to invite interactions.
8. Make user interactions easy to learn and remember.
9. Take care to prevent errors and handle them effectively if they occur.
10. Use familiar and physical-world interactions to make actions feel
natural.

The interaction design process involves five stages:

1. Discover users' real needs by observing, interviewing, and analyzing
existing solutions.
2. Design a potential solution based on design guidelines and principles,
using techniques that match users' interaction preferences.
3. Start prototyping to give users a glimpse of the product and gather
feedback for improvement.
4. Implement and deploy the final version of the product.
5. The process is iterative, meaning it may take multiple rounds of
testing and refinement to reach the best solution.

Understanding your users' needs and continuously adapting to their

feedback is vital in the interaction design process. Design thinking is a
helpful approach to gain insights and create features that truly serve
users' needs and desires. By empathizing with users, designers can
identify their real-world needs and provide better solutions.

Branding

Branding in UI design is the process of incorporating a company's visual

identity and personality into the user interface of a product or website. It
involves using consistent colors, typography, logos, and other design
elements to create a recognizable and cohesive brand image. Branding
is essential in UI design as it helps users associate the product with the
company and builds trust and familiarity.

**The Need for Branding in UI Design:**

1. **Recognition:** Consistent branding elements help users identify the
product with the company, even across different platforms and
touchpoints.

2. **Trust and Credibility:** A strong brand presence instills confidence

in users, making them more likely to engage with the product.

3. **Consistency:** Branding ensures a unified and cohesive

experience, making the product feel more reliable and professional.

4. **Differentiation:** In a competitive market, branding sets the product

apart from competitors, making it stand out in users' minds.
**The Stages of Branding in UI Design:**
1. **Brand Strategy:** Define the brand's core values, target audience,
and unique selling proposition (USP). This stage sets the foundation for
the visual elements that will be used in the UI design.

2. **Visual Identity Design:** Create the visual elements that represent

the brand, such as the logo, color palette, typography, and iconography.
These elements should align with the brand strategy.

3. **UI Design Integration:** Incorporate the brand's visual identity into

the UI design. Use the chosen colors, typography, and other elements to
create a consistent and on-brand interface.

4. **Brand Guidelines:** Document the brand guidelines that outline how

the visual elements should be used in the UI design. These guidelines
ensure consistency across different designers and projects.

5. **User Testing:** Test the UI design with real users to ensure that the
branding elements resonate with the target audience and provide a
positive user experience.

By integrating branding into the UI design process, companies can

create a memorable and cohesive user experience that reflects their
identity and values, ultimately leading to increased user engagement
and loyalty.

Style Guide

Style guides in UI design are like detailed manuals that explain how a
product or website should look and feel. They help designers,
developers, and others follow consistent design rules for colors, fonts,
icons, and more.

The need for style guides includes:

1. Making sure everything in the design looks the same and works well.
2. Saving time and effort by giving a reference for designers and
developers to follow.
3. Keeping a consistent brand image by defining how logos and colors
should be used.

The stages of creating style guides are:

1. Doing research about the brand and target audience.
2. Creating the visual elements like colors and icons for the design.
3. Making a library of reusable components like buttons and cards.
4. Writing down all the design rules and guidelines in a document.
5. Testing the design with real users and making improvements.
6. Integrating the style guide into the design and development process.

By using style guides, UI designers can create a user-friendly and

cohesive interface that represents the brand well and gives a positive
user experience.