The Redesign: Part One

I’m pret­ty excit­ed today because I decid­ed to pull the trig­ger and launch my redesign of SpareType. With the new look now out in the wild, I want­ed to talk a lit­tle more about it. This first post in a series about the redesign focus­es on the visu­al design changes. More posts will be incom­ing about cod­ing changes and process.

New Identity and Logo

I designed the orig­i­nal SpareType logo in 2008 as part of my col­lege senior project. Now that I am using the name and brand for my free­lanc­ing career, it was time for a redesign. I want­ed some­thing so clean, sim­ple, and easy that there was­n’t even design there. There’s the one typo­graph­i­cal nod with the ‘TY’ lig­a­ture. Everything else about the logo screams plain and uneventful.

The idea is that the con­tent is the focus. The logo and iden­ti­ty are sim­ply frames for show­cas­ing con­tent. Artwork, client projects, and type design all have enough per­son­al­i­ty. They don’t need a fancy iden­ti­ty brand­ing them. They brand them­selves. The work should also build the brand of SpareType more than the logo.

Color

Rethinking the color scheme was a big step that set a lot of progress in motion. Stepping back from the gold­en yel­low [#FEC34D] and using it as an accent in a 60−30−10 palette helped a ton. There was lots of tweak­ing to set­tle on a 60% per­cent color. It need­ed to com­ple­ment so that meant the blue fam­i­ly. It need­ed to be dark but not com­plete­ly black. It should be duller so that accents popped. The win­ner ended up being #3C4D56. It’s a great base and does­n’t attract atten­tion to itself. Rounding out the palette is a light grey #9CA5A9 that I haven’t used much because white has worked so well.

The Jumble

In putting togeth­er busi­ness sup­plies and pro­file head­ers, I did find the logo too sim­ple and need­ed to add anoth­er ele­ment to the iden­ti­ty. I’ve always loved this typog­ra­phy jum­ble and it was the per­fect ele­ment to round out the iden­ti­ty and pro­vide some inter­est in sit­u­a­tions that need­ed a lit­tle more. It’s com­plex­i­ty con­trasts with the sim­plic­i­ty of the rest of the design and pro­vides a bal­anc­ing point. It isn’t on the web­site yet, but I’m think­ing larg­er screen sizes might see a par­al­lax ver­sion of the jum­ble on the right hand margin.

Website

The idea from the logo — a sim­ple frame for con­tent — guid­ed the design of the web­site. All it needs to be is a sim­ple struc­ture for dis­play­ing work and thoughts. Focusing on the con­tent meant per­fect typog­ra­phy for read­ing and plen­ty of white space so images could stand out. Similar to the iden­ti­ty, a lot of progress hap­pened quick­ly once the color palette took shape. I’ll have more on the web­site design in parts two and three where I’ll talk about some of the cod­ing details and how I’m chang­ing my process. Look for those posts later this week!