UI/UX

UNIT – 1 :: NOTES

What is UI?
 UI stands for User Interface or User Interface Design. It’s also sometimes
known as user interfaceengineering.
 UI is the design of user interfaces for machines: how a product looks and feels, not
how it functions.
 UI Design is the process of making the user's interaction as simple and efficient as
possible, in terms of accomplishing their goals (also known as user-centered
design).

UI design is the merger of user needs and visual design. The result of UI design is a set of
high-resolutionwireframes (a visual representation of a product).

The term UI stands for User Interface and refers to the ON Screen and visual elements
such as icons and buttons that are designed to enable a person to interact with a product
or service. In a simpler word, UI is anything that a user can use to interact with a product
or service digitally. UI includes everything from both screens and touchscreens to sound,
keyboard, and even lights.

DEPARTMENT OF IT & CIC Page 1

 UI/UX
UNIT – 1 :: NOTES

User Interface’s Brief History:

When our world was introduced to the computer in the mid-1970s, people then had to
use the command line interface to interact with it. The programming language was a must
to be able to communicate with the computer as the graphical interfaces then were
available commercially.

But with the entry of the 1980s, things changed when the first Graphical User Interface
(GUI) was developed by then computer scientists working at Xerox PARC. This was a major
groundbreaking invention as with the implementation of the GUI, users for the time we're
able to interact with computers simply by submitting commands through icons, menus,
buttons, and checkboxes virtually.

With this groundbreaking invention, the science around the world understood that this is
the direction they must continue meaning anybody can use the computer as commands
were no longer required for interaction.
Macintosh released by Apple Computer in 1984 turned out to be the first commercially
viable computer to have a GUI. This personal computer had a point-and-click mouse. With
this more computers started to get designed with the users in mind. A general belief was
established amongst companies and their developers that without the user’s scope for
interacting with a computer, they will most likely not buy their built computers.

Thus, with the growing technology, the UI designer’s role has come of age in terms of
expectations, preferences, and systems. Eventually, the role UI progressed from computer
to our smartphone and other smart home devices.

UI formats or Types:
Ui has following formats

1.Graphical User Interface Design:

This design involves users to interact with visual elements and digital control
pannels.
EX:Computers desktop.

2.Voice Controlled Interface:

It involves interaction between user and system using voice
Ex:siri in iphone.

DEPARTMENT OF IT & CIC Page 2

 UI/UX
UNIT – 1 :: NOTES

Characteristics of Good UI:

 The design should be focused to helping users to complete tasks with in quick
time.
 Completing Tasks should be a seamless experience.
 It should be enjoyable ,satisfactory and free from frustration.
 The ui design should communicate the brand value of the company.

What is UX?
 UX stands for user experience or user experience design. It’s also sometimes
abbreviated as UXD, UED or XD.
 UX is the naked experience of a product: how a product functions, not how it
looks.
 UX Design is the process of enhancing user satisfaction of a product through
increased usability, accessibility, and pleasure provided in the interaction with the
product. User experience design encompasses note only traditional human–
computer interaction design, but also all aspects of a product or service as
perceived by users.

UX design is the merger of user needs, business vision and technological feasibility. The
result of UX design is a set of low-resolution wireframes (a basic visual guide for how a
product will function) that are deeply connected with user research.

DEPARTMENT OF IT & CIC Page 3

 UI/UX
UNIT – 1 :: NOTES

User Experience’s Brief History:

The term “User Experience” was coined by a cognitive scientist named, Don Norman in
the early 1990s while he was working at the Apple company. He defined UX as the “User
experience that encompasses all aspects of the end- user’s interaction with the company,
its services, and its product.” In short, it meant that the digital experience isn’t the only
interaction a user can have with their computer or other smart devices.

Some started referring to this as the customer experience. However, most acknowledge
the Normal original definition of UX as the ultimate one.

Characteristics of UX:
 The Product should be easily usable ,logical and self explanatory.
 The product should slove user problems,
 The product should be accessible for wide range of users.
 The product should create positive experience to users allowing them to complete
task with out frustration.

DIFFERENCE BETWEEN UI & UX:

