Secondary Characters

The Idea

In June 2019, I was asked by Secondary Characters Musical Theatre to redevelop and redesign their company website. They had been struggling with their Weebly website and keeping it maintained with minimal tech knowledge. The site needed to solve that problem with a straightforward interface for staff to update.

The Tech

I used Gatsby to develop the frontend of the site and integrated NetlifyCMS on the back end for the CMS. It was an ideal solution for this project because it allowed me to create a content model for the site within Gatsby and reflect that accurately within the CMS.

I also looked into other CMS solutions, including a headless WordPress, Sanity, and others. But ultimately, I opted for NetlifyCMS for the direct control and customization that it gave me as a developer and the straightforward tools for maintaining the site for the staff. It also allowed me to reduce their hosting costs to zero. 😄

Additionally, after our design meetings, I knew that the staff's central goal was to feature beautiful, high-resolution images of current and past shows. Gatsby is perfect for this: it's server-side rendering, and progressive image enhancement, means that users with any connection speed can enjoy the browsing the site with super-fast load times.

The Best Part

My favourite part of developing this site was to flex my design skills. Not only was this an update of Secondary Characters' website, but it was also a total visual branding overhaul for the company.

While the company had given me the freedom to overhaul their brand colours (🤯), I wanted to try to make it work. So I pulled the colours out from the existing logo (top of the picture above) and then laid out a full palette by adjusting HSL values. Working this way meant that I was able to keep the existing logo as part of the visual design to maintain consistency, while also adding a bit of playfulness by making use of lighter colours.

I also followed Adam Wathan and Steve Schoger's advice to define all of my design systems in advance. That meant establishing everything from font sizes to spacing within Figma, even before I began to create the site. Luckily, styled-components makes it very easy to build those styles into the layout using Global Styles.

1const secondaryCharactersTheme = {
2  // ... more styles here
3  fontSize: {
4    smallPrint: "11px",
5    information: "14px",
6    reading: "18px",
7    emphasis: "24px",
8    highLevel: "29px",
9    subHeading: "36px",
10    title: "48px",
11    display: "64px",
12    banner: "68px",
13  },
14  spacing: {
15      extraExtraSmall: "4px",
16      extraSmall: "8px",
17      small: "12px",
18      base: "16px",
19      medium: "24px"
20      mediumLarge: "32px",
21      large: "48px",
22      extraLarge: "96px",
23      extraExtraLarge: "128px",
24      quarterPage: "192px",
25      thirdPage: "256px",
26      halfPage: "384px",
27      twoThirdPage: "512px",
28      threeQuarterPage: "640px",
29      page: "768px"
30  }
31};
32

All of this work paid off! It sped up my development by allowing me to focus on building components and pages, rather than fiddling with spacing values and font sizes to get the right look.