What are UI Design Patterns?
These are highly important tools designers use while implementing UI/UX concepts to their products.
UI Design Patterns are recurring solutions to common problems in user interface design.
This presentation walks you through what is meant by UI Design Pattern?
What are the benefits of using UI Design Patterns?
Along with a few examples of UI Design Patterns.
IAC 2024 - IA Fast Track to Search Focused AI Solutions
What are UI Patterns?
1. What are
User Interface Patterns?
Jazanoor Farrukh (HnH Naqoosh)
Jazanoor Farrukh
Jazanoor Farrukh
2. Have you ever noticed how…
Most product interfaces are similar looking?
• We generally follow the same
steps while purchasing a
product and going through
the check-out process.
• Most logins are made up of
two input fields requesting
Username and Password,
along with a button to Submit
the entered information.
3. Truth be told…
Whether you're designing an
interface from scratch or fine-
tuning an existing one, you'll
run into a variety of design
problems that need to be
addressed.
Fortunately!
Within the field of user
interface design, there are
many different established
solutions that you can use to
create cohesive designs. These
solutions are called
UI Design Patterns.
4. So, what really is UI Design Pattern?
• These are recurring solutions to common problems in user
interface design.
• With the help of library of components, they provide proven
solutions to user problems.
• Developers are able to cut down the time spent creating and
testing parts, expediting the overall development process.
• Users benefit in terms of having access to interfaces that are
easy, enjoyable, and consistent.
5. Basic patterns may fall into below categories:
Social sharing:
facilitate sharing of
content onto various
social media platforms.
Navigation:
help guide users around
the interface, ensuring
they’re able to find their
way back to the
homepage if they get
lost.
Input/output:
include various forms
that allow users to
submit information, or
receive feedback based
on an action.
1.
2.
3.
6. Common UI Patterns include:
• Menus
• Modals
• Buttons
• Bottom Tab Bar
• Accordion
• Carousal
• Breadcrumbs
• Tabs
• Forms
• Etc.
7. Dark UI design patterns?
• Dark UX/UI design patterns, such as trick questions or hard-to-see
options in a menu, are patterns that trick users into performing a
specific tasks.
• For example, tricking users into subscribing for e-mails.
• Others may hide key pieces of information to commit customers
into undesired memberships.
• Such activities can ruin trust between a company and its users.
8. UI design relies heavily on empathy, and creating an
interface that’s enjoyable and satisfying to use.
After all,
9. Thank you
(For further queries, feel free to reach out)
Jazanoor Farrukh (HnH Naqoosh)
Jazanoor Farrukh
Jazanoor Farrukh