DEPARTMENT OF IT & CIC Page 4

 UI/UX
UNIT – 1 :: NOTES
Following are the differences between UI and UX:

 Where UX is cognitive science, revolving around how a product impacts,

influences, and impresses the user, UI is far more technical, it provides a digital
interface to a product, facilitating a point of interaction via which the user will feel
the experience.
 UX focuses on designing a product as a solution to the user's needs or problems,
while UI focuses on how the interface appears and operates.
 Ideally UX design starts as soon as product design begins keeping the user in mind,
and then UI follows.
 UX design aims to deliver a feel a user experience to the user while using the
product, whereas UI provides the user an interface through interaction and visual
elements like screens, icons, colors, responsive design, or anything which a user
can see.

UX Design UI Design
Applied in Physical and Digital products Applied in Digital products

Experience-driven Visually-driven

Aims towards Effectiveness Aims towards Aesthetic Interaction

It's more about the Feel It's more about the Function

Based on - Research, wireframes Based on - Touchpoints, Visual Mapping

Comes prior in product development Comes after in product development

Situation and Solution based Intuitive, Interactive interfaces

Involves Competitor and Consumer Analysis Involves Consumer Analysis

DEPARTMENT OF IT & CIC Page 5

 UI/UX
UNIT – 1 :: NOTES

Roles in UI/UX:
 UX Designer:
UX designers are generalists who champion and design for users throughout a
project. This means they know how to research user needs at the beginning of the
project, outline the scope of a project’s features and content, define the navigation
and information hierarchy, create wireframes and prototypes and – finally – test
their designs to see how well they perform. UX designers should be able to jump in
at any stage of the design process, at large companies where UX specialists, such as
UX researchers, are on staff, they may not be solely responsible for certain phases of
the design process.

o Job responsibilities include:

 Conduct user research, such as user interviews, prototype testing,
card sorting and more
 Conduct competitive analysis
 Use research data to determine what users want and where their
pain points lie
 Create personas and journey maps
 Create site maps and other information architecture deliverables
 Create wireframes and prototypes
 Collaborate with a cross-functional team
o Skills required include:
 Empathy for users
 Communication and collaboration with other team members
 Organisation and prioritisation of project tasks and responsibilities
 Ability to think critically about user needs
 Ability to perform user research and analyse results
 Wireframing and prototyping skills
 Capable of using industry standard software including OmniGraffle,
InDesign, Invision or other tools

 UI Designer

UI designers design all the screens that make up a digital user interface, as well as
the individual elements featured on those screens. As such, they consider both the
overall layout of each individual screen and how all the separate screens fit
together. They are responsible for creating high fidelity prototypes that are
indicators of how a user interface looks, and as a result their work happens late in

DEPARTMENT OF IT & CIC Page 6

 UI/UX
UNIT – 1 :: NOTES
the UX process. Because their focus is the visual aspects of a product, UI
designers need to be able to ensure their designs fall in line with brand guidelines.

 UX/UI Designer
A UX/UI designer handles the responsibilities of both a UX designer and a UI
designer. While it’s often desirable to have different people handle these different
responsibilities, at small companies or companies who only have tiny UX teams, one
person may be tasked with both.

 UX Manager
A UX manager, as the title suggests, is the person in charge of the UX team. They’re
responsible for assigning team members to projects, representing the team’s
expertise across the company and ensuring the team continues to develop
professionally. UX managers also usually lead and oversee large projects.

o Job responsibilities include:

 All the skills of a UX designer
 Coordinating and overseeing the UX team
 Ensuring UX teams stay up to date on best practices and new
approaches
 UX Researcher
UX researchers specialise in researching a product’s users. This means they should
be comfortable collecting both qualitative and quantitative data through a variety of
techniques including user interviews, user surveys, and A/B tests. UX researchers
also analyse data and present their insights and recommendations to the UX team.

o Job responsibilities include:

 Conduct user research, using both qualitative and quantitative
techniques
 Consult with the UX team to decide what research would be most
helpful to a project
 Analyse collected data
 Create user personas, journey maps, user stories and presentations
