Design Patterns
Design patterns are groups of design elements or UI components that work together and promote reusability within a product or design system.
Recommended resources
Courses
UX Design Foundations
UI Components II
Mobile Design
UX Writing
Design Composition
Design Terminology
UI Components I
Common Design Patterns
Accessibility Foundations
Wireframing
UX Design Patterns with Checklist Design
HTML Foundations
Enhancing UX Workflow with AI
CSS Foundations
Introduction to Figma
User Psychology
Service Design
3D Design Foundations
Information Architecture
Psychology Behind Gamified Experiences
Reducing User Churn
Apple Human Interface Guidelines
Introduction to Design Audits
AI Fundamentals for UX
Lessons
Common UI Component Definitions I
Theory of Design Principles
UI Design Deliverables
Usage of Design Principles
Login & Signup Flows
Exercises
Tutorials
Creating Reusable Components in Figma: A Step-by-Step Tutorial
Turning Friction into Positive Experiences in UX Design
14 Dark Patterns Examples in Design You’ll Want to Avoid
10+ newsletters on accessibility and inclusion worth subscribing to in 2024
Projects
HireHarbour Allies: UX/UI Case Study for Inclusive Landing Page
Crypto App Onboarding
FinTrust - 404 Error Page
Joblet Hire - Profile Page
RetroPlum - Skeuomorphic Style Button Kit
FAQs
A UI (User Interface) pattern is a reusable solution to a common design problem in user interface design. UI patterns are recurring solutions that have proven to work well in the past and are widely adopted by the industry. They are not specific to a particular product or platform but rather a general solution that can be applied to many different types of user interfaces.
Examples of UI patterns include navigation menus, search bars, pagination, Add to Cart buttons, modals, and more. UI patterns are often widely recognized and familiar to users, making it easy for them to understand and interact with the interface. They also make it easier for designers and developers to create consistent and cohesive user interfaces, reducing development time and costs.
Using UI patterns can also help ensure that the design is consistent with established usability guidelines and best practices, making it more likely that the user interface will be easy to use and understand.
UI patterns are used in design to create a consistent and efficient user experience across a website or application. They provide a set of proven solutions to common design problems and can be easily reused to speed up the design process and reduce the need for reinventing the wheel each time a new feature is added.
Designers can use UI patterns to ensure that their designs are user-friendly, accessible, and meet industry standards. For example, a common UI pattern for navigation is to have a menu bar at the top of the page that lists the main sections of the site, making it easy for users to find what they're looking for.
By using UI patterns, designers can focus on creating unique and creative aspects of their designs while relying on established solutions for common problems. This leads to a better user experience and a more efficient design process.
A UI pattern library is a collection of user interface design patterns, documented and organized in a way that makes it easy for designers and developers to reuse and build upon. It typically includes visual design elements, interactions, and code snippets or examples to help guide the implementation of a consistent and user-friendly interface. The goal of a UI pattern library is to streamline the design process and ensure consistency across an organization's products.