Any designer worth their salt knows that designing a website is much more than creating a visually attractive design in Photoshop. It is about aesthetics but more about the aesthetics and presentation of the content.

How many times have you seen a website with brilliant graphics that let themselves down with the display of the content? How many times have you seen design mockups in forums and thought “lovely design - shame about the unstyled lorem ipsum” ? I’m guilty too. I put my hand up and say “I did that.” Here’s an example from the early days of fadtastic:

Once you’ve got over the brightness, you’ll see a fairly aesthetically pleasing design. But looking deeper, you’ll see that the content is simply unstyled. It is content that doesn’t allow for great readability. I’d fallen into the trap of designing the website, but not the content. But the content is the website.

Not content with your content? A few tips:

There have been a few key philosophies that I picked up to get me out of this trap. Why not share them with you?

(I’m not saying that fadtastic is perfect here. It isn’t. It is just that realigning fadtastic over the last couple of years has taught me how to improve the design of content.)

The following philosophies show you how to design for content. Part two will show you how to use other elements to improve your content in a more practical way.

Design from the inside

I used to design a webpage rather methodically but also rather ignorantly. The earlier image shows that I used to place a banner, logo and navigation into the design, line it all up and then ‘plonk’ the content in. That’s not designing, that’s playing with Lego. A much more content-friendly way would be to design from the inside. I mean this in two ways:

1. Think about the inner pages (e.g. articles/products) first when starting out on a design. This is often where there is more content and functionality (e.g. comments/product reviews).
• The rationale here is to start thinking about content-heavy pages right from the word go. Often, the homepage is light on content and your design therefore could be based on very little content.
2. Before opening your design tool of choice, get the paper out! Note down all of the types of content likely to appear on your inner pages. Now start to wireframe the design, ensuring that the content areas have their pride of place.
• Using this method, content is thought of as the integral part of a web page. It will not get ’squashed in’ at the last minute. This, in my humble opinion, already gives the designer a massive head-start at creating a design that truly gives the content the love it deserves.

Thinking simple often wins the day

Once content is at the forefront of the design process, there is still one more trap to avoid. It has to do with going over-the-top. I don’t mean to sound boring here, but this is important. With such emphasis on the content, it is easy to think “I must really spruce up the content. We need background imagery, shadows, gradients, patterns, etc.” NO! We don’t want the content to become unreadable. We want it to be a joy to read but not look like someone threw up every design trend onto the page. By all means use one or two of the aforementioned effects for different content elements, but use them wisely.

Summary

And that is what we’ll learn about in Part 2. Beautifying content without going over-the-top. I hope you learned something today. I learnt that it is possible to write an article on content without using the phrase ‘content is king.’ ;)

Feel free to comment and throw in any tips you have on the design process in relation to content and its importance. Hold back those styling tips for now until Part 2 comes along - we’ll be looking at how the big online newspapers have styled their content - which work and which don’t.

Share This

↑ Jump up to the comment form

The posts Content Extraction, Welcome 9rules readers!, Design Your Content ~ Part 2, Design over content, or is it content over design?, Who To Design For?, are related to this post.

Or why not take time out to find out about the author of the post.