that provide insight into research findings
 Make recommendations for the project based on research findings
 UX Writer
UX writer is one of the newer job titles in the industry. UX writing is the creation of
all the copy you see, hear or encounter when using a digital product and UX writers
specialise in crafting copy that will help the user understand and navigate through

DEPARTMENT OF IT & CIC Page 7

 UI/UX
UNIT – 1 :: NOTES
the product. This means writing things like microcopy, calls to action and error
messages based on user needs instead of marketing goals.

o Job responsibilities include:

 Conduct or assist with UX research
 Write copy that is user-friendly and helpful
 Write in the brand’s voice while keeping user needs in mind
 Ensuring that the copy fits with and facilitates the user experience
 Create a strategy to ensure copy is consistent across a product
 UX Architect
Like UX writers and UX researchers, information architects (who may also be called
UX architects) are specialists. They’re concerned with organising and structuring the
information and content throughout a product’s design stages. They determine the
navigation across the product, the hierarchy of the product’s pages and the way
pages are structured, all with the goal of ensuring the user’s journey is smooth and
logical.

o Job responsibilities include:

 Perform user research to understand how users move through a
product
 Create site maps, use cases and user flows to communicate a site’s
navigation and structure
 Label navigation elements in a logical, understandable way
 UX Strategist
A UX strategist is a UX designer who also understands how to utilise and implement
business strategies. They’re often responsible for defining business goals in
conjunction with clients and stakeholders and deciding on a strategy for the content
available in a product that balances user needs with business requirements.

o Job responsibilities include:

 Conduct user research and analysing data for insights into what
users want from a business
 Perform competitive analysis
 Create journey maps and storyboards
 Use research insights to arrive at business goals
 Create and present a UX strategy

DEPARTMENT OF IT & CIC Page 8

 UI/UX
UNIT – 1 :: NOTES

A Brief Historical Overview of Interface Design:

Interface design has evolved significantly over the years, adapting to technological
advancements and changing user needs. Here's a brief historical overview of interface
design:

 Early Text-Based Interfaces (1960s-1970s): The earliest computer interfaces were

text-based, requiring users to interact with the computer through command-line
interfaces (CLI). Users had to type specific commands to perform tasks, and the
feedback was typically in the form of text output. These interfaces were used
mainly by computer experts and programmers.
 Graphical User Interfaces (GUIs) (1980s-1990s): Xerox PARC's Alto computer,
developed in the 1970s, was one of the first to introduce the concept of a graphical
user interface. However, it was Apple's Macintosh, introduced in 1984, that
popularized GUIs. GUIs featured visual elements like icons, windows, menus, and a
mouse for interaction. This made computers more accessible to non-technical
users and revolutionized the computing industry.
 Web Interfaces (1990s-2000s): The advent of the World Wide Web brought about
a new era of interface design. Early websites were simple and text-heavy, but over
time, designers began incorporating graphics, images, and multimedia elements.
HTML and CSS allowed for better control over layout and design. However, early
web interfaces faced challenges like slow internet connections and browser
compatibility issues.
 Mobile Interfaces (2000s-2010s): The introduction of smartphones in the early
2000s brought about a new set of design considerations. Mobile interfaces needed
to be optimized for smaller screens and touch-based interactions. Apple's iPhone,
launched in 2007, set new standards for mobile interface design with its intuitive
touch-based interactions and the App Store.
 Flat Design and Material Design (2010s): In the 2010s, interface design trends
shifted towards minimalism and simplicity. Flat design became popular,
emphasizing clean, two-dimensional elements and bright colors. Microsoft's Metro
design language (later called Microsoft Design Language) and Apple's iOS 7
redesign were notable examples. Google introduced Material Design, which
combined flat design principles with realistic motion and responsive interactions.
 Responsive Design (2010s): As the number of devices with different screen sizes
and resolutions increased, responsive design became crucial. Websites and
applications needed to adapt seamlessly to various devices, providing a consistent
experience across platforms.
 Voice and Gesture Interfaces (2010s): With the rise of voice assistants like Siri,
Alexa, and Google Assistant, voice interfaces gained traction. Users could interact

