UI/UX

UNIT – 2 :: NOTES

The Anatomy of the Elements:

The anatomy of the elements in the context of interface design refers to breaking
down and understanding the individual components that make up the user interface.
Each element has specific attributes and characteristics that contribute to the overall
design and functionality of the interface. Understanding the anatomy of these
elements is essential for creating effective and user-friendly interfaces. Designers must
consider how each element functions individually and how they interact with other
elements to form a cohesive and intuitive user experience.
In the context of interface design, "Grid" and "Layout" are essential concepts that help
organize and structure the visual elements of a user interface.
Grid:
A grid is a system of horizontal and vertical lines that intersect to create a series of
rows and columns, forming a framework for laying out content in a consistent and
organized manner. Grids provide designers with a structured approach to arrange
elements, making it easier to achieve visual balance, alignment, and coherence. By
dividing the interface into a grid, designers can ensure that elements are aligned with
each other, creating a more harmonious and visually pleasing design.
Grids can be based on fixed measurements (e.g., pixels) or flexible units (e.g.,
percentages), depending on the requirements of the design. They are commonly used
in web design, print design, and other forms of visual communication. Grids help
maintain consistency across different pages or screens, allowing for a unified and
professional look throughout the interface.
 Grid is one of the most important foundation in design elements .
 This grid is combination of horizontal and vertical line on the screen.
 Screen is divided into coloums and rows.
 Vertical areas of the grid are called coloums.

DEPARTMENT OF IT & CIC Page 1

 UI/UX
UNIT – 2 :: NOTES

 The horizontal area of the grid is called rows

 The space in between the columns is left blank and this is called gutter.

 The space on the outside edge of column is called margins.

DEPARTMENT OF IT & CIC Page 2

 UI/UX
UNIT – 2 :: NOTES

Fluid Grid:
A fluid grid is a type of layout system used in responsive web design to create flexible and
adaptive interfaces that can adjust smoothly to various screen sizes and devices. The
primary goal of a fluid grid is to ensure that the elements within the interface
proportionally resize and reposition based on the user's device, whether it's a desktop
computer, tablet, or smartphone.

 A Fluid grid allows designers to change design elements based on screen size.
 More accurately columns width changed based on the screen width,gutters and
margins are fixed.
 Fluid Grid is recommended for responsive interfaces.
 Responsive Interface is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.
Key characteristics of a fluid grid:
1. Proportional Scaling: Elements within the grid scale proportionally, maintaining their
relative sizes and positions as the screen size changes.

2. Flexible Widths: Element widths are defined using percentage values, so they
automatically adjust based on the available screen width.

3. Responsive Behavior: Fluid grids are a fundamental aspect of responsive web

design, ensuring that websites adapt to various viewports, from large desktop
screens to small mobile devices.

4. Grid-based Structure: Like traditional fixed-width grids, fluid grids use columns and
gutters to create a structured layout. However, the widths are specified as
percentages, making them adaptable.

5. Breakpoints: Fluid grids often incorporate breakpoints, which are specific screen
widths where the layout adjusts to better suit the available screen space. At
breakpoints, designers may modify the number of columns, change the font size, or
reposition elements to optimize the user experience.

Benefits of using a fluid grid:

1. Improved Cross-Device Consistency: Fluid grids allow designers to maintain a
consistent user experience across different devices and screen sizes, reducing the
need for separate mobile versions.
2. Adaptability: Websites built with fluid grids can accommodate new devices and
screen sizes without requiring significant design changes.
3. Future-Proofing: As new devices with varying screen dimensions emerge, fluid grids
can handle these changes without breaking the layout.

DEPARTMENT OF IT & CIC Page 3

 UI/UX
UNIT – 2 :: NOTES

4. Better User Experience: Responsive websites that utilize fluid grids provide an
optimal viewing experience, making content more accessible and readable on
different devices.

