trendwatching.com
redesign

 

2015 - present

UI design
Frontend coding

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.

Step 1:
Interface audit

Layouts
Typography
Forms
Call to action styling
Color

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. 

Step 2:
A modular system 

Requirements

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. 

gridgrid

White space

 

 

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;
...

An additional benefit to this approach is that you get vertical rhythm (almost) for free - provided you compensate for baseline shifts using this or this technique.

agenda--baseline-gridagenda--baseline-grid

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.

type-hierarchytype-hierarchy

Example layouts
Further posts

This case study is a work in progress. In the next post, I'll look at a few modules and discuss how the above principles are applied to create flexible reusable patterns out of the simple components.

Below a few examples of the modules in action.