DEPARTMENT OF IT & CIC Page 9

 UI/UX
UNIT – 1 :: NOTES
with devices and applications using voice commands. Gesture-based interfaces,
made popular by touchscreens and motion-sensing technologies, also became
common in gaming consoles and mobile devices.
 Augmented Reality (AR) and Virtual Reality (VR) Interfaces (2010s): AR and VR
technologies introduced new challenges and opportunities for interface design.
Designers had to create immersive and intuitive experiences in virtual
environments.
 Current Trends (2020s): As of my last update in September 2021, interface design
continues to evolve. Dark mode interfaces, microinteractions, accessibility, and
inclusive design are some of the current trends. Additionally, interfaces are
becoming more adaptive and personalized, utilizing AI and machine learning to
understand and cater to individual user preferences.

Throughout its history, interface design has progressed significantly, driven by

advancements in technology, user behavior, and design principles. The focus has always
been on improving usability, accessibility, and user experience, and this trend is likely to
continue as technology continues to evolve.

Interface Conventions:
Interface conventions are established design patterns and principles that have become
widely adopted and expected by users. These conventions aim to create a consistent and
familiar experience across different applications, websites, and digital platforms. Adhering
to interface conventions helps improve usability, as users can quickly understand how to
interact with the interface without needing to learn entirely new ways of interaction for
each platform. Here are some common interface conventions:

 Navigation Bar: Placing the main navigation options at the top of the screen is a
prevalent convention. This navigation bar typically includes links or icons that lead
to different sections or pages within the application or website.
 Hamburger Menu: The three-horizontal-line "hamburger" icon is a common
symbol for hidden menus. Clicking or tapping this icon reveals a menu with
additional options or navigation items.
 Icons: Icons are used to represent actions, features, or concepts. Commonly
understood icons, such as a magnifying glass for search or a trash can for delete,
provide visual cues that users recognize and understand.
 Buttons: Buttons with clear labels and appropriate design affordances (visual cues
indicating clickability) help users understand how to perform actions, like
"Submit," "Cancel," or "Save."
 Form Layout: Structuring forms with labels placed near input fields and grouping
related inputs together improves form comprehension and completion.

DEPARTMENT OF IT & CIC Page 10

 UI/UX
UNIT – 1 :: NOTES
 Scrolling: Vertical scrolling is the standard way to navigate content on most digital
platforms, and users expect it to work smoothly and consistently.
 Links: Underlined text or differently colored text is often used to indicate clickable
links, following the convention established by web browsers.
 Confirmation Modals: Modal windows that ask users to confirm actions, such as
before deleting an item, help prevent accidental interactions and provide a chance
to reconsider.
 Loading Indicators: Animated elements, such as spinners or progress bars, indicate
that the application is processing information or loading content.
 Feedback and Error Messages: Providing informative feedback and error messages
when users perform actions or encounter issues helps them understand what is
happening and how to resolve problems.
 Search Bar: A prominent search bar or icon allows users to quickly search for
specific content or information within an application or website.
 Consistent Typography: Using a consistent and legible font style, size, and
hierarchy throughout the interface improves readability and visual coherence.
 Color Usage: Conventions around color usage often involve using specific colors for
certain actions or status indicators. For example, using green for "success" or red
for "error."
 Responsive Design: Adapting the interface to different screen sizes and
orientations is essential to provide a consistent experience across various devices.

It's essential for designers to consider these conventions, but they should also be mindful
of the specific context and needs of their users. Striking the right balance between
adhering to conventions and introducing innovative design elements can lead to an
effective and user-friendly interface.

Approaches to Screen Based UI:

There are several approaches to screen-based User Interface (UI) design, each with its
unique characteristics and use cases. The choice of approach depends on the project's
requirements, the target audience, and the goals of the interface. Here are some common
approaches to screen-based UI design:

 Flat Design: Flat design is a minimalist approach that focuses on simplicity and
clean aesthetics. It avoids the use of gradients, shadows, and other decorative
elements, opting for flat colors and simple shapes. Flat design was popularized by
Microsoft's Metro design language and Apple's iOS 7 redesign. It is well-suited for
modern and straightforward interfaces.
 Material Design: Material Design is a design language developed by Google that
