Overview
User Interface Design Patterns
A pattern library is a collection of user interface design patterns. They are a set of design elements that appear multiple times across a website or web appliction. They include things like typography, colors, navigation, forms and much more. The pattern library, in essence, documents all of the desired patterns across a multi-device spectrum. It defines how they look, how they behave and how they are coded.
Benefits of a pattern library:
- Consistent user experience
- Responsive across viewport sizes
- Code reusability
- Easier testing and maintenance
- Shared vocabulary for development team
Objectives
The goal of the MyPanel Pattern Library is to provide initial design patterns to the MyPanel development team as they build out the MyPanel CSS framework. All key components are shown within the pattern library. Once the CSS framework is built out, we can use another tool to automatically generate a live style guide. Initially the two can be compared for differences, but at some point the live style guide will become authoritative. Until then, then pattern library is the authoritative guide to the default MyPanel styles.
This pattern library is not designed to be used for code examples. It is built more like a prototype, not as production-ready code. Often shortcuts are taken with prototypes. Best practices are not always employed. Prototypes need to be built quickly and are primarily a tool for displaying appearance and animation.
Organization
The following sections are included in the MyPanel Pattern Library which will be used for the pseudo brand we will be creating:
- Colors — default colors
- Typography — default fonts, font sizes and font weights
- Layout — base layout for various screen sizes
- Layout patterns — page layout formats we'll use (shown as a layout submenu)
- Navigation — multi-tiered navigation model & animation
- Tables — table format including style for small screens
- Forms — form usage along with guidelines
- Buttons — default button styles
- Icons — icons to be used
Live Style Guide
Different from most pattern libraries and style guide, this one will not show how elements are coded. That will depend on how the MyPanel developers choose to implement it. The MyPanel live style guide will add this important component. The MyPanel team will select one of the available tool to auto generate the style guide in which code samples are included. Examples of these automatic style guide generators include:
NOTE: This site is built only with Chrome in mind. There may be issues with Firefox, IE and Safari.