UNIT II FOUNDATIONS OF UI DESIGN

Visual and UI Principles - UI Elements and Patterns - Interaction Behaviours and

Principles – Branding - Style Guides

VISUAL AND UI PRINCIPLES

Visual Design vs UI Design is essential for anyone involved in creating digital
products or experiences. Visual Design focuses on the aesthetics and overall look and feel
of a design, while UI Design centres around the user interface and how users interact with
the design.

The main difference between Visual Design and UI Design lies in their specific
areas of focus. Visual Design encompasses various elements such as color theory,
typography, layout, and imagery to create visually appealing designs that evoke emotions
and communicate messages effectively. On the other hand, UI Design deals with designing
interactive elements, navigation, and functionality to ensure a seamless user experience.

Both Visual Design and UI Design play crucial roles in enhancing user experience.
Visual Design creates a strong first impression and attracts users, while UI Design ensures
that the design is intuitive, user-friendly, and easy to navigate.

In Visual Design, understanding principles like balance, contrast, proportion, and

hierarchy are important to create visually pleasing compositions. Additionally, color
theory and typography are key elements that evoke certain emotions and convey
information effectively.

In UI Design, principles like consistency, simplicity, and intuitiveness are crucial.

Interactive elements such as buttons, menus, forms, and animations should be designed
to provide clear feedback to users. Popular tools for Visual Design include :
 Adobe Photoshop
 Illustrator
 Sketch
  Figma
These tools offer a wide range of features to manipulate images and create stunning
visual compositions.
For UI Design, popular tools include:
 Adobe XD
 Figma
 Sketch
 InVision.
These tools allow designers to create interactive prototypes and test the usability
of their designs.

When combining Visual Design with UI Design, it is important to create

harmonious designs where the aesthetics align seamlessly with the user interface.
Collaboration between Visual Designers and UI Designers is crucial to ensure a cohesive
user experience.

Difference between Visual and UI design

Visual design is a broad discipline which can apply to many different design
contexts and tasks. It may include the design of a product itself, such as a website or app,
but can also extend to any visual materials relating to the product or brand. For example,
designing the visuals for a social media campaign or creating a branded email marketing
template. Generally speaking, visual design focuses on digital assets, distinguishing it
from graphic design which has traditionally focused on print.

UI design is a much narrower discipline which focuses on designing digital

product interfaces. A product interface is the surface layer of a website or app which the
user sees and interacts with. It’s made up of all the different screens, buttons, and
interactive elements you need in order to navigate and use the product.

In short: Visual design encompasses all the aesthetics associated with a

product or brand, while UI design relates exclusively and specifically to the design of
the product interface itself.

Visual design

Visual design is all about the aesthetics associated with a particular product or
brand. It can include designing the look of the product itself, as well as any other assets
that are used to represent the product/brand in some way.

Think about the Nike swoosh logo, the famous yellow ‘M’ on a red background that
you instantly recognise as McDonald’s, or the iconic Starbucks logo often featured on a
backdrop of deep green. Even the NHS has meticulous guidelines around its visual
identity. These are all examples of visual design and its role in creating a strong,
memorable brand.

Visual design principles

Some of the most important visual design principles include:

 Contrast: Contrast is created through colour, size, and/or shape, helping to

distinguish between different elements and ensure legibility.

 Scale: This refers to how large or small different elements appear in relation to
one another. Scale can be used to communicate hierarchy (more important
elements may be bigger in order to draw attention), or to create balance or depth
within the design.

 Unity: This is about establishing a sense of harmony between different elements

on the page, conveying that they belong together as part of a cohesive design.

 Hierarchy: Hierarchy is used to convey the importance of each element. Size,

position, and colour can all be used to establish visual hierarchy within a design.
 Dominance: Visual designers might want to make a certain element stand out, so
they use things like size and colour to convey dominance.
 Balance: Balance is the principle governing how we distribute the elements of a
design evenly. Balanced designs tend to appear calm, stable and natural, while
imbalanced designs make us feel uneasy.
 Gestalt : Gestalt refers to our tendency to perceive the sum of all parts as opposed
to the individual elements. The human eye and brain perceive a unified shape in a
different way to the way they perceive the individual parts of such shapes.
UI design

A user interface is the point of interaction between humans and computers,

containing everything you see, hear, click, tap, or swipe on when using a website, app, or
piece of software. UI design is the process of designing not only how these interfaces look,
but also how they act and react when a user performs an action.
The goal of UI design is to ensure that digital products are aesthetically
pleasing and provide all the visual, interactive elements and touchpoints the user needs
in order to access and navigate the product.
Consider this website homepage for Native Denims, a sustainable fashion
company. It features text in a particular font and colour; a “Shop now” button which,
when you click it, takes you to their product range; various menu items to help you
navigate the site; and a background image. The space, contrast, and hierarchy between
the different elements has also been carefully designed to create a user-friendly aesthetic.
These are all important aspects of UI design.
UI design principles