combines flat design principles with realistic motion and interaction. It is based on

DEPARTMENT OF IT & CIC Page 11

 UI/UX
UNIT – 1 :: NOTES
the concept of material surfaces and responsive animations. Material Design
provides depth and visual hierarchy, making it easy for users to understand the
relationships between different elements. It is widely used in Android apps and
web applications.
 Skeuomorphic Design: Skeuomorphic design mimics real-world objects and
textures in the digital interface. Elements are made to look like their physical
counterparts, such as using a bookshelf background for a digital book application
or creating buttons that resemble real buttons with shadows and gradients. This
approach was more prevalent in the past, but it is less common in modern design
as flat and material design gained popularity.
 Neumorphism/Soft UI: Neumorphism, also known as Soft UI, is a design trend that
aims to create interfaces with soft, embossed, or recessed elements. It combines
aspects of skeuomorphic design with minimalism, using subtle shadows and
highlights to give elements a three-dimensional appearance. Neumorphism is
visually appealing but requires careful implementation to ensure good usability
and accessibility.
 Responsive Design: Responsive design is not a visual design approach but rather a
technique to ensure that the interface adapts and scales seamlessly to different
screen sizes and devices. Responsive design is essential in today's multi-device
landscape, where users access applications and websites on various devices,
including desktops, tablets, and smartphones.
 Microinteractions: Microinteractions are subtle, single-purpose animations or
interactions that provide feedback to users when they perform specific actions.
These small animations can add a touch of delight to the user experience and
make the interface feel more responsive and engaging.
 Brutalism: Brutalism is an unconventional and controversial design approach
characterized by raw, rough, and unpolished aesthetics. It often involves using bold
typography, asymmetrical layouts, and stark colors. While not suitable for all
projects, brutalism can make an interface stand out and leave a lasting impression.
 Dark Mode: Dark mode, also known as night mode, involves using a dark color
scheme for the interface instead of the traditional light background. Dark mode
can reduce eye strain, save battery life on OLED screens, and provide a different
aesthetic appeal.
When choosing an approach, it's important to consider the context of the project, the
preferences of the target audience, and the overall user experience you want to achieve.
Designers may also combine elements from different approaches to create a unique and
effective UI design.

DEPARTMENT OF IT & CIC Page 12

 UI/UX
UNIT – 1 :: NOTES

Template vs Content:
In the context of design and presentation, "Template" and "Content" refer to two distinct
aspects:

Template: A template is a pre-designed layout or framework that serves as a starting

point for creating consistent designs across different instances or pages. Templates
provide a structure for the visual elements, such as fonts, colors, headers, footers, and
general layout. They help maintain a cohesive look and feel throughout a website,
document, presentation, or any other medium.

Templates are especially useful in scenarios where multiple instances of a design need to
be created with a consistent style. For example:

 In web design, website templates provide a framework for the overall layout and
design of a website. Web designers can then fill in the specific content for each
page while keeping the consistent structure.
 In document creation, templates in word processors or desktop publishing
software provide predefined styles, headers, and footers, making it easier to
create consistent documents like reports, letters, or brochures.

Content: Content refers to the actual information, data, or media that fills the template. It
includes text, images, videos, charts, and any other specific elements that convey the
message or information to the audience.
The content is the unique and dynamic part of the design, as it changes from one instance
to another while the template remains the same. For example:
 In a website, the content of each individual page would be unique, such as text
about different products, services, or articles. However, the overall structure and
design (template) of the website remain consistent.
 In a presentation, the slides' content might vary from one slide to another,
presenting different topics or points, while the presentation's overall theme and
layout (template) provide a consistent visual framework.
The separation of template and content allows designers and creators to efficiently
produce consistent designs without starting from scratch each time. Templates provide a
solid foundation, while content delivers the specific information and details tailored for
each instance. This approach also enables easy updates to the overall design by simply
modifying the template, affecting all instances that use it, without the need to alter each
individual content separately.

DEPARTMENT OF IT & CIC Page 13

 UI/UX
