Default Perch Theme

April to July, 2012

I’d tried out Perch recently and so was really excited when Rachel Andrew asked me if I wanted to work on a default theme for Perch. Perch hadn’t had a default theme before, and many users were used to having some kind of neutral theme as a starting point with other content management systems. The aim was to create a basic design that could act as an introduction to responsive design principles and really be something that users could build upon.

a very early Perch theme wireframe

a very early Perch theme wireframe

The difficulty in creating a default theme with a responsive layout is that you don’t have any content to build your breakpoints around. This resulted in my choosing rough breakpoints around smartphone, tablet and medium/large desktop browser sizes. The design is very simple and clean, with a definite vertical rhythm to tie it together.

Perch theme style tile

Perch theme style tile

 

I designed the initial ideas for the theme in Photoshop, getting an idea for the look and feel using style tiles and then developing these into mockups based on the rough breakpoints I knew we’d be using. I then worked on an HTML and CSS style guide that covered all the Perch add-on elements and basic HTML elements. This worked as a way for me to communicate how I thought these elements should work flexibly across the responsive layouts. Then I create a few default pages based on the Perch add-ons to ensure I’d covered all the elements in my design.

screenshot of the Perch theme style guide at a medium-ish viewport width

screenshot of the Perch theme style guide at a medium-ish viewport width