UI and UX

Day - 3
 UI and UX
Day - 3

Visual Design Standards – Visual Design Principle

– UI Elements – UI Components – Variants -
Design Patterns
What is Visual Design Standards
• Visual Design Standards are a set of formalized rules,
guidelines, and specifications that govern the visual
identity, style, and consistency of a product, brand, or
system.

• They act as a blueprint to ensure that all design elements

align with the organization’s branding goals and user
experience objectives.

• These standards are documented in resources like style

guides, design systems, or brand books to promote
uniformity across multiple platforms, teams, and mediums.
 Components of Visual Design
Standards
• Color Palette: Specifies primary, secondary, and accent colors, along with usage rules.

• Typography: Defines fonts, sizes, weights, and spacing for headings, body text, and other
textual elements.

• Imagery and Iconography: Provides guidelines for the use of photos, illustrations, and
icons.

• Spacing and Grid Systems: Establishes rules for margins, paddings, and layout
structures.

• UI Components: Standardizes buttons, navigation bars, input fields, and other interface
elements.

• Accessibility Guidelines: Ensures visual elements meet standards for usability by all
users, including those with disabilities (e.g., WCAG compliance
Characteristic of Visual Design
Standard
1.Consistency Across Platforms: Ensures a unified look and
feel across websites, mobile apps, print materials, and other
mediums.

2.Efficiency in Design: Serves as a reusable framework,

allowing designers to work faster without repeatedly deciding on
core elements.

3.Team Alignment: Acts as a single source of truth for all design

decisions, reducing discrepancies among team members.

4.Brand Identity: Reinforces the organization’s identity by

maintaining a recognizable and professional visual style.
What is Visual Design Principles
• Visual Design Principles are the fundamental concepts
and strategies used to create visually effective,
aesthetically pleasing, and user-centric designs.

• These principles are rooted in psychology, art, and

communication theory, guiding designers to organize
elements in a way that enhances functionality,
engagement, and emotional impact.

• They apply universally to all forms of visual media, from

digital interfaces to printed works.
Key Features:
1.Foundation for Creativity: Offers a structured approach to creating
appealing and effective visuals while allowing room for innovation.

2.User-Centric Focus: Ensures that the design supports usability and

accessibility, making it easy for users to interact with the product.

3.Adaptable Across Contexts: These principles are not tied to

specific brands or systems but are universally applicable.

4.Emphasis on Visual Hierarchy: Helps designers prioritize and

guide users' attention effectively.
5 key components of Visual
Design Principles
• Scale: The relative size of elements in a design. It helps create emphasis, guide
attention, and add visual interest.

• Visual Hierarchy: The arrangement of elements to establish a clear order of

importance. It guides users through content and makes information easier to
understand.

• Balance: Distributing visual weight evenly in a design to achieve stability. It

ensures that no single element overpowers others, leading to a harmonious
composition.

• Contrast: Differences in color, size, or other attributes that create distinction

between elements. Contrast enhances readability and draws attention to
essential information.

• Gestalt: The idea that our brains perceive elements as a whole rather than
individual parts. It empha
 Scale
• Scale in visual design involves using relative size
to communicate importance and rank within a
composition.

• Important elements are made larger than less

significant ones, making them more noticeable.

• A visually appealing design typically uses up to

three different sizes to create variety and establish
a visual hierarchy.

• By emphasizing essential elements through size,

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

Uber mobile app: The visual hierarchy is clear in Uber’s

mobile app. The screen is split in half between the map
and input form (bottom half of screen), which enforces
the thought that these components are equally important
to the user. The eye is immediately drawn to the Where
to? field because of its gray background, then to the
recent locations below it, which are slightly smaller in
font size
 Balance
• Balance in visual design is like a seesaw, where you arrange
elements to create a pleasing proportion.

• It means having an equal distribution of visual elements on both

sides of an imaginary line running through the middle of the
screen. This line can be vertical or horizontal.

• To achieve balance, you need to consider the size and space

taken by elements, not just their number.

• If one side has a large element and the other side has a small
one, the design feels unbalanced.
 Types of Balance
• Symmetrical:
• Elements are evenly distributed on both sides of the central axis.
• Symmetry is calm and static

• Asymmetrical:
• Elements are unevenly distributed, creating a sense of movement and
energy.
• Asymmetry is dynamic and engaging

• Radial:
• Elements radiate out from a central point, guiding the eye to the center
of the composition.
• Radial balance always draws attention to the center.
Balance

The Hub Style Exploration: The

composition feels stable, which is
especially appropriate when you’re
looking for a job you love. The balance
here is symmetrical. If you were to draw
an imaginary vertical axis down the
center of the website, elements are
distributed equally on both sides of the
axis.
 Contrast
• Contrast is a powerful principle in design that highlights
differences between elements.

• It involves placing visually dissimilar things together to show that

they belong in different categories or serve distinct purposes.

• For example, using bright colors like red to signify deletion in a UI

design makes the element stand out from the rest, emphasizing
its unique function.

• Contrast helps users quickly identify and understand important

information, making the design more effective and user friendly
 Contrast
Often, in UX the word “contrast”
brings to mind the contrast between
text and its background.

Sometimes designers deliberately

decrease the text contrast in order to
deemphasize less important text.

But this approach is dangerous —

reducing text contrast also reduces
legibility and may make your content
inaccessible.
Greenhouse Juice Co: The legibility of the
Reminders app on iOS: The color red, which
has high contrast to its surrounding context,
Use a color-contrast checker to text on the bottle relies on the color of juice.
Although the contrast works beautifully for
is reserved for deleting. ensure that your content can still be some juices, labels for bottles with light
colored juices are nearly impossible to read.
read by all your target users.
 Gestalt Principles
• Gestalt principles are a set of ideas from psychology that explain how humans make
sense of complex images.

• Instead of seeing individual parts, our minds automatically organize them into a
whole.

• This means we tend to perceive the complete picture rather than separate elements.

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

figure/ground, and symmetry and order.

• One important principle for UX is proximity, which means that items visually close
together are seen as belonging to the same group.

• These principles help designers create visuals that are easy for users to understand
and navigate.
Gestalt Principles

We also often see applications of the Gestalt theory

in logos. In the NBC logo, there is no peacock in the
white space, but our brain understands there to be
one.
 UI Design Principle:
• The seven principles of universal design are:
• Equitable use

• Flexibility in use

• Simple and intuitive use

• Perceptible information

• Tolerance for error

• Low physical effort

• Size and space for approach and use.

 Equitable use
• The design should be usable by all individuals,
regardless of their age, abilities, or background.
• It ensures that everyone can access and interact with
the product or environment in a fair and inclusive
manner.
Flexibility in Use
• The design should accommodate a wide range of individual
preferences and abilities.
• It offers multiple ways to interact with the product or
environment, allowing users to choose the approach that
suits them best.
 Simple and intuitive use
• The design should be easy to understand and use,
requiring minimal effort to figure out its operation.
• Clear instructions and logical layouts make it intuitive
for users to navigate and perform tasks.

Perceptible Information:
• The design should present information effectively to all users,
regardless of their sensory abilities.
• It ensures that important information is available through multiple
senses (e.g., visual, auditory, tactile) so that users can perceive
and comprehend it easily.
 Tolerance for Error:
• The design should minimize the risk of errors and
provide ways to recover from mistakes.
• It avoids critical consequences for unintended actions
and offers clear feedback to guide users in correcting
errors.
Low Physical Effort:
• The design should require minimal physical effort to use.
• It considers the needs of users with varying physical
abilities, making interactions comfortable and not overly
demanding on strength or dexterity.
 Size and Space for Approach
and Use:
• The design should provide adequate space and reach
ranges to accommodate users of different sizes and
mobility.
• It ensures that individuals using mobility aids or who
have limited reach can comfortably access and use the
design.
 UI Elements
• UI elements are the building blocks of a user interface, the individual parts
that users see and interact with on websites, apps, and other digital product
• Buttons
• Text Fields
• Checkboxes
• Radio Buttons
• Icons
• Dropdown Menus
• Sliders
• Tabs
• Tooltips
• Cards
 UI Elements
• Buttons: • Dropdown Menus:
• Buttons are like interactive squares or circles that you can click or tap • Dropdown menus are like hidden lists that appear when you click on a
on. They perform actions like "Submit," "Next," or "Cancel." button or a label. They show you more options to choose from.

• Text Fields: • Sliders:

• Text fields are areas where you can type in text, like when you search • Sliders are like bars or scales that you can slide left or right to adjust
for something or enter your name. settings or choose a value.

• Checkboxes: • Tabs:
• Checkboxes are like little boxes that you can tick or un-tick tomake a • Tabs are like labeled sections that you can click on to switch between
choice from a list of options. different parts of a website or app.

• Radio Buttons: • Tooltips:

• Radio buttons are like small circles or dots that you can select, but you • Tooltips are like small pop-up boxes that show extra information when you
can only choose one option from a group of choices. hover your mouse over something.

• Icons: • Cards:
• Icons are small pictures or symbols that represent actions or ideas, like • Cards are like little containers that hold information, like a picture, a title,
a magnifying glass for search or a home symbol for the homepage. and a short description, neatly displayed together.
UI Components
• A component is a reusable design element that can be used
multiple times across a project. When you create a
component, you define a "master" version of an element. Any
instance of that component inherits properties from the
master.
• Master and Instances:
• The master component acts as the source, and changes made to it
reflect in all its instances.
• Instances are copies of the master that can be customized while
still maintaining a link to the original.
• Instances can be overridden with changes like text, colors,
and images without breaking their connection to the master.
 UI Components
Layout Components
These are components that help structure the page and organize content.

Typography Components
These components help organize text elements on the UI.

Interactive Components
These components allow the user to interact with the interface.

Navigation Components
Help users move around and find content or features within a product.

Media and Content Components

Components that display and handle different media types like images, videos, and audio.

Feedback Components
Provide feedback to users on their actions or system status.

Forms and Input Components

Allow users to input or edit information.

Data Visualization Components

Components that display complex data in an easy-to-understand visual format.

Social and Interactive Components

Enable social interaction and user engagement.

Utility Components
Provide small but essential functions to enhance the user experience

Accessibility and Responsive Components

Ensure the interface is usable by everyone, including people with disabilities, and is responsive to various screen sizes.
Layout Components:-
• Frames: The primary building block for creating
layouts, used as containers or canvases.
• Grids: Grid systems for aligning and organizing
content.
• Auto Layout: Flexible layouts that adapt dynamically
to content changes.
• Constraints: For responsive design, ensuring elements
resize correctly.
Typography Components
• Text Blocks: Customizable text elements for headings,
paragraphs, or labels.
• Text Styles: Reusable styles for fonts, sizes, colors, and
line heights.
• Dynamic Text Fields: Input fields for prototyping user
input.
Interactive Components
• Buttons: Primary, secondary, and tertiary buttons with hover,
active, and disabled states
• Checkboxes and Radio Buttons: For binary or single-choice
options.
• Toggles and Switches: For on/off states.
• Dropdown Menus: Collapsible lists for multiple choices.
• Text Inputs: For forms, with placeholder text, error states, and
validations.
• Sliders: For selecting a value from a range.
• Search Bars: Interactive components with icons and input
fields.
Navigation Components
• Top Navigation Bars: Fixed headers with links, menus,
or search options.
• Sidebars: Expandable or collapsible menus for
navigation.
• Breadcrumbs: For hierarchical navigation.
• Tabs: Organized content into categories.
• Pagination Controls: For navigating through data or
pages.
Media and Content Components
• Cards: Modular containers for displaying text, images,
or actions.
• Image Placeholders: Frames for inserting images or
media.
• Video Thumbnails: Represent video content with
overlays (e.g., play buttons)
• Carousels: Sliding panels for showcasing multiple
items.
• Avatars: User profile images, often circular.
Feedback Components
• Tooltips: Small pop-ups providing additional context or
information.
• Modals and Dialogs: Overlays for actions,
notifications, or inputs.
• Toast Notifications: Brief, non-intrusive alerts.
• Progress Indicators: Spinners, bars, or loaders
showing task completion.
• Alerts: Messages indicating success, error, or warning
states
Forms and Input Components
• Form Fields: Input boxes, dropdowns, and text areas.
• Validation Messages: Inline hints, errors, or success
indicators.
• Date Pickers: Visual calendars for selecting dates.
• File Uploads: Drag-and-drop or click-to-upload fields.
Utility Components
• Icons: Custom or library-based icons (e.g., Material
Icons, Font Awesome)
• Spacers: Invisible elements for creating padding or
margins
• Status Indicators: Visual markers for states like
online, offline, busy, etc.
• Badges: Small labels or numbers for notifications or
categories
Accessibility and Responsive
Components
• Keyboard Shortcuts: For prototyping user inputs via
keyboard.
• ARIA-Labelled Components: Accessible designs for
screen readers.
• Responsive Frames: Components that adapt to
different screen sizes.
Social and Interactive
Components
• Like Buttons: Heart or thumbs-up icons.
• Comment Sections: Placeholder for user comments.
• Share Buttons: Icons for sharing content to social
media.
• Activity Feeds: List-style components showing
updates or logs.
 Variants
• A variant allows you to group similar components into a single parent
component, making it easier to manage related design options, such as
different states or styles.
• Variants organize multiple components (e.g., a button in default, hover,
and active states) under a single component with different properties
• Variants have properties (e.g., State: Default, Type: Primary)
• Instead of managing multiple separate components, you manage them
in a single place.
• For a button, you can create variants for its states:
• Default
• Hover
• Pressed
• Disabled
 Variant Types
• State-Based Variants:
• Variants can represent different states of an element.
• For eg : Button State
•State: Default
•State: Hover
•State: Pressed
•State: Disabled

• Type-Based Variants:
• Variants can differentiate between types of the same
component.
• For eg: Button Types
•Type: Primary
•Type: Secondary
•Type: Tertiary
 Variant Types
• Size Variants
• Variants can represent the same component in different sizes.
• Example: Button Sizes:
• Size: Small
• Size: Medium
• Size: Large

• Color Variants
• Variants can represent different color schemes for a component.
• Example : Theme Variants
• Color: Light
• Color: Dark
• Color: Accent
 Variant Types
• Interaction Variants:
• Variants can showcase interactions like toggles or switches.
• Example: Toggle States
•Toggle: On
•Toggle: Off

•Device or Platform Variants:

•Variants can adapt a component to different device types or
platforms.
•Example: Device Adaptations
•Device: Desktop
•Device: Tablet
•Device: Mobile
 Variant Types
• Shape Variants:
• Variants can represent the same component in different shapes or
styles.
• Example: Button Shapes
• Shape: Rounded
• Shape: Square

• Content Variants:
• Variants can manage components with varying content lengths or types.
• Example: Content Variants
• Content: Icon Only
• Content: Text Only
• Content: Icon + Text
 Variant Types
• Alignment Variants:
• Variants can reflect alignment or positioning differences.
• Example: Alignment Variants
• Alignment: Left
• Alignment: Center
• Alignment: Right

• Custom Variants:
• Example: Custom Property
• Property: Role
• Role: Admin
• Role: User
 UI Patterns
• User interface (UI) design patterns are
reusable/recurring components which designers use to
solve common problems in user interface design.

• Designers can apply them to a broad range of cases,

but must adapt each to the specific context of use.
 Common UI Design Patterns
• Breadcrumbs
• Lazy Registration
• Forgiving Format
• Clear Primary Actions
• Progressive Disclosure
• Hover Controls
• Steps Left
• Subscription Plans
• Leaderboard
• Dark Patterns
Breadcrumbs

Use linked labels to provide

secondary navigation that
shows the path from the front
to the current site page in the
hierarchy.
Lazy Registration
• Lazy Registration – Forms can put users off registration.
So, use this sign-up pattern to let users sample what
your site/app offers for free or familiarize themselves
with it. Then, you show them a sign-up form.
 Forgiving Format
• Let users enter data in various formats (e.g.,
city/town/village or zip code).
 Clear Primary Actions
• Make buttons stand out with color so users know what
to do (e.g., “Submit”). You may have to decide which
actions take priority.
 Progressive Disclosure
• Show users only features relevant for the task at hand,
one per screen. If you break input demands into
sections, you’ll reduce cognitive load (e.g., “Show
More”).
 Hover Controls
• Hide nonessential information on detailed pages to let
users find relevant information more easily.
 Steps Left
• Designers typically combine this with a wizard pattern.
It shows how many steps a user has to take to complete
a task. You can use gamification (an incentivizing design
pattern) here to enhance engagement.
 Subscription Plans
• Offer users an options menu (including “Sign-up”
buttons) for joining at certain rates.
 Leaderboard
• You can boost engagement if you use this social media
pattern.
 Dark Patterns
• Some designers use these to lead or trick users into performing
certain actions, typically in e-commerce so they spend more or
surrender personal information.

• Dark patterns range in harmfulness. Some designers leave an

unchecked opt-out box as a default to secure customer information.

• Others slip items into shopping carts. To use dark patterns

responsibly, you must be ethical and have empathy with your users.

• Dark patterns are risky because user mistrust and feedback can
destroy a brand’s reputation overnight