UNIT – 1 :: NOTES

Aspect Template Content

A pre-designed layout or
Definition framework. The actual information, data, or media.

Provides a consistent design Conveys the specific message or

Purpose structure. information.

Generally remains the same across

Customization instances. Varies from one instance to another.

Includes text, images, videos, charts,

Components Defines the overall visual elements. etc.

Fills the template to create a specific

Application Used as a starting point for designs. instance.

Website template, presentation Text, images, charts, products in a

Examples theme. website, slide.

Can be modified to update the Can be edited to change the specific

Modifiability design. information.

Purpose in Establishes consistent branding and Delivers the unique and dynamic part of
Use style. the design.

Formal Elements of Interface Design:

Formal elements of interface design are the fundamental visual building blocks that
designers use to create a user interface. These elements play a crucial role in determining
how the interface looks and how users interact with it. Understanding and effectively
using these formal elements is essential for creating visually appealing and user-friendly
interfaces. Here are some of the key formal elements of interface design:

 Layout: The arrangement and organization of elements on the screen. A well-

structured layout guides users' attention and helps them understand the hierarchy
of information.
 Typography: The choice of fonts, font sizes, and font styles used for text in the
interface. Typography affects readability and can convey a specific tone or
personality.

DEPARTMENT OF IT & CIC Page 14

 UI/UX
UNIT – 1 :: NOTES
 Color: The selection and use of colors throughout the interface. Colors create
visual interest, establish brand identity, and can convey emotions or meanings.
 Icons: Small graphical representations used to represent actions, features, or
concepts. Icons provide visual cues and improve the overall user experience.
 Buttons: Interactive elements that users can click or tap to perform actions.
Buttons should have clear labels and appropriate design affordances to indicate
clickability.
 Forms: Interface elements that allow users to input data, such as text fields,
checkboxes, radio buttons, and drop-down menus.
 Images and Graphics: Visual elements, such as photographs, illustrations, icons,
and logos, used to enhance the interface's aesthetics and communicate
information.
 Whitespace (Negative Space): The empty or blank space between elements.
Whitespace helps create visual balance, improve readability, and highlight
important content.
 Lines and Dividers: Used to separate content and create visual divisions within the
interface.
 Navigation: Elements and patterns that facilitate moving between different
sections or pages within the interface, such as menus, breadcrumbs, and
navigation bars.
 Microinteractions: Small, subtle animations or interactions that provide feedback
to users when they perform certain actions.
 Responsive Design: Designing interfaces that adapt and respond to different
screen sizes and orientations, ensuring a consistent experience across devices.
 Visual Hierarchy: Organizing elements to show their importance and create a clear
flow of information, helping users easily understand the interface's content and
structure.
 Consistency: Maintaining a uniform style and layout throughout the interface to
provide a cohesive user experience.
By utilizing these formal elements effectively, interface designers can create interfaces
that are visually appealing, easy to use, and aligned with the brand's identity and user
needs.

Active Elements of Interface Design:

Active elements of interface design refer to interactive components that users can directly
engage with to perform actions or trigger specific functionalities. These elements play a
dynamic role in user interfaces, as they respond to user input and provide feedback,
making the interface more engaging and functional. Here are some of the key active
elements commonly used in interface design:

DEPARTMENT OF IT & CIC Page 15

 UI/UX
UNIT – 1 :: NOTES
 Buttons: Interactive elements that users can click or tap to trigger actions, such as
submitting a form, navigating to another page, or initiating a specific process.
 Links: Clickable text or icons that lead users to other pages or external resources.
Links are often underlined or styled differently to indicate their interactivity.
 Menus: Dropdown menus, context menus, and navigation menus that provide a
list of options for users to choose from.
 Forms: Interactive elements that allow users to input data, such as text fields,
radio buttons, checkboxes, and drop-down lists.
 Sliders: Interactive controls that users can slide to select a value within a specified
range. Sliders are often used for settings, volume controls, and image galleries.
 Tabs: Tabbed navigation elements that allow users to switch between different
sections or content within the interface.
 Accordions: Interactive components that expand and collapse to show and hide
