MM2213 Intermediate Web Design :: Art Institute

Week 2: Preproduction for a High-Content Site Design


Every site's ultimate aim is to communicate something to its users. If your website doesn't communicate what you want it to, your audience will go to another site looking for the experience or content that you couldn't give them.

In this class, we will focus on user-centered design. When you build a website, you're building it for your users, not you. You design for your user's strengths and weaknesses. You want to use every technique possible to:

  • bring users to your site
  • help them find what they're looking for
  • make sure they have a rewarding experience, and
  • keep them coming back.

Understanding your audience is key to creating a user-centered design. Get as much information as possible about the site's target audience before you begin your design work. Ask your client the following questions:

  • What types of visitors do you want to attract (demographics)?  
  • What are your goals for each type of visitor?  
  • What are the products/services involved?  
  • What are your goals for these products/services?  
  • How technically savvy is your expected audience? Will most be on high-speed connections, or on dial-up?
  • How large to you expect your user base to be?


Write a project overview for your project. See details in the Assignment panel on the right.

Content Types

Take a look at some stellar design work done for high-content sites:

WordPress Showcase

As a Class

Brainstorm and research to come up with a good-size list of the types of content that might be found in a variety of content-heavy websites.

Page Types

As a Class

Investigate a number of websites which use the WordPress platform. Build a list of the types of pages that go together to make up a robust, content-heavy website.

Interface Details

As a Class

Inventory and describe that various interface details that are used in such sites to make a site user-friendly, keep users reading from page to page, and encourage users to share what they've found.

Building a Design Brief

During class, read one of these articles.

10 things never to leave out of a web design brief

How to write a website brief

7 Basics to Create a Good Design Brief

As a Class

Discuss what items are vital to include in a design brief. Why are they so important? How specific do you need to be about what the client can expect from your efforts?


Write a design brief for your project site. See details in the Assignment panel on the right.

Wireframing a High-Content Site

Take a look at the wireframes others have created in planning a WordPress site:

Google Images: "wordpress wireframe:

18 Great Examples of Sketched UI Wireframes and Mockups

As a Class

Determine which three page types are the most important for a high-content site.


Draw up wireframes/storyboards for your project site. See details in the Assignment panel on the right.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
2 Project Overview overview.doc
Design Brief brief.doc

Assignment Details

Project Overview

Write up a thorough Project Overview in Microsoft Word for your content-heavy website project:

  • Website/organization name
  • Describe what the site has to offer.
  • Audience
    • What types of visitors do you want to attract (demographics)? Be specific. 
    • How technically savvy is your expected audience?
    • How large to you expect your user base to be?
    • How do you plan to appeal to this audience?
  • What theme or visual metaphor do you plan to utilize in your site design?
  • How will this theme/metaphor be incorporated into the design?
  • What kind of content will need to be accomodated by your design?

Design Brief

Write a design brief for your project site. Include the items which we determined in class are important to have in a design brief.


For your project site, sketch up detailed wireframes/storyboards for each of the three page types we decided together are the most important.

Make them neatly and include lots of labels. You may indicate some basic things like where text blocks, logo, and images will go. You may include some areas of color, but this is optional.