Some of the most important UI design principles include:

 Consistency: This is about creating visual consistency throughout the product,

ensuring that the same fonts, colour schemes, icon designs, etc, are used across the
board. This is similar to how visual designers create a cohesive visual brand.

 Familiarity: UI design is as much about usability as it is about aesthetics, so the

principle of familiarity considers how the end user will expect the interface to
behave based on their experience with similar products—and designing
accordingly.

 Feedback: Visual and text-related feedback built into the product interface helps
the user to successfully complete their tasks. For example, if you’re shopping
online and click to add an item to your cart, you’ll want some kind of confirmation
that it’s been successfully added.

 Efficiency: Today’s users want speed and convenience. The efficiency principle
says that the user interface should cater to different types of users, providing
shortcuts and accelerators for experienced users who are already well-versed in
how the interface works.

Elements of Visual Design

LINE : Lines are strokes connecting two points, and the most basic element of visual
design. We can use them to create shapes, and when we repeat them, we can form
patterns that create textures.
SHAPE : Shapes are self-contained areas, usually formed by lines (although they may also
be formed by using a different colour, value or texture). A shape has two dimensions:
length and width.

NEGATIVE/WHITE SPACE: Negative space (also known as white space) is the empty
area around a (positive) shape. The relation between the shape and the space is called
figure/ground, where the shape is the figure and the area around the shape is the ground.
Negative space is just as important as the positive shape itself — because it helps to
define the boundaries of the positive space and brings balance to a composition.

VOLUME : Volume applies to visuals that are three-dimensional and have length, width
and depth. We rarely use volume in visual design, because most digital products end up
being viewed on a 2D screen, although some apps and websites do use 3D models and
graphics.

VALUE: Value, quite simply, describes light and dark.

COLOUR : Colour is an element of light. Colour theory is a branch of design focused on the
mixing and usage of different colours in design and art. In colour theory, an important
distinction exists between colours that mix subtractively and colours that mix additively.

 Subtractive Mix

In paint, colours mix subtractively because the pigments in paints absorb light.
When different pigments are mixed together, the mixture absorbs a wider range of
light, resulting in a darker colour. A subtractive mix of cyan, magenta and yellow will
result in a black colour. A subtractive mix of colours in paint and print produces the
CMYK (i.e., Cyan, Magenta, Yellow and blacK) colour system.

 Additive Mix

In digital design, where the product shows up on a screen, colours mix

additively, since the screen emits light and colours add to one another accordingly.
When different colours are mixed together on a screen, the mixture emits a wider
range of light, resulting in a lighter colour. An additive mix of red, blue and green
colours on screens will produce white light. An additive mix of colours on digital
screens produces the RGB (i.e., Red, Green, Blue) colour system.

The subtractive mix of colours in paint and print produces the CMYK colour
system. The additive mix of colours on digital screens produces the RGB colour
system.

TEXTURE: Texture is the surface quality of an object.

 Texture can be created by a repeated pattern of lines, or by using tiled
images of textures. Above, the diagonal lines add a ‗grip‘ effect to an otherwise
‗smooth‘ rectangle.
Types of texture
There are two types of textures: tactile textures, where you can feel the texture,
and implied textures, where you can only see — i.e., not feel — the texture. Most
visual designers will work with implied textures, since screens are unable to
produce tactile textures.
UI ELEMENTS AND PATTERNS
UI Elements
When designing your interface, try to be consistent and predictable in your choice
of interface elements. Whether they are aware of it or not, users have become familiar
with elements acting in a certain way, so choosing to adopt those elements when
appropriate will help with task completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

 Input Controls: checkboxes, radio buttons, dropdown lists, list boxes,

buttons, toggles, text fields, date field

Element Description Examples

Checkboxes Checkboxes allow the user to

select one or more options from
a set. It is usually best to
present checkboxes in a vertical
list. More than one column is
acceptable as well if the list is
long enough that it might
require scrolling or if
comparison of terms might be
necessary.

Radio Radio buttons are used to allow

buttons users to select one item at a
time.
 Dropdown Dropdown lists allow users to
lists select one item at a time,
similarly to radio buttons, but
are more compact allowing you
to save space. Consider adding
text to the field, such as ‗Select
one‘ to help the user recognize
the necessary action.

 Navigational Components: breadcrumb, slider, search field, pagination, slider,

tags, icons

Element Description Examples

Search Field A search box allows

users to enter a
keyword or phrase
(query) and submit
it to search the
index with the
intention of getting
back the most
relevant results.
Typically search
fields are single-line
text boxes and are
often accompanied
by a search button.
Breadcrumb Breadcrumbs allow
users to identify
their current
location within the
system by providing
a clickable trail of
proceeding pages to
navigate by.

