Back to: Intro to UI/UX Software
Reusable Solutions to Known Problems
In web design, a design pattern is not a visual “pattern” (e.g. a background image of repeating shapes and colors). It’s easy to see how one might immediately think of this when they put the words design and pattern together. Originating from software engineering, a web (UX, UI) design pattern is a reusable solution to a known problem.
User interface design patterns are descriptions of best practices within user interface design. They are general, reusable solutions to commonly occurring problems. As such, they form the backbone of “technical support.” However, as design patterns can be applied to a wide variety of instances, designers should adapt them to the specific context of use within each design project.
Interaction Design Foundation
Common Examples of Interactive UX/UI Design Patterns
- Modals/Modal Windows/Overlays (related: Lightboxes)
- Example implementation: Fancybox
- Carousels (related:Sliders, Slideshows)
- Example implementation: Swiper
- Module Tabs
- Accordions (e.g. Accordion Menus)
- Breadcrumbs
- Drop-down Menus (e.g. Vertical, Horizontal)
- Image Galleries and Thumbnails
- Mobile Toggle Navs
- Example: Toggle Menu Codepen
- Etc.
- … (there are many, many more)