A more seamless workflow — style guides for better design and development

Style guides can give many benefits to the entire workflow, from design right through to build.

In short…

During the development phase they streamline the transition from design to development as they minimise build errors and help encourage modular development best practices.

Further to this, style guides can be converted into ‘living front end style guides’ which help make future updates and site maintenance more manageable due to a cleaner, more modular and structured codebase.

As a bonus both the style guide and living front end style guide can be used as a project deliverable and a way to better communicate the UI identity to your team and your client.

Designing interfaces

When we design an interface we aren't designing pages, or panels, we are creating a design system of elements and components that will be used in various combinations. If we keep this in mind we can create a truly fluid and flexible interface system.

We can use style guides to abstract and breakdown our designs into modular scalable elements and components, that can work together to form a congruous system.

When interfaces aren't thought of as a design system we can end up with messy and inconsistent interfaces that are very confusing for the user:

What is a style guide?

It’s worth mentioning that style guides can go by many names, such as style tiles, interface inventories and pattern libraries. There will no doubt several new terms to describe a style guide by the time this blog post is published!

Here is a small example of the Medium.com style guide when it was first launched (taken from a Teehanlax case study):

Medium’s style guide

As you can see it shows the various interface elements such as buttons, drop downs, typography hierarchy, tooltips, colour palette etc. At a glance you instantly get a taste for the visual identity of the interface. You might notice this doesn't appear to have all the interface elements used on their website, but it’s a good example.

Style guides are vital for keeping the visual identity of an interface consistent and they can be beneficial both internally, to your team, and externally, to anyone working with your brand or interface.

We can utilise Atomic Design principles to enhance this approach. Atomic Design breaks down this design system axiom and gives us the core principles to make creating design systems as clear and simple as possible.

What is atomic design?

Atomic Design starts from the ground up. It begins with designing base elements like form labels, inputs, paragraphs, headings and buttons. Then groups of base elements form components, groups of components form templates and groups of templates form pages.

Atomic Design in one GIF:

The great thing about Atomic Design is that you don’t have to follow it to the letter. We don’t have to give elements and components names like atoms and molecules, but we can take these core principles and apply it to designing a clear and concise style guide.

Why use a style guide?

  • Encourages designers to think about the interface as an organic, scalable and flexible system.
  • Encourages consistency in the visual identity and helps keep the interface taxonomy/system as logical as possible, leading to a better UX.
  • Makes designing interfaces more methodical and component based.
  • Helps to quickly communicate the interface identity to other people on the team or to your clients.
  • Gives us an holistic view and makes it easy to spot any incongruous interface elements.
  • Makes it very clear for a developer to pick up and begin building.
  • Beneficial for clients, both as a project deliverable and as stream of communication.

Overall, if we approach interface design with style guides in mind they will help us create consistent, more user friendly, interfaces as they make designing more methodical and clear which will lead to a better experience for users.

Designers already do this

Style guides take no more time

So how do style guides bridge the gap between design and front end development?

But, hasn't the designer already done this?

If the developer has to analyse and interpret the interface, then time is being wasted. Further to this, mistakes can be made and nuances can be missed when the developer is trying to understand the design.

Be it consciously or not the designer will have already created the design system that the developer is trying to build, and that design system needs to be communicated clearly.

I'm sure every developer has built a component only to have the designer mention how that’s not how they intended it to work, or behave. Style guides help improve communication of the interface and help avoid errors during the build process.

How do style guides help front end development?

Style guides work seamlessly with modern front end guidelines and component based CSS structures, such as BEM, CSS guidelines and Inverted Triangle CSS as they share the same principles — first building or designing base elements, then building or designing more complex, reusable components.

This means our style guide can be transferred easily into clean, modular, component based CSS!

Like a glove!

At this stage all the developer has to do is build the style guide in HTML and CSS, creating a front end style guide.

Here are some examples of front end style guides:
Codepen
Code For America by Clearleft
Mozilla Firefox

One small problem…

We can solve this issue using markup templating with tools like handlebars, dust.js, or twig. These tools allow us to output markup where we like, but they are always linked from one source. This allows us to create a living front end style guide.

Living front end style guides

If I were to update a button element by changing its markup or CSS, that change would be reflected instantly on the website or app.

Why use a living front end style guide in development?

  • Makes building websites more methodical and component based.
  • Encourages modular, component based CSS for a cleaner, thus faster, codebase.
  • Makes for easier responsive testing and general debugging.
  • Allows us to utilise Atomic Design principles in development.
  • Modularises code which makes it easier to reuse markup and CSS on other projects.
  • Having all interface elements ‘living’ on one page makes updates and redesigns easier.
  • Allows interface inconsistencies to be easily and quickly identified.
  • Allows us to check that all components can work together on one page without any code conflicts.
  • Provides a master page for markup and user interface reference.
  • Can be used as a client and project deliverable.

As a bonus, front end style guides can sometimes help non-code savvy designers begin to see how they might start to code -

Wrap up — style guide driven workflow

During the design phase they help identify interface inconsistencies and help to remind me that interfaces are flexible design systems. During the transition from design to development they help minimise mistakes and speed up the handover. At the development phase style guides can be built into HTML and CSS seamlessly as they share major principles with front end guidelines and component based CSS structures. Using living style guides then make updates and redesigns as easy and manageable as possible.

Hopefully a style guide workflow can benefit you as well, but as always with all things web and design, there are a thousand ways to approach a project. If you’ve found a workflow that works for you, keep using it!

Additional links:
Sales Force —Lightning Design System
Anna Debenham — Style Guides
Samantha Warren — Styletiles
Brad Frost — Patternlab

If you want to hear more about style guides and front end development, feel free to follow me on twitter! 😀