Pagination Pagination divides

content up between
pages, and allows
users to skip
between pages or
go in order through
the content.

Tags Tags allow users to

find content in the
same
category. Some
tagging systems
also allow users to
apply their own tags
to content by
entering them into
the system.
 Sliders A slider, also
known as a track
bar, allows users to
set or adjust a
value. When the
user changes the
value, it does not
change the format
of the interface or
other info on the
screen.

Icons An icon is a
simplified image
serving as an
intuitive symbol
that is used to help
users to navigate
the system.
Typically, icons are
hyperlinked.

Image Image carousels

Carousel allow users to
browse through a
set of items and
make a selection of
one if they so
choose. Typically,
the images are
hyperlinked

 Informational Components: tooltips, icons, progress bar, notifications, message

boxes, modal windows

Element Description Examples

Notifications A notification is an
 update message that
announces
something new for
the user to see.
Notifications are
typically used to
indicate items such
as, the successful
completion of a
task, or an error or
warning message.

Progress A progress bar

Bars indicates where a
user is as they
advance through a
series of steps in a
process. Typically,
progress bars are
not clickable.

Tool A tooltip allows a

Tips user to see hints
when they hover
over an item
indicating the
name or purpose
of the item.

Message A message box is

Boxes a small window
that provides
information to
users and requires
them to take an
action before they
can move forward.
 Modal A modal window
Window requires users to
(pop-up) interact with it in
some way before
they can return to
the system.

 Containers: accordion

Element Description Examples

Accordion An accordion is a vertically stacked

list of items that utilizes show/ hide
functionality. When a label is
clicked, it expands the section
showing the content within. There
can have one or more items
showing at a time and may have
default states that reveal one or
more sections without the user
clicking

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.

UI design patterns are exactly like those blueprints but for digital
interfaces. They are recurring solutions to common design challenges, providing tried-
and-tested guidelines for creating effective user interfaces.

Just like a magnifying glass icon instantly communicates “search,” these patterns
help users navigate and interact with digital interfaces effortlessly.

The impact of effective UI design patterns is far-reaching. When applied correctly,

they enhance the user experience in several ways:
 1. Intuitive Navigation: Users can easily find what they’re looking for, reducing
frustration and increasing satisfaction.
2. Consistency: Familiar patterns create a cohesive experience across different pages
or sections of a website or app.
3. Increased Engagement: When users feel comfortable and understand an
interface, they are more likely to engage, return, and recommend it.
4. Efficiency: Users can complete tasks faster and with fewer errors.

To ensure consistency and streamline the design process, designers can utilize UI
kits and design systems. These resources provide pre-designed UI components that
adhere to the guidelines of a design system, ensuring a cohesive and efficient workflow.

The Top 10 UI Design Patterns:

UI design is not a one-size-fits-all approach. However, having a set of design
patterns can provide valuable guidelines and solutions based on industry best practices
and user experience research.

Let’s explore some common UI design patterns that can help designers create
modern and user-friendly interfaces.

1. Breadcrumbs
Breadcrumbs act as a secondary navigation tool that helps users retrace their
steps within a website or app’s hierarchical structure.

They provide users with a clear path and context of their location within the site.
Breadcrumbs are especially useful when a website or app has a deep hierarchy with
multiple levels of pages or sections.

By implementing breadcrumbs, users can easily navigate back to higher-level

pages or the homepage.

Anatomy of breadcrumbs:
  Active state: Clickable links that display the user’s path in the app or website.
 Slash: A visual separator between different links or pages in the breadcrumb trail.
 Current state: Indicates the current page or position the user is on.

Things to keep in mind when using breadcrumbs:

 Start with the homepage and end with the current page.
 Keep breadcrumbs small and subtle, not dominating the page.
 Use simple separators like a slash (/) to maintain clarity.
 Highlight the current page, making it stand out and unclickable.

2. Button
Buttons are essential elements in user interfaces that trigger specific actions based
on user interaction.

They can be used for various purposes, including calls to action, navigation, search,
sharing, and more. Buttons guide users through an interface and highlight the most
important actions they can take.

Anatomy of a button:
  Button label: The text or action name is displayed on the button.
 Icons: Optional visual symbols that accompany the text to make actions or choices
more noticeable.

Things to keep in mind when designing buttons:

 Understand the button’s role and clear function.

 Determine the visual importance of the button based on its purpose.
 Organize button hierarchy logically based on importance.
 Choose the right shape, color, and padding to make buttons stand out.
 Use legible typefaces and provide feedback when a button is clicked.

3. Badge
Badges are small interactive or static elements used to label, categorize, or
organize items using text. They provide quick visual cues that help direct users’ attention
to important information, updates, or actions.

