Not a member? Why not join us or log in? (No more hassle filling in comments, less obtrusive ads and asides.)

Design your content ~ Part 1

Posted by Andrew Faulkner on March 25th, 2007.

Andrew Faulkner is the admin at fadtastic. Andrew prides himself on standards-based, accessible web design in the city of Nottingham, UK. He believes in aesthetically pleasing accessible design and that 'standards compliant does not equal boring.'

fadtastic.net/

Andrew Faulkner has posted 211 articles.

spacer RSS Feed for Andrew Faulkner

Full Profile →

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:

spacer

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

Make A Comment

( 27 so far )

blockquote and a tags work here.

27 Responses to Design your content ~ Part 1

Comments RSS Feed

I agree wholeheartedly. I must admit to similar failings as well in the past.

Without going into detail I think a great deal is to do with not understanding how to work with type. Graphics are nice blocks of content that can be lego’d into place whereas type is a fluid substance that needs to be directed, rather than controlled.

Andrew
March 25th, 2007
#

Good post. I started taking this approach a few months ago about designing from the inside-out, focusing on the content. I often think about typography first.

Things have always come together a little better when I have the content laid out and can design more aesthetics around the content.

J Phill
March 25th, 2007
#

My design inspiration is out for now :( I think I am gonna grap the pen & paper for the 2nd time in my life =P

YPM
March 25th, 2007
#

Excellent point. When I’m designing a site, I tend to focus most of my energy on the rather content-light home page because I think it’s important that the user get a feel for what the site’s about and what’s available there as soon as they arrive.

But actually, they’ll be spending the majority of their time on the *content* pages, enjoying the content. It makes sense to put just as much, if not more, effort into making the content pages attractive and easy to use and the homepage.

NatalieMac
March 25th, 2007
#

Great point. I am naturally drawn to read sites that design the content while still making it readable. Things like icons and image captions can go a long way, especially for readers who skim rather then read every article word for word.

Ted Goas
March 25th, 2007
#

Design guy’s head won’t always focus on whats important. You’ve certainly got a point there.

What’s a design for if noone takes a second look at the page for reasons of contentlessness (what!).

Great job. It’s of course obvious in a way but one doesn’t get it anyway - so thanks!

marian
March 26th, 2007
#

It’s good to see how many people agree here. Does anyone disagree with this philosophy?

More interestingly, who’s guilty of falling into these traps? Stand up and be counted!

Andrew Faulkner
March 26th, 2007
#

I could not agree more with all the points mentioned in this great post.

most people visit a website to read about what they were looking for and not look at how beautiful the website is.
regardless of how pretty the site might be if the users cant find what they were looking for within 10 seconds they will get frustrated and click off.

a lot of web designers tend to put too much emphasis on creating beautiful graphics and neglect the presentation of content.

Cristian
March 27th, 2007
#

You need to organize the whole site. And use language that supports the content.

Johan
March 27th, 2007
#

37signals go on about a similar idea in their “Getting Real” book. They call it epicenter design there, starting from the most important part of your page/site (the content, in most cases) and working outwards to the usual page furniture.

I think you said it better though :)

Steve
March 28th, 2007
#

Steve, I’ll have to take a look at that book. Thanks.

Andrew Faulkner
March 28th, 2007
#

Hello,
I’m working in a french comm’ agency and we are creating standards compliant website (we try…).
And I’m fighting every day to make us work as described in this article. So many thanks ! It’s good to know we are not alone thinking this way. Waiting for part 2…

Franck
March 30th, 2007
#

[…] Fadtastic’s guide to Designing your content […]

Notebook » Blog Archive » Sunday inspiration.
April 1st, 2007
#

Good article.

I think the moment a designer starts thinking properly about layout, type and content rather than just throwing together what “kind of looks nice” they achieve much greater designs.

Forcing yourself to design around your content automatically puts you in the mindset of considering what’s really important in the design. You find yourself dropping features that you realise aren’t needed or adding features that you’d barely considered before.

I’m working as a web developer in a medium-sized company and my team is frequently frustrated by being asked to develop complex bespoke web applications without actually seeing any of the content. It’s really hard to develop without fully understanding the content.

Andrew Ingram
April 2nd, 2007
#

The site looks great ! Thanks for all your help ( past, present and future !)

morganusvitus
April 5th, 2007
#

[…] Design your 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 - by Andrew Faulkner. […]

Best of March 2007 | Smashing Magazine
April 11th, 2007
#

[…] Design Your Content Part 1 Andrew Faulkner of Fadtastic argues that examining the content of a site and designing from the […]

Mindtracks » Web design tips
April 11th, 2007
#

Nice approach about design from the inside. I was forced numerous times to do so … after I spent weeks before designing from the outside. Awaiting part2…

Robert
April 13th, 2007
#

This is definitely a great article for me. Thanks!

Matthew Sanders
April 17th, 2007
#

[…] Design your 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 - by Andrew Faulkner. […]

Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007
April 18th, 2007
#

[…] rusetti. Vaikka Andrew Faulknerin / fadtasticin artikkelisarjan Design Your Content (Part 1 | Part 2) jälkimmäinen osa ilmestyi vasta huhtikuussa, on sarja kokonaisuutena maaliskuun […]

am Design » Arkisto » Artikkelikatsaus: Maaliskuu 2007
June 10th, 2007
#

[…] 12, 2007 Web design tips Posted by sharonb under Webdesign  In Design Your Content Part 1 Andrew Faulkner of Fadtastic argues that examining the content of a site and designing from the […]

Web design tips « Mindtracks
August 23rd, 2007
#

how can i manage content for a website is there tutorials resources to design how the information will apear i wana know design wise web content

tariq
September 25th, 2007
#

Tariq,

Not quite sure I understand this bit:

"i wana know design wise web content"

Maybe expand a bit so we can help? 

Andrew Faulkner
September 26th, 2007
#

pet usa petplan insurance

petplan pet usa insurance
February 7th, 2009
#

Great Article!  Desigh And Content are inseperable…There is plenty of great content on the web that desperatly need it’s counterpart…design. When Thinking of defining "content"…think attractive & fuctional and fun to use. 

Azstrel Clinton Ernest Cates
March 2nd, 2009
#

[…] Design your 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 – by Andrew Faulkner. […]

Geek is a Lift-Style. »Archive » Best of March 2007
June 17th, 2010
#

↑ Jump up to the comment form

Related In Some Way, Shape Or Form

The above post has obviously kept you amused. Why not discover similar material:

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.

Related searches:
content design andrew faulkner fadtastic
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.