DESIGN SYSTEM & BRAND GUIDELINES
DESIGN SYSTEM OVERVIEW
When I joined Ecofabulous, the brand was at a very early stage and have not launched in the market. My main role was to bring brand upto the speed and to prepare Ecofabulous to launch in the market. The very first step was to create the Design system as it is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications, and the need for them go hand in hand with the need for scale, efficiency, and consistency in Design which bring order to chaos. In this project you will see some of the components I built for this design system. Take a look at what I put together below.
SERVICES
Design System
Brand Launch Assets
Retail Display (Sephora, Ulta, Belk etc)
Paid Media Ads
Web Assets
Social Media Assets
Amazon Seller central
Packaging
Banner Ads
Digital Assets
EXECUTION
You don't start building a house without it's foundation so the same thing applies to design systems. You just don't use concrete. The foundation of a design system is your spacing and grid system. I feel like spacing and grids are some of the most overlooked elements when it come to visual design but they can make a huge difference in the look and feel of a design. For this project I went with an 8pt grid system that consists of a 12 column grid and an 8px baseline grid. For the spacing system I went with a rem based guide that aligns with the 8px grid. The reason why I went with an 8pt system is to help the design system be more responsive because all of the top screen sizes are divisible by 8 on at-least one axis. This is important as it will help prevent anti-aliasing.
FONT & TYPOGRAPHY
For web I wanted to go with a clean and versatile font for this system. I chose Helvetica Neue because it has more uniform set of heights and widths with improved legibility and the spacing between characters is perfect. It's also
super versatile having several variations having additional weight and styles
like condensed and extended which make it look great as a heading font and
as body text.
Aa
Web browser/Packaging
COLOR
Although I value an aesthetically pleasing use of color, I place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements. In Ecofabulous, every color has an assigned role, which hold a specific meaning based on how they function within the interface. By defining the color roles it makes things easy to modify and customize later. They also extend the color system so it works across multiple touchpoint.
HEADLINE/BODY TEXT
SUBTLE/HELPER TEXT
ACCENT TEXT/SUBTLE BACKGROUND
EFFECTS/SHADOWS
ICONOGRAPHY
Icons acts as a visual aids to help users complete tasks. In the Ecofabulous design system, I started designing icons keeping simple and informative design approach, so it can complements the overall visual language of the design system. Another reason for keeping simple icon set because detailed icons increase cognitive load. I focused on simplicity to help users understand the concept the icon represents and recognize icons on smaller screens.
BUTTONS
BRAND GUIDELINES
When it comes to building a memorable brand, consistency is everything.
Brand guidelines/brand style guide, are essentially an instruction manual and rule book on how to communicate your brand. They lay out all the visual details, as well as important notes about a company’s voice, tone, and messaging filled with examples of what to do and what not to do.
Please click the link below to see Ecofabulous brand guidelines.