Badges can indicate things like the number of unread messages or notifications,
status indicators, or filtering and sorting options.

Anatomy of a badge:
  Label: Text or name attached to the badge, providing context and description.
 Supporting icons: Visual symbols used alongside text to provide extra information
or emphasis.

Things to keep in mind when using badges:

 Make the purpose of badges clear and instantly recognizable.

 Use a consistent design across shapes, colors, and placement.
 Limit text to keep badges concise and easily readable.
 Avoid overusing badges and highlight only the most important information.
 Use colors and opacity wisely to differentiate between different types of badges.

4. Date Picker/Calendar
Date pickers or calendars allow users to select specific dates or date ranges. They
are commonly used in web forms for tasks like scheduling, making reservations, or filling
out forms that require date information.

Date pickers eliminate the need for users to remember specific date formats and
reduce the likelihood of input errors.

Anatomy of a date picker:

  Date field: Displays the chosen date within the selected month.
 Separator: Spaces between the date components (day, month, year) to
differentiate each.
 Time input label: Labels like “Hours,” “Minutes,” and “Seconds” guide users on
what to input.

Things to keep in mind when designing date pickers:

 Keep the design simple and provide format hints within the input field.
 Set useful defaults for the date picker, such as the current date or end of the year.
 Break date fields for efficient navigation, and display the month and year on top.
 Make user behavior intuitive by ensuring compatibility with different input
methods.
 Provide clear feedback and validation for correct date input.

5. File Upload
File uploaders allow users to upload files to a server or cloud storage. They are
commonly used in forms or as standalone elements.

File upload components simplify the process of transferring files and make it more
intuitive and error-free. They provide immediate visual feedback on the upload process
and allow users to track progress.
Anatomy of a file upload:

 Leading icon: A visual symbol indicating the file upload action.

 Prompt Title: The main heading or instruction for the file upload.
 Prompt description: Additional information or guidelines about the file upload.
 File button: A clickable button that initiates the file upload process.

Things to keep in mind when designing file upload components:

 Provide clear labels and descriptions to guide users through the upload process.
 Make the drag-and-drop functionality intuitive for users to upload files.
 Show file details and progress to keep users informed during the upload process.
 Handle long filenames and use icons to visually represent file types.
 Provide feedback on successful uploads or errors during the process.

6. Rich Input Field

Rich input fields are advanced versions of traditional text boxes. They offer
additional functionalities like auto-complete, formatting options, embedded links, and
integrated dropdowns.

These fields enhance the user experience by allowing users to input and edit
various types of information more efficiently.
Anatomy of a rich input field:

 Control field: Allows users to input or select data.

 Label: Describes the purpose or type of input required.
 Description: Provides additional information or guidance for the input field.

Things to keep in mind when designing rich input fields:

 Select the appropriate type of rich input field based on the required data.
 Keep the design simple and provide clear instructions and labels.
 Provide instant feedback and validation to help users input data correctly.
 Utilize placeholder text to give examples or hints about the required data format.
 Make user interactions seamless across different input methods.

7. Loader vs. Progress Bar

Loaders and progress bars provide visual feedback to users during time-
consuming processes. Loaders indicate that a process is underway, such as data retrieval
or slow computations.

Progress bars, on the other hand, show the duration of a process or journey,
providing users with an understanding of how long they need to wait.
Anatomy of a loader:

 Spinner: A visual aid that animates when a process is loading.

 Description: Optional text that adds feedback to the loading status.

Anatomy of a progress bar:

 Label: The process or journey the progress bar refers to.

 Progress bar: The background field and indicator that represents the progress.
 Caption: Additional information or context related to the progress.

Things to keep in mind when using loaders and progress bars:

 Minimize display time to keep the user experience smooth.

 Provide time estimations to set user expectations.
 Explain the reason for the delay or progress to keep users informed.
 Differentiate between active, success, error, and paused/idle states.
 Avoid overwhelming users and carefully evaluate the context for usage.

8. Time Picker
 A time picker allows users to select specific times or durations. It is particularly
useful for scheduling tasks, making appointments, or filling out forms that require time
information.

Time pickers simplify the process of entering time and reduce the likelihood of
input errors.

Anatomy of a time picker:

 Time input: Allows users to input specific hours, minutes, and seconds.
 Separator: Spaces between the time components to differentiate each.
 Time input label: Labels like “Hours,” “Minutes,” and “Seconds” guide users on
what to input.
 Time period: Buttons to choose between “AM” or “PM” for the time being set.

Things to keep in mind when designing time pickers:

 Default to common times to save users time and effort.

 Clearly indicate AM/PM to avoid confusion.
 Provide feedback on the user’s input and validation if necessary.
 Make corrections easy by allowing users to modify their selection.
 Display the time picker in a legible and user-friendly manner.
9. Data Visualization (Stat and Table)
Data visualization presents complex data through visual elements, making it easier
for users to understand and analyze information.

