Notice: The called constructor method for WP_Widget in waipoua_flickr is deprecated since version 4.3.0! Use
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4718

Notice: The called constructor method for WP_Widget in waipoua_video is deprecated since version 4.3.0! Use
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4718

Notice: The called constructor method for WP_Widget in waipoua_sociallinks is deprecated since version 4.3.0! Use
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4718
Class Three - Interactive / Web Design 1Interactive / Web Design 1

Class Three


  • Check in with class: last week’s homework
  • Discuss our Causes in more depth: structures beginning to form
  • Card sort
  • Information Architecture
    • Sitemap
    • Wireframes
    • Color: Psychology and Choice
  • Look at HTML & CSS:
  • Create your sitemap for your entire site and wire frames of your homepages using any of the following: Illustrator or Indesign. Send these to me as pdfs by Friday so I can try to get commentary to you before class.
  • Pinpoint your color scheme:
  • Think about the effect you want the colors to have on your viewer, what you want it to teach them about your intent.

Card Sorting

Basically, you need to decide how you will section up your content into separate pages. The best way I do this is to do a card sort.

In web design, you want each page to be a bucket for information about the selected topic ONLY. Use links to guide the user to other related material. You want your copy to be clear and concise: no one likes to dig through loads of badly organized copy for what they seek.

Look at the site you want to build and think of your targeted user:

  1. What information does she need first? Second? Third? And so on. This helps you determine what the pages should be
  2. Write out the name of each page on a card.
  3. Place the cards on your desk in the order you think they need to go. Write this down, as this may very well be your primary navigation.
  4. Mix the cards up and turn to a fellow student. Explain your site’s purpose, the target audience, and any other variables at play.
  5. Give the cards to your fellow student and let him come up with a potential navigational scheme.
  6. Talk out any differences with him, and adjust your proposed nav to reflect the thinking.

Sitemaps and Wireframes (Information Architecture)

First of all, let’s define the term Information Architecture or IA:

An IA is the structure of a system. It is the model produced when a website’s content and functionality are organized so users can easily access everything in the final site. Its main purpose is to optimize the user experience, meaning anyone visiting your site will be able to intuitively navigate to the information for which she is looking.

Your website, however small and simple, is actually a system for delivering information and facilitating task completion to an inquisitive public. The more carefully you structure your site’s navigation, the better and more quickly it will deliver content. There’s nothing more frustrating to a web user that a confusing or misleading navigation.

If you take the time to create an IA for your site, you will know what content you need, how the user will be guided, and how the site will be structured. This is hugely helpful information to have before you start designing.

A Word About User Experience

The web development process should be user-centered from start to finish, no matter which step you are on. In the early days of the internet, design tended to be about the designer, and what he could imagine was cool or new. Now we know that unless the user finds the experience useful, compelling, and satisfying, she will simply leave the site probably never to return. This means that even if the interface is beautiful, a site is a failure if its information architecture is garbled, or its coding is subpar.

Also, if you are working for a client, never forget to keep his objectives in mind.

“As user experience designers we have to find the sweet spot between the user’s needs and the business goals, and furthermore ensure that the design is on brand.”
Whitney Hess

Creating an Effective Information Architecture

You need to take the following into account:

  • Your end objectives
  • The constraints you have to deal with
  • The content you have or will generate
  • The requirements for the people who will visit your site (this depends on who your target audience is).


Once you have taken note of the way things and tending to be grouped, create a sitemap. A sitemap is a high-level chart where each topic (or page) is represented by a box, and the basic relationships between pages is drawn in a simple manner. Take the time to draw a couple of sitemaps and get it right.

Lovely examples of sitemaps



Once you have established the overarching relationships between content areas, it’s time to go in and create detailed wireframes of each individual page type. Wireframes are simple, unembellished diagrams of the page structure. They help you figure out how each element on the page relates to the others, and provide invaluable insight on how the page should look and function.

Color Theory

Some great readings on the subject:

Posted by

Libby Clarke is an artist, designer, and educator living in Maplewood, NJ. She received her BFA in Printmaking from James Madison University and her MFA in 2D Design from Cranbrook Academy of Art. Professionally, Libby has worked as an interaction art director for over 15 years for such companies as and She was an Assistant Professor at the New York College of Technology in Brooklyn, New York. She also served as the Director of the Studio School of the Visual Arts Center of New Jersey. As an artist, Libby has produced a series of multi-media conceptual products under the name Monstress Productions since 1996. She gives workshops and lectures across the United States on the intersection of art, activism, and technology, and her pieces are exhibited and collected internationally.

Leave a Reply

Required fields are marked *.

1 + 4 =