BUILDING AIRPLAZA DESIGN SYSTEM TO CREATE CONSISTENCY AND SCALABILITY ACROSS DEVELOPMENT PROCESS (IN PROGRESS)
Buildiing Airplaza Design System
Category
DESIGN SYSTEM
Role
UI and UX DESIGN
year
2024
Tools used
Design system overview
A design system is a centralized collection of guidelines, components, and best practices that govern the design and development of a product's user interface (UI). It ensures consistency, efficiency, and scalability in both the visual design and functionality of digital products.
Why build a design system for AirPlaza?
Consistency:
A design system ensures that products look and behave consistently across different platforms and user interfaces. This builds user trust and enhances the overall experience.
Efficiency:
Pre-built components allow teams to work faster, eliminating redundant work and speeding up the design and development process.
Collaboration:
By providing a shared language and resources, design systems facilitate collaboration between designers, developers, and product managers.
Scalability:
As products evolve, a design system helps maintain a coherent design language, making it easier to scale and introduce new features without sacrificing visual or functional quality.
Accessibility:
A strong focus on accessibility ensures that the product is usable by as many people as possible, including those with disabilities.
Typography
Clear typographical hierarchy organizes and structures content, making it easy for people to find their way through an experience.
JetBrain Mono
Friendly and legible, JetBrain Mono is AirPlaza’s signature typeface. It emphasizes readability and personality at different sizes.
Styling text
Sometimes it might be necessary to use different text formatting to indicate hierarchy or prominence. Follow these tips to keep readability top of mind when styling and formatting text.
Casing
Use sentence case when writing, it fits most contexts. Don’t use all caps to get a user’s attention because it’s difficult to read.
Alignment
Fluent uses baseline alignment to distribute vertical space. This creates a consistent visual rhythm within a layout.
When aligning text horizontally, generally stick to left-alignment for left-to-right (LTR) languages, like English.
Color
Color is a tool used to express style, evoke emotion, and communicate meaning. A standardized color palette and its intentional application ensure a familiar, comfortable, and consistent experience.
Brand Color
Color is key to the immediate brand recognition of Airplaza product.
Apply brand colors to different areas of an interface not only to create visual prominence, but also to anchor people in a specific product experience. Avoid overusing brand colors or using them on large surfaces as they can dilute a hierarchy and make an experience difficult to navigate.
Accessibility Best Practices
Keep accessibility top of mind when building Fluent experiences with color.
- Ensure contrast that’s perceivable to people with low-visibility or color-blindness
- When possible, let people personalize their color scheme so that it always works for them
- Don’t use color as the only way to communicate. Accompany it with text, graphics, and other indicators to convey information in many ways.
Components
Buttons
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
When To Use
Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have only one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
When Not To Use
Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page.
Variants
A single screen in an application or web experience can include more than one button. To help users clearly understand primary, secondary, and tertiary actions, use caution in button placement. Let the action you want to trigger determine the correct button to choose.
Behavior and State
Buttons are impacted by user interaction and show visual changes depending on the status of the interaction. Buttons communicate four states: Default, Disabled, Hover, Pressed. The button state is reflected in its color and opacity.
(different state coming soon)
Layout
Only use one primary button in a layout for the most important action. If there are more than two buttons with equal priority, all buttons should have neutral backgrounds. When there are many available minor actions, use the outline, subtle, or transparent appearances on all buttons to avoid a busy layout.
Always give the primary button action prominent placement, either on top of or to the left of other actions. In right-to-left languages, primary button placement will be on the right.
