The 5 Key Fundamentals of WordPress Site Design

This is Part I of a series that will be published over the coming days.

Art is, by its very nature, is subjective. That is how work on completely opposite ends of the spectrum can both be lauded as beautiful.

Vincent Van Gogh
Some prefer a simple landscape...
Pablo Picasso
...whilst others have altogether different taste.

If you are a WordPress developer, you should treat your work as art. After all, anything that has an element of creativity in it can be thought of as artistic, and a great deal of creativity goes into web design.

Why You Need To Restrain Your Creativity

However, you must not allow your creativity free reign. Any self-respecting artist does not allow restrictions to be placed upon their work, but that is exactly what you must do. Because at the end of the day, you are designing something for an end user. Visitors will appreciate a beautifully designed site – but only when the design does not interfere with the usability.

So you will not start with a blank canvas, but we’re not talking about paint by numbers either. website development takes place somewhere in-between those two extremes. In order to ensure that the website you are designing does not get lost amongst the noise, you must follow some key design fundamentals.

In Case You Thought We Were Missing Something…

Before we got onto those fundamentals, a quick note – we will not be talking about navigation today. Whilst you could make the (valid) argument for navigation being an intrinsic part of design, we decided that the subject deserves a separate article all of its own. That article will follow in the near future.

With that out of the way, let’s take a look at the 5 fundamentals of WordPress development.

1. Design For Your Audience

Let’s look at two very different examples of good web design. First, the UK site for popular kid’s channel, Nickelodean:

Nickelodean

And secondly, Apple.com:

Apple

These two image-driven sites have been deliberately picked to show how the target audience can drastically affect the design of a site, even when the presentation-style is similar (i.e. highly visual).

Nickelodean’s site probably gives you a headache. The combination of contrasting bright colors, streaming video and tightly packed content is enough to make any self-respecting adult turn away.

You probably love Apple’s site though. It is clean and uncluttered, with no wild colors or obtrusive auto-play videos.

The above is no coincidence – Nickelodean’s site wasn’t designed for you, but Apple’s was. Before those designs took shape, the developers would have put a great deal of thought into which demographics they were targeting.

Children Playing
I'm sure you can figure out which site these two kids would prefer.

You have probably read plenty of design blogs that preach the gospel of clean and minimalistic web design. That is all well and good – when you are catering to people who like their websites clean and minimalistic. If Nickelodean’s site was a simple two column design with plenty of whitespace and text, you can be sure that their bounce rate would climb.

It is all too easy to design a website for yourself, but that is only a good thing when you happen to be targeting users that are like you. When designing a website, always make sure that you have the correct demographic in mind.

2. Make It Memorable

Any website you design should be eye-catching. That may sound like an obvious piece of advice, but given the glut of cookie-cutter websites out there, some people clearly aren’t paying attention.

Take a look at Kissmetrics’ blog:

Kissmetrics

It may not look particularly striking to you, but a design does not have to be striking to be memorable. What sticks in the mind of an 18 year old college student will be different to that of a 40 year old graphic designer.

The above design, in particular, would be striking to web developers and marketers. Developers would be intrigued by the uniqueness of the design and the method by which it comes together. Marketers would be eager to study how the sparse design converts (especially with reference to the signup form on the left).

Now guess what types of people the Kissmetrics blog is trying to target. That’s right – web developers and marketers.

3. Don’t Overwhelm

Funnel
Funnels - not just useful for building awesome water rides.

You’ve probably heard of sales funnels before. The concept is simple – you start off with X visitors, which turns into Y leads, which then turns into Z sales. The effectiveness of your “funnel” dictates the ratio of X:Y:Z.

When developing WordPress sites, you should always have your “design funnel” in mind. Traffic has a value, and any website with purpose wants to do something with that traffic when it arrives. The aim could be to simply entertain, or collect an email address, or get a sale. Whatever that aim is, the site should be designed with it in mind.

A great example of a design funnel can be found at autoglass.co.uk:

Autoglass

Autoglass is the UK’s leading vehicle glass repair and replacement company. The site has one clear aim – to convert visitors into sales.

People don’t visit websites like autoglass.co.uk to be stunned with design wizardry – they just have a problem that needs to be solved. The design facilitates this by presenting the relevant information in a clear and well-ordered manner.

Whilst copy has a huge part to play in this process, it must work in harmony with the design in order to be effective.

4. Don’t Discriminate

One upon a time, designing a website that worked in both Netscape and Internet Explorer caused many headaches. Nowadays, we have a rather different problem when it comes to designing websites that display correctly across multiple platforms.

Whilst cross-browser compatibility has improved a great deal in recent years, internet access via mobile devices has increased exponentially. It is no longer a case of designing a website on the assumption that the user is using one of two browsers at a 800 x 600 resolution. The game has changed. According to this article by DailyTech, the number of wireless users will surpass that of wireline users by 2015.

iPad & iPhone
Pictured: the future of web browsing.

WordPress sites should be designed with the whole spectrum of potential browsing devices and software in mind. The key is “responsive design” – ideally, your site’s theme should adapt to the device that it is being read on.

If you design a site without mobile users in mind, you will alienate a significant percentage of your visitors.

5. Make It Quick

Last but by no means least, we come to the topic of speed.

Ferrari Enzo
Ideally, your website should be able to outrun this.

Your WordPress site lives and dies by the speed at which it loads. The average web user takes just a few seconds to decide whether or not they want to stick around on a site they haven’t visited before. You only need to consider your own surfing habits to quickly realize that. If those few seconds are taken up by the load time, the user will never need to make a decision based upon your design – they’ll leave before they have a chance to see it.

But that’s not all. Way back in April 2010, Google announced that site speed is a relevant factor in web search ranking. That’s right – the speed at which your site loads can affect your placement in Google.

Whilst it may seem like an intangible factor, site load speed is incredibly important to the popularity of your website.

One of the main site speed issues you will come across as a WordPress developer is caching. Whilst it is quite incredible that the issue hasn’t been addressed directly within the WordPress source code, alternatives abound (primarily in the form of WP Super Cache and W3 Total Cache).

Website Design = Creativity + Structure

So there you have it folks – the 5 key fundamentals of good WordPress development.

If you can lay your own creative talents on top of the above fundamentals, you will be well placed to produce great websites. The key is to remember that beauty comes after usability. Web users are an impatient lot, and will not forgive indulgent web design.

Creative Commons images courtesy of Ed Callow, Yutaka TsutanoAndrew BorgenMarlies BoutenNathan Laurell and Enrico Strocchi

Tom Ewer

Tom Ewer is the founder of WordCandy.co. He has been a huge fan of WordPress since he first laid eyes on it, and has been writing educational and informative content for WordPress users since 2011. When he's not working, you're likely to find him outdoors somewhere – as far away from a screen as possible!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>