content, typically used to conserve space and present information in a structured
manner.
 Checkboxes and Radio Buttons: Elements that allow users to select options from a
list of choices.
 Toggle Switches: On-off switches that users can toggle to enable or disable specific
features or settings.
 Carousels and Slideshows: Interactive components that display a series of images
or content, often with navigation controls to move between items.
 Drag and Drop: Interactive feature that allows users to move elements within the
interface by clicking and dragging them.
 Scrolling and Pagination: Active elements that enable users to navigate through
content that exceeds the visible area of the interface, either through scrolling or
pagination controls.
 Search Bars: Interactive input fields that allow users to search for specific content
or information within the interface.
 Video and Audio Players: Interactive components that allow users to play, pause,
seek, and adjust volume for multimedia content.
 Load More/Infinite Scroll: Mechanisms that automatically load additional content
as users scroll down, providing a seamless browsing experience.
Active elements in interface design enhance interactivity and user engagement, making
the user experience more enjoyable and efficient. When designing these elements, it's
essential to provide clear visual cues and feedback to ensure users understand their
functionality and how to interact with them effectively.

DEPARTMENT OF IT & CIC Page 16

 UI/UX
UNIT – 1 :: NOTES

Composing the Elements of Interface Design:

Composing the elements of interface design involves arranging and combining various
visual and interactive components to create a cohesive and user-friendly user interface.
It's the process of putting together all the design elements to form a visually appealing
and functional interface that effectively communicates with the users. Here are the key
steps involved in composing the elements of interface design:

 Define the Layout: Start by defining the overall layout of the interface. Determine
how different elements will be arranged on the screen, including headers,
navigation bars, content areas, sidebars, and footers. Consider the visual hierarchy,
grouping related elements together, and creating a clear flow of information.
 Choose Typography: Select appropriate fonts for headings, subheadings, body
text, and other elements. Ensure that the typography is legible and matches the
tone and personality of the interface.
 Color Palette: Establish a color scheme for the interface. Choose a primary color
and complementary colors to create a visually harmonious design. Consider the
psychological impact of colors and use them to convey emotions or highlight
important elements.
 Use Icons and Graphics: Integrate icons and graphics to enhance the interface and
provide visual cues for actions and content. Ensure that icons are clear and
recognizable, and use them consistently throughout the interface.
 Create Buttons and Interactive Elements: Design buttons and interactive elements
that stand out and are easy to identify as clickable. Use appropriate colors, shapes,
and visual effects to indicate their interactivity.
 Form Design: Design forms and input fields with clear labels and visual cues to
guide users. Ensure that the form layout is logical and easy to navigate.
 Responsive Design: Ensure that the interface is responsive and adapts seamlessly
to different screen sizes and devices. Test the interface on various devices to
ensure consistent user experiences.
 Microinteractions: Add subtle animations or interactive feedback to enhance the
user experience. Microinteractions can make the interface feel more responsive
and engaging.
 Navigation and Information Architecture: Design intuitive navigation patterns to
help users easily find their way around the interface. Use clear labels and
appropriate icons for navigation elements.
 Whitespace and Visual Balance: Utilize whitespace to create visual breathing
space and prevent the interface from feeling cluttered. Achieve visual balance by
distributing elements evenly throughout the screen.
 Consistency: Maintain consistency in design elements, such as colors, typography,

DEPARTMENT OF IT & CIC Page 17

 UI/UX
UNIT – 1 :: NOTES
buttons, and icons, to provide a unified user experience.
 User Testing and Feedback: Conduct usability testing with real users to identify
potential issues and gather feedback. Make iterative improvements based on user
feedback to enhance the interface's usability and effectiveness.
Composing the elements of interface design is an iterative process that involves careful
consideration of the user's needs, goals, and expectations. By following these steps and
applying user-centered design principles, designers can create interfaces that are visually
appealing, intuitive, and user-friendly.

UI Design Process:
UX has 3 key phases: discovery, ideation, and validation. However, UX design is cyclical
and you will often need to repeat certain steps and even the entire process multiple
times.

