Tauberman

UI guidelines

At Avensia we sell our product Nitro demo site as an out of the box e-commerce site with great possibilities to customize and scale into whatever the customer wants and needs.

Two years ago we had more or less no UI guidelines, no design system or library of reusable pages, layouts, or components for this product. It was a mess if I may say so.

Role
Product Lead, Design management, UI/UX design

UI guidelines

Now, this is a product that has the purpose of changing the look and feel of the product without changing the backbone. One of the challenges was to know how deep into the UI guidelines I needed to go, before it was waste of time, due to the customer's own customizations and needs.

I started with the brand colors and fonts.

Colors

Fonts

It's ok to just use one fonts for a product but I would suggest to use two. This to make the product a little bit more interesting and dynamic.

Now it's time to choose the base-line font size and line-height. These defines the buttons and the paragraphs. I used a 16 px font seize. 16px is recommended as the standard size for mobile displays.

Time to set up the type scale for all headlines, subtitles, body, and captions to creat a cohesive typography experience. I used a scale of 4px to define the font sizes. I did add the 14px size to fill the gap between 12 and 16. I use Regular and Bold as weights. No need to use semi-bold beacuse the contrast between them is too small.