Wireframe Design System
After recognizing a need for a more efficient workflow when designing wireframes, I created this component library in Figma to allow UX Designers to quickly scaffold the structure for new web projects. Intended to be extremely flexible and modular, it provides customization options (including light and dark mode) for a wide range of components.
Role
UX Designer
Client
Internal
Platform
Figma
Getting Started
Creating this design system started by establishing a set of brand guidelines. All elements, from font choices to the color pallet, were kept very minimal and streamlined. The main goal of wireframes is to act as a tool for establishing structure and flow, so every effort was made to minimize the focus on visual design in the final product.
Building Blocks
Simple components, like buttons and image placeholders, were then created using the look-and-feel established in the brand guidelines. These became the building blocks needed to create more complex modules. A large set of commonly used modules were then created and published as a library that could be shared with multiple users across different design files.
Ensuring Flexibility
All components in the design system were constructed to give a designer as much flexibility as possible. To achieve this, a list of variables were established that could be tweaked to meet the needs of the product while still maintaining the intended structure of the component.
Multiple Modes
Creating the ability to switch between light and dark versions of each component further increased the level of flexibility, allowing designers to choose a theme based on the context of the product. They could also be mixed and matched to provide visual contrast on a single page.
Ultimate Modularity
The gallery below showcases a handful of pages generated using this design system. Ultimately, the modularity of a system like this means that components can be created and updated at any time, allowing for an incredibly efficient workflow. This toolkit has significantly increased my speed and consistency when delivering UX design work for clients.