Two common types of data visualization patterns are stat components and tables.

Anatomy of a stat component:

 Leading icon: Supports the visual representation of the statistical data.

 Stat content: Combination of overline, label, and description text to set the context
of the stat.
 Badge: Optionally shows a positive, neutral, or negative change in the data.

Anatomy of a table:
  Table column header: Indicates the column heading with optional actions.
 Leading cell: Shows the first column in the table.
 General content cell: Contains various content types and makes up the rest of the
cells in the table.

Things to keep in mind when designing data visualization components:

 Label clearly to provide an immediate understanding of the represented data.

 Provide contextual information and descriptions to explain the data.
 Indicate periodic data changes using badges or other visual cues.
 Make sure tables are editable when necessary and provide feedback on user
interaction.
 Use a diverse color palette and size variations for better visual recognition.

10. Inline Alert

Inline alerts are messages placed within the content to provide timely information or
feedback to users. These alerts can be used for form validation, confirmation messages,
error messages, or subscription/purchase confirmations.

Inline alerts ensure that users receive important information without being taken out of
their current context.
Anatomy of an inline alert:

 Label: Indicates the alert’s purpose in a concise manner.

 Dismiss icon: Allows users to dismiss the alert if desired.
 Description: Provides additional information or context related to the alert.
 Actions: Includes relevant actions that users can take.

Things to keep in mind when using inline alerts:

 Place alerts in proximity to related items for context-specific feedback.

 Position alerts appropriately within forms or content sections.
 Maintain a consistent color scheme and design for different types of alerts.
 Keep alerts short and straightforward, specifying a maximum character limit.
 Ensure that alerts do not obstruct or hide other content on the page.

INTERACTION BEHAVIOURS AND PRINCIPLES

Interaction design is the process of designing digital interfaces that enable users to
interact with digital products, services, or systems. The primary goal of interaction design
is to make the interaction between the user and the digital interface as intuitive, efficient,
and enjoyable as possible. The process involves identifying the user’s needs, behaviors,
and expectations and designing digital interfaces that meet those needs.

Interaction Design, also known as Interactive Design (IxD), is the field to design
the behavior of human-computer systems. As an interaction designer, we have to create
the content and functions of products that are useful, easy to use, user-friendly,
technically feasible, and of commercial interest. All of these are meant to improve the
user experience.

Principles of Interaction design

 Don Norman, the father of usability and co-founder of the Nielsen Norman Group,
stresses the importance of thinking about people and the interaction they will have with
the products and systems being developed.

This is why areas such as UX Design are so important within a company. To ensure
that the experiences of the end users – and anyone else who interacts with the product –
are the best they can be.But how do you ensure that all these users have a great
experience with your design?

With this in mind, Norman wrote – based on the concept of User-Centered

Design – 6 fundamental principles of Interaction Design. Check each one out below.

1. Visibility
The principle of visibility brings the matter of discovery.

The user discovers the interface functions by the simple fact that they are visible
for interaction. In other words, the more visible a function is, the more the users will
notice and use it.

In this regard, visible buttons and menus make the user's journey easier.
Whereas if these functions are not visible, they will not be used.

Regarding visibility, it's important to pay attention to the prioritization of

functions.
It's not recommended to put buttons and menus for all the functionalities of a
system. The screen becomes cluttered and there is no distinction between the most
important functions.
The big challenge is to understand how to prioritize content and functions.
Another example of visibility is the button for writing e-mails in the Gmail inbox. With
this feature, the user finds the function almost instinctively.

2. Feedback
 Feedback is the response that the user should receive after performing some
action on the interface.
For every interaction with a product, it is natural to create the expectation of a
response. Be it confirming the success or failure of the action. If this doesn't happen, the
user may have doubts and their experience may be impacted.

A very simple and everyday example is the simple click of a button. If there is no
feedback ensuring that the button was clicked, the user will keep on clicking.We can
classify feedback into two categories:
 Activation Feedback: when the response to an action is sensorial, such as a
visual or sound effect. For example: when you click on a button, it changes color or
emits a sound, confirming that it has been activated.

 Behavioral Feedback: when the response indicates that the action had some
effect within the system. For example: when you click on a button to finalize your
online purchase, a message appears confirming that your action was successfully
performed.

3. Constraints
 To avoid any invalid or incorrect action by the user, a system must
have constraints. Constraints, within Interaction Design, can be both physical and
behavioural.

Physical constraints can be exemplified by the cell phone screen itself. There is no
way to have interaction outside of it.The behavioural constraints, on the other hand, are
more related to the user experience and what actions they can or cannot perform within
the interface.

An interesting example is the action buttons in any computer program. When an

action is restricted to the user, the button usually appears gray and opaque, making it
clear that the function is not available at that moment.