Fixed Grid:
A fixed grid is a type of layout system used in web design, where the elements within the
interface have specific, fixed dimensions, usually defined in pixels. Unlike fluid grids, which
use relative units like percentages, fixed grids have a static structure and do not adjust in
size based on the user's screen size or device.

 When the margins are changed and coloumn and gutter points are not chaged
then it is called fixed grids.
 Default grid size for good grid is 12 colomns.
 Many online tools are available to calculate grid values.
 Most of the screen sizes are divisible by 8 so choose the values which is divisible by
8.
 Many mobile screens have 8 px grid ,margins-16px and gutter 16 px.
 https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Key characteristics of a fixed grid:

1. Fixed Element Widths: Elements within the grid have predetermined pixel-based
widths and do not scale with the screen size.
2. Consistent Spacing: The spacing between elements, known as gutters, is also fixed
and remains constant across different screen sizes.
3. Pixel-based Layout: The grid layout is created with precise pixel measurements for
column widths, gutter sizes, and overall container width.
4. Rigid Structure: Fixed grids have a strict and unchanging layout structure, which
means the design remains consistent regardless of the user's device or screen
resolution.
5. Lack of Responsiveness: Since the element dimensions are fixed, websites built with
a fixed grid do not adapt to different screen sizes, potentially leading to issues with
usability on smaller screens or devices.

Benefits of using a fixed grid:

1. Precise Design Control: Designers have more control over the exact positioning and
size of elements, allowing for pixel-perfect layouts.
2. Consistency: Fixed grids provide a consistent layout that remains the same across all
devices, ensuring a uniform user experience.
3. Design Stability: The rigid structure of a fixed grid can prevent unexpected layout
shifts or unwanted element rearrangements.
4. Legacy Support: Fixed grids are suitable for older browsers or devices that may not
fully support responsive design techniques.

DEPARTMENT OF IT & CIC Page 4

 UI/UX
UNIT – 2 :: NOTES

Drawbacks of using a fixed grid:

1. Limited Adaptability: Websites with fixed grids may not display optimally on various
screen sizes and devices, leading to potential usability issues.
2. Less Mobile-Friendly: Fixed grids are not as suitable for mobile devices, where
screen sizes can vary significantly, potentially causing content to be cut off or
difficult to read.
3. Maintenance Challenges: Designers may need to create separate layouts for
different devices, resulting in increased development and maintenance efforts.
4. Future-Proofing Concerns: As new devices with different screen dimensions emerge,
fixed grids may not adapt well without significant design modifications.

Layout:
Layout refers to the arrangement of visual elements within the interface, following the
established grid or design structure. It involves placing content, images, text, buttons, and
other UI components in a logical and organized manner to create an effective user
experience.

An effective layout takes into account the hierarchy of information, grouping related
elements together, and providing ample whitespace for visual breathing space. It also
considers the flow of user interactions and ensures that the most important elements are
easily accessible and prominent.

Layouts can vary depending on the type of interface and the content being presented. For
example, a website may have a header, navigation bar, main content area, and footer, all
arranged within the grid to create a cohesive layout. In contrast, a mobile app may have a
different layout, optimized for the smaller screen size and touch interactions.

Both grids and layouts are critical aspects of interface design, as they contribute to the
overall visual aesthetics and usability of the interface. When used effectively, they help
create interfaces that are visually appealing, easy to navigate, and provide a pleasant user
experience.

Typography:
Typography is the art and technique of arranging and styling text to make written
language visually appealing and legible. In the context of design, typography plays a crucial
role in shaping the overall look and feel of printed and digital materials, including
websites, mobile apps, advertisements, books, posters, and more. It involves selecting
appropriate fonts, font sizes, font styles, line spacing, and other typographic elements to
communicate the message effectively and enhance the user experience. Here are some

DEPARTMENT OF IT & CIC Page 5

 UI/UX
UNIT – 2 :: NOTES

Key aspects of Typography:

