Creating SekolahKu Design Guide
Steps on how we create our web design style guide and how you can make one too
Web Design Style Guide, What is it?
A style guide is a reference source where you collect and present all of the design decisions for your website. This includes its color scheme, typography, spacing, icons, imagery, and all the visual language used on your site.
Why do we need a style guide?
Even though creating a style guide requires you to take extra time, but it comes with numerous beneficial factors:
- Consistency in design, and easier to maintain
- Project members can easily refer to the guide for the exact style use
- Faster build time for new sections and pages
Okay. Now here’s how we create our style guide, following this article with some modifications.
Step 1: Study the brand
SekolahKu is an online school registration platform. The target users are parents, students — ranging from elementary to high school, and school administrators. Based on this mission, we want our visual to look formal but friendly. So, the following design decisions will follow those values.
Step 2: Create a Logo
At first, we decide the main color theme for our logo to be blue-orange. Blue represents trust, and orange represents friendliness. Then, we look for icons related to the brand and how should we style the logo. After a couple of brainstorming together, here’s the final result:
Step 3: Define the Color Palette
Color plays a vital part in how your website and your brand are perceived and remembered. Therefore, you’ll want to make sure to define your essential primary colors, usually a maximum of three.
In SekolahKu, we also need a warning color and success color. Usually, it’s red and green.
We also want to add variations to these colors, to be applied in buttons or components in different states (e.g. hover, click). Choose two darker colors from each.
Step 4: Typography
Just like color, typography is an essential part of web design. To ensure yours is appealing and consistent throughout your website, you’ll need to create a typography hierarchy in your style guide.
Choose font families and sizes for your headings and body text. This should create a hierarchy look.
Step 5: Layout, Spacing Rules, Icons
A consistent design also requires rules for creating layout, spacing, and icons. To help us handle these problems, our team decided to use an external library from Material-UI, the Layout and Icons. Material-UI provided various design libraries (components, layout, icons, etc) that we can just use. So, we don’t have to create a guide from scratch. For the icons, we chose the rounded icon ones.
But if you want to create your own guide, here’s an example:
Step 6: Main Website Components
Once your basic style definitions are in place, it’s time to introduce your main website components into your style guide. These concern the appearance, sizes, and states of buttons, form fields, form elements, navigation menus, notifications and alerts, cards, modals, and more.
Step 7: Develop!
Now, we have created our style guide. Once our style guide and the prototype are done, we can get into the development phase! We can implement the style guide by creating components and a color guide in our code. Our project use ReactJS and styled-component, so it is easier to maintain a consistent element or component, thus creating a consistent design.
