Interface Design 3

Master of Design
Design Specialization 2025
Definition

• What is User Interface (UI) Design?

• User interface (UI) design is the

process designers use to build
interfaces in software or
computerized devices, focusing
on looks or style. Designers aim
to create interfaces which users
find easy to use and pleasurable.
UI design refers to
graphical user interfaces and
other forms—e.g., voice-
controlled interfaces.
•User Interface (UI) design is
crucial in creating a positive
user experience and ensuring
that users can interact with a
system or application
seamlessly. The importance of UI
design lies in its ability to
enhance user satisfaction,
increase usability, and
promote efficiency. A well-
designed UI can lead to higher
user engagement, reduced
errors, and ultimately, the
success of a product or system.
•A landing page is a
standalone web
page, created
specifically for a
marketing or
advertising
campaign. It's where
a visitor “lands” after
they click on a link.
Header is the upper (top) part of the webpage.

Being the area people see before scrolling the page in their first seconds on the website, the header is an
element of strategic importance. It is expected from the header to provide the core navigation around the
website so that users could scan it in split seconds and jump to the main pages that can help them. Headers
are also referred to as site menus and positioned as an element of primary navigation in the website layout.
The elements include

•basic elements of brand identity, usually a logo

•call-to-action button

•links to basic categories of website content

•links to the social networks

•basic contact information (telephone number, e-mail address, etc.)

•switcher of the languages in case of the multilingual interface

•search field

•subscription field or button

•links to interaction with the product such as trial version, downloading from the AppStore, etc.
Hamburger menu: hiding the set of links to different pages or sections behind
the hamburger button called so as it consists of horizontal lines looking like a
typical bread-meat-bread hamburger.

Sticky header: header that doesn’t hide away but sticks to the top part of the
page when users are scrolling the page down. This way core navigation area is
available at any point of interaction, which can be helpful in terms of content-
heavy pages with long scrolling.

CTA Button: A call-to-action (CTA) button is an element of a user interface

aimed at encouraging a user to take a certain action. This action presents a
conversion for a particular page or screen (for example, buy, contact, subscribe,
etc.)
Hero Section

