A good UI design system combines content pattern–both standard and custom–with guidelines and examples. This gives you everything you need to build a rich and engaging website.
When NewCity creates a design system, we usually start with the most commonly used content page patterns. Then, we develop any other patterns needed for special content like landing pages.
A design system has many advantages over a template-based website by providing you with:
- Consistency – A defined set of styles and layout components promotes a consistent experience across your web presence.
- Platform Flexibility – No matter which CMS you’re using across your organization, you can deliver a unified brand experience.
- Shared Vocabulary – Orderly naming schemas improve your team’s efficiency and gives you and your website a common language.
- Less Code to Maintain – Larger components in the design system are built from smaller components which allows you to isolate bugs and problems more easily.
- Prototype Faster – Simplified, modular code means your team is able to build faster prototypes. While building and testing the design system is a big initial project, once it’s established you can create new layouts and test concepts in minutes, not hours.
- Accessibility – Building and testing patterns for accessibility compliance from the beginning means you don’t have to wonder if every corner of your site is accessible or not.
- Planning: As you plan a design system, you identify recurring patterns to define modular building blocks. With that organization in place, it’s much easier to know what you can build and how you’re going to build it.
Using a UI Design System With Your CMS
Once the design system is integrated in the CMS you can build pages by selecting the layout components best suited for your content. Some components have options you can select such as color, alignment or what data fields to show. Someone with expertise in web content strategy can usually select and use components appropriately with minimal training, but we’ll provide guidance on best practices for use of your design system.
The illustration below shows how OSU combined components from their design system to create the Undergraduate Academics landing page for Oklahoma State University.
Below are examples of the component library created for Wichita State University and pages created from that library:
Learn More about UI Design Systems
- We’ve worked with several tools to design and build design systems. Our current tools of choice are Figma and Storybook.
- Design systems are based on the idea of Atomic Design. Read Brad Frost’s book on Atomic Design.
