Designing with content in mind

Last week I read an article titled “If Content is Really King, Then What Is Design?” Not only did this article inspire a ‘Self-Expression Fridays‘ poster design, but it also had me thinking: If content is king, what can the design do to compliment the “king,” or in this articles case, the content?

If what you have to say on your website is so important, then what can we do to make it a more enjoyable experience and better compliment the content with the way we design for it?

content is king

Appropriate typefaces

Typography is not about picking a font that looks cool, but rather choosing a typeface(s) that compliment the medium and purpose. With recent advances in web typography (ahem, Typekit) we now have more control then ever over what typefaces we use for our content — but with more control, we must be even more careful and have a better understanding of type.

Web typography tips:

» When choosing a font for prolonged reading, try something with a larger x-height (for smaller body copy) or study serifs for improved readability and reader comfort.

» Choose typefaces that compliment the content, look and layout

For more on font pairing and web typography:

Breathing room

Websites or blogs with tons of reading require breathing room — or better yet, remember that white space is your friend. It’s difficult to read and stay focused on any information that is, for example, being crammed up against ads, has tight line spacing, or has cluttered design elements.

Don’t worry, it’s alright for users to scroll vertically to get to information. Don’t feel like you need to cram it all in there.

Here are a few design tips to help your content breathe:

» Improve your line spacing of body copy: a good rule of thumb is 1.5 em line-spacing of your body copy font size.
» Remember, white space is good and less is more

Websites with good breathing room:

Establish an information hierarchy

When it comes to readable content, one thing to remember is  people do not like to read — they like to scan and get the information they want quickly. Establishing a strong hierarchy allows the reader to easily scan your website, blog, article, etc. for information without spending too much time on information they do not want to see or read.

A hierarchy guides your readers around the page and creates a more enjoyable experience for them.

Allow for digestible information

If your website or blog has length passages of information or words, try designing in a way that breaks up the content into smaller, digestible blocks of text. A possible solution could be having a home page with short excerpts of articles/information that lead to the entire story by clicking on a link.

Use color and use it well

Color should not only be used to create a mood, but also to draw attention to specific areas or text. Websites that use color sparingly and well typically have great results because of it. It helps readers scan and draws attention to important information.

A few tips on color usage on the web:

» Reversed out (white) text on dark backgrounds can make for difficult, prolonged reading.
» Using too many colors can distract the user and can cause confusion over important content/information
» Use color to communicate a mood

Contrast and call to action

Contrast and call to action allows information to be broken apart and also (like a good hierarchy) easily scan-able. Contrast can be used in typefaces as to separate headlines from body copy, while it can also create areas of darker/brighter color to draw attention or call upon a certain area of your screen.

Contrast can also be used to create tension and set a mood for the content. Try complimenting your content with appropriate typefaces or color. Also note that establishing call to actions early on in the sites preliminary stages is important content management and structures the users experience.

While all of the above factors seem simple in practice, it is often easy to just begin designing and forget about the content and medium in which we are designing for. Remember, content is king, but design is the land of which the king rules. If you have the above thought out and planned before you start designing it will pave the way to a more successful and relevant design.



Discussion and Comments

+ Add to the discussion
  1. Social comments and analytics for this post…

    This post was mentioned on Twitter by iBlend: RT @TDCBrand: Designing with content in mind http://bit.ly/6E4tjt...

  2. [...] The rest is here: Designing with content in mind [...]

  3. Preston Lee says:

    Excellent Post, Brian.

    I have recently been extremely interested in user experience and usability on web sites and will soon be creating a new theme for the blog. These suggestions and insights will definitely help me along the way.

    Thanks.

  4. Eric B. says:

    Some excellent tips here. Content is very important, but a design that doesn’t complement the content makes it seem less important.

  5. Charles says:

    Information is data structured, given a context, and presented in a way its audience can use. Otherwise, content is just words … noise. You hit the nail on the head touch on “establishing an information hierarchy.” This is where a print/graphic/web design can really shine. It’s far more than just adding cute and clever graphics.

  6. Thanks for the tips Brian. I will make sure to put it to use on any future sites that I design. I really like all the tips that you have been giving on the Design Cubicle. Very practical!

  7. [...] article by Brian Hoff talks about designing with your content in mind. In this post he talks about the effects of typography, use of colour and [...]

  8. Noel Wiggins says:

    I was about to stop reading my favorite blogs from my favorite bloggers and said go ahead and read one more, and this one gets the big cookie award for today. This is an inspiring process to consider, when starting out any new design project…

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  9. [...] Designing with content in mind [...]

  10. [...] Designing with content in mind [...]

  11. Lee Brown says:

    “…better compliment the content” should read “better complement the content” ditto “that compliment the medium and purpose”, “Choose typefaces that compliment the content, look and layout” and “Try complimenting your content with appropriate typefaces or color.”

    Should be complement with an “e” in every example listed above.

  12. Josh says:

    Excellent post with several pertinent points.

    It is always imperative to bridge the gap between content and design. I for one see content as part of design – not only in an aesthetic sense (post alignment, colour combinations etc..) but more crucially as an entity that informs our visual perception.

  13. Nik says:

    Great article. I completely agree. The design has to match the content or things just look off. This is another one of those small things that contribute to an awesome experience.

  14. Mike Smith says:

    Nice article. I am bookmarking it for future reference on the next sites I build. And thanks for mentioning the article I wrote on designbump, I am glad it got your mind moving – that was my main drive behind writing it.

  15. [...] Designing with content in mind addthis_url = ‘http%3A%2F%2Fwcs.wayne.edu%2Fblog%2F2009%2F12%2F11%2Ffriday-links-the-snowfall-edition%2F’; addthis_title = ‘%5BFriday+Links%5D+The+snowfall+edition’; addthis_pub = ‘nickdenardis’; [...]

  16. [...] Designing with content in mind [...]

  17. very nice advices thanks man

  18. I read on a blog somewhere (phew forget which now) which suggested on coming up with new designs by deciding on your typeface FIRST, then grow your design around that foundation.

  19. Thanks for the great advice, I think choosing the right typeface, colours and structure are paramount. Content may be king but without the right design it’s worthless in my opinion.

  20. Are Stamps says:

    information hierarchy.. nice concept. That’s very important! People allways has to find the thing quickly.

  21. Besides the content is important a clean explanation. Here there is.

  22. dresses says:

    Thanks for the great advice, I think choosing the right typeface, colours and structure are paramount. Content may be king but without the right design it’s worthless in my opinion.

Brian Hoff
About Brian Hoff: Designer, Writer and Speaker

I’m a graphic designer living in Brooklyn, New York who loves creating compelling and useful websites and memorable interactions across the web. When I’m not designing I can be found writing, speaking and occasionally part-time teaching at colleges — all on the subject of design. I started this blog to share my passion and experiences with designers and clients. I'm most active on Twitter; say hello:


POWERED by FUSION