Hero section is the above-the-fold (pre-scroll area

of the web page containing the element that
presents the strong visual hook: a hero image,
slider, catchy piece of typography, video, or
anything else attracting visitors’ attention and
transfers a needed message to them. Make no
mistake, the term doesn’t require that all images
of this kind should include a human, animal,
mascot, or any other kind of character. Don’t get
tricked over with that “hero” part. It can also be
the product photo or the theme image featuring a
landscape, a device, a building – anything, even an
abstract model or composition. The main idea is
that the visual hook in the hero section instantly
grabs attention and allows for setting the quick
visual, emotional, and informative connection with
the users, engaging them to scroll or push the
buttons to learn more.
Footer is the lower (bottom) part of the web page which usually marks its end.
Being another common zone of global website navigation, the footer provides the
additional field for useful links and data users may be interested in finding.

Footers can include:

•brand identity signs, usually the name and logo of the company or product

•links to user support sections, for example, FAQ page, About page, Privacy Policy,
Terms and Conditions, Support Team, etc.

•credits to website creators

•contact forms and information

•links to company or product accounts in social networks

•testimonials and badges

•certification signs

•subscription field or button.

Slider

Slider is an interactive element that applies a technique of a

slideshow or carousel to present different products, offers, etc. It is
especially popular as a part of e-commerce and business websites
to present a sort of gallery of products or services.

Sliders present controversial interactive elements that often become

an object of hot debates. Among the benefits, we could mention the
following:

•saving space on the page

•user engagement

•attractive visual hook

Menus can be organized horizontally or vertically. Some popular
types found on diverse websites are:

Classic horizontal menu: the most common and well-recognized

type of menu which presents the core navigation organized as a
horizontal line in the website header, mentioned above

Sidebar menu: quite a classic type, presents a vertical list of

options sticking to the left or right side of the web page

Dropdown menu: a more complex type of menu for content-heavy

websites; here, the list of additional options opens below the primary
one when it’s clicked or hovered. Another similar option is the
dropup menu, when the list opens up, not down, but the essence is
the same.

Megamenu: that’s the complex expandable menu in which the big

list of multiple choices is presented in a two-dimensional dropdown
layout; this approach is effective for cases with a vast number of
options.

Hamburger menu: when the hamburger button (typically marked

with three horizontal lines) is clicked, the menu expands. This option
saves space and is often applied to mobile versions of websites.
Breadcrumbs

Breadcrumbs are navigation elements used to support users in a

journey around the website: they get aware of where they are on the
website and can get used to the website structure more easily. So,
breadcrumbs present a tool for better wayfinding, yet, they don’t
replace the primary navigation menu; they present the secondary
level of navigation and increase website usability in case it has lots of
pages.

Some of the benefits of breadcrumbs are:

•increased findability: breadcrumbs give users another touchpoint

to the content and help to catch the structure of the website

•fewer clicks needed: with breadcrumbs, website visitors can jump

from one level of the hierarchy to any previous step with no effort and
no need to take all the way back

•effective use of screen space: crafted well, breadcrumbs take a

narrow horizontal line with plain-looking text elements that don’t need
much space

•
Form

Form is an interactive element that allows users to

send information to the system or server. In a
nutshell, it is a digital version of any real paper
form we have to fill in to provide someone with the
arranged information; however, digital forms can
have more options and functionality to make this
process even more smooth, clear, and user-
friendly. As it is a traditional and well-recognized
pattern of collecting the data, users deal with
forms quite often in their digital lives, starting from
the process of registration, adding personal or
financial details, making payments, sending
feedback, subscribing to a newsletter, etc.
Cards

Cards, also called tiles, are layout elements that

help arrange and visualize homogeneous data or
content in a scannable and easy-to-use way.
Cards are usually organized in a sort of grid, but
each card looks like a separate piece in this
system. Cards can combine different types of
content about a particular item. For example, a
product preview card on a catalog page can
include an image, a title, basic functionality of
adding it to a shopping cart or saving to the
wishlist, etc.
Video is not a really basic part of a web page, but
with the progress of web development solutions
and technical abilities, we can find it more and
more often on the website of different kinds these
days. As mentioned in the article about
video content in UX design, a catchy video
crafted with an understanding of the target
audience is a tool attracting customers’ attention
as well as a well-checked method of informing
them quickly and brightly. Video content activates
several channels of perception – audio, visual,
motion – simultaneously, and usually does that
wrapped in telling a story. Such a combination of
factors often makes a video presentation strong,
emotional, and memorable.
Progress Indicator

Progress indicator is a small but helpful element

that helps the visitor to understand the current
point in the general volume of information or set of
actions. It is beneficial on the pages loaded with
text content and supposing long scrolling, like
long-read articles or guides, for example. Due to
this indicator, users don’t get lost and can
estimate the time needed for reading or browsing
better.
Favicon

Favicon, also known as URL icon or bookmark icon,

is a special type of symbol representing the
product or brand in the URL-line of the browser and
in the bookmark tab. It allows users to get a quick
visual connection with it while they are browsing.
This interface element proved itself effective for
productive website promotion and good
recognizability of its visual identity. Being super
small, it makes a great contribution to web
usability.
 Tags

That’s another element of secondary navigation

level, often found in blogs and websites with plenty
of homogenous content. Tag is presented with a
keyword or phrase that enables users to jump
directly to the items marked up with it. Tags are
actually pieces of metadata that provide quick
access to specific content categories, so they
support navigation with the additional way of
content classification. Moreover, tags are often the
elements that users create by themselves, so they
become an alternative to the names of categories
that are fixed by the website and can’t be changed
by users.

[Link]
Lets Think Logo
Designing a logo is an exciting process! Here's a step-by-step guide to help you create a
meaningful and effective logo:
Step 1: Understand the Brand
[Link] the Brand: Understand the company’s mission, values, and target audience.
[Link] the Brand Personality: Is it playful, professional, modern, or traditional?
[Link] the Industry: Study competitors to see what works and what doesn’t.

Step 2: Brainstorm and Conceptualize

[Link] Inspiration: Look for ideas from nature, art, architecture, and other designs.
[Link] the Style: Decide on a type—minimalist, vintage, abstract, illustrative, or
typographic.
[Link] Ideas: Start with rough sketches to explore concepts. Don’t aim for perfection yet.
Step 3: Choose the Right Elements
[Link]: Pick fonts that align with the brand's tone (e.g., serif for elegance, sans-
serif for modernity).
[Link]: Choose a color palette that evokes the right emotions (e.g., blue for trust, red
for energy).
[Link] or Symbols: Use relevant shapes, symbols, or illustrations to enhance the
message.
[Link]: Consider the psychology of shapes (circles for community, squares for stability,
etc.).

