UNIT II FOUNDATIONS OF UI DESIGN

Visual and UI Principles - UI Elements and Patterns

- Interaction Behaviors and Principles – Branding - Style
Guides

Visual Design:
Visual design is a design discipline that aims to develop a strategic aesthetic for digital
products. This aesthetic must organize visual design elements such as line, shape, texture,
space, form, and typography into a cohesive whole and support usability. Additionally, visual
designers seek to create interfaces that are visually appealing.
Visual design is derived from graphic design and UI design. In the digital space, graphic
designers may work on visuals related to a product’s marketing and branding. By contrast,
visual designers and UI designers are responsible for the look of the product interface. Visual
designers focus on the overall aesthetic of a product and may be in charge of building and
maintaining a brand’s design system.
Visual Design Elements:
Visual Design Elements are the building blocks of visual design. Common elements include
line, shape, color, texture, space, form, and typography. Designers decide which elements to
include, how to style them, and where to place them on the page.
Lines can be used to divide pages, make shapes, or create textures. By adjusting a line’s
properties (such as style, color, and weight) different effects can be achieved.
Shapes are used to create UI components (such as buttons, modals, and text inputs) and
design assets (such as icons, illustrations, and logos). Shapes can create sections on a page or
draw attention to a specific area.
Color helps define a product’s aesthetic and create organized designs. Color can be applied to
establish patterns and make elements stand out.
Texture defines the surface of an object. By creating patterns with lines, shapes, or colors, a
wide variety of textures can be simulated.
Space, also called negative space or white space, is the blank area that surrounds objects like
images, text, and buttons. Designing with sufficient and consistent spacing keeps the design
scannable and organized.
Form, or volume, is a three-dimensional effect on a two-dimensional screen. Form creates the
illusion that the object has mass.
Typography encompasses which fonts are included and how they are styled. Users often rely
on words to make sense of a product, so effective typography is a vital component of an
interface.
Visual design principles:
Visual design principles are guidelines for creating visual designs that are effective, cohesive,
and appealing. Common principles include hierarchy, contrast, balance, scale, dominance,
unity, and Gestalt.
Hierarchy relates to the order that a person processes visual information. An interface with a
clear hierarchy helps the user prioritize information and systematically view elements on the
page. By contrast, a lack of hierarchy creates confusion, as it’s unclear what to focus on.

Contrast is used to make elements stand out. Adjusting properties like color, texture, shape,
size, and placement can visually distinguish some objects from others on a page.

Balance is achieved when elements appear to be equally distributed on a page. Balance can
be created even if elements on a page aren’t perfectly symmetrical.
Scale is used to convey the proportional relationship between objects. Using scale
strategically helps users understand how objects in a design relate to each other.

Dominance is used to make one object the focal point of a page or section. Dominance can
be incorporated by making one element stand out based on size, shape, color, or other
properties.
Unity is achieved when all elements work together as a cohesive whole. In products that
follow the unity principle, all elements and layouts feel like they belong together.
Gestalt relates to how the brain processes visual information. When initially viewing a digital
interface, a person perceives the overall design rather than isolating individual elements. The
brain naturally categorizes and organizes visual information to make sense of it

Visual Weight: Some parts of your design are more important than others, so we have to
help users notice the important stuff. The idea of visual weight is fairly intuitive. Some things
look “heavier” than others in a layout. They draw your attention more easily. And that idea is
valuable to a UX designer. Your job is to help users notice the things that matter. It is equally
important not to distract the users from their goals.
Visual Weight – Contrast: The difference between light things and dark things is called
contrast. The more distinguishable a light thing is compared to a dark thing, the “higher” the
contrast. In UX, you want to give important things higher contrast, like the duck in the center.
Visual Weight – Depth and Size: In the real world, we notice things that are close to us
more than things that are far away.
In the digital world, bigger things are perceived to be closer, like the middle duck in the
second illustration, and something that is smaller is perceived to be farther away (like the
blurry duck in the back.)

