Glossary
A - M
A
Atomic design
Atomic design is a design system methodology, which is based on the idea of modularity and reuse. Atomic design is made up of five stages – atoms, molecules, organisms, templates, and pages. At Hennepin County we do not use this system construct yet. For a definition of our approach, see About the design system.
B
C
Components
Components are the building blocks in a design system. A core aspect of components is that they’re designed to be as simple, to meet standards, and be versatile so that they can be used in multiple instances.
Application: Components are used to create patterns and effectiveness of workflows to improve user experiences.
D
Design language
A design language is a set of rules, guidelines, and best practices that govern the design of a product. A strong design language will make a product more consistent, cohesive, and easy to use.
Application: Design language helps teams follow a specific set of rules and methodologies. It makes the design process run smoothly without inconsistencies or unnecessary confusion. By creating a set of standards to follow, users can feel more comfortable navigating designs that feel familiar to them.
Design system
A design system is a set of researched and vetted standards, guidelines, and best practices, used to create a website or application, building effective and efficient digital products and consistent experiences for residents. It is an evergreen product, ever evolving.
Application: The design system is to be used by any staff member or vendor creating digital county products to meet the county's standards and policies. It helps to remove silos, allowing teams to work collaboratively, and aids in reducing front-end technical and UX debt.
Design system principals
A design system requires a governing model that acts as a set of rules. See Governance and maintenance.
Application: These act as guidance for decision-making processes through preset standards to be followed throughout a design system.
E
F
Framework
Framework is a collection of code we can reuse to build software products. They can include aspects of a project like libraries, tools, and best practices. Frameworks speed up the development of a product and makes it easier to maintain a product over time.
Font
Font refers to variations of a typeface, like its size and weight. See Fonts and typography.
G
Governance and maintenance
Design system governance is the process of managing and maintaining a design system. This includes things like setting up standards, creating documentation, and enforcing rules.
Application: Design system governance is important for preparing a system for change. It ensures that everyone is following the same standards. Governance is key to managing requests and keeping track of decisions, ensuring the integrity of the system over time.
Governance of standards:
We enforce standards based on federal law, leading standards organizations and county policies.
These include:
- World Wide Web Consortium
- Web Content Accessibility Guidelines (WCAG)
- Web Accessibility in Mind
- Plain Writing Act
- Section 508 of the Rehabilitation Act of 1973
- Americans with Disabilities Act
- Minnesota Human Rights Act
- Minnesota Statutes Section 363A.42 Public Records; Accessibility
We also rely on expert research and input of our user experience staff.
Maintenance of standards:
- The digital experience staff manages updates and changes.
- The User Experience Community of Practice and/or the Design system cohort reviews and gives input to the standards.
How to make changes to the design system or standards:
Staff can ask for changes or exceptions to the standards:
- Complete a contact form request change.
- You must attend a meeting of the User Experience Community of Practice to make your case for the change. This creates a democratic and transparent process for input and decision-making.
The digital experience staff makes the final decision and publishes approved changes.
Graveyard
A design system graveyard is a collection of abandoned or outdated components, patterns, and design elements.
Application: Designers and developers can benefit from the design system graveyard by studying it and educating their teams on what not to do.
H
I
Icons
Icons are visual symbols that represent a concept, action, or object. They help users navigate a product or get additional information about a particular element on the screen.
J
K
L
M
Material design
Material design is a visual language that Google developed in 2014. It’s based on the principles of how materials exist and interact in the physical world. Many companies have since adopted material design as their design system. For a definition of our approach see About the design system.
M.V.P. (Minimum viable product or Minimum value product)
The minimum viable product is a version of a product that is capable of working successfully or feasibly. It has just enough features to be usable by early users. Early users can then provide feedback for future product development. A focus on releasing an MVP lets developers potentially avoid lengthy and unnecessary work.
N - Z
N O P Q R S T U V W X Y ZN
O
P
Patterns
Patterns define how to combine different components in a certain way to serve specific user goals that are often repeated across screens or applications. For example, combining input fields, icons, and buttons in a certain way to serve the goal of signing into an application. An example of patterns is forms.
Application: Patterns are commonly used for better consistency and saving time by helping a team run more efficiently. By producing design patterns that are familiar to users, a team can better focus on its message and overall goal. Patterns make coming to decisions much easier due to their predictability.
Prototypes
A prototype refers to a interactive sample version of a product or a specific aspect of a feature that maybe added to an existing product. It's purpose is to simulate the final product to address any assumptions.
Application: Prototypes are commonly used to test products and gain user feedback during a trial period before an official launch. This helps save money by testing the product for inefficiencies, which saves time and resources in the long run.
Q
R
S
Single source of truth
A single source of truth is a reference to the holistic one-stop-shop approach for a digital set of assets used to create websites and applications.
Style guide
A style guide is a document that outlines the rules and guidelines for a product. It includes information and is often code based.
T
Typography
Typography typeface describes a particular style of lettering. See Fonts and typography.
U
UI kit
A UI (User interface) kit is a collection of graphical user interface (GUI) elements (not code-based) we can reuse in digital products.
Application: UI kits are especially useful for rapid prototyping where developers, stakeholders, and designers share design functions while a design is still in production.
Usability
Usability measures how easy it is for users to accomplish their goals when using a product. A product with good usability is tested through five criteria: learnability (i.e., a low learning curve), efficiency, satisfaction (how satisfied users are after interacting with it), memorability, and the number of errors users make.
Application: Usability helps designers and developers measure how well they adhere to the needs of their users. It is an approach that assesses the effectiveness, efficiency, and appropriateness of a system and helps to identify how easily users will be able to solve any potential problems on their own.