This kind of restriction is also common on online forms, where the "submit"
button is inactive until the entire form is filled out correctly.

A lack of restrictions can cause confusion and frustration for the users, causing
them to click incorrectly on inactive buttons, or submit a form with incomplete
information.

4.Mapping
It is clear that any icon, button, or control, when activated, will trigger some
function within the system.But in addition to this, it is important to have
a connection between the design and the function linked to it. This connection, within
Interaction Design, is called Mapping.

This way, the more the users assimilate the controls with their perception of
reality, the better the interaction and the experience.

For example, the volume button shows longer bars as the volume increases and
shorter bars as the volume decreases.
 Although mapping may seem straightforward, it requires careful attention and
testing with real users.

One useful way to assess the accuracy of mapping is to examine the design of a
control and consider the user's expectation for it.

For instance, if a control indicates a gradual increase or decrease, the symbols "+"
and "-" may be used. Similarly, if the control is used to start a video, the user would likely
expect a button with a triangle symbolizing play

5.Consistency
One of the ways to improve the user experience and ensure a fast learning curve
is to use patterns.

Creating patterns helps the user assimilate your system better, making
navigation simpler and easier.

Consistency, in interaction design, is nothing more than creating these patterns

within the system. Representing controls with similar functions in a similar way,
positioning buttons in the same place and in the same way, using the same colors, etc.

A lack of consistency can cause delays in action and confusion for the user. The
idea is always to have the user assimilate every function of your system, without having
to worry about exceptions. In addition, it's important to understand if there is consistency
with other similar systems.

For example, if on all websites writing and reading are done from left to right, it is
not recommended that your website does it any other way. The case is exaggerated, but it
helps to understand. Doing something differently is fine if it doesn't interfere with the
way the user is used to doing it in other systems.
6.Affordance and Signifiers
 Affordances:
The concept of affordance is connected to the attributes that an object has
and that makes a certain interaction possible.

For example, a glass window has attributes that enable us to see through it. Its
hinges have attributes that enable it to open in a particular direction, and the opening of
the window enables air to flow through it. These are all examples of affordances – the
potential interaction relations between the user and the system.
 Signifiers:
Signifiers are the signs that show that a connection exists and how to use it.
They are the visual attributes that indicate how something works.

In the window example, the design of the handle indicates which way it opens, or
the shape of the hinges can clearly show whether the window should be pulled or pushed
(or both).Affordances and signifiers are concepts in Interaction Design that go
together and are commonly mistaken.

Design process
The process of designing effective digital interfaces involves several stages. These
stages include:

Research: The first stage of the design process involves researching the needs,
behaviors, and expectations of the users who will be interacting with the digital interface.

Prototyping: After conducting research, the next stage is to create a prototype of

the digital interface. This can be a low-fidelity wireframe or a high-fidelity mockup.

Testing: The prototype should be tested with users to identify any issues or areas
for improvement.
 Refining: Based on user feedback, the prototype should be refined and iterated
until it meets the needs of the users.

BRANDING
Branding and UI design are two things that go hand in hand. UI designers work
with branding elements when designing user interfaces which come together to fit like
pieces of a puzzle.

Any UI design, whether it be an app or webpage, needs to act as an extension of the

brand. A website won’t be efficient in gaining brand loyalty and trust if its visual interface
doesn’t contain recognisable elements of the brand. There needs to be a distinct visual
flow between branding and interfaces.

UI Designers work with branding elements like logos, colour palettes, typography,
and imagery when designing. For any design to be effective, all of these elements need to
be locked down. If the UI designer is provided with all of these, the final result will be an
interface that runs smoothly alongside the brand.

Branding and UI Design

1. Words translated into art
All storytelling starts off as just words on a page until UI design teams enter the
process. Focusing on creating that brand loyalty and storytelling through design, UI
designers must transmit the brand’s message through all those design elements: fonts,
spacing, images, buttons and color palettes make up the entire feeling of the project:

Fonts: a font like Times New Roman can be professional and clean-cut; Courier
New feels like the text is straight from a typewriter from the early 20th century.

Color palette: color theory comes into play, as electric blue and dark black
transmit a pop of strong, bright color on an all-encompassing dark canvas, telling a story
of strength, hope, and subdue.

Spacing and layout: the choice to place the text far apart can induce tranquillity
and grandness.

2. Credibility goes a long way

When it comes to design elements in UI, all details count. To make the experience
more credible, UI designers must flesh out the entire brand’s identity so that they can be
consistent and intentional when it comes time to choose the color palette, images,
graphics, font, and more.
3. A distinct and memorable logo
What do a multicolored capital G and a green and white smiling mermaid have in
common? They’re both logos for very well-known multinational companies with strong
brand identities: Google and Starbucks.