Color: You get the idea: the ducks are identical, but colors change the meaning. As a UX
designer, we might not care about Pantones and brand guidelines, but we definitely have to
learn about color.
Repetition and Pattern Breaking
One important visual design principles involve the creation of patterns to move the user’s
eyes to important things. And like all good rules, patterns are made to be broken. Human
brains have a particular talent for patterns and sequences. Whenever something in nature
happens over and over, we will quickly notice. In fact, we don’t just notice, we think about
those things differently. We don’t see five individual ducks though; we see a row of ducks.
We treat them as a group or a sequence.
Breaking a Pattern
Now we see a row of four (jealous) ducks, and Beyonce is alone, in the spotlight. She woke
up like that! It is hard not to focus on Beyonce, even though all five ducks are equally
majestic creatures. Now, if that were a menu, the middle option would get far more clicks
than before because our eyes fixate on it.

Line Tension
We don’t see eight individual ducks; we see a line. That’s line tension. The perception of a
line or a “path” when there isn’t one. Our eyes will follow the path to see where it goes.
Edge Tension
If we break that path—like any broken pattern—the gap steals more focus. So far, we have
assumed there is only one line. But what if we create line tension using more than one line?
The result can be “shapes.” I have arranged the ducks so they appear to form the corners of a
box.

Alignment and Proximity

The last design principle you will learn about is how to add order and meaning to elements of
your design without adding any more elements
Alignment
In this slide, you see a group of six stunningly beautiful ducks, but you also see a lot of
relationships, because of the way they are aligned: We see two rows. The far-left and far-
right ducks seem to be separated.
Proximity
The closeness or distance between two objects creates a feeling of those objects being related
or unrelated. That distance is called proximity. In this slide, you see six identical ducks that
are not aligned horizontally or vertically, but you definitely see two groups. The ducks in
each group seem together, like a team or a family.
UI Elements and Patterns:

UI Elements
User Interface elements include but are not limited to
 Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles,
text fields, date field
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags,
icons
 Informational Components: tooltips, icons, progress bar, notifications, message boxes,
modal windows
 Containers: accordion
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.
User interface (UI) design patterns are reusable solutions to common design problems in user
interface design. Each UI design pattern has a specific purpose, and by understanding how
and when to use them, you can create interfaces that are both consistent and efficient. UI
design patterns provide a common language for user interface designers and a foundational
consistency for users of websites and apps.

UI design patterns provide an established solution for common design problems and can help
UX/UI designers to create more efficient and effective interface designs. These solutions are
helpful whether you're designing a new interface from scratch or polishing an existing one.
Common UI design patterns that you might already be familiar with include:
Navigation bar: Navigation deals with a user’s ability to move around an app or website,
and is often seen at the top and/or bottom of the page.
Social Sharing: This UI design pattern promotes sharing content or experiences from a
product on a social platform such as Twitter or Instagram.
Breadcrumbs: Breadcrumbs are a type of secondary navigation that allow the user to
understand the website or app’s organization and how pages flow from one to the next.
Account Registration: A pattern like this prevents customers from viewing certain
information on the site unless they’ve registered to receive or view it.
Dropdown menu: A list of options that are only revealed when a user clicks or hovers over
the area. These are used when space is minimal, or when the amount of items in the
dropdown menu would otherwise be overwhelming to display in a static format.
Toolbar: A set of icons grouped together on an interface, often arranged neatly across a bar,
that perform various functions when clicked.
Accordion: A type of visual content structure that hides content until it is clicked on by the
user.
Tabs: These help with content structuring on pages where the content should remain front
and center. It imitates the overall look and feel of a physical file folder system.
Content structuring: these patterns are concerned with how your site is organized in a way
that feels intuitive and accessible.
https://ui-patterns.com/patterns/NavigationTabs

Pattern Name: NavigationTabs

Problem: Content needs to be separated into sections and accessed using a flat navigation
structure that gives a clear indication of current location.
Example:

Solution

✔ A horizontal bar contains the different sections or categories of your website.

✔ Each section or category is represented by a tab that most commonly resembles a

button. This is why the whole button should be clickable, and not just the text that
labels the section.
✔ Optionally, a bar below the top bar can contain subsections of the currently selected
item in the top bar
✔ The navigation tab is persistent across all pages that the tabs link to.
Usage:

✔ Use when there are between 2 – 9 sections of content that need a flat navigation
mode.
✔ Use when section names are relatively short

✔ Use when you want the navigation to fill the entire width of a page

