What Should You Know About Content Before You Design?

Posted: 23 Aug 2012 05:30 AM PDT

Content informs design. You can’t design a website without an understanding of what content will be on it. You don’t need and likely can’t have every last piece of content written before you get started, but you should at least know as much as you can about that content before you can design a site.

That’s the situation I was in after thinking through my business goals and the specific goals and constraints for the redesign. I knew I would reuse most of the content that was already here, but also knew some things needed to change. I’ve already mentioned how I wanted to refocus the services I offered. That alone told me is was time to rework the information architecture on the site.

The path from content to design involved 3 distinct phases.

Determine Content
Identify Page Types
Identify Content Types

Determine Content

I’ve talked about my process for determining what content should appear on a site before and will refer you to that post for details. The general process is one of brainstorming every possible page of content that might exist and then organizing and pruning over an iterative process.

Since this was a redesign, the initial brainstorming began by creating a list of all the existing content. To that I added anything I thought I might want to include in the new design, along with some things I might include somewhere down the line. A day or two later began the process of organizing and pruning.

Throughout I kept in mind that I wanted the global navigation to be simple with as few choices as possible. As you can see I eventually settled on 4 global links split equally between the service side of the site and the blog.

About
Work
Archives
Notebook

I envision it more like an artist’s notebook filled with thoughts and explorations that aren’t always as complete as a finished tutorial

The main things I wanted to include on the service side were the basic information about me and the site, a way to contact me, a mention of what I do, and a portfolio of sites I’ve designed. All of these things fit pretty well under the two headings About and Work.

I debated making Contact a global link, but since I want to transition toward products I decided not to. The link to the page is in the About section sub-navigation and there’s a big button to contact me on all the pages inside the Work section.

The blog links are divided into past and present so to speak. Since I want to place more emphasis on the blog it made sense to make older blog content easier to find. Thus the Archives page. I’m still working on the page, but for now every post is listed under its category and you can filter the page by year, with more ways to filter coming. I’ve also tucked a search box on the page.

The only real difference with the Blog itself is renaming the link in the navigation to Notebook. The main reason for the change is to remind me of the direction I want the blog to evolve.

I’d like to evolve the blog beyond a couple of tutorial style posts a week and include other types of content. I envision it more like an artist’s notebook filled with thoughts and explorations that aren’t always as complete as a finished tutorial. Ultimately I’d like the blog to be a mix of the finished tutorial and the unfinished thoughts in progress.

One thing you’ll notice is I haven’t included the typical Home link in the global navigation. I toyed with calling the About section Home, but decided instead to make the section clearer as to what’s inside and have the logo be the link back to the home page.

I think it’s convention enough for people to find their way home and I also think once people are deeper into the site there isn’t a great need to direct them back to the home page, which mainly directs them back inside. All the individual posts have a breadcrumb trail of links, including one back to the home page.

Identify Page Types

Knowing what content I planned on included and might include later led me to identify the different page types across the site. Each of these page types would necessitate its own design and development so these were important to identify.

Single blog post
Main blog page
Main archives page
WordPress archives (search, tag, category, etc.)
Typical non-blog page (About, Contact, etc.)
Portfolio page (which I expected to be different from the typical page)
Contact (Again thinking this would be different)
404 page
Home page

These are the 9 different page types I originally identified, though several are ultimately similar. In an effort to save some time only the Home page (among the non-blog pages) received a design different from the typical. The blog archive pages (search, category, tag and 404) all ended up being a single design similar to the main blog page.

One of the goals I didn’t mention last week was a desire to make many of these pages unique. In fact I’d ideally like every page outside the blog to have its own unique aesthetic based on its content. For now, and again in the interest of time, I decided to hold off on this uniqueness in order to get the design live.

Over time I also expect the blog itself will have some different page types. Those unfinished notebook posts will probably look different than the finished tutorials that look different from demo posts or screencasts.

Holding off on some of the uniqueness for now reduced the 9 page types to 4. Single post, main blog/archives. non-blog page, and home page.

Wireframe showing different types of content

Identify Content Types

After identifying the different page types I needed to design, I set out to identify the different types of content each of these page types would hold.

For example the archives page type might include:

logo
tagline
global navigation
search box
list of post titles linked to posts
rss icon/subscription form
ads
copyright
social buttons to connect with me

Elements like the logo and the global navigation would naturally be on every page and so I removed them from the page type lists and added them to a new section called boilerplate. .

Here are the content types I ended up with for the single blog post page type after removing what would be in the boilerplate.

post title
post deck
post content
comments
post author
post date
posted in/tagged in
pagination – newer/older
social sharing buttons
related posts

As you can see not all of these elements are included in single blog posts. This was the original list though, and it pointed me toward what would be included in the design. I could have expanded comments further with comment author, comment date, comment body, comment author avatar, but I didn’t.

I’ll get to how I used these content type lists next time. For now suffice it to say these were the items I would need to include in the design of the boilerplate and the specific page types and with them I was ready to begin sketching potential design solutions.

Summary

You may have noticed that up until this point my entire design process has been making notes in text files. I’ve yet to take pen to paper or opened anything resembling an image editor.

Before you can design something you need to know a few things.

What problem are you trying to solve?
What needs to be included in the design?
What won’t be included?
What is the design trying to achieve?
How will you determine if the design is successful?

I began with business goals and let those inform specific design goals. I set some constraints and thought about an aesthetic concept. I spent a couple of weeks working through what content would be included and what content wouldn’t be included. Based on the content I determined what page types would need to be designed, and the types of content that would appear on each page type.

Only then was I ready to explore how I would communicate visually.

I’ll pick it up again next week showing how the content types above helped in the creation of the early visuals that became this design.

The post What Should You Know About Content Before You Design? appeared first on Vanseo Design.