UI UX

MONTH YER

MODULE 2

MESCE KUTTIPPURAM

RESHMI K
COMPUTER APPLICATION DEPARTMENT
MESCE KUTTIPPURAM

1
SYLLABUS
❖ Foundation of UI Design-Visual Design Principles
❖ Elements of UI
❖ Tools for UI design
❖ Characteristics of good and poor UI design
❖ Colour theory in UI design, UI for different platforms.

2
Foundation of UI Design

3
 Foundation of UI Design

● The fundamental principles of UI/UX design are principles that help designers
create engaging user experiences.
● These include, simplicity, consistency, accessibility, responsiveness, error
prevention, user-centered design, and user feedback.

4
 Foundation of UI Design
Simplicity:
Simplicity is supreme in UX and UI design, where user experience is
prioritized by simplifying interfaces and functionality.

Accessibility:
Accessibility is the foundation of UX and UI design. This ensures that
everyone, regardless of ability, can view, navigate and interact with a product.
It includes features such as clear and descriptive text alternatives for images
and colour contrast suitable for the visually impaired.

5
 Foundation of UI Design
Responsiveness:
Responsiveness is the versatile character of UX and UI design, adapting to the
ever-changing device landscape. It provides a seamless user experience by making the
interfaces flexible and adaptive. Responsive design uses adaptable layouts and elements
that change according to screen size, from desktops to tablets and smartphones.

Consistency:
Consistency is the bridge that holds the best user experience and interface together. It
ensures consistency in user experience by making interfaces predictable. When elements like
buttons, layouts, and terminology work consistently across platforms, users don’t have to
relearn how to interact each time they encounter something new.

6
 Foundation of UI Design
Error prevention:
In UX and UI design, error prevention serves as a barrier against user frustration. Designers
can create successful interfaces by anticipating potential mistakes. These may include
features such as drop-down menus that limit incorrect inputs, clear labelling to avoid
confusion, and real-time feedback during form completion.

User-centric design:
User-centered design (UCD) is the foundation of effective UX design services and UI. It
transforms the script and puts the user in the middle of the design process. UCD involves
actively understanding user needs, desires, and behaviors through research and testing. This
user understanding drives the design of intuitive interfaces that meet user goals and,
ultimately, provide a satisfying experience.

7
 Foundation of UI Design
User feedback:
Iterative UX and UI design relies heavily on user feedback. It reveals real-world
insights into how users interact with the interface, highlighting areas of strength
and opportunities for improvement. By combining feedback from surveys, user
experience audits, usability testing, and user interviews, designers can identify
areas for improvement, optimize functionality, and ensure that the design meets
user expectations.

8
Critical Elements of UI/UX Design

● Visual Design: Colours, typography, and imagery combine to create a

visually appealing interface.
● Information Architecture: Organises content in a logical and structured
manner for easy access.
● Interaction Design: Designing intuitive and engaging interactions for users.
● Usability: Ensuring the product is easy to navigate and use.
● Accessibility: Making the new product development procedure inclusive
for all users, regardless of abilities

9
Visual Design Principles

Visual design principles are the rules and guidelines that help create effective,
attractive, and user-friendly designs. They form the foundation for building
layouts, interfaces, and graphics that communicate clearly and engage users.

Visual hierarchy ?

Visual hierarchy is an optimal arrangement of screen elements, in such a way

that they appear to be balanced, organized, functional, and aesthetically pleasing
to the human eye.

Placing information with balance influences the design, and ease in

decision-making based on what is important and what is not.

10
Why Visual Design Principles are Important?

Because a span to capture user attention on a particular element or piece of

information is only “4 to 8 Sec” - Called a human attention span. This means,
having too much information placed on the screen might miss capturing user
attention, as a result, users should scroll, skip or jump off to something else.

11
Elements of Visual Design

● Line

● Shape

● Negative/White Space

● Volume

● Value

● Colour

● Texture
12
Visual Design Principles

● Unity

● Gestalt

● Hierarchy

● Balance

● Contrast

● Scale

● Dominance

13
UNITY

