How we make you look good: the step-by-step process of an author website makeover (with before & after pics)

“The pressure to publish is monstrous and the lack of time to edit properly is the difference between good and great.”

– Isobelle Carmody

Imagine going to print without editing. This is essentially what’s happening with the majority of DIY author websites and blogs.

Don’t get me wrong, WordPress is great! All of our designs are built for WordPress. WordPress gets you up and running with a blog and self-managed website in no time. Plus it’s super low cost.

But if you’re using a standard WordPress template, your content isn’t as accessible as it could be. Or as pretty as your book is. It’s not designed with an author in mind. It’s not designed for you.

Authors understand the importance of a distinct book cover design. But not extending that to their presence on the web has me baffled.

Rather than telling you about what a designer does. Let me show you.

How about a quick website makeover?

The ubiquitous WordPress template used for an author’s website

Let’s look at the anatomy of a standard WordPress template. Or any standard template for that matter. I see the WordPress TwentyTwelve theme pretty often.

Typical layout:

• Header/banner across the top of the page
• Main content on the left, and a
• Sidebar on the right

Typical content found on an author’s book page:

• Book title
• Cover
• Blurb
• Purchase links
• Awards
• Review quotes
• International covers
• Fan comments

Improving on a standard WordPress template: How we design websites for authors and writers

The appearance of good design is subjective. So what underlies an objectively good design? To take an author website from good to great we use the fundamental principles of design.

Two important notes for this makeover:

1. We’re sticking to design principles. We’re not including design ‘elements’, which dictate the decoration of the page. Design elements are personal choices such as font, colour palette, and textures.
2. We’re sticking to the content we already have. The content you’ve put on the page is great! It’s the delivery that isn’t appealing or accessible as it could be.

Let’s dive in.

Taking the reader on a quick journey through the promotion of our book

‘Hierarchy’ is when certain content is given visual prominence over other elements.

Book title, cover and blurb

One of the simplest ways to give an element prominence is scale. Make it big. In today’s makeover let’s take the title and cover, blow them up to the same size, and put them front and centre.

WordPress allows you plop an image into page, but let’s take the book cover a step further. Using a 3D mockup makes it look like a real product – something desirable. Showing a portrait shaped book cover lying on its back, also makes better use of the web’s natural landscape canvas.

Naturally our western eyes read from left to right, so the perfect place for the blurb is right next to the cover.

The ‘fold’ is a hangover from newspaper publishing, we have ‘the fold’. Although everyone uses a different screen size, we still have a average fold. Or as I like to call them a ‘scroll’ – the part of the page you can see without scrolling. For our three key pieces of content (title, cover and blurb, let’s keep them in the first scroll.

Review quotes

In today’s interruption marketing world, consumers rely more than ever on personal reviews.

In our design makeover, these reviews give us two opportunities.

Give each reviewer a face. For each of our review quotes, let’s use their public avatar with their name. Everyone knows that faces attract attention. Just like on social media, adding a small profile picture gives each quote personality.

If you’ve got a quote from a bookshop or well-known author, chances are your readers will recognise their logo or face.

Who says all reviews have to be grouped together? Let’s use the review quotes to give the page ‘rhythm’.

By splitting up the quotes we can position them at strategic points of the page. Zig-zagging down the page, our quotes with friendly recognisable faces are now tour guides.

Purchase links International covers

When you add content with a standard WordPress template, you get just one area to work with. Enter columns.

Magazine editors understand the power of columns, pulling quotes, and strategically positioned images. Imagine reading a magazine and everything was in one columns. Not fun.

Let’s group our book purchasing links and international covers, and split them into three columns.

Make your book purchase links easy to spot by using icons. Goodreads, Booktopia, and Amazon, here are three logos your readers instantly recognise. Use symbols and icons for a shortcut to comprehension.

Comments from fans

We don’t always use visitor comments on the book page of an author website template. But comments are a great way to get encouragement and gives you an opportunity to publicly engage with your readers.

From a web layout perspective, single comments are often short. They don’t need to span the full width of the page. Think of Twitter, a narrow column of short comments.

If you do get longer comments, we still don’t want them to be too long. Newspapers use narrow columns because easy to scan and quickly return the eye to the next line down. We go for a maximum of 70 characters per line.

For the final touch on today’s author website makeover, we’ll try putting the ‘add a comment’ form on the right side. Just like the comments themselves, the comment form doesn’t need the full page.

What about the sidebar?

I like to give each page a clear focus. So in this particular design, we’re removing the sidebar to focus on your book. Access to information about you and recent blog posts is important, so let’s make that easily accessible on from the main menu. I’m not totally against secondary info in a sidebar.

Putting it all together

Here’s how everything comes together. With a define hierarchy, a bit of rhythm, and some visual cues, we can take your book page from good to great.

Is hiring a designer expensive?

Hiring a professional designer isn’t just about taking your promotion to the next level, it’s also about saving you resources.

If you’re serious about building an author brand, you need professional help. When you do everything yourself – sure, you’re not spending money – but you’re spending time.

Unlike money though, time is one resource you’ll never get back.

You made it to the end

I said I wouldn’t get into the design elements, but let’s look at how our quick makeover could come together as a finished design.

Feeling inspired? Take a look at our collection pre-designed one-off author website templates. Or if you’ve got a question about creating a custom author website leave a comment, or email me (Jin) here.