Getting Started for Designers
The importance of using The Utah Design System to create mockups for clients cannot be overstated. A design system provides a centralized and comprehensive collection of design guidelines, components, and patterns that ensures consistency and efficiency throughout the design process. When designing mockups, a design system allows designers to work within established visual and interaction frameworks, eliminating the need to reinvent the wheel for each new project. This not only saves time but also ensures a cohesive user experience across various applications, sites, and devices.
However, with so much information available, here we've broken down the most applicable parts to get you started.
Accessibility
While accessibility is usually associated with the development process, it should actually begin much earlier! By planning accessibility into the design, it not only assists developers when implementing your design, it also ensures your content will be accessible to more people. We've created a few pages to help demystify and to help check for accessibility. The Accessibility page condenses this massive topic down to the most important parts of why accessibility is important and whose needs we are trying to address. The Accessibility Checklist & Testing page is a list of items for developers and designers that should be checked. For an alternate view of this list specific to designers, checkout the “Web Accessibility FOR Designers - Infographic“ below:
Color
Color is foundational to every design. When viewed through the lens of accessibility, it can become confusing. Because of this, there is a page dedicated to just the Color Guidelines Overview and to the Color picker tool .
The Color Picker Tool is perhaps one of the most useful tools in the design system. Some of the benefits are the ability to create a color palette and share it via a url, as well as easy to understand contrast requirements. After picking your palette you can view a Demo Page that has multiple types of components to see how the palette colors work together.
Mockups
The Utah Design System mockups provide a set of predefined elements and styles that can be easily reused, enabling designers to focus on the creative aspects of their work rather than the repetitive tasks. Follow this link to view the Component Mockups.
75 MB
Showcases
Looking for some inspiration or want to check out other state sites using the design system? Checkout our Design System Showcases.
The Library
The Library is important to designers when picking components for mockups. Every component in the library has static examples*, usage guidelines and component specific accessibility requirements. See the Library Landing Page for more information on how components are structured.
*Future releases will include interactive components. See the Button component for reference.
To give feedback or make a request please reach out to dts_ui@utah.gov.