✔ Use when you want to provide a list of the highest available sections/subsections of
the website
✔ Do not use when wanting to show content-specific data. For instance for showing
latest articles
✔ Do not use when there is no need to single-out the currently selected option

✔ Do not use when the list of sections or categories call for a “more…” link. Then
consider another navigation pattern.
Pattern Name: Breadcrumbs
Problem: The user needs to know their location in the website's hierarchical structure in
order to possibly browse back to a higher level in the hierarchy.
Example:

Usage:

✔ Use when the structure of the website follows a strict hierarchical structure of similar
formatted content.
✔ Use when the structure of the site is partitioned in to sections which can be divided
into more subsections and so on.
✔ Use when the user is most likely to have landed on the page from an external source
(another site deep linking to the web page in question). For instance from a blog or a
search engine.
✔ Use when the page in question is placed fairly deep into the hierarchy of pages and
when no other form of visual navigation can show the details of the same deep level.
✔ Use together with some sort of main navigation.

✔ Do not use on the topmost level of the hierarchy (typically the welcome page)

✔ Do not use alone as the main navigation of the website.

Solution
✔ Reveal the user’s hierarchical location and provide links to higher levels.

✔ Show the labels of the sections in the hierarchical path that lead to the current page
being viewed.
✔ Each label is a link to a section.
 ✔ The label of the current page is at the end of the breadcrumb and is not linked.

✔ Each label is separated with a special character. Popular characters are >> or >

✔ The separating characters and the spaces between the links and the labels are not
linked.
✔ The labels of each section preferably match the titles of that section.

Pattern Name: Account Registration

Problem: You wish to know who the active user is in order to provide personalized content
or opportunities to conduct a purchase.
Example:

Solution
Ask users to register an account in order to provide a personalized experience. Let users
register an account to allow saving information with your service, provide a personalized
experienced, or give access to limited resources
Usage

✔ Use when you want to restrict access to certain content.

✔ Use when you want to control which users have access to content.

✔ Use when contextual information must be presented to the user. The context can
depend on the user’s geography, time zone, age, interests, or even the user’s prior
interactions with your site (friends added, submitted content, etc.)
✔ Use when you want to protect your user’s information.

Pattern Name: Accordion

Problem: User needs to navigate among a website's main sections while still being able to
quickly browse to the subsection of another
Example:

Solution:
Each headline / section has a panel, which upon clicking can be expanded either vertically or
horizontally into showing its subsections. Vertical Accordion menus are the most frequently
used.
The transition from showing no options of a headline to showing a headline’s list of options
can be done either with a page refresh or with a javascript DHTML animation.
When one panel is clicked it is expanded, while other panels are collapsed
Pattern Name: Dropdown Menu
Problem: The user needs to navigate among sections of a website, but space to show such
navigation is limited.
Example:

Usage

✔ Use when there are between 2 – 9 sections of content that need a hierarchical
navigation structure.
✔ Use when your functionality resembles one of a desktop application. Imitate the
metaphor.
 ✔ Do not use it when there is a need to single out the location of the current section of
the site. Then use the Navigation Tab
Solution: A list of main sections is listed on the same horizontal line. Once the user has his
mouse cursor over one of the list items, a drop-down list of new options is shown below the
list item the mouse cursor is pointing at. The user can then follow the now vertically extended
list item down, to select the menu item he wants to click.

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.Design plays a significant role in
building a brand identity.
People remember and associate brands with logos, colors, fonts, and design patterns. In this
digital age, having an online presence is important for gaining a competitive edge. 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

Role of Branding in UI Design:

