Sanstream

Corporate style and a component-based design system.

Background

Bed & Breakfast Europe's new resposive design

Bed & Breakfast had their main websites redesigned in a responsive layout by an external design firm. They implemented this designed and launched their new websites.

Soon after it became apparent that while building new components and extending existing ones it was dificult to maintain consitency in terms of style and layout, because there was no in-house design expertise I was hired.

Diving into the documentation

The first step was to dive into the existing documentation related to the current design. Extensive documentation about branding, the company's core values was present, but the documetation concerning the design decisions (a.k.a. a design language) was simply not there.

After discussing this with the stakeholders we I suggested to set up a corporate style guide. This style guide would help developers, copy-writers, marketeers communicate the brand of Bed & Breakfast Europe in an easy an consitent way.

Setting up the style guide

I started to document the basic style elements that were already standard, but not yet documented. This way it was easier to maintain this standardisation.

After this I deduced the basic values (fonts, sizing values, colours and greytones) and the layouts and other common patterns used throughout the design, based on the most likely design choices.

Using component based design

Meanwhile the development team started working on the groundworks for a widget-like component-based system. With that in mind I adapted the structure of the style-guide to facilitate this way of software development using the philosophy of Atomic Design.

The basic idea behind this is that every system is comprised out of Atoms (e.g. a field), molecules (e.g. label-field combined), organisms (forms) and templates (defining the structure of a page) and pages (examples of templates populated with real data).

I adapted this design philosophy to fit the needs of the developers into a structure of:

  1. Style Elements
  2. Components
  3. Templates

Elements

The elements of the system contained documentation concerning the brand and examples of the most basic elements. Like:

  • Colour usage: Which brand colours are there and how and when should they be used.
  • Typography: Used Typefaces, paragraphs, text columns, lists, etc.)
  • Logos: How to use the logos and in what way.
  • Iconography: What icons (in which families) are availalbe for what purpose.
  • UI Animations: Which animations are used and with which timings.
  • Headings: Examples of all types of headings.
  • Fields: Every type of field, like: number fields or selectboxes.
  • Buttons: All types of them.

Basically the same things you would fine in a standard style guide.

Components

Within the components section the philosophy of Atomic Design came into its own. Headings and buttons each had their own specific component (heading and button). Headings could then be set to become h1, h2 or h3 headings. Each with their own default styling.

Buttons were however a bit trickier. From a user's perspective for instance there were two kinds of buttons. Buttons that would lead you to another page or ones that triggered a change on the same page. Secondary buttons could be graphically (and therefore UX-wise) by of a different type (primary, secondary, text and default). By predefining this UX logic it was easier to build the the button component.

templates

Within templates special component called containers layed out the functional components. This way it was easy to see which components were in a landing page and which were in a product page.

The endresult

With this design system in place it became a lot easier to design and develop new components and pages. The time from initial design to a delivered feature reduced greatly through the re-use of code and well thought out components. A lot of time was also be saved, because page layouts and graphical style were already defined.