Aerwave Design System
I developed a design system for Aerwave’s products, both present and future, with the capability of serving as a centralized and continuously updated resource for components, typography skills, and visual guidelines.
Themes
User Experience,
UI Design
Team
Myself, Chief Technology Officer, Data Scientist
Tools
Figma
Timeline
3 Months
INTRO
The Essential Building Blocks of Product Development
​
With numerous Aerwave products in development, a comprehensive library of reusable components was necessary to avoid starting from scratch every time. This library was crucial for achieving scale, efficiency, and design consistency, which are crucial for bringing order to the chaos of product development. The Aerwave Design System serves as the lifeblood of Aerwave products by providing more than just a component library. It ensures users enjoy a consistent, intuitive, and aesthetically pleasing experience, without any surprises.
EXECUTION
Foundational Development
​
Before building the library, a solid foundation must be established. Even perfect product components can be thrown off by inconsistent grid and column systems, which are universal rules in both UX and graphic design. To achieve consistency and order, an 8px grid system and a 12 column layout was selected, along with 4px and 2px spacers included with the other spacers to assist with mobile layouts. This decision was made with an eye towards reducing anti-aliasing, and both the desktop and tablet screen dimensions are divisible by 8 to on at least one dimension. The 12 column layout offers flexibility in placing two, three, four, six, or twelve objects in a row.
Typographic Considerations
​
To ensure readability and add an element of fun, careful consideration was given to font selection. For the base body content, Roboto was chosen due to its versatility and crispness. For headers, Raleway was selected as a bold and actionable font that would attract users' attention. These two fonts formed the basis for a versatile series of text styles that can be effortlessly applied to text boxes, with any necessary edits made directly in the source file.
Iconography
​
Icons contribute significantly to the visual user experience. Even though labels were always attached below the icons to provide users with clear context, it was crucial to select a set that was simple yet informative. After considering various options, a set of icons created by a single artist on the Noun Project was chosen. This choice ensured a consistent icon style throughout while still maintaining a high level of descriptiveness in a simple design.
Color Palette
​
Colors play a crucial role in establishing a clear flow and organization of information, components, and design elements. Although the original colors used by Aerwave were good, they lacked a cohesive flow. To address this issue, a new series of colors was created based on the original colors but with better harmony between them. Additionally, a bright yellow color was selected as an action color to encourage users to click in a sort of “pavlovian conditioning”.
Buttons
​
With a wide range of products planned by Aerwave, it was essential to have buttons that conveyed varying levels of importance. To achieve this, it was crucial to include common button states, including default, hover, hit, and active. Additionally, an inactive button was incorporated to indicate when an action is not possible. Below are some examples of the core buttons and their respective states.
Form Fields
​
Form fields are a crucial category for Aerwave's products, and they share similarities with buttons in terms of having multiple states and levels of importance. Ensuring accessibility is a top priority when designing form fields. One aspect that is carefully considered is making sure the field title remains visible even when the user enters input. In addition, icons are incorporated in addition to color-coding to accommodate users with color blindness.
Other Components
​
The design system I developed for Aerwave is complex and extensive, and what you've seen so far is just a small taste of it. To give you a more complete picture, I'd like to showcase a few additional components that I've created for specific purposes, building upon the base components.
RESULTS
A Complex & Living Document
​
Design Systems can get complex and, much like a living creature, it is ever evolving and growing. What you saw was just a small part of what goes into a complete system. A complete system would contain the following;
The Aerwave design system will continue to grow and evolve as time progresses as it always should.
Feedback on the project? Want to discuss the tagging system further? You can find me on LinkedIn.