1. Fonts: A font is a set of characters with a specific style, weight, and size. There are
various font families available, such as serif (with small decorative strokes at the end
of characters), sans-serif (without decorative strokes), script, and display fonts. Each
font family can evoke different emotions and suit various design contexts.
2. Typefaces: The term "typeface" is often used interchangeably with "font," but they
have different meanings. A typeface refers to the design of a set of characters,
whereas a font refers to a specific variation of that typeface, such as regular, bold,
italic, etc.
3. Font Styles: Common font styles include regular, bold, italic, and bold italic. Italic is
typically used to emphasize text, while bold is used for headings or important
information.
4. Font Sizes: Font size refers to the height of characters measured in points (pt) or
pixels (px). Proper font sizing is essential for readability, especially on different
screen sizes.
5. Line Spacing (Leading): Line spacing is the vertical space between lines of text.
Adequate line spacing improves legibility and prevents text from feeling too
cramped.
6. Kerning and Tracking: Kerning is the adjustment of space between individual letter
pairs, while tracking refers to the overall adjustment of space between all characters
in a text block. Proper kerning and tracking contribute to the overall visual balance of
the typography.
7. Hierarchy: Typography hierarchy involves using different font sizes, weights, and
styles to create a visual hierarchy of information. It helps users quickly identify
headings, subheadings, and body text, making the content more scannable.
8. Alignment: Text can be aligned left, right, center, or justified (aligned to both the left
and right margins). Each alignment choice has its use cases, and consistency is crucial
within a design.
9. Readability and Legibility: Typography should be legible, allowing readers to
distinguish each character clearly. Readability refers to how easy it is for readers to
read large blocks of text without getting fatigued.
10. Branding and Identity: Typography can play a significant role in establishing a
brand's identity. Consistent typography across all materials helps reinforce brand
recognition and visual consistency.

DEPARTMENT OF IT & CIC Page 6

 UI/UX
UNIT – 2 :: NOTES

 There are 3 categories of type face.

 For UI and UX most avoidable font is script because its difficult to understand by the
user.

 The line height and font size are inversely propostional.

 A short line text is appropriate for large text.

 A long line text is appropriate for smaller text.

 Line length is the distance between the edges of text block.

 If line length is too long your eyes has to travel for long.

 Short line length text are prefereable.

 Letter spacing is space between the letlers in the text.

 Main purpose of the letter spacing is improving the readability.

 For UI and UX most avoidable font is script because its difficult to understand by the
user.

 Type Space is also need to be considered.

 Letter Spacing

 Text alignment:1.Left 2.Right 3.Center 4.Justify

 Most alignment used is left because 90 percent humans are rignt handers.

 Justify alignment is recommended for Articles and Blogs.

 Hifenation is solution to the gaps uptained form justification alignment.

DEPARTMENT OF IT & CIC Page 7

 UI/UX
UNIT – 2 :: NOTES

Color:
Color is a visual perception created by light as it interacts with our eyes and the objects
around us. In the context of design, color is a powerful tool used to convey emotions, set
moods, establish brand identities, and enhance visual appeal. It plays a crucial role in
various fields, including graphic design, web design, interior design, fashion, marketing,
and more. Understanding color theory and its psychological effects is essential for
designers to create effective and impactful visuals. Here are some key aspects of color:

1. Color Wheel: The color wheel is a circular representation of colors, arranged in a