Unity has to do with creating a sense of harmony between all elements in a page. A
page with elements that are visually or conceptually arranged together will likely
create a sense of unity.

14
HIERARCHY

Hierarchy shows the difference in importance of the elements in a design. Colour

and size are the most common ways we can create hierarchy — for instance, by
highlighting a primary button, or using larger fonts for headings. Items that
appear at the top of a page or app also tend to be viewed as having a higher
hierarchy than those appearing below.

15
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.
Balance can be achieved by having symmetry in the design (for instance, having a webpage with
centralised text and images).

16
CONTRAST

We use contrast to make an element stand out by manipulating differences in colour,

value, size and other factors. For instance, as designers (be it in logo design, UI
design, etc.), we often use the colour red to make certain elements stand out

17
scale

Scale describes the relative sizes of the elements in a design. By using scale to make
an element larger than others appearing with it, you can emphasise that element. Not
only can you make an element stand out this way—you can also use scale to create a
sense of depth (since nearer objects appear larger to the human eye).

18
Dominance

Dominance creates focus on a single element. We can use colour, shape, contrast,
scale, and/or positioning to achieve this. For instance, most websites have a main
“hero” image, which uses dominance to appeal to users, drawing them to it naturally.
Dominance can be established by using positioning, shape and colour, among many

other factors.

When working in visual design, we should ensure that we use dominance while still

maintaining the unity and balance of websites — if not, the design would potentially

produce a disorienting experience for users.

19
20
● Dominance: The large Google logo and search box gives it dominance, making it the core (and to

most, sole) focus of the entire page.

● Contrast (and colour): Google’s logo uses bright (mostly primary) colours, and these mix well,

forming a visually pleasing logo. The logo also has sufficient contrast against a white background,

making it stand out on the page.

● Shape: The search box uses a rectangular shape to delineate the search field, making it very usable.

● Negative space: Google’s homepage is predominantly made out of negative space, which makes the

search box (the main function of the page) the centre of attention. The negative space also works

well for the page, as it acts like a blank sheet of paper before users type in their search terms.

● Balance: The page is almost vertically symmetrical, resulting in a sense of balance that is very

pleasing and calm to look at.

21
What are UI Elements?
● UI elements are the building blocks of apps and websites. They are what users

interact with when they are using the product. They click on a button to sign up,

they use navigational components to switch between pages, etc.

● UI elements are what allows for good user experience and well-designed

functionalities.

● UX design rests on design patterns that your users are familiar with. If you break a

design pattern, users may get lost or confused at least. Designers use well-known

UI elements to prevent that.

22
3 Types of UI Elements

Ideally, we can group UI elements into 3 major categories.

● Input elements – users interact with them to put in their information or move to

the next step.

● Output elements – those elements show the result of a previous user action.

● Helper elements – further divided into navigational, informational, and

containers, they help to move through the digital product, get information, and

point user’s attention to some element.

23
Input Elements
Input elements are responsible for handling different user inputs. Sometimes they’re also part of the

input validation process. Some of the most used input elements include:

Dropdowns – control elements that allow users to select one option from a list that appears

when they click or hover over a specific area. The list “drops down” when activated, providing a

set of choices for the user to pick from.

Combo boxes – they combine the features of a text box and a dropdown. Users can either

type a response or select from a predefined list by clicking a dropdown arrow. This provides

flexibility for both manual input and selection from a set of options.

Buttons – interactive elements that users can click to trigger an action or submit a form. They

often have labels indicating the action they will perform, such as “Submit,” “Cancel,” or “OK.”
24
Toggle switches – UI elements that allow users to switch between two states, typically on

and off. They provide a visual indication of the current state and can be toggled by clicking or

sliding.

Text fields – areas where users can input alphanumeric characters, whereas password fields

are specifically designed for entering confidential information like passwords. Password fields

often hide the entered characters for security reasons.

Date pickers – UI elements that facilitate the selection of dates from a calendar. Users can

typically choose a date by clicking on a specific day, month, and year within the provided

interface.

Checkboxes – small, interactive elements that allow users to select or deselect options

