Homepage of ClaireFayers.com author website, with a playful design including pirate flag social media buttons, a waving tentacle, and pirate-map style background to the main navigation menu.

ClaireFayers.com redesign launches

I love Claire Fayers’ wonderful children’s books, The Accidental Pirates series. They are told with wit and warmth, combining exciting adventure with a wry look at the power of stories. So I was really excited to have opportunity to take on redesigning her website as a freelance project.

Claire was using WordPress to power her site, but was using an old default template that was a bit boring, and also not fully mobile responsive. So after chatting to her about what she would like for her site, I set about creating a new look for her site, as well as adding extra functionality to make it easier for her to manage her book listings.

I used Sketch, a powerful yet straightforward design app, to produce mockups of the site design, sending over drafts to Claire for her feedback (see below).

Early draft of the Accidental Author site design in Sketch

I’ve been using WordPress personally and professionally for seven or eight years now. To begin with, I was reliant on existing WordPress themes and plugins. But over time I’ve delved more and more into how to customise and develop for it myself. Through following various online guides and tutorials, and a lot of experimentation, I taught myself how to use a local WordPress installation, put it under version control with Git, and create my own custom themes from starter templates such as _underscores.

For those who are interested in the technical details, I installed WordPress locally on my computer using MAMP and cloned Claire’s existing site using a plugin. I used the underscores starter theme and built it up from there, adding custom functionality.

The theme uses a custom post type for Books, using Advanced Custom Fields to provide fields for ISBN, pages, format and so on. The ISBN is used to generate the links to various online stores automatically, with the ability to add more stories and their URL schemes as another post type.

I learned a lot about web development in the process – it was a great opportunity to flex my design and coding skills. One of the challenges was testing the website across different devices and browsers, as you can see below:

My desk with a desktop PC, Macbook, iPad and Android phone, all showing Claire's website.I enjoyed the process, and any project involving dragons and tentacles is a special treat!

[Note May 2019: Since launching the site, I’ve done a couple of refreshes of the site to bring it up to date with Claire’s latest books, Mirror Magic and Storm Hound – keep checking back at www.clairefayers.com for the latest version, and to find out about her new books!]

Posted in Digital | Tagged , , , | Leave a comment