specific order. The primary colors (red, blue, and yellow) are evenly spaced around
the wheel, and secondary colors (orange, green, and purple) are formed by mixing
two primary colors. Tertiary colors are created by mixing a primary color with a
neighboring secondary color.
2. Color Harmony: Color harmony refers to the pleasing combination of colors within a
design. There are various color harmony schemes, such as complementary (colors
opposite each other on the color wheel), analogous (colors adjacent to each other),
and triadic (three equally spaced colors on the color wheel).
3. Color Psychology: Colors can evoke emotional responses and have psychological
effects on individuals. For example, warm colors like red and orange are associated
with energy and passion, while cool colors like blue and green evoke calmness and
tranquility.
4. Color Meaning and Symbolism: Different cultures and contexts associate specific
meanings and symbolism with colors. For example, red can represent love and
passion, but it can also symbolize danger or warning.
5. Color in Branding: Brands often use specific colors to create a unique identity and
evoke certain emotions in consumers. Memorable logos often incorporate specific
color choices that align with the brand's personality and values.
6. Color Contrast: Contrast is the difference in color between two elements in a design.
High contrast can draw attention and create emphasis, while low contrast can create
a more harmonious and subtle effect.
7. Color Combinations: When using multiple colors in a design, it's essential to consider
how they interact with each other. Some color combinations work well together,
while others may clash or create visual discomfort.
8. Color in User Interface Design: In UI design, color is crucial for guiding users,
indicating interactivity, and organizing content. Color choices can also affect the
readability and usability of a digital interface.
9. Color Accessibility: Designers must consider color accessibility, ensuring that users
with visual impairments can perceive the content. High contrast and consideration of
color blindness are essential aspects of accessible design.
10. Color in Marketing: Colors are widely used in marketing to influence consumer
behavior, attract attention, and communicate brand messaging.

Effective use of color enhances visual communication, reinforces branding, and leaves a
lasting impression on the audience. Designers must use color thoughtfully and

DEPARTMENT OF IT & CIC Page 8

 UI/UX
UNIT – 2 :: NOTES

strategically to achieve the desired impact and convey the intended message effectively.

 Color tells the basic mood and concept.

 Online users assess the quality of the product in online in just 90 sec according to a
research of institute of colors.

 In that 90 percent 67 percent of quality assessment depends on color.

 The right color selection always improves the displaying of elements,

 Colors can be noted down in different ways:

 In web design we use only HEX and RBG.

 Hue referes to the origin of the colors we can see.

 It doent have any adjustments on original color.

 Saturation is how colorfull or vivd the color appearance.

 Zero percent saturation is grey color and 100 percent is intence color.

 Lightness is the way to compare how the color is close to white or black.

 For example zero percent lightness is pure black.

 50 percent lightness is choosen color.

 100 percent lightness is pure white.

 Increasing the lightness of the color will create color versions by adding white.

 Decreasing the lightness of the color will create color versions by adding Black.

 Pure black is not recommended in web design.

 Instead of black use dark grey text on white background .

 Creating color palette is on of the responsibility of UI Designer.

DEPARTMENT OF IT & CIC Page 9

 UI/UX
UNIT – 2 :: NOTES

 The colors used in design should not be choosen randomly.It should have a meaning
visually and for the user.

 Increasing the lightness of the color will create color versions by adding white.

Complementary color palette: .

Complemetary colors are palce on opposite side of color real.This combination provides
high contrast.

Analogous color palette:

In this Scheme Three colors are placed on side by side.

DEPARTMENT OF IT & CIC Page 10

 UI/UX
UNIT – 2 :: NOTES

Split complementary color Scheme:

uses one Primary color and Two Complementary colors opposite to primary on color real.

Triadic color palette Scheme:

It contains 3 colors that draw shape of a Triangle on color real.It Provides high contrast
color scheme provides boldness.

Creating own color Palette:

Rules:

1. Set the Primary Color:This color will be used in buttons,Icons ,

Typography, cards ,headers and others.
2. Chose a Secondary Color:I It is used to guide the users in navigating
website.This color could be complementary color of primary or nutral color.
3. Set attention catching colors :These are strongly suggested in order to
communicate with the user.
Ex: Green for success ,red for Error in form submission.
4. Create Tints and Shades of the colors in color palette. In color theory, a tint is
a mixture of a color with white, which increases lightness, while a shade is a
mixture with black, which increases darkness.

