Step 10: Site design (content is king, design is queen)

E-mail
0 comments
Profile picture of Paul

Posted 03 August 2011 19:16

by

This is part of the series ‘Step-by-step guide to getting started as a food blogger’.

On your food blog it is important to remember that 'content is king and design is queen'. This means that users will only be attracted to your food blog if there is good quality content on it, they will only stick around if the content is easy to find and the design is good.

A site’s design needs to be relevant for these purposes:

  • Brand recognition
  • Consistency
  • Usability
  • Readability
  • Colours
  • Clear layout
  • Navigation
  • Mouse-over
  • Positioning of features
  • Calls to action
  • Process flows
  • Funnelling
  • Monetising

Brand Recognition

Users should be able to recognise the site that they are on and it should stand out from other sites in terms of being instantly recognisable. A good brand design will stick in someone’s mind, as well as make it easy for them to ‘pick up from where they left off’ when they next return to the blog.

The brand design includes the language used, tone of voice, fonts (headings and body text), colours, footer, menu, side-bars, page layout, etc.

Consistency

The blog should provide a consistent look and feel throughout the whole site. This ensures that the user finds it easy to read and navigate around the site.

Usability

In terms of usability, your blog needs to suitable for its target audience.

If your blog has a wide audience, it should be very easy to use and its information should be displayed very clearly. If your blog is targeted for a technical audience, or an audience that knows the subject very well; your blog could have a more ‘busy’ screen, containing more information.

The information on the blog should also be relevant to the target audience. If your visitors are from different countries, they might be used to seeing measurements in different values e.g. 100g butter (metric) or 4oz butter (imperial).

Readability

A blogs visual design should not be at the expense of making the content hard to read. The colour of text should not be similar to the colour the background it is positioned on. Nor should the background be an image or a gradient colour. Contrast Rebelian gives some good information and examples of these issues.

Text should also be large enough to read. If you’re unsure if yours is okay, find an old person who wears glasses, sit them in a dimly lit room, in front of a computer with a high resolution video display and ask them to read your website. If they have to squint or move their head close to the monitor, you probably need to make the text a bit bigger!

Colours

Colour is an important part of the design. Colour can give your site a sense of mood, seriousness, playfulness, fun, boldness or even intrigue. It also effects the readability, brand, familiarity, consistency and navigation.

The colours on your blog should complement each other – they should not be in conflict, appear garish or ‘shout’.

A site should have 3-4 colours and these should be used in a consistent manner. e.g. title, headings, header, footer, background.

Some great websites to help you with colour inspiration and decisions are:

As well as designing a blog for viewing on a computer, you should also think about how it will look when printed. By default, most web browsers do not print backgrounds.

Clear Layout

Visitors will spend more time on a site that is easy to read and navigate around than one that isn’t.

When people buy a magazine, they have invested time and money in purchasing the magazine, so they generally take time out to read it from cover to cover (or at least they look at every page to see if there is something worth reading). Blogs are not like this – users will not visit every page on your blog, nor will they scroll to the bottom of every page they find on it.

Users want to find information quickly and easily by skimming the pages for content. This is why the layout has to be clear with titles, headings, sub-headings, paragraphs, images, navigation, featured content (e.g. links to social media) and adverts all clearly laid out.

Navigation

Navigation should be clear and simple. If menu items are hidden, the user might not find them.

Mouse-over

Touch screen devices (such as the iPad) bring a new element to design. With a PC you can provide a mouse-over menu or display when a user hovers over a menu or an image with their mouse – but with an iPad, you can’t mouse-over items, you can only click or long-click (equivalent of a right mouse click).

Positioning of Features

On your blog you might want to add a number of features including:

  • Associated links (to RSS feed, other blogs, food websites, events, etc.)
  • Links to your social networks (e.g. Facebook, Google+, Twitter)
  • Newsletter sign-up form
  • Twitter feed
  • etc.

These should be placed in a fixed place on your blog, ensuring a consistent look and feel. They should also be placed somewhere where they will be easy for the user to find, but not obtrusive as to make the site hard to read or navigate around.

Calls to Action

Each page of your blog should have a primary purpose, as well as at most 3-4 primary ‘calls to action’.

A call to action is an action that you want the visitor to perform from the current page. Examples of these are:

  • Add a comment
  • Print the recipe
  • Share the blog post/recipe (via social networks or e-mail)
  • View the next/previous blog post

Process Flows

Process flows are defined actions that a visitor needs to complete in order to carry out a task. For example, to add a comment the process could be:

  • Authenticate with a social network (Facebook, Twitter, etc.) and then post a comment
  • Authenticate with another service (e.g. Disqus) and then post a comment

         Enter free text for the e-mail and URL (not verified) and then post a comment

Funnelling

Funnelling is the process in which you drive visitors through a set route. For example if you have an online shop, you want users to:

  1. View your products – online shop
  2. Select a product – product page
  3. Add a product to the shopping basket – order page
  4. Add payment information (credit card, PayPal, etc.) – payment details page
  5. Add personal information (name, e-mail address, telephone number, address, etc.) – address page
  6. Confirm details before placing the order– confirmation page
  7. Review the order – order review page

Monetising

If you plan to add adverts to your food blog, you need to decide where to place the adverts.

Some common places are:

  • Top banner – this gets attention, but can be distracting for the user as they may confuse it with the blog heading or navigation
  • Right hand side of the page – this is a good place as the readers’ eye will usually read content on the left hand side of the page first, followed by the right hand side of the page. This means that the adverts will not be too obtrusive
  • Above the first paragraph – this is an okay position, as long as it isn’t too obtrusive. The visitor should be able to clearly see that it is an advert and they must also be able to clearly see where the content that they want starts
  • Below the 2nd/3rd paragraph – this is a good place because the visitor is already engaged with your blog content and will be somewhat committed to skipping past the advert an continuing with the rest of the content
  • Bottom of the page – not a good place in terms of visibility as most visitors will not read to the bottom of the page
  • Footer – not a good place in terms of visibility as most visitors will not read to the bottom of the page. Plus the advert needs to be clear, so that the visitor does not confuse it with the footer content or navigation

Be Clear of Distraction

A recurring statement that I have mentioned is that your design should complement the content, not hide it or fight with it. In other words, it should be not be distracting. This means that these should not be used (unless relevant):

  • Animated images
  • Rollover images (as sometimes seen on adverts)
  • Video
  • Audio

Getting a Site Design

As with the logo, you can approach a design company or ‘design marketplace’ for a blog design. Again, Sortfolio is a good starting point to find design agency and 99designs may also be worth a try as you can get your money back if you don’t like any of the designs being offered.

There are also a lot of websites that sell ‘off the shelf’ designs for blogs. These designs usually come with a few different colour schemes.

When writing a design brief, or buying a design ‘off the shelf’, ensure that the design will have the ‘space’ for the features you want. Some WordPress themes for example are designed to have spaces for 2-3 plugins (e.g. twitter feed, news feed, etc.).

Some places to get WordPress site designs:

Summary

Get creative and be innovative – but remember that design should enhance (not compromise) readability.

Step 11: Meet other food bloggers

Post a comment