Design Digitally
[Link] Design Software: Tools like Adobe Illustrator, Canva, or Figma are great for
creating logos.
[Link] Elements: Arrange typography, colors, and shapes into a cohesive design.
[Link] It Simple: Focus on clarity and avoid overcomplicating the design.
Step 5: Test and Refine
[Link] Versatility: Ensure the logo looks good in different sizes and formats (e.g.,
print, digital, monochrome).
[Link] Feedback: Share drafts with trusted friends, clients, or focus groups.
[Link] the Design: Adjust based on feedback to create the final version.

Step 6: Finalize
[Link] in Multiple Formats: Export the logo in vector (e.g., SVG, EPS) and raster
formats (e.g., PNG, JPEG).
[Link] Variations: Prepare black-and-white, full-color, and icon-only versions for
flexibility.
[Link] Files: Include the logo, color codes, fonts, and usage guidelines in a branding
package.
[Link]
[Link]
[Link] by Shopify
[Link] Logo Maker
[Link] Brands
[Link]
[Link]
[Link] Logo Maker
[Link] Logo Maker
[Link]
[Link]:
[Link]:!
Mood Boards

[Link]
Elements of User
Interface
[Link] elements – users interact with
them to put in their information or
move to the next step.
[Link] elements – those elements
show the result of a previous user
action.
[Link] elements – further divided
into navigational, informational, and
containers, they help to move through
the digital product, get information,
and point user’s attention to some
element.
Input elements

• Dropdowns – control elements that allow users to select one option

from a list that appears when they click or hover over a specific
area. The list “drops down” when activated, providing a set of
choices for the user to pick from.

• Combo boxes – they combine the features of a text box and a

dropdown. Users can either type a response or select from a
predefined list by clicking a dropdown arrow. This provides flexibility
for both manual input and selection from a set of options.

• Buttons – interactive elements that users can click to trigger an

action or submit a form. They often have labels indicating the action
they will perform, such as “Submit,” “Cancel,” or “OK.”

• Toggle switches – UI elements that allow users to switch between

two states, typically on and off. They provide a visual indication of
the current state and can be toggled by clicking or sliding.

• Text fields – areas where users can input alphanumeric characters,

whereas password fields are specifically designed for entering
confidential information like passwords. Password fields often hide
the entered characters for security reasons.
Input elements

• Date pickers – UI elements that facilitate the selection of

dates from a calendar. Users can typically choose a date
by clicking on a specific day, month, and year within the
provided interface.

• Checkboxes – small, interactive elements that allow users

to select or deselect options independently. They are often
used in lists or forms where users can choose multiple
items from a set.

• Radio buttons – they present a set of options to users, but

unlike checkboxes, only one option can be selected at a
time. When one radio button is selected, any others in the
group are automatically deselected.

• Confirmation dialogues – pop-up messages that appear to

confirm an action or decision before it is executed. They
typically ask the user to confirm or cancel an operation to
prevent accidental or unwanted actions
 • Output elements are responsible for showing results against various
user inputs. They also show alerts, warnings, success, and

Output elements
error messages to the users. Output elements aren’t neutral by
nature. They rely on inputs and various operations.

and Navigational • Navigational components simplify moving through the site, desktop or
mobile app or any other digital product. Navigational helper UI

elements elements include things like navigation menus, list of links,

breadcrumbs, to name but a few.
 All other elements fall into this category. The most widely-used helper elements
include:

Helper • Notifications – messages or alerts that appear on a user’s device or screen to

elements
inform them about important or relevant information. They can include
updates, reminders, or warnings and are often designed to grab the user’s
attention.

• Breadcrumbs – small navigational elements that show the user’s current

location within a website or application. They typically appear as a trail of
links at the top of a page, indicating the hierarchical path back to the main or
home page.

• Icons – graphical symbols or small images used to represent actions, objects,

or concepts. They serve as visual cues to help users quickly understand and
navigate interfaces. Icons are commonly used in menus, toolbars, and
buttons.

• Sliders – UI elements that allow users to select a value from a continuous

range by dragging a handle along a track. They are often used for settings like
volume control or adjusting numerical values within a specified range.