independently. They are often used in lists or forms where users can choose multiple items

from a set. 25
Radio buttons – they present a set of options to users, but unlike checkboxes, only one option can be

selected at a time. When one radio button is selected, any others in the group are automatically

deselected.

Confirmation dialogues – pop-up messages that appear to confirm an action or decision before it is

executed. They typically ask the user to confirm or cancel an operation to prevent accidental or

unwanted actions.

26
Output elements
Output elements are responsible for showing results against various user inputs. They also show alerts,

warnings, success, and error messages to the users. Output elements aren’t neutral by nature. They rely

on inputs and various operations

27
Helper elements
All other elements fall into this category. The most widely-used helper elements include:

Notifications – messages or alerts that appear on a user’s device or screen to inform them about

important or relevant information. They can include updates, reminders, or warnings and are often

designed to grab the user’s attention.

Breadcrumbs – small navigational elements that show the user’s current location within a website or

application. They typically appear as a trail of links at the top of a page, indicating the hierarchical path

back to the main or home page.

Icons – graphical symbols or small images used to represent actions, objects, or concepts. They serve

as visual cues to help users quickly understand and navigate interfaces. Icons are commonly used in

menus, toolbars, and buttons.

28
Helper elements
Sliders – UI elements that allow users to select a value from a continuous range by dragging a handle

along a track. They are often used for settings like volume control or adjusting numerical values within a

specified range.

Progress bars – visually represent the completion status of a task or process. They typically consist of a

filled-in portion that grows as the task progresses, providing users with a visual indication of how much

work has been completed and how much is left.

Tooltips – small, contextual messages that appear when a user hovers over or clicks on a specific UI

element. They provide additional information or explanations about the purpose or functionality of the

element, aiding user understanding and interaction.

29
30
Navigational UI elements
Navigational components simplify moving through the site, desktop or mobile app or any other digital

product. Navigational helper UI elements include things like navigation menus, list of links, breadcrumbs, to

name but a few.

[Link]

31
Top Tools for UI Design

1. Figma 2. Adobe XD

Best for: Collaborative interface design & Best for: UI design within the Adobe
prototyping ecosystem

● Cloud-based, real-time collaboration ● Vector-based UI/UX design

● Components, auto-layouts, design ● Wireframing, prototyping, and design

systems sharing

● Powerful prototyping and plugins ● Integrates well with Photoshop and

Illustrator
● Free plan available 🟠 Adobe has been shifting focus
✅ Most popular tool in 2025 away from XD recently, so it's less
future-proof
32
3. Sketch (macOS only)
4. Framer
Best for: Designers working in macOS
Best for: High-fidelity prototypes with real
environments
interaction
● Vector UI design
● UI design + code-based components
● Design systems, libraries, and
● Excellent for web-based prototyping
symbols

● Fast site publishing

● Tons of plugins
💡 Great for UI designers who want
🔁 Good, but losing market share to
to build landing pages too
Figma

33
Color Theory In UI

34
What is Color Theory?
Color theory is the study of colors, their relationships, and how they interact. It
provides rules and guidelines for creating harmonious, appealing color combinations in
art, design, and visual communication

35
Basics of Color Theory
1. The Color Wheel
● Invented by Isaac Newton in 1666.

● A circular diagram that organizes colors by their chromatic relationship.

● Primary Colors: Red, Blue, Yellow (cannot be created by mixing other colors).

● Secondary Colors: Green, Orange, Purple (made by mixing two primaries).

● Tertiary Colors: Made by mixing a primary with a secondary (e.g., red-orange,

blue-green).

36
37
Basics of Color Theory
2. Color Harmonies:
● Combinations of colors that are pleasing to the eye and create a sense of
balance.
● Examples: complementary (opposite on the wheel), analogous (next to each
other), triadic (equally spaced).
● Used to evoke specific moods or convey messages.

38
3. Color Properties
1. Hue → Name of the color (Red, Blue, Green).

2. Saturation (Chroma) → Purity or vividness of a color (bright vs dull).

3. Value (Lightness) → How light or dark a color is (tint, shade, tone).