When integrating UI design elements with brand identity, they have to be that
perfect match for each other, capturing and retaining user attention. The final decision for
a distinct and memorable logo can be a painstaking one, but UI designers know what will
work in the end and can adjust if necessary later.

Elements used within UI design

1. Logo
It’s been claimed that 75% of people recognise a brand by its logo first. Logos are
the backbone of a brand’s visual identity, everything else stems off from that. Therefore
when designing a user interface, the logo should be one of the first things considered. It’s
standard for a logo to be placed somewhere in the header, as well as in the footer. As a
result, the logo is one of the first things a user sees when they load the webpage and can
instantly make the connection between the brand and interface.

Examples of how Boots and the National Trust position their logos within their websites. By
placing their logos at the top of the page, it ensures that their logos are one of the first things
a user sees when visiting their websites.

2.Colour
UI Designers will use a brand’s colour palette to pick out which colours to use for
backgrounds, text, buttons, and other UI elements. Colour plays a huge visual role in both
branding and UI design, so it’s important for colours to be consistently used across print
and digital interfaces.
An example of how the Natwest colour palette (left) has been injected into their UI design.
They’ve used purple as one of the most prominent colours, then brighter colours are used to
add bursts of colour. Natwest’s website is a prime example of brands sticking to their colours
to keep branding consistent across print and digital.

3.Typography
UI designers will use any typefaces specified in the branding guidelines when they
come to inserting titles, subtitles, copy blocks and any other element of texts. Branding
guidelines specify which typefaces should be used for different textual elements.
Therefore this can be easily carried across by UI designers when designing.

An example of how Tripadvisor has followed its brand guidelines when it comes to
typography. The guidelines advise that their font ‘Trip Sans’ should be used for titles and
‘Trip Sans Mono’ for body copy. The guidelines also make recommendations for ‘web safe’
fonts that can be used when Trip Sans isn’t available for use. By covering all possible bases
when it comes to typography, Tripadvisor ensures that its brand will stay consistent across
all platforms.

4. Imagery
Brand guidelines tend to include specifics as to what style of imagery should be
used within branding. UI designers will use the imagery guidelines when looking for stock
imagery to place within their designs.

Alternatively, UI designers can be provided with standard imagery and

illustrations that fit within the brand guidelines – which they will then take and insert
into the UI designs.
Starbucks gives detailed advice when it comes to imagery used across their brand. Starbucks’
brand guidelines stipulate that illustration used within their branding should evolve with
trends, and suggest that the use of textures would be ideal. They also recommend that, where
possible, their ‘Starbucks green’ shades should be used within illustrations. The above
example of Starbucks’ current homepage achieves this. The illustrations used are on-trend,
contain texture – and most importantly they contain ‘Starbucks green’.

Overall, branding plays an important role in UI design. Branding elements act as

pieces that slot together with UI elements to get the perfect result. Creating a UI interface
that works well for the user and is relevant to the brand.

STYLE GUIDES
A UI style guide contains all the rules and guidelines for the design of a product’s
user interface. It includes everything from typography to iconography to color
palettes and beyond.

Importance of UI style guide

Here’s what makes this a handy document to have in your back pocket:

 The product will have a consistent look and feel, which creates a more professional
appearance and gives users an intuitive experience.
 Designers can easily work together on the same project, as they can refer to the
style guide for answers (rather than guess).
 Consistency saves time and money in the long run, so designers don’t have to
reinvent the wheel every time they start a new project.

The risks of working without a UI style guide

Without one, you’re playing with fire. Here’s what to watch out for:

 Your product could lack consistency, making it appear amateur or off-putting to

users. Visual cues play a big role in the user journey; when they’re inconsistent, the
 product might not deliver the experience users expect. Your product needs to look
professional and trustworthy if you want people to part with their hard-earned
money.
 It will be harder for designers to work together, as they won’t have a common
reference point. This can lead to frustration and wasted time.
 You’ll spend more money in the long run, as you’ll have to keep redesigning
elements you could have just reused.
 There will be no single source of truth for the product’s design, which can lead to
confusion and disagreement among the team.

What should your style guide include?

Now that we’ve established why having a UI design style guide is smart, let’s consider
what it should include. You can also use this as a checklist when creating your guide.

 A grid system: A grid system is a set of rules governing the placement of elements
on a page. It helps to create a sense of order and hierarchy and makes it easier for
designers to lay out content in an easily understandable format. The grid system
includes everything from the width of the margins to the size of the gutters.
 Spacings: This is the distance between elements on a page and includes
everything from the margins to the padding. Proper spacing is important for
creating balance and harmony in your design. Use smaller spacings for tweaking
elements within components and larger spacings for placing elements on the page.
 Breakpoints: A breakpoint is a point at which the layout of a page changes to
accommodate different screen sizes. This is important for responsive design, as it
ensures the content will look good on all devices.
 Typography: Typography refers to all the rules for formatting and place type. This
