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?

Why build one?

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

Step 1: audit

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

Step 2: The foundations

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

Step 3: components

The site’s many button styles are carefully documented
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
Different card components seen in the library

Outcome

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

Maintenance

Final thoughts

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