Work Notes

Design · Development · Branding · WordPress · 2019

Work Notes is a collection of articles and resources for freelancers. After writing on several freelance topics on my blog here, I decided to put collate them on their own site.

Putting these articles on their own site allowed me to achieve a few goals:

  1. The articles would be easier to find and navigate
  2. It would be easier to categorise them
  3. The new site would separate these articles from my other writing

As a result, I stripped back all non-essential pages wherever possible. Aside from the home page, all of the other pages are either category, archive, search result or article pages. No fluff!

Work Notes — About Layout

Early on in the design process, I decided that I didn’t want the site to rely on images. In fact, the only image on the site is the logomark.

Omitting images makes the site lightning fast and focuses the design on the typography and layout. After many iterations, I settled on a combination of Interstate for headings and Caslon for the body text.

The site uses CSS Grid for the layout, which encouraged me to experiment with layout options, particularly on the category, archive and article pages.

Work Notes — Article

UX best practice states that users should expect to see the menu in exactly the same place on each page of a site, but Work Notes has an unusual design quirk. In a useful twist on the good old splash screen, the home page features a larger logo with the menu set immediately below. This encourages users, new or old, to dive straight into the categories and start reading.

Work Notes was featured as a Typewolf Site of the Day in January 2019.