includes everything from the typefaces and font sizes to line spacing and the
hierarchy of headings and subheadings.
 Text values: Text values are the way words appear in your design, such as putting
all titles in title case. Button CTAs might be in all caps, and body text might be in
sentence case. Define your rules and stick to them!
 Numerical values: Numerical values are your rules for numbers. For example, you
might decide all prices should appear with two decimal places, or dates need to be
written in a certain format. Again, define your rules and stick to them.
 Rules for buttons: Buttons are one of the most important elements in any UI, as
they’re the primary way users interact with your product. As such, it’s important to
have strict rules for how you’ll design them. This includes everything from the
color and shape of the button to the size of the text and the spacing around it. You
should also avoid having multiple buttons on one and get user feedback on their
actions. No one likes clicking ‘pay now’ only for nothing to happen. Cue panic!
 Iconography: An Iconography system contains all the rules for using icons. This
includes everything from the style of the icons to their color to their size.
  Colour palette: A color palette is a set of complementary colors used in your
product. A palette helps to create a unified look and feel and makes it easier for
designers to choose colors that work well together.
 Layout guidelines: These should contain all the rules for how content is laid
out on a page. This includes everything from the size and spacing of elements to
the use of white space.
 Imagery: Imagery guidelines contain all the rules for how you use images, such as
the size and resolution of images and their placement on the page.
 Logos: Logo guidelines include everything from the shape and size of the logo to
its color and placement.
 Accessibility: Accessibility guidelines contain all the rules for how you make your
product usable for people with extra needs. This includes everything from the use
of alternative text for images to the use of easily readable fonts.
 Rules for forms: Form design rules include everything from labels and input fields
to the spacing between elements. It should also encompass error messages, visual
cues (such as a longer field for ‘other comments’), and label placement.
 Rules for tables: Guidelines for tables should include everything from headers
and footers to the shading of cells. You should also specify text alignment within
cells and whether or not to use borders.
 Gestalt principles and the law of similarity: The law of similarity states that
similar elements look like they’re part of the same group or related in some way.
You can use this to your advantage by grouping related items together and
ensuring the items in each group are similar. Why is it important to include this in
your style guide? Because it will make your product easier to use and help people
understand how to navigate it.

How to make a UI style guide: best practice

Creating a UI design style guide is no easy feat. But with our best practice tips, you’ll be
well on your way to success. Here’s what you need to do:

1. Define the purpose of your style guide

The first step in creating a style guide is to define its purpose. What are you trying
to achieve with it? Do you want to create a unified look and feel for your product? Do you
want to ensure all your designers are using the same rules? (Probably both.) Once you
know what you want to achieve, you can start planning how to get there.

2. Know your audience

Who will use your style guide? Is it just for your design team, or will it also be
other teams, such as marketing and product teams? Knowing your audience will help you
decide what to include in your style guide and how to structure it.

3. Gather existing assets

 Before creating anything new, gather all your existing assets, such as product
logos, color palettes, and previous design guidelines. Having all of these in one place will
make it easier for you to create a new style guide consistent with what already exists.

4. Decide on the structure of your style guide

To start putting together the actual style guide, decide on its structure. How are
you going to organize all the information? There’s no right or wrong answer here, but try
and think about the order in which designers work.

5. Create a visual identity section

The first section of your style guide should outline your product’s visual identity.
This is where you’ll define things like your logo, color palette, and typography. Including
these elements in your style guide will help to create a unified look and feel for your
product.

6. Define the user interface

The next section of your style guide should focus on the user interface. This is
where you’ll define things like your product’s layout, navigation, and buttons — elements
that shape the overall user experience.

7. Create a section for content

The final section of your style guide should cover content, including elements like
the tone of voice and writing style. Having all of these in one place will help to ensure
your product’s content is consistent and on-brand.

8. Make it easy to use

Once you’ve created your style guide, make sure it’s easy to use. Add items like a
table of contents and an index so people can easily find what they’re looking for. And
make sure to keep it up to date as your product evolves.

9. Get feedback and iterate

Finally, don’t forget to get feedback from your team and iterate on your style
guide. As your product grows and changes, so too will your style guide. Getting feedback
and making changes can ensure that it always stays relevant and up to date.

10. Use tools that are up to the job

Diagramming tools can be a big help when creating a UI design style guide.
With Cacoo, you can create high-quality diagrams that are easy to share and update. And
because Cacoo runs in the cloud, you can access your diagrams from anywhere on any
device. That means the second someone changes the guide, everyone knows about it
— which is exactly what you want when consistency is your goal.

References :
https://www.interaction-design.org/
https://www.supremo.co.uk/branding/branding-in-ui-design/
https://nulab.com/learn/design-and-ux/how-to-create-a-ui-style-guide/