DEPARTMENT OF IT & CIC Page 11

 UI/UX
UNIT – 2 :: NOTES

Gradient:

What is Gradient?
A gradient is a visual effect or technique in which two or more colors blend or transition
smoothly into one another. It creates a gradual shift in color, allowing for a smooth
progression from one hue to another, often creating a visually appealing and dynamic
effect. Gradients can be simple, consisting of just two colors, or complex, involving
multiple colors or shades.

Gradients are commonly used in various design fields, including graphic design, web
design, user interface design, illustration, and photography, to add depth, dimension, and
visual interest to elements. They can be applied to backgrounds, text, buttons, icons, and
other design elements to create eye-catching and immersive visuals.

Types of Gradients:
1. Linear Gradient: The colors blend in a straight line from one point to another.
This type of gradient can be vertical, horizontal, or at any angle, depending
on the design requirements.
2. Radial Gradient: The colors blend outward from a central point, creating a
circular or elliptical gradient effect. Radial gradients often create a sense of
depth and can be used to draw attention to a focal point.
3. Angular Gradient: The colors blend around a specified angle or center point,
forming a circular or spiral-like effect.
4. Diamond Gradient: The colors blend diagonally in a diamond shape, creating
a unique and striking effect.

Linear Gradient : This Gradient is a Transition between two or more colors.

It can be oblique, Horizonatal, Vertical. Lighter color on top. It is used for squares.

DEPARTMENT OF IT & CIC Page 12

 UI/UX
UNIT – 2 :: NOTES

Radial Gradient :This Type of Gradient have color starting at center point and other
color is at edge. This Gradient creates awesome 3d effects use it for round shapes.

Angular Gradient : This gradient creates an angle also known as iconic gradient.
The color function changes relative to center point.

 Always use soft color transitions to make gradients.

 Avoid using more than 3 colors in small shapes and make symmetry between colors

 Another way to create gradients is to inspire by the nature.

Morph Gradient: It is special Gradient can created with two types Radio and Linear
Gradients.

Step 1:Create a oval shape and fill with radio gradient

Step 2:Draw color full shapes on it with linear Gradient.

Step 3:Add another oval shape in background blur and glossy in blur.

DEPARTMENT OF IT & CIC Page 13

 UI/UX
UNIT – 2 :: NOTES

Shadow:
In design, a shadow is a visual effect that mimics the appearance of an object casting a
shadow onto its background or surrounding elements. Shadows add depth, realism, and
dimension to visual elements, creating a sense of hierarchy and spatial relationships
within a design. Shadows are commonly used in various design fields, including graphic
design, web design, user interface design, and 3D rendering.

There are different types of shadows used in design:

1. Drop Shadow: A drop shadow is a simple shadow effect that appears as if the
object is raised above its background, and a shadow is cast beneath it. It is
often used to create the illusion of depth and to make elements stand out
from the background.
2. Inner Shadow: An inner shadow is applied to the inside edges of an object,
creating the appearance of a light source shining from within. It can be used
to add depth or create a recessed effect.
3. Outer Shadow: An outer shadow is similar to a drop shadow but is applied
outside the object's boundaries. It can be used to create a floating or
elevated effect.
4. Soft Shadow: A soft shadow has gradual and fuzzy edges, creating a smooth
and subtle blending with the background. It can be used to add a more
natural and realistic look to the shadow.
5. Hard Shadow: A hard shadow has sharp and defined edges, creating a more
pronounced and graphic appearance.

Using shadows effectively in design can:

 Provide visual depth and three-dimensionality to flat elements, making them look
more realistic.

 Emphasize important elements and create a visual hierarchy, drawing attention to

specific parts of the design.

 Improve the user experience in user interface design, making interactive elements
stand out and giving users visual cues.

 Enhance the overall aesthetics of the design, adding a touch of sophistication and
elegance.

DEPARTMENT OF IT & CIC Page 14

 UI/UX
