Defining Design Guidelines at Belong.co

What are Design Guidelines ?

  1. Style Guide — A library of UI components that ensures a consistent visual system across our products.
  2. UX Patterns — Rules defining how the each component in the UI library will behave and how it can be used.

What was the need to define Design Guidelines ?

  1. Our product portfolio is expanding (external and internal) and each product is becoming a sub-brand of its own. This creates a need for us to ensure that everything looks and behaves like the parent brand Belong.co.
  2. A comprehensive library of components make it easy for front end developers to implement things. This helps us maintain an agile workplace atmosphere.
  3. As the team grows, design guidelines will make it easy for new designers & front end developers to work on existing products.

How we went about it

  1. Foundation — Before defining any components, we started with the foundational elements of a UI library. For example : layout and spacing rules, colours, text styles and icon types. These are used to define other components (analogous to atoms).
Color Palette
Buttons library

Case Study : How we used Sketch App features to define text input fields.

  • Type(blue) — Single line, Multiple lines and with button
  • Label(Green) — Does it have a label or not?
  • Label type(Violet) — Alignment of the label
  • State (Orange) — Normal, Focus, Error, Warning or Disabled ?
  • Value type (Yellow) — Text colour and alignment options.
My face after realising I have to create 225 different symbols.
  1. After trying out different permutations and running experiments, we realised that Type and Label were the first things that come into a designer’s head while selecting a new text input field. We decided to build our primary symbols navigation around these.
Symbols Navigation
Inspector Panel Overrides

How can I make an attribute show itself in the overrides?

Nested symbols grouping

Testing

Impact

Summary

  1. Use “/” to name symbols for your desired symbol dropdown navigation.
  2. Use numbers to tweak the default alphabetical order.
  3. Use nested symbols to define overrides.
  4. Use “Symbol Organiser” plugin to organise your symbols page.

Conclusion

  1. To and fro between creating and testing.
  2. Working in an agile product design & development atmosphere, our primary task is defining & implementing the product roadmap.
  1. Better my grasp on Sketch as a tool and use the capabilities and limitations of Sketch to my advantage.
  2. Have a better understanding of the UI design process and truly appreciate pixel perfection.

--

--

--

Product Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Atkins Global shared their experience in using cloud rendering with GarageFarm.NET

Keep It Fresh — Reducing Food Waste, One Scan At A Time

7 Material Libraries For Your Next Sustainable Design Project.

The Big 7: How the Psychology of Colors Affects Your Brand Strategy

Bad Practices in UI/UX Design That You Should Avoid

Case Study: Designing for the Elderly

ClickHelp Gecko Overview

Top 10 UX Articles of 2018 — My Greatest Hits

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akshansh Deva

Akshansh Deva

Product Designer

More from Medium

As a Product Design Mentor, here are the 3 things I teach my mentees the most about product design.

Unconsciously Realising I Conducted Design Processes on my Last Blog.

UX Design Sprint 2.0

Design Thinking

Citymapper app