Perch theme for Swift Migrations

May to June, 2013

When Rachel asked me to design a Perch theme, I was very excited. The default theme I created for Perch was very simple, and this was a chance to get in on the bird-related puns. The goal of the theme was to be a corporate site that used Perch without add-ons, but with more complexity than the default theme.

Style tile describing typography, colour and some patterns

First Swift Migrations style tile

As with the default theme, the hardest thing about designing a theme is trying to imagine and accommodate potential uses. I looked at a lot of corporate sites to get an idea of the main use cases and content structures. Whilst the layouts were simple, they became more complex as I worked out how to better display the potential content across different viewport sizes.

widest screenshot

Screenshot of the widest viewport design, showing how extra whitespace is added when the viewport is wider

Wide viewport screenshot

Fairly wide viewport screenshot showing the maximum width of the content filling the viewport

Mid-width viewport screenshot

Narrow-ish viewport screenshot showing how the carousel-style content at the top is switched into a simple list

Narrowest screenshot

Narrowest viewport screenshot showing that carousel content further broken down into one column

The design and layout was fairly straight-forward, meaning that the HTML and CSS templates that I provided were quite simple. I wanted to make it really easy to slot in the Perch tags, and I’m always intimidated providing HTML and CSS to Rachel and Drew, as they’re both developers whose writing I’ve been following since I started out learning about web design.