UNIT – 2 :: NOTES

 With out shadow the element looks like that is in back ground.

 The Drop shadow creates the effect that element can be elevated from the
background.

 Depending on shadow values it could be closer or higher from background.

 Inner Shadow creates the effect that element is sunk into the back ground.

DEPARTMENT OF IT & CIC Page 15

 UI/UX
UNIT – 2 :: NOTES

 This type some times used in th input field that there is a space between fields that
need to be filled.

Buttons:
In user interfaces, buttons often have labels that indicate the action they will perform
when activated. For example, a "Submit" button on a web form triggers the submission of
the entered data, while a "Cancel" button allows users to back out of a specific action
without saving changes.

1. Rounded Rectangles are created by setting boarder radius.

2. The size of the button will built hierarchy between the elements.
3. According to material design principals the touch of target is minimum 36*36 px.

DEPARTMENT OF IT & CIC Page 16

 UI/UX
UNIT – 2 :: NOTES

Button styles and Color:

Buttons States:

Buttons can serve different purposes based on their design and context:

 Clickable buttons: These are interactive elements that users can click or tap on to
trigger an action. They might change appearance (e.g., color or size) when hovered
over or pressed to provide visual feedback.
 Toggle buttons: These buttons have two states: on and off. They act as switches
that change the state of a specific feature or setting.
 Radio buttons: Used in groups, radio buttons allow users to choose a single option
from a list of mutually exclusive choices.
 Checkboxes: Similar to radio buttons, checkboxes allow users to select multiple

DEPARTMENT OF IT & CIC Page 17

 UI/UX
UNIT – 2 :: NOTES

options from a list of choices.

 Icon buttons: These buttons use icons or symbols instead of text labels to
represent actions or functions.
 Floating action buttons (FAB): Commonly found in mobile apps, FABs are circular
buttons that typically represent the primary or most important action on a screen.
 Command buttons: These buttons often appear as part of a toolbar or menu and
represent common actions like "Save," "Print," "Undo," etc.

Forms:
Forms refer to a structured way of collecting data or information from users in various
applications, websites, or physical documents. They are an essential component of user
interfaces and are commonly used for tasks like user registration, data entry, surveys,
feedback collection, and more.

A form is a UI component that contains inputs,dropdowns radio buttons, Toggle buttons

check boxes and Sliders.

In digital environments, forms typically consist of various input elements such as:

 Text fields: These allow users to enter text, numbers, or other types of data.
Examples include name fields, email addresses, passwords, etc.
 Textarea: A larger text field that permits users to input longer text, such as
comments or messages.
 Checkboxes: Users can select one or more options from a predefined list.
 Radio buttons: Users can choose a single option from a list of mutually exclusive
choices.
 Dropdown lists: Users can choose one option from a list that is displayed when
clicking on the dropdown arrow.
 Buttons: As mentioned in the previous response, buttons can be used to submit
the form, clear the entered data, or trigger specific actions related to the form.

Forms often include labels that describe each input field, helping users understand what

DEPARTMENT OF IT & CIC Page 18

 UI/UX
UNIT – 2 :: NOTES

information is required. Additionally, forms may have instructions or placeholders inside

the input fields to provide further guidance.

Form validation is a crucial aspect of ensuring data accuracy and completeness. Validation
ensures that the data entered by users is in the correct format and meets specific
requirements. For example, an email field should only accept valid email addresses, and a
password field might require a minimum number of characters.

Responsive design is also essential for forms, especially in the context of websites and
mobile apps. Ensuring that forms adapt to different screen sizes and devices helps
maintain a positive user experience.

Forms can be simple, consisting of only a few input fields, or complex with many fields,
sections, and conditional logic, depending on the application's requirements. Regardless
of their complexity, creating well-designed and user-friendly forms is crucial for effective
data collection and user engagement.

Forms-Input Styles:

Forms-Input States:

DEPARTMENT OF IT & CIC Page 19

 UI/UX
