Author Website Design Basics: What You Need To Know
New to Squarespace and wanna try it out? You can sign up for a free trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
Think of your website like a book you want your audience to read. Do you jump straight into the middle of the story with no direction and build up?
Or do you take your readers on a journey and guide them through what you want them to know?
If you choose the first option then you're dropping your readers into a story where they have no context, don't understand what's happening and as a result they will most likely DNF it.
However, if you build your world, introducing characters and their storylines so that the reader can learn about them and their world, your reader is likely to feel more involved and connected to your story and as a result, keep reading.
That's what we want for your website visitors too.
In this fast paced world where you only have under 15 seconds to gain a website visitors attention before they click away let's make sure that a poorly designed website isn't the reason they're leaving.
So, how can we make sure our website is the best it can be?
PLANNING
Before I even start to design a website template or a custom design for a client - I plan.
I start by doing some research. On the author, their books and backlist, who their readers are, what my client likes in terms of design features and what the main focus of the website is.
While a website usually has a lot of information to convey, there is always an overlaying main focus of the website. For most authors (and what I recommend), that's usually getting people to sign up to their email list.
After that, the second most important focus is their books. Making them easily accessible, featuring the relevant details and making the buy links prominent so there's no barrier or hesitation in purchasing.
Some other less common examples include:
Focussing on the first in series so that you can promote a good read through
Highlighting your most recent release (popular for authors who rapid release)
Highlighting your most popular series or book (popular for authors who are well known for a certain series/book)
Encouraging readers to join your Facebook group (a great way to inspire reader interaction and create a fan base)
Now you may be thinking to yourself - what is this chick talking about? One main focus? Is she crazy, I have lots of things I need to highlight.
But hear me out.
I'm not saying you can't showcase these other things on your website, in fact, I encourage you to. BUT... I want you to think strategically about exactly what you want your website visitors to focus on and make those the main features/focus points of your website.
If your focus is your newsletter and getting people to sign up to your email list, then I would suggest placing your signup on each page of your website, plus make it the big focus on your homepage.
By placing it on every page (or in your footer so it shows on every page), then you have more opportunities for them to sign up regardless of whatever page they land on in your website. They could be perusing your book page and trying to decide which book they want to read next, when their eyes are a drawn to your email newsletter and they quickly sign up there.
Now compare that to only having one seperate page just for newsletter signups. Or only having one signup form on your homepage. You've just dramatically cut down on the opportunities for your website visitors to turn into engaged subscribers because you didn't plan out your website, didn't you?
Ruh roh!
Let's make sure that isn't you, by planning out exactly what you want on each page of your website BEFORE you start designing.
I usually do this on a piece of paper. I have a quick outline of each page, along with where each element (photos, text etc) are arranged.
Remember, it doesn't need to be pretty. It's just a rough draft of the layout of your website. You can use shapes, boxes and lines to represent various items etc. This is just a visual guide for you to reference later on when designing your website.
SIMPLICITY
Simplicity in your design as well as simplicity in your navigation. A confusing design, too many fonts or colours and not enough white space makes for an overwhelming, confusing mess for your website visitors to look at.
And what's the result of a confused mind on a website?
Visitors leave.
You've lost them before they even have a chance to check out your content.
Since that's the exact opposite of what every website hopes to do then my suggestion is to simplify.
Fonts - Only have 2 fonts. Use one for headers (H1, H2, H3, H4) and the other for all your body text.
Colours - Stick to 3-4 main colours. Choose a brighter or darker colour (from your 4 colours) to use for the buttons and clickable links on your website. You want to be consistent with these colours throughout your website so that when a reader sees that colour, their mind automatically associates it as something they can click on.
Text - Make your text easy to read, both with your font choice, size and the colour. For your main body text, make sure it's either 16px or 18px, plus stick to black text on a white background and/or white text on a dark background. This makes it easier for your website visitors to read on both mobile and desktop versions of your site.
There's nothing worse than having to squint to read a website because the text is too small, the colour is too light or there's different coloured text all over the place. That just looks bad and hurts people's eyes.
Also a sans serif font for body text is easier to read on websites (as opposed to serif fonts for books). So make sure to choose a sans serif font.
You want to do everything in your power to make it easy for your site visitors to read and understand your website. You never want to confuse, overwhelm or jar the viewer because that just leads to them leaving.
So remember, simplify your design and white space is your friend.
Also, don't group too many elements together, or have huge walls of text. You need to break up the design with white space. It elevates your design and gives your visitors eyes visual breathing room. Plus by breaking up your text, it makes it more likely that they'll read it. Nobody likes huge chunks of text outside of books.
Designing a website is completely different to formatting a book.
What looks good in a book is not what is recommended for a website. So keep those huge text walls in check and remember, white space is important!
HIERARCHY & YOUR NAVIGATION
Hierarchy refers to the arrangement of pages on a website and arranging them in a way that guides your site visitors to the most important pages on your website.
If your site hierarchy is designed well then your users will be able to find and access the pages they want quickly and easily.
I usually suggest that you think about this before you ever start designing how website will look visually. Because it you don't have this underlying structure correct from the beginning then your website will become a hodgepodge mess regardless of the fonts you choose or your colour scheme.
Your sites hierarchy and navigation are one of the most important aspects of design that often get overlooked because it’s 'not pretty'. Or feels 'boring'. Or you just 'want to do it'.
But I promise you, that if you start your design know what pages you need and how you want to lay them out in your navigation menus (both the main top navigation & your footer navigation), then you'll have an easier time with the rest of your design.
Here are my suggestions for having a great hierarchy and navigation menu:
Only have a maximum of 6 links in the main navigation at the top of your website.
And if possible reduce it. Don't clutter up you main navigation with every link you have under the sun. Make sure it's the main links that your visitor will want to see and that you want them to see.
Here are my suggestions for the top navigation - you can pick and choose from these depending on what you need:
Home - If you need to reduce link in your main navigation you can remove the homepage. With Squarespace, and most website builders, you can access the homepage from any page by clicking on the logo. And most website visitors are savvy enough to know this as well since it's common practice.
About - Where you house your author bio, links to your social media, your Facebook group etc
Books (with a potential dropdown menu) - If you have a dropdown menu here you can also add your Reading Order page here as well as this is where users are most likely to search for it.
Contact - This page gives readers a place where they can contact you. you can use a form (Squarespace makes this easy as they have a form block you can use) and/or an email address. You can also add your social media links here and your Facebook group too. That way they have options on how they want to get in touch or simply follow you on the social media of their choice.
Blog - Optional for authors who want to blog. If you don't want to then don't include this page at all. Better to have no page than an inactive blog post page with 3 entries from 4 years ago :)
Shop - Lots of indie authors like to sell signed paperbacks from their website or a third party website like Etsy. If you have a shop them you can add a link to it in the main navigation. Just make sure to toggle on the option to 'open in a new page' when linking if you’re using a third party vendor. That way when your website visitor gets directed to the shop the link opens in a new window while still keeping your website up too. You want to make it easy for them to find their way back to your website if they forget what they were doing or get distracted.
Events - If you have any upcoming in person events where readers can meet you, then having an events page in your navigation is a good idea. This way they can check for any upcoming events quickly and easily without having to ask you. This page is optional. If you don't have any events or your events are outdated then you can remove this page. It's better not to have it then to confuse your visitors by thinking they can see you, only to disappoint them because all the events are from last year.
Bonus - This page is where you can host any links to bonuses you have for your readers. Some examples you may have are: bonus epilogues, extra scenes, novellas, quizzes etc. You can also use something like Bookfunnel to access these extras by linking out to them from this page. This would just be a space where your readers can see all of these options at a glance. Bonuses are also a great way to build your email list as you can require your site visitors to sign up to access them.
Only use a drop down menu if you absolutely can't avoid it.
The only time I usually suggest them for authors is when you write in series and want a drop down to each series page.
However, you SHOULD ALWAYS have an 'All Books' page at the top of that drop down menu so that any readers who aren't familiar with your work can browse quickly and easily without having to know exactly what 'The Witches of Vanfield Series ' are or 'Running Valley Series' etc. That way it will be easy for both the new reader (to you) and the experienced reader to navigate your site.
Place any links you need to have but aren't as important in the footer navigation.
No one needs a privacy policy in their main header or a link to a newsletter signup. If you've designed your site well, then that newsletter signup should be scattered throughout your entire website on most pages. And the privacy policy and affiliate disclaimer always, always goes in the footer. They need to be on your website but they don't need to be the main focus.
By thinking about how you want to lay out your website's hierarchy and pages before you start designing you can see how your website will flow and what pages you need to have, thus reducing how much time you spend creating your website.
It also gives you an opportunity to experience how you want your readers to interact with your site and design it in a way that makes it easy form them to access everything they need.
CONSISTENCY
One way to build trust with your website viewers is to maintain consistency of your design across your whole website. This means that you use the same colour palette, same fonts, same design elements etc throughout each page.
It doesn't mean that you have to use every single one of those elements on every single one of your pages but that you maintain consistency across your whole site by incorporating one or more of those features in some way.
For example:
You use the same two colours as backgrounds to your text across your whole website
You have a patterned design element that you use in the footer so that it can be seen across all of the pages of your website
Your buttons are the same colour and size across your whole website
Your photos are all in a circle shape instead of square
You need to look at your website as one entity and maintain consistency of your design across all of your pages. This creates a uniform look across all your pages so that the design flows from one page to the next.
While your website visitors may not consciously notice these things, they definitely do if it's off.
By maintaining this consistency you are reassuring your site visitors that you're trustworthy and ensuring they aren't turned off by a hodgepodge design.
RESPONSIVE DESIGN
It's 2022 - your website needs to be mobile responsive. If you don't have a mobile responsive website then you need to fix that asap.
Go - now - do it right now...
I'm not kidding.
The vast majority of users visiting website these days are on their mobile devices and not desktops. If you want people to actually use your website and stick around, then you need to have a mobile responsive site.
What does mobile responsive mean?
Simply put - your website's desktop design adapts to the size of the device it's being used on (eg. mobile, tablet etc) and looks good on all of them. It's clear, easy to read and navigate. You don't have any issues with font sizes being too small, menu's not being clickable and your visitors can click around your site with ease.
This is non negotiable in this day and age. Every person and their dog uses their mobile and if you've got a website stuck in the early 2000's it's time to step up and fix that.
Not to mention that Google actually indexes mobile versions of your website first and having a responsive website is a ranking factor in their algorithm. That means that if you don't have a mobile responsive design then your website is actually penalised in search results, which nobody wants.
The good news is that Squarespace makes this really easy to do.
They have built mobile responsiveness into their platform so all you need to do is check your website looks good in mobile view and adjust any site elements if needed.
They're actually really good at doing this automatically but it's always best practice to view your website in both desktop and mobile versions when designing as small elements can throw off the design. But they can usually be easily corrected as you design.
USER CENTRIC
One of the most important aspects of website design is designing with the end user in mind.
Now, don't get confused... that doesn't mean you, the author. It means your readers. The ones who are going to come to your website to find out more about you and your books.
You need to design your site in a way that is user friendly for them.
That means focussing on what they want to see and how they're going to interact with your website.
Will they want to know your most popular book or books? Highlight them on your home page
Will they want to see a complete list of all of your books? Create an All Books page where they can scroll through everything at a glance.
Do you have readers constantly asking which book they should read first or if your series are interconnected? Make sure to include a 'Reading Order' page and link it in your books dropdown menu, footer or as an item on your homepage.
By focusing on how your users are going to actually use your site you can create a website that will draw readers in and entice them to move around your website for longer, learning more about you, your books and taking the actions you want them to eg. signing up for you email list, purchasing your latest pre-order, joining your Facebook group etc.
So as you're creating your website, make sure to keep these 6 design principles in mind as you build it. Not only will it make your design experience easier to create but it will make it easier for your website visitors to navigate as well.
A win for everyone!
If you're in need of some ready made templates that have already taken all of these design principles into mind, then check out my shop - where I create author specific website templates where all you have to do is add your own content.
LIKE THIS POST - THEN YOU’LL ALSO LOVE…
Have I made you curious? You can sign up for a free Squarespace trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
