TrendWatching's web site presented a rare opportunity for me to start a medium-sized web project from scrath. Years of partial redesigns, coupled with a focus on quick delivery, had led to a difficult to maintain site lacking a clear design strategy.
Fortunetly, everyone was quite open to the idea of a complete overhaul, so soon after I joined, I was given the opportunity to design and build a modular system based on best practices.
I started by conducting an Interface inventory. It helps identify areas needing improvement and provides a good starting point for discussions both within the design team, and also when presenting proposals to other teams in the company.
A quick round of screenshots revealed non-responsive layouts, clashing typeface choices, usage of every font size from 9 to 38px, arbitrary white space, non-clickable elements sharing the same styling with calls to action, readibility issues on non-retina screens, 6 different cta colours, lack of contrast betwen background and foreground, etc.
One of the goals for the new system was to minimise the need for additional dev resources. This was embedded in the design thinking, from planning responsive changes between breakpoints, to writing sass presets which handle common layout scenarious with a single line of code.
Keeping consistent spacing between elements is one of the trickier things to maintain, as it is harder to spot inaccuracies, and requires more planning during implementation than other aspects. We needed a way to standardize things without requiring extensive documentation, as sometimes it is easier to implement this directly in sass than it is to anotate hundreds of mockups.
To achieve this, I use half the line-height of the smallest text element (body copy) as the "base unit" for vertical sizing. For example, on wide screens, body copy has a line height of 24px. Using half of that as the base unit provides a handy way to define all other vertical units:
Heading line-height: 3x12px;
Gap between sections: 4x12px;
The type hierarchy is based on a modular scale with a ratio of 1.5. Sizes are defined in rems, so that everything adjusts as the root font size increases between breakpoints.
In contrast with the 27 font sizes used before, the current hierarchy uses just 3:
- Display type font size for page titles in hero banners (1.5 * 1.5 * 1.5 rem = 3.375rem)
- A-head (1.5 rem) bold uppercase
- B-head (1.5 rem) bold
- C-Head (1.5 rem)
- D-head - (1rem) small caps
- body-copy (1rem)
The hierarchy is inspired by Robert Bringhirst's traditional type setting chart.