UNIT – 2 :: NOTES

ICONS:
Icons are small graphical representations or symbols used to convey information,
represent actions, or indicate objects in user interfaces and various visual contexts. They
serve as visual aids to quickly communicate concepts, functions, or ideas, often without
the need for text explanations. Icons play a crucial role in enhancing the user experience,
improving usability, and making interfaces more intuitive.

 Icons are simple symbols that can used in contacts to communicate something.

 Icons are easier to recognize for great user experience.

DEPARTMENT OF IT & CIC Page 20

 UI/UX
UNIT – 2 :: NOTES

 The most common style of icons is outline icons, Glyph icons and
 Duo tones because they are easiest to view and understand.
 Gradient icons and Frozen icons have more remarkable effect but they can
become tireing to watch they become too often.
 3d icons are looks famous in 2021 and looks spectacular only in large sizes.
 Avoid using multiple icon styles in the same project.
 There are many libraries of icon packages you have to choose from your needs.

Here are some key points about icons:

 Representation: Icons can represent a wide range of objects, actions, or ideas. For
example, a magnifying glass icon is often used to represent search, a trash bin icon
for deleting, or a home icon to indicate the homepage or main screen.
 Simplicity: Icons are typically simple and concise, designed to be easily
recognizable and understood at a glance. They usually have minimal details to
maintain clarity and legibility, especially at small sizes.
 Universal language: Many icons have become standardized across different
platforms and applications, creating a sort of universal language that users can
understand regardless of their language or cultural background.
 Scalability: Icons are designed to be scalable, meaning they can be displayed at
various sizes without losing their visual integrity. This adaptability is essential for
using icons in different contexts and devices.
 Context and Color: The meaning of an icon can be reinforced or altered by the
context in which it appears. Additionally, color can also be used to convey
information or differentiate between different types of icons.
 Icon Sets: Designers often use sets of related icons with consistent styles to
maintain visual harmony across an application or website. Icon sets ensure that all
icons share a similar design language, making the interface more cohesive.
 Icon Fonts and SVG: Icons can be implemented using various technologies, such as
icon fonts or scalable vector graphics (SVG). Icon fonts are a collection of icons
stored in a font file, while SVG is a vector-based format that allows for more
flexible and resolution-independent scaling.
 Accessibility: When using icons, it's crucial to consider accessibility for all users,
including those with visual impairments. Providing alternative text or ARIA
(Accessible Rich Internet Applications) attributes ensures that screen readers can
convey the meaning of the icons to users who cannot see them.

 Depending on the purpose the icons have 3 functions.

1. Clarify 2. Interactive 3.Decorate.

DEPARTMENT OF IT & CIC Page 21

 UI/UX
UNIT – 2 :: NOTES

 Clarifying icons: are icons that illustrate the text near them.
 People who instantly recognize icons doesn’t pay much attention to the text.

 Interactive Icons: These icons appear in interactive areas and the primary purpose
is do actions symbolize by them.
 These icons support the navigation.

 Decorative icons: Decorative icons are graphical representations used purely for
aesthetic purposes or to add visual appeal to a design without necessarily
conveying specific information or functionality.
 It is one of the feature that can attaract retain users and add positive user
experience.

DEPARTMENT OF IT & CIC Page 22

 UI/UX
UNIT – 2 :: NOTES

Images:
Images are visual representations of objects, scenes, or concepts captured using various
methods, such as photography, digital rendering, or artwork. They play a crucial role in
communication, storytelling, and expressing ideas across different media, including print,
digital platforms, and multimedia presentations.

Types of Images: There are several types of images, including:

 Photographs: Captured with cameras, photographs are realistic representations of

real-world objects, people, or scenes.
 Digital Images: Created using digital tools like image editing software or computer-
generated graphics.
 Artwork/Illustrations: Hand-drawn or digitally-created images that convey artistic