39
[Link] Harmonies (Schemes)
● Monochromatic → Variations of one color.

● Analogous → Colors next to each other on the wheel.

● Complementary → Opposite colors (Red–Green, Blue–Orange).

● Triadic → Three evenly spaced colors.

● Tetradic → Two pairs of complementary colors.

40
5. Color Temperature
● Warm Colors: Red, Orange, Yellow → Energetic, active.

● Cool Colors: Blue, Green, Purple → Calm, peaceful.

41
[Link] Meaning of Colors
● Red → Passion, danger.

● Blue → Trust, calm.

● Green → Nature, growth.

● Yellow → Happiness, optimism.

● Black → Power, elegance.

● White → Purity, simplicity.

42
7. Applications
● Art & Design → Creates mood and balance.

● UI/UX & Graphics → Improves readability, user experience.

● Marketing & Branding → Influences customer emotions.

● Interior Design → Affects atmosphere of spaces.

43
44
UI for different platforms

When we talk about UI (User Interface) for different platforms, we

usually mean how interfaces are designed and optimized depending on
the platform where the application will run.

Each platform (web, mobile, desktop, or even embedded systems) has

its own standards, constraints, and best practices. Here’s a
breakdown:

45
 1. Web UI

Platform: Browsers (Chrome, Firefox, Edge, Safari, Guidelines:

etc.)

Design Focus: Responsive and adaptive layouts ● Should be cross-browser compatible.

(works on all screen sizes).
● Accessibility (WCAG standards).
Key Elements:

● Progressive enhancement (works even on

● Navigation bars, dropdown menus. low-performance browsers).

● Forms, buttons, hyperlinks.

● Fluid grid layouts (Bootstrap, Tailwind CSS).

46
 2. Mobile UI

Platform: Android, iOS (mobile apps). ● Guidelines:

a. Android: Follow Material Design

Design Focus: Touch interaction, small
Guidelines (Google).
screens, gesture-based navigation.
b. iOS: Follow Human Interface
Key Elements: Guidelines (HIG) (Apple).

c. Large tap targets, minimal text

● Bottom navigation bar (common in input, prioritize speed and clarity.
Android).

● Tab bar (common in iOS).

● Floating Action Buttons (FAB).

47
 3. Desktop UI

Platform: Windows, macOS, Linux. ● Guidelines:

○ Windows: Fluent Design

Design Focus: Mouse and keyboard System.
input, larger screen space.
○ macOS: Aqua design
principles.
Key Elements:

○ Consistency with OS
● Toolbars, menus, windows, dialogs. conventions (e.g., shortcut
keys: Ctrl+C vs. Cmd+C).
● Drag-and-drop, right-click context
menus

48
 4. Wearable UI

● Platform: Smartwatches (WearOS, ● Guidelines:

watchOS).

○ Information should be
● Design Focus: Very small screen, quick
glances, gestures. glanceable (few words, big
icons).
● Key Elements:
○ Energy-efficient (dark
○ Circular layouts (for round watches). themes, minimal animations).

○ Voice input, swipe gestures.

49
 5. TV & Console UI

● Platform: Smart TVs, gaming consoles. ● Guidelines:

● Design Focus: Remote control or game

○ Distance-friendly typography
controller navigation.
(readable from 10 feet away).
● Key Elements:
○ Limited text input (use voice
○ Large buttons and menus. input or on-screen keyboard).

○ Focus indicators for remote

navigation.

50
 6. Voice & Conversational UI

● Platform: Alexa, Google Assistant, ● Guidelines:

Siri, Chatbots.
○ Natural language flow.
● Design Focus: Voice or text-based
interaction (no visual elements). ○ Avoid information overload.

● Key Elements:

○ Short, clear responses.

○ Context-aware suggestions.
51
Web → Responsive, cross-browser.

Mobile → Touch-friendly, Material Design/HIG.

Desktop → Rich controls, keyboard+mouse.

Wearable → Minimal, glanceable.

TV/Console → Large, remote-friendly.

Voice UI → Conversational, natural.

52