Rachel Andrew’s site redesign

August to November, 2013

I’ve been reading Rachel Andrew’s blog posts and books since I started learning web development. We’ve worked on projects together before for Perch, but I was extra excited to work with Rachel on her personal site. I worked on the design, giving Rachel responsive HTML and CSS templates which she then integrated with Perch as a content management system.

Rachel wanted a space to better share her writing and videos from elsewhere on the web, as well as her blog. We looked at ideas for a personal branded style, something that Rachel could use consistently to represent her work without feeling overly brand-like or in a style that didn’t work for her.

Style tiles

a style tile containing a photo of Rachel, colour swatches and typography examples

Rachel said she liked 1930s/steampunk styling with the darker, more gothic influences. I didn’t want to create cheesy skeuomorphic designs so I tried to deconstruct some of these styles into simple patterning and colours. I suggested that we use photos of Rachel on the site, and this lovely photo by Rachel’s husband, Drew, meant I could pick out some red colours to echo in the site design.

style tile showing modular boxes for different types of content

I designed this modular boxes style to house the fragments of content that Rachel links to from around the web. The simple style is meant to allow for a variety of content, with small icons to distinguish between different content types at a glance.

Mockup of a blog post on Rachel's site

I chose Supria Sans as I love its character which adds personality as well as being a very legible body text typeface. This early mockup shows the blog post concept, and how we could use different colours, weights and sizes to show hierarchy.

More modular box designs for all different types of content

As we started to evolve the modular boxes concept, I explored further how all of the different types of content could work within this format. At the same time, Rachel looked into the best way to implement this structure in Perch.

Screenshots

Screenshot of Rachel Andrew's homepage

Showing how the homepage design works live

A small screen screenshot of Rachel Andrew's homepage

Of course, we made the site responsive too. The simplicity of the layouts and the flexibility of the content modules made it easy to simply rearrange the content into greater or fewer columns depending on the space available.

Screenshot of the books page on Rachel's site

Inspired by Rachel’s book on CSS3 Layout Modules, I used CSS3 columns to get the tiling effect of the content modules on the site. This was the first time I’d used CSS columns, and I was pleased with how well it worked and how easily we could use it as a progressive enhancement over floats.

Footer on Rachel Andrew's site

I added little details to the site design, like this little Art Deco-style border, to add style to the site without distracting from the content

Fancy link boxes on Rachel's site

I wanted to make the links to Rachel’s other sites more noticeable than little text links at the bottom of her About page. I designed these Art Deco patterns to stand out from the other content in an attractive way.

This design was fun, and I loved working with Rachel. When you’re writing HTML and CSS for a very experienced web developer, it can be incredibly intimidating, but Rachel was very kind about my work in her write-up on the redesign on her blog.