interpretations.
 Icons: As discussed earlier, icons are small images used to represent specific
objects, actions, or ideas in user interfaces.
 Visual Communication: Images are a powerful means of visual communication,
conveying information and emotions more efficiently than text alone. They can
quickly grab the attention of viewers and evoke various responses.
 Uses of Images: Images are utilized in numerous contexts, including:
 Websites: Images are essential for web design to make sites visually appealing and
engaging.
 Social Media: Images are widely used on platforms like Instagram, Twitter, and
Facebook to convey messages and stories.
 Advertising and Marketing: Images are commonly employed in advertisements
and marketing materials to promote products or services.
 Education: Images are used in educational materials to illustrate concepts and
enhance learning.
 Media and Journalism: Images are critical in news reporting, documentaries, and
storytelling.
 File Formats: Images are stored in various file formats, each with its own
characteristics. Common image formats include JPEG, PNG, GIF, SVG, and BMP,
each tailored to specific needs like image quality, transparency, or vector graphics.
 Image Editing: Image editing software allows users to manipulate and enhance
images, adjusting colors, cropping, and applying various effects.
 Copyright and Licensing: It's essential to consider copyright and licensing when
using images. Unauthorized use of copyrighted images can lead to legal issues.
 Accessibility: As with icons, accessibility is crucial for images. Providing alternative
text (alt text) for images allows screen readers to describe images to users with
visual impairments.

DEPARTMENT OF IT & CIC Page 23

 UI/UX
UNIT – 2 :: NOTES

Illustrations:
Illustrations are visual representations or interpretations of concepts, ideas, or scenes
created by artists, illustrators, or designers. Unlike photographs that capture real-world
objects or scenes, illustrations are often hand-drawn or digitally created artworks that
convey a unique artistic style and perspective. They are widely used in various contexts,
including books, magazines, advertisements, websites, packaging, and more.

Navigations:

Navigations, in the context of user interfaces and web design, refer to the elements and
systems used to help users move through the content and features of a website,
application, or other digital platforms. Effective navigation is crucial for providing a
positive user experience and ensuring that users can easily find the information they are
looking for or perform desired actions. Navigation elements help users orient themselves,
explore different sections, and access specific content or functionality.

 Menu Bar: A horizontal or vertical bar that contains links to main sections or
categories of a website or application. It often appears at the top of the page or on
the side and is usually present on all pages to provide consistent navigation.
 Dropdown Menus: Submenus that appear when users hover over or click on a
menu item, revealing additional options or subcategories.
 Hamburger Menu: A three-bar icon (resembling a hamburger) that represents a
hidden menu containing navigation links. It is often used in mobile or responsive
designs to save screen space.
 Tabs: Horizontal or vertical tabs that allow users to switch between different
sections or views within a page or application.
 Breadcrumb Navigation: A trail of links that shows the user's current location
within a website's hierarchy, making it easy to backtrack to previous pages or
sections.
 Pagination: Links or buttons that divide content into separate pages or sections,
particularly useful for displaying lists of items or search results.
 Search Bar: A field where users can enter keywords to search for specific content
or items within the website or application.
 Buttons and Call-to-Action (CTA): CTA buttons guide users to perform specific
actions, such as "Sign Up," "Add to Cart," "Download," etc.
 Footer Navigation: Links located at the bottom of the page, typically containing
secondary or less frequently accessed navigation items and essential links like
"Privacy Policy" and "Contact Us."
 Sticky Navigation: A navigation bar that remains visible and fixed at the top or
bottom of the screen as the user scrolls down the page.

DEPARTMENT OF IT & CIC Page 24

 UI/UX
UNIT – 2 :: NOTES

 Mega Menus: Large dropdown menus that display additional content, images, or
subcategories, often used for complex websites with extensive navigation needs.
 Side Drawer: A hidden panel that slides in from the side, often used for mobile
navigation.

DEPARTMENT OF IT & CIC Page 25