Design systems are not a new idea, having gained significant traction in recent years, but lately a clear shift is taking place where companies have gone from only speaking about design systems to actually starting to create them. Using a design system is a great way to create a consistent brand experience across all touchpoints and provides an avenue to get new products to market faster. Component libraries supply teams with a source of reusable assets that create a foundation for all product iterations, thus dramatically decreasing design and development time.
There are many terms employed in a design system that tend to be used interchangeably but that should be differentiated between. In this article I want to focus on the role of a Pattern Library in a Design System and how I go about creating one.
In the UXPin article, Design Systems vs. Pattern Libraries vs. Style Guides — What’s the Difference?, the differences in terms are well explained. The basic premise is that a Design System is the “complete set of design standards, documentation, and principles” that allow for a cohesive brand experience. A Pattern Library is a subclass of the Design System and is made up of the symbols and assets, typically designed in tools such as Figma or Sketch, that describe the product.
Over the years I have built a number of Pattern Libraries, for both app and web, and have found there to be key components that get you off the ground quickly.
Buttons
If you’ve ever had a discussion with me about Designs Systems or Pattern Libraries you know how much I sing the praises of the mighty button! For any digital experience we want the user to interact with our product and the most basic instance of this interaction comes in the form of buttons. From a bold call-to-action (CTA) button to a simple inline text button, each needs to be enticing and easy enough for the user to click.
It’s important to consider formatting like font size, drop shadows, and overall size which all come together to create a great tappable button. States such as hover, pressed, disabled and loading states all need to be designed, and feed into the overall user experience.
Input fields
Similar to the use of a button, input fields are the tools through which users communicate with a product and brand. There is nothing more frustrating than trying to fill in a form and the input field is small, jumpy and sluggish. Asking users to give up information is already a large barrier to entry, so we want to make that experience as seamless and effortless as possible.
Error messaging is an important part of input fields, providing helpful feedback to the user, and should also be considered as part and parcel of designing a great input field. Simple inline errors clearly indicate which field is wrong or incomplete and should provide a short but clear description of how to correct the error.
Selectors
Selectors are made up of checkboxes and radio buttons. From accepting terms and conditions to choosing which emails you’d like to receive from a brand, selectors provide users with freedom of choice. While not a complicated component, a beautiful and easy-to-select selector makes the process of interacting with forms that much easier. A frustrating experience is when a form contains a tiny selector which is difficult to find and difficult to click, and generally cheapens the whole form’s design aesthetic and user journey. There is a direct correlation between the ease of interaction and the size of the target, so keep those checkboxes slightly bigger and let’s get people interacting!
Messaging
Humans need feedback and signs of progress. When a button is pressed the environment should change or a pop-up should affirm the action taken. It is essential to have clear and clean messaging that instil trust in the user. These notifications can range from general notices and success pop-ups, to error messaging and warning notices. As with any healthy relationship, communication is key.
Modals
Not every interaction requires a new view or page, and thus modals are incredibly helpful. A modal can contain a prompt, short forms or additional information that aids in the user’s experience of the primary page. Modals should add to the experience and not distract from the core user journey, so keep them short and snappy, with the intention of getting the user back to what they were busy with.
Conclusion
While a Pattern Library is only a small part of a Design System, it’s a great place to start. The components discussed here are just a few with which to start, but can serve as a springboard into the world of components and templates. If these are well designed you will have a large portion of your work complete, ready for shipping, and aesthetically inline with the brand’s design language. Take time to finely craft these elements and you will find the rest of the design will follow.
At Black Box Durban we are well underway with our own internal Design System and Pattern Library. We look forward to watching it grow and contribute meaningfully to our design and development ecosystem.
Here’s to better user journeys and consistent brand experiences!
Here’s to the future of digital brand experiences.
____________
Company
Black Box is a Product Design and Development company with a heart for improving the lives of people through technology. For more content follow us on Medium, or check us out on our official Black Box site.
