Case study: How do I design a design system for an E-commerce platform?
Here is the story of creating a design system for an E-Commerce platform focused on Artwork & Handmade Products.
I will discuss the selections of colours 🎨, typography🔠, icons pack, spacing, and grids guidelines as these are the foundations that will help us to scale our UI Designs smoothly & conveniently.
Before we start this journey, let’s first discuss what a “Design System” is.
Suppose you have started preparing your favourite meal on a bright & pleasant day, what will be your first step?
You will start by creating a list of all the necessary ingredients required and then collect all the ingredients one by one according to the measurements and will do all the chopping, and cutting before you start cooking.
Why are you doing all that “labour-intensive work” beforehand?
The answer is obvious. that after when you start cooking, there should not be any sort of mess at that time or any missing ingredients can be spotted before it’s too late for a quick trip to the store or your neighbour next door.
The same is the case when you are designing a product/feature, you have to be prepared beforehand will all the ingredients.
And while designing a product, your ingredients would be a colour palette, typeface, font family, icon packs, components such as buttons, accordion, various specifications related to font weight, line height, spacing, grids, etc i.e. here you are preparing a “Design System”.
This is how I have understood the purpose of design system.
Hence a “Design System” is:
According to the NN Group, It is a complete set of standards to manage design at scale using reusable components and patterns.
or in other words
These standards will help us manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
Design System: https://www.nngroup.com/articles/design-systems-101/
Now that we understood the design system, Let’s move on to a selection of assets.
Selecting colours
Selecting colours play a huge role in UI Design as it helps us to convey emotions. If you have read about colour psychology, you will already know what type of emotions each specific colour play in our lives.
All of us use multiple apps/websites in our daily lives and if we observe — each page of the app/website have multiple colours, still we can use it efficiently in our everyday life because that page has a perfect balance of that “Color palette” that designers have created before even starting designing the actual “User Interface”.
A “Color Palette” consists of various categories of colours
- Primary & Secondary Colors (Usually Represents the Brand Personality)
- Black, White & Greys (Neutral Colors)
- Success, Warnings & Error Colors (Semantics)
Primary colour & Secondary colour
Now since the project is about an E-Commerce application that is focused on Artwork and Handmade products, So Let’s try to pick the personality of our application.
Think of the words, values, or pictures that describe the feeling or vibe that we want to create.
Such as for Arts & Handicrafts Products, words with similar feelings or vibes can be creativity, joyous, personal connection, a specific emotion or stories, etc.
So in my opinion, the best primary colour for the app is “Orange” because it is associated with joy, sunshine, and the tropics. It represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.
Color Psychology: https://www.colorpsychology.org/
For Secondary Color, I have created the personality board for another keyword “E-Commerce”.
According to the above personality chart, the best secondary colour for the app is “Blue”. It also pairs well with our primary colour according to the “colour wheel”.
Selecting a specific hue
After selecting the primary & secondary colours, We need to select a particular shade out of so many.
For this, I have taken inspiration from Instagram keeping in mind the personality of the platform, and decided to go with the following hues.
Black, White & Greys (Neutral Colours)
Using the same approach as above, I have chosen a hue of black, white & grey.
Using pure black isn’t preferable because it causes a lot of eye strain and weakens the stamina of reading.
That is why I have chosen a shade for black as well.
Success, Warnings & Error Colours (Semantics)
The shades selected for Success, Warnings, and Error are:
I can go with orange as well for “Warning” but since it is my primary colour hence it will not work in this case.
Background Colour
For the background, white is usually used. But here I have chosen a neutral shade closer to white & grey.
Have you visited an art gallery and ever look at the colour of the walls? It is preferred to keep it neutral so that the audience could easily focus on the artwork and taking this as my inspiration, I have decided to go with the neutral shade for my application.
And finally my “Colour Palette” is ready.
Creating tints & shades
There will be places in the app where I need a colour from the colour palette a little lighter or a little darker. Hence there is a need for creating tints & shades for all the colours in our colour palette.
And this can be done by changing the HSL (Hue-Saturation-Lightness) value of each particular colour in the colour palette.
UI Colour System: https://youtu.be/2AgZlt_5Bqw
Selecting a typeface
Out of the multiple categories that consist of all the typefaces such as
- Serif
- Sans — serif
- Display
- Handwriting
- Monospace
I have chosen the sans-serif category according to the Personality board or Moodboard that I have created for selecting colours.
Another reason for choosing this category is that sans-serif fonts are clean, easy to read and approachable.
In the sans-serif category, we have two sub-categories
- Plain/Neutral (eg. Roboto, Lato)
- Geometric (eg. Montserrat, Rubik)
Geometric sans-serif is considered to be modern, friendly & approachable, so I will go with this category for my application.
And out of the various geometric sans-serif fonts, I have decided to go with the “Plus Jakarta Sans” font family as it is a google font which is open source, clean, comes with plenty of different styles, and also works well for e-commerce products.
Here I have created a type system following “Material Design Guidelines”.
Setting up a Layout
The product I am working on is a mobile application. As we know a layout is made up of three elements: columns, gutters, and margins.
So for mobile applications according to “ Material Design Guidelines”
- At a breakpoint of 360 dp, the layout grid uses 4 columns.
- For the gutter, the layout grid uses 16 dp.
- For the margins too, it uses 16 dp, but for my application, it is getting too congested, so I have decided to go with 24 dp.
Spacing scale
Out of the “Hard grid” & “Soft grid”, I will go with the soft grid as in a hard grid, UI Design content will snap to the grid in particular increments. Designing with this type of grid is hard, so I prefer the soft grid because it operates with spacing between elements.
Plus out of the 4 pt and 8 pt, using the 4 pt scale is usually preferred for mobile applications because it will give you more options to space out your elements.
Selecting an icon pack
Along with keeping the app's personality in mind, it is also to be made sure that icons in UI should be simple, scalable, consistent throughout the whole interface, and customizable. So It is easy to change the stroke width of all icons.
So for the icons pack, I have decided to go with the flat icon regular pack with round edges as I want my application more friendly, joyous, and have a personal connection.