• Progress bars – visually represent the completion status of a task or process.

They typically consist of a filled-in portion that grows as the task progresses,
providing users with a visual indication of how much work has been
completed and how much is left.

• Tooltips – small, contextual messages that appear when a user hovers over or
clicks on a specific UI element. They provide additional information or
explanations about the purpose or functionality of the element, aiding user
understanding and interaction
• [Link]

• [Link]

• [Link]

• [Link]

• [Link]

-figma/?couponCode=MT24125

• [Link]

96a360b790d
Consistency: Consistent
design patterns and visual
Simplicity: A minimalist
elements help users learn
approach,
the system quickly and
focusing on essential feat
apply their knowledge as ures
they navigate through , can significantly enhance
different parts of the UI. clarity. Take Google's
For example, if a "trash homepage, for instance;
can" icon is used to delete it's famously sparse,
an email in one part of an directing users' attention
application, the same icon to the search
should be used for functionality, which is the
deleting items elsewhere core purpose of the page.
in the app.

. Visibility: Important
elements should be easily Feedback: Users should
discoverable and not receive immediate and
hidden away in menus or clear feedback for their
obscured by clutter. actions. When a user likes
Spotify's play button is a post on Instagram, the
always in a prominent heart icon immediately
position, making it clear fills in, confirming the
how to start listening to action.
music.
 Affordances: Design elements should suggest
their usage. The raised appearance of buttons on
many interfaces indicates they can be pressed,
even on a flat touchscreen.

Language: Use terminology that is familiar to the

user. Avoid technical jargon unless the interface is
for a specialized audience. For example, a photo
editing app for professionals might use terms like
"saturation" or "luminance," while a consumer app
might simply offer a "make brighter" option.

Hierarchy: Visual hierarchy guides the user's eye

to the most important information or controls. Bold
headings, size differences, and color are used to
establish this hierarchy, as seen in news apps
where the most important stories are highlighted at
the top.

Accessibility: Interfaces should be clear for all

users, including those with disabilities. High
contrast text and alternative text for images are
examples of how UI can be made more accessible.
• [Link]
[Link]#Introduction-to-User-
Interface-Clarity
Quick Recap…

•Studied Cultural and societal influences of a Topic which play a

in shaping preferences, refinements and perceptions
[Link] Cultural and Societal Influences: Factor in the diverse cultural and societal backgrounds of your audienc
resonates broadly and respectfully.

[Link] Industry and Context of Use: Tailor your design to align with the specific industry norms and the prac
interface will be used.

[Link] User Demographics: Embrace the diversity in user demographics, incorporating insights about age, gen
factors to craft a more tailored and effective interface.
 What is
User Interface
Design

Lecture 2 | Poorva
 UI Design Principles
A series of fundamental UI design principles that should be applied to
almost every UI design project you work on

Lecture 2 | Poorva
 Empathy
•There is no universal concept of beauty; only when you truly under
audience can you create a design that is appealing to them.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Layout
The layout is the canvas of your interface; it should guide the
user’s eye effortlessly, creating a seamless flow that intuitively
connects each element.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Essentialism
• Embrace simplicity; every element in your design should serve a p
can obscure the message and hinder the user experience.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Guidance
•Design should not just please the eye but also lead the use
clear pathways and cues for what they should do next.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Aesthetics
•Aesthetics go beyond mere appearance; they encapsulate the feel
creating an environment that resonates emotionally with the user.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Novelty
•Innovative designs capture attention, but the true art lies in balan
familiarity, ensuring users feel intrigued yet comfortable.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Consistency
• Consistency in design breeds familiarity; it ensures the user feels
various parts of your interface, building trust and ease of use.
 Empathy: There is no universal concept of
beauty; only when you truly understand your
target audience can you create a design that is
appealing to them.
 Engagement
• An engaging design is like a good conversation; it keeps the user intere
their actions, and encourages them to come back for more.
 To study and understand different apps with the lens of the UI Principle assigned to you. Judge the
app on the basis of individual characters of the particular principle and come up with your own
understanding of “Why is the app Appealing”.

Empathy -
AirBnB Layout -
Swiggy
Essentialism - [Link]
Guidance - How We Feel
App
Aesthetics - Strava OR Nike Run Club
App Novelty - CRED App OR Google
Calendar Consistency - Health app by
UI and Design System Components
[Link]

[Link]
components