The Criteria Series: 12 Factors In the Creation of an Aesthetically Pleasing Weblog

The fourth instalment in our ten-part Canadian Weblog Awards Criteria Series is about the importance of weblog aesthetics. 40% of the jury's criteria for judging each weblog in the Canadian Weblog Awards is design-related, and the aesthetics element plays an incredibly important role in the life your weblog.

I have been asked why I have placed an emphasis on aesthetics specifically. Not everyone is a designer, and, if content is king, why demand that weblogs in the Canadian Weblog Awards be pleasing to the eye? I agree, in part. Content is king, but I would also argue that the appearance of your weblog is part of its content, and it directly influences how readers will approach your content.

The appearance of a weblog acts as an invitation to its main content, and the success of a weblog often relies on the execution of that invitation. Your weblog's design is the first thing any new audience member sees. It is the first impression your weblog makes, and it can make the difference between someone engaging with your content or passing it by without a second look.

An important question to ask yourself is whether or not your website offers an accurate description of its content and has an appearance that is pleasing to look at. Is it a terrifying mess of animated gif images? Does it have automatic sound that plays upon loading the website and a background so insane that it interferes with the navigation? Does everything on the page look like it's yelling at you? Is your website about loving Jesus but looks like it's about gay pride?

When you look at your weblog critically, does it really say what you want it to say, and does it invite the reader in? The following twelve points are helpful guidelines to creating a space that is both appealing and effective.

12 Factors In the Creation of
an Aesthetically Pleasing Weblog

1. Repeat this mantra: simplicity, simplicity, simplicity. The website design should remain simple and uncluttered enough that it does not distract the reader from the main content. Widgets, images, etc. that are extraneous to the main content should be removed in order to help the reader understand where your focus lies.

2. A major component of simplicity is white space. Do not be afraid of white space. White space, the blank space between elements, is as important as any of the other design elements, if not more important, because it not only helps to frame the space, but it also reduces the cognitive load for your readers by giving their eyes a place to rest. It is a primary design element that is all too often overlooked.

3. The different elements' positions, colours, contrast, and sizes on the page should show the reader's eyes where to go. Think of it as creating a map that guides the reader's eye through your website.

4. Create a masthead, or have a masthead created for you, that you can trust to make a memorable and positive first impression.

5. The background should remain in the background and not overtake other elements of the design.

6. The text font should be large enough to be easy to read but not so large that you feel as though you are looking at a grade one reader.

7. The text should be a colour that is in sharp contrast to the background colour for easy readability.

8. Your navigation system should be easy to find and use, and it should be consistent from page to page within your weblog.

9. Post titles should stand out from the main content so that they can be scanned easily.

10. The width of the main content should be narrower than it is in a trade paperback so that it is easy to scan from line to line.

11. The link colours, if they are different than the default blue, should be coordinated with the weblog template's colour palette.

12. Separate pages within the weblog, if they differ in design from each other, should each bear repetitive design elements so that it is apparent they belong to the same website and allow the reader to have a consistent experience.

Useful testing tools:

Color Contrast Check Tool — "The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast 'when viewed by someone having color deficits or when viewed on a black and white screen.'"

Crazy Egg — "Crazy Egg’s Confetti and Heatmap features are simple and affordable heat mapping tools that allow you to visually understand user behavior."

Colour Blindness Checker — Upload a screenshot (1K or smaller) of your website and see how it appears to people with different forms of colour blindness.

By designing a weblog that is both unique to you and visually appealing, or by having one designed for you (we can't all be designers), you create not only an attractive space to host your content but also a space that complements what your weblog is about and invites your readers in for more.

What elements of website design are important to you when you visit other weblogs? What elements attract or repel you? Do you have any more advice for creating an aesthetically pleasing website?