Having clear ideas about the brand can facilitate UI designers to choose appropriate design
options such as its color palette, shapes, types and fonts, illustration and icons, that support
and complement the branding concept. Keep the following steps in mind before your UI
design process:
1. Do proper research
2. Critically analyze your competition
3. Know your target audience
4. Explore the best UI design trends in the market
5. Skim through the best user interface design examples leading the industry
Contributing Factors in UI/UX Branding
Branding includes a set of visual elements such as shape, dimensions, color or sound are all
the contributing factors that make products memorable. People perceive visuals much faster
than listening or even reading. According to UX, UI should reflect brand values and qualities
through every illustration and interaction. Below are the contributing factors for effective
UI/UX development:
Typography
Content is a significant ingredient of a website. The product’s credibility does depend on its
content but also on how you visually represent it. Fonts have personalities of their own; some
appeal to your brand some don’t such as the san serif font; old but approachable and can
flatter you.
Color Palette
Colors impact people’s emotions such as Red is for love and passion, orange is energetic and
happy, yellow indicates deceit, blue is for trust, etc., and therefore, careful consideration is
necessary when choosing a color scheme. Some biggest giants like Dell, Facebook, HP, and
Intel are using blue in their logos to create a brand identity.
Micro-Interactions
They are small animations but significant. These tiny interactions guide and keep the users
engaged and hold the power to enhance the user experience and brand identity. Whenever I
think of micro animations, I think of Invision and Stripe. Because they have exciting
animations that leave a striking impression due to their eye-catching properties.
Visuals
Images grab the user’s attention immediately. Instead of using random images, choose
images that tell a significant story. Stock images are easy to use but they don’t usually
convey the meaning, therefore, custom brand imagery in your web app UI design delivers a
fine narrative consistent with the brand image

Example: Southwest’s new exterior design put the heart logo on the belly of the plane, to
visually reinforce “love of People” as a core brand message.
Components of Brand in the Real World: Southwest Airlines Consider Southwest Airlines.
This airline is recognized for its consistent and differentiated brand, which claims to put
customers at the center of its business model. Southwest showcases this core brand message
and its ―love of People‖ through the brand visuals, tone and behavior.
For example, last year, Southwest launched a new look for the exterior of its planes, calling it
a ―bold new look that puts our heart front and center for everyone to see.‖ It extended its
brand visuals to even the plane itself, putting the heart logo that represents its love for its
customers on the belly of the plane.
UX Is a Brand Differentiator Brands that choose to address an unmet user need at the core of
their business are regularly disrupting industries by focusing on UX and, specifically, on
unmet user needs as brand differentiators—and succeeding in oversaturated markets by doing
so. Branding can be critically important when consumers decide whether to interact with
organizations — make a purchase, use a service, apply for employment, or even sign up for a
newsletter. While the perception of a brand cannot be strictly controlled, it can certainly be
influenced
Finding the Links Between Interaction and Brand:
The interactivity attributes
Responsiveness: How quickly an element responds to a user action
Direct or indirect manipulation: Whether a user can manipulate an element directly by
interacting with the element itself (for example, by clicking on it) or indirectly (for example,
by using a tool like slider)
Precision: How precise a user can be when interacting with the element (for example, being
able to select specific parts of an element, or just the whole)
liability: How easy or difficult it is for a user to effect a change on an element (for example,
clicking twice to expand an element, or simply hovering over the element to expand it)
Continuous or discrete behavior: How continuous or discrete (with stops or separate steps)
the transitions between states are ?
Clear labels or no labels: How well the system communicates available actions and the
consequences of those actions (Tolstrup and Heyer call this attribute ―Feedback)
Expected or unexpected behavior: Whether an element‘s behavior conforms with a user‘s
expectations
Consistent or inconsistent behavior: Whether an element‘s behavior conforms with
established patterns (either internal or external to the system).
Applying These Findings to Your Designs
● Consider how these interaction-design attributes might support or detract from your
stated brand values.
● Pay special attention to inconsistent or unexpected interactive elements.
● Conduct a brand/emotion evaluation of your interaction
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.

Style Guide :
Front-end style guides are a modular collection of all the elements in your product’s user
interface, together with code snippets for developers to copy and paste as needed to
implement those elements. They include common UI components like buttons, form-input
elements, navigation menus, modal overlays, and icons.
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.
Features of Front-End Style Guide A front-end style guide is both a deliverable created by
the UX team and a tool used by the entire team for maintaining consistent, nimble product
design in a modular format. Front-end style guides are distinct from design pattern libraries,
which are a longstanding tool used by UX practitioners to define broad design ideas, rather
than specific implementation details. The most important feature that separates front-end
style guides from other types of style guides is that front-end style guides are rarely static, but
are living collections of UI- elements‘ descriptions and corresponding code snippets. Front-
end style guides take the form of a web page or other interactive digital asset, rather than a
PDF. We can typically interact with all the components in a front-end style guide, and many
development teams choose to implement them so that any change made to components in a
style guide will automatically update the product‘s design as well.