1. Discover
User Research (Interviews,
UX always starts with discovery —
Ethnography)
interviewing potential cus- tomers to
Empathy Mapping
understand what the target audience
Task Analysis
needs and talking to stakeholders to
Stakeholder Mapping
understand their goals and com-
Service Blueprints
petitive analysis. Discovery is all about
Analytics and Heuristics
WHY - xxx. During dis- covery you will
Competitive Analysis
validate your problem (your product is
there to solve that problem), identify
your end users, and deter- Outcome: Problem Validation,
mine project goals. User Personas, Project Goals

DEPARTMENT OF IT & CIC Page 18

 UI/UX
UNIT – 1 :: NOTES

2. Ideate
Next comes ideation — using a variety
of tools to imagine a solution that
solves the user problem, while aligning
Sketching
with the company goals within
technological possibility. Ideation is the Wireframes
process of finding out HOW. How will Information Architecture
you create a solution that solves the Journey Mapping / Page
Flows
users deepest needs in a delightful
User Journey Writing
manner? Designers will implement a
Paper Prototypes
variety of tools to figure out how to
Interaction Design
solve the user problems. This process is
Outcome: Solution Exploration
very much like a funnel, where the
solution is very wide at the beginning,
and the goal of the process is to quickly,
envision and test products with target
customers in order to pivot
and define. During ideation you will
organize your discovery, explore
options, and develop wireframes and
prototypes.

3. Validate (Test, Prototype)

The UX process ends with validation — the
testing of wireframes and prototypes to
iterate on the interface until it’s intuitive Accessibility
and delightful. Validation is when we Usability Testing
finally know WHAT we’re Feedback integration
building. During this phase, designers will Interactive Design
create wireframes or prototypes, and test Retrospectives
them with users during a process called Release
usability testing to evaluate how an actual Outcome: Solution Scalability,
user will react to the product. The designer Low-Res Wireframes
observes, asks open-ended questions and
iterates on the wireframes based on this
feedback. Validation
testing is giving those wireframes or prototypes to real users.
You’re tracking actual interaction with the prototype here as well
as confirming previously held assumptions. The results of validation testing should be

DEPARTMENT OF IT & CIC Page 19

 UI/UX
UNIT – 1 :: NOTES
changes in flow and layout, though likely not scope anymore. During validation you
will validate your ideas, learn, and plan forthe next iteration.

What is the process of UI?

UX has e key phases: design and testing. UI design
precedes the development of the
product's functionalelements.

UI design is the creation of the

finished interface; its focus is on
the visual and emotional feel of
the product. UI design establishes
the layout, colors, typography and
interactivity to visually
communicate the flow of the
screens in an intuitive manner. The
UI design process must balance
technical functionality and visual
elements to create a system that is
not only operational but also usable
and adaptable to changing user
needs.

How Do UI and UX Fit Together?

The processes of UX Design and UI Design are flexible and there is no “right” way of
bringing them togetherfor one project. Typically, a project will need UX Design first
and then UI Design. However, for existing
products, either process may be used alone to improve either UX or UI.

DEPARTMENT OF IT & CIC Page 20

 UI/UX
UNIT – 1 :: NOTES

Practical Applications and Design Thinking

UX and UI are driven by Design Thinking, which refers to creative strategies designers
use during the process of designing. This approach is also useful to resolve issues outside
of professional design practice, such as in business, social, or personal contexts.
There are 5 keys to design thinking, and you can apply them to your everyday life.
1. Empathize—When you design, you’re not primarily doing it for yourself. You’re doing
it with other
people's needs and desires in mind. Focus on the person or problem that you are
serving. Find ways to serve them better. Help their loves be better each day.
Empathize first.
2. Discover—Try to narrow down your problem to the root cause. Jump in with
an open mind, withoutcriticism or opinions. Seek to understand before you are
understood.
3. Ideate– Be imaginative, create ideas to solve the problem you identified in step 2.
4. Prototype– Place the concept of being perfect aside. Embrace failure to master
the process. Don’t becautious.
5. Test—Cultivate self-awareness by asking yourself, “what do I really want to see or
experience?” Never
limit yourself.

DEPARTMENT OF IT & CIC Page 21