Creating a design library for ForrestBrown

Detail of the finished library in Sketch
Detail of the finished library in Sketch

What is a design library?

If you Google the term ‘design library’ you’ll find a myriad of definitions all with a slightly different slant, and just as many methodologies for how to go about building one! In this post, I refer to the design library as a single point of reference which catalogues the decisions that go into using typography, colour, spacing etc. for building and maintaining a digital product. In this way it combines elements of both a style guide and a pattern library, both of which are useful tools in their own right.

Why build one?

My client on this project, ForrestBrown, had a website which was large, complex and had a wide variety of content and functionality. Over the years since it was launched, a number of designers and developers had worked on the site and it was beginning to show signs of inconsistency, which can lead to a messy interface at best and, at worst, a confusing user experience. With ForrestBrown about to undergo a brand refresh, the time was right to commit to building a design library. Establishing the library would aid us with the subsequent task of completely updating the site templates, a large project which was scheduled in for me and a colleague to work on in tandem. The library would not only allow us to create new templates consistently in isolation, but also help future design team members and the client to scale the site with a solid set of design principles in place to guide it.

The homepage for the new site
The homepage for the new site

Step 1: audit

Working closely with the lovely marketing team at ForrestBrown, we picked apart the bones of the existing site. Not as gruesome as it sounds, this involved making screenshots of every template on the live site and annotating the various components with our thoughts on design successes and failures, along with flagging components which should be alike in design (if they shared the same function, for example) but which weren’t. Sadly there were many of these that had crept in, (some under my watch 😭). While this was a little sobering for the design purist in me, it was a brilliant exercise which informed the components we wanted to migrate to the new site and those we were happy to leave behind in the design wilderness.

Detail of the design audit with annotated components
Sad times during the audit!

Step 2: The foundations

Following the audit, I started out by documenting 3 foundations: colour, typography and space.

The client’s colour palette
A new type scale for mobile and desktop devices

Step 3: components

With the foundations in place I moved on to the components. The simplest component to begin with was the humble button, but even this requires a lot of thought which belies its appearance: what is its default state? How does it appear when paired with an icon? What about when it’s in a cluster of multiple buttons? And that’s not to mention the hover states for the 7 colour themes we had already established.

The site’s many button styles are carefully documented
The site’s many button styles are carefully documented
Different card components seen in the library

Outcome

With our comprehensive library of components in place, we were ready to build a suite of page templates that would house the site’s varied content types. These were put together with a swiftness and efficiency that would not have been possible without the groundwork that had gone into making the library. It was satisfying at this point to sit back and see the site come together as a whole, with uniformity across colour, typography, space and function. Once again the purist in me could breathe a sigh of relief 😅

Some of the site’s screens seen on mobile devices
The page templates came together quickly and easily with the library in place

Maintenance

Now that the design library is in place, the real work begins. The library isn’t a static product that we can turn our backs on as we did those dodgy components left for dead after the audit! As ForrestBrown’s business goals develop, new design solutions are required to communicate their messaging effectively to their customers and it’s my responsibility to ensure this is done in a consistent fashion, with new design modules following the principles already laid down.

Final thoughts

There are loads of great resources out there to guide you in setting up your own design library. Use them as just that: a guide. Establishing the best system to document the design principles underlying your own project will require a little flexibility, as no two projects are the same. But I’ve certainly found that setting out with solid foundations is an invaluable part of the web design process that I’d encourage every client and design team to invest in.

--

--

I’m a graphic designer with over a decade's experience creating works for print and digital applications. ben-hamilton.co.uk

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
Ben Hamilton

I’m a graphic designer with over a decade's experience creating works for print and digital applications. ben-hamilton.co.uk