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?

Why do we need a style guide?

  • 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

Step 2: Create a Logo

Some of our early brainstorming result
SekolahKu Logo — created by our talented friend Ocit

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.

SekolahKu primary colors

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.

Typography Hierarchy for SekolahKu

Step 5: Layout, Spacing Rules, Icons

Layout and Icons provided in Material-UI

But if you want to create your own guide, here’s an example:

an example of spacing rule

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.

Some of SekolahKu Main Components

Step 7: Develop!


i'll try my best to write something worthy here