Lines to Guide in Product Design

A tour on how to make and implement Design Guideline

Muhammad Naufal Irbahhana
HappyFresh Fleet Tracker
3 min readOct 16, 2019

--

Design Guideline cover for SenangSegar

Design guidelines are sets of recommendations towards good practice in design. They are intended to provide clear instructions to designers and developers on how to adopt specific principles, such as intuitiveness, learnability, efficiency, and consistency. It means that when you want to make posters, interface or any MVP for your product, you have to follow the Design Guideline provided starting from the colors until the size of the fonts.

Having design guideline is a must for a product. It emphasize your brand. It also help people to identify your product so that customers can recognize them. Having a design guideline also implement the 8 Nielsen’s golden rule for interface design.

But, making a Design Guideline is a pain in the hand, and mind. There are A LOT of things that came to considerations. From my experience, this three main points that you should include in a simple design guideline is

  • Logo
  • Colours
  • Typography

In SenangSegar, we implement the use of Design Guideline, Let’s go through it one by one shall we!

Logo

Logo is a brand identifier. So in Design Guideline, what needs to be taken into consideration is Logo Placement. Imagine having a mainly white logo, but your brand’s primary colour is actually white, that wouldn’t satisfy the 8 design principle since it isn’t visible. So the trick is to revamp the logo’s colour that will fit all of our primary colour scheme. Take a look at this for instance

Logo Policy in SenangSegar

We can see that there is also an inverted colour logo. We use the inverted logo only when the background colour surrounding the logo makes it not visible. We also have several policy on logo placement, like

Logo placement

Colour

Colour is very important for a brand. It emphasize the brand’s mood, directions, and can also portray the user demographic. For SenangSegar we implement HappyFresh’s colour scheme as follow

The colour consist of 3 combinations.

  • Primary colour

Primary colors help consumers to quickly identify a brand. These are the core colors of the brand. Commonly, primary colors are incorporated into a company’s logo. A company has between 1–3 primary colors but there can be more if desired.

  • Secondary colour

A secondary color palette lets you take the brand-y feels that you’ve already established and show people another side of yourself. Your main branding — including colors and fonts — informs the overall look and feel of your brand. A secondary color palette should seek to emulate that same feel

  • Gradient

The gradient colour is a nice addition to your colour scheme. Having such, can boost the likeliness for people to see your brand.

Typography

Finding the perfect typography is a fun and creative quest, but you should approach it with a very specific goal: to choose 2–3 typefaces that best represent your brand.

SenangSegar follows HappyFresh’s typography, resulted in

This are the example of Design guideline in SenangSegar. I hope this article can help you on designing your own! Thank you for reading.

It’s late and… wait, I actually finish this two days before the deadline!

Ciao!

--

--