October 9, 2017 // By Jeff Szpak, Manjiri Acharekar
The UX design process as we know uses collaborative problem-defining thinking and technical proficiency to innovate engaging products.
As we help integrate design solutions into the business world, the future of UX design relies greatly on the pattern libraries or design systems we develop for organizations. Business workflows sooner or later evolve and become increasingly complex—often times requiring a complete application redesign or major version release.
These solutions get integrated into a multitude of devices. Whether an app or a responsive website, the design solution should maintain consistency across everything while still accounting for the requirements of the platform. Today, users will engage with applications on a wide variety of devices—each with their own experience expectations.
How do we manage these bigger responsibilities? With modular design, we can break bigger responsibilities into smaller manageable parts of information and document them into design systems.
The Importance of Design Documentation
Without documented design systems, companies that want to launch a massive redesign across products end up having to gradually implement experience changes. Imagine how this would affect users interacting with these web experiences--the lack of design consistency creates frustration and confusion for them. Development also slows down for both designers and developers, because both code and patterns need to be analyzed and recreated with the new design. A flaw in the design components and code inconsistencies could mean negative impacts on business and timelines.
Pattern libraries and design systems, both promote consistency, preventing chaos for not just developers and designers but for users, organizations and the future of the product. They reduce communication breakdown by becoming a shared vocabulary for everyone involved in the project. Third parties also become responsible to follow guidelines and maintain the look and feel of the organization's internal design system. Its and a win-win situation for clients, designers, and developers.
Pattern Libraries vs. Design Systems
Pattern libraries are an integral part of the design and development process, and help to bring together all the foundational UI elements in one document. The primary purpose is to create consistent patterns and pages that are easy to maintain and which will also take less time when new features and pages are introduced. Pattern libraries consist of a comprehensive UI kit—components like grid systems, menus, buttons, typography, form elements, navigation, tables, lists, notifications, states, alerts, modals and more. These patterns are adaptable, ever-evolving, and can be combined to make up templates.
As an example, Mailchimp has created “a living, learning library” that is tailored specifically to their needs. They’ve basically included every UI element used on their product and documented it into a pattern library. This has led to decreased development times and improved internal communications.
Their pattern library includes a grid system, typography, headings, code snippets, form elements, buttons, inputs and dropdowns. As simple as this may seem, the benefits speak for themselves:
- We can build consistently, focusing our energy on workflows and logic, not web forms and list items.
- We can reuse code instead of reinventing the wheel or roping in an engineer.
- We can see all of our patterns in one place, quickly revealing maintenance issues.
Design systems lay the foundation for the final products and are much more extensive than pattern libraries. They encompass all the design elements, whereas pattern libraries mainly focus on the ‘components’ and are usually a subset of design systems.
Design systems include documentation of principals, resources, processes and best practices created for a specific product. They are a combination of style guide, voice and tone, icons, components (pattern libraries), writing, and more. The style guide includes visual core elements such as logo usage, colors, color combinations and typography.
Salesforce, for example, has created an intuitive design system that includes documentation to create consistent experiences across all their products. A place where designers can focus on user experience, interaction and flows, review components while developers can focus on the markup and style guidelines.
Google is an excellent example of a living pattern library – releasing and continuously evolving their Material Design Guidelines. In their words “Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.” Prior to Material Design, Google provided a very inconsistent experience across its products. Utilizing the Material Design Guidelines has promoted consistency across applications and interfaces by creating a universal design language. In addition, Material Design has paved the way for other companies in establishing best practices on how components are documented.
Though design systems and pattern libraries are not frameworks like Bootstrap, they do establish consistency of code throughout a company’s digital product portfolio. As thousands of companies invest in the building, maintenance, and governance of design systems, these tools are becoming critical components in software development. Stay tuned for more information on methods for creating pattern libraries or design systems—coming in part two of this blog series.