Interaction design
• "interaction design" refers to the practice of designing how
users will interact with a digital product.
• It means the relationship between user and product and
the services they use.
• purpose :Is to create a great user experience
key elements:
• Touch Interaction: Users interact with the interface by
touching a screen, commonly used on smartphones and
tablets.
• Menu-Driven Interaction: Users navigate through a list
of options presented in a menu to select actions.
• Direct Manipulation: Users interact with digital objects
on the screen as if manipulating physical objects, like
dragging and dropping.
Example : Resizing a graphical shape by
dragging its corners
• Natural Language Interaction: Users interact with
the system by speaking natural language commands.
• Micro Interactions: Small, subtle animations or
feedback mechanisms that enhance the user
experience.
Example: A progress bar in a task list shows how far a
user is in the
process
Mobile Interactions: Gestures like swiping, tapping,
ling-pressing and pinching used on mobile devices.
Example: Using a pinch gesture to zoom in or out
Branding
• Branding is the process of creating a distinct
identity for a business in the minds of your target
audience and the general population
• Branding is the core and UX/UI design enhances and
extends that identity out into an interactive work of art;
all the elements it takes to create this complete brand
identity come from thousands of little decisions made
between the company and both the UX and UI teams.
Importance of branding in UI design:
• User recognition: Helps users easily identify and
distinguish a brand from competitors.
• Brand consistency: Creates a unified user experience
across all digital touchpoints.
• Emotional connection: Can influence user perception
and build trust through visual cues.
• Positive brand image: Reinforces the brand's values
and personality through design choices.
Elements are used within UI design
• Logos
• Color palettes
• Typography, and
• Imagery
Logo
• 75% of people recognize a brand by its logo first. Logos
are the backbone of a brand’s visual identity.
• It’s standard for a logo to be placed in the header, as
well as in the footer.
• Logo is one of the first things a user sees when they
load the webpage and can instantly make the
connection between the brand and interface.
G M
Colour
• UI Designers will use a brand’s colour palette to pick out
which colours to use for backgrounds, text, buttons, and
other UI elements.
• Colour plays a huge visual role in both branding and UI
design, so it’s important for colours to be consistently
used across print and digital interfaces.
Typography
• UI designers will use any typefaces specified in the
branding guidelines when they come to inserting titles,
subtitles, copy blocks and any other element of texts.
• Branding guidelines specify which typefaces should be used
for different textual elements. Therefore this can be easily
carried across by UI designers when designing.
Imagery
• Brand guidelines tend to include specifics as to what style
of imagery should be used within branding.
• UI designers will use the imagery guidelines when looking
for stock imagery to place within their designs.
Style guide
• A UI style guide is a reference that defines the visual
language for a user interface (UI).
• UI style guide is a comprehensive document that
outlines the visual design standards for a digital
product, including details like colors, typography,
button styles, spacing, and other interactive
elements, ensuring consistency across the user
interface
• A style guide helps designers and developers work
together on a consistent look and feel.
UI style guide
Typography: The fonts and styles used in the UI
Iconography: The rules for using icons, including
their style, color, and size
Color palette: A set of colors used in the UI
Layout grids: A system of rows and columns that
aligns a page
UI components: Buttons, input fields, logos, alerts,
loaders, and sliders
Benefits of using a UI Style Guide:
Consistency:
• Ensures all design elements look and behave the same across
the entire product, creating a cohesive user experience.
Efficiency:
• Streamlines the design process by providing readily available
components and guidelines, reducing rework
• Collaboration:
• Enables designers and developers to work together
seamlessly, understanding design intent and standards
• Accessibility:
• Supports creating user interfaces that are accessible to users
with disabilities by defining color contrast and keyboard
navigation guidelines
Visit minimum 5 interfaces. Identify problems in overall navigation,
look and feel of the interface, relevance of the information.
11 Unique UI/UX Projects
• [Link]
