digital imaging and web design

[class information][html][theory][photoshop][dreamweaver]
[home] [fims] [uwo]

In theory: [strategy][comms planning][architecture][writing for the web]

digitally altered pic of Degas' "absinthe drinker"
Information architecture
 

Conceptual Design:
Content Mapping & Site Architecture

This is the process of going from amorphous ideas to an organized, structured plan for the site, and includes brainstorming, scenarios, storyboards, and mapping.

Brainstorming

First part of the process, usually done with a group of interested parties (assumes the site isn't just for yourself):

  • whiteboards are a helpful tool
  • visualize your ideas, see the connections, erase stuff you don't like. Good process
  • problem of recording decisions isn't - just write it down or even take a pic of it when you reach consensus on issues
  • central circle and radiating ideas method

Explore metaphors. Metaphors can be a powerful way of thinking about your site

Organizational metaphors - the problem is that familiarity with your organization gets translated to the web pages

  • I'd steer away from this as your first choice - tends to draw sites into org-focused design

Functional metaphors - much better choice - translates the tasks in the "real world" to their web analog.
You you see this with sites for libraries, museums, etc.

Visual metaphors - familiar graphic elements (yellow pages, desktop) to a website. Use it as a way to get started, not necessarily the final product.

(apply this background thinking to your scenarios)

back to top...^

Scenarios

Draft short (two or three) paragraph descriptions of how different members of your audience can accomplish different tasks (see strategy):

  • This is something that you will have done before a brainstorming meeting to suggest ideas, or something that you do before a second brainstorming session.
  • record reactions to these scenarios

Organization Scheme or Information Architecture

  • look at the site from a very high level - what are the basic content groupings that you are going to need/have?
  • this you do after the brainstorming sessions
  • figure out what the sections or sub-sites are going to be
  • this is also where you figure out what kind of organization scheme is going to work best for the site: exact or ambiguous? What kind of those? Alpha, chrono, geographical or topical, task-oriented or audience specific?
  • most likely the structure will be a hierarchy with some elements of database or hypertext
  • this isn't the same as mapping all the content, but it does help you figure out your overall structure and therefore, file structure.

back to top...^

Content Mapping

list the discrete pieces of important information, separating content from the containers.

Identify that all content elements will not necessarily fit onto one page - some pages will have multiple content elements. (Home page is the best example of this.)

Good list of questions for determining this:

  • can this document/info be segmented into multiple chunks that users might access separately?
  • What is the smallest section of content that needs to be individually indexed?
  • Will this content need to be repurposed across multiple documents?

    Fit these pieces of content into your overall organization scheme.

    • you can do this on paper using content mapping sheets
    • use cards on bulletin board
    • use software for this part of the process.

     

    Then you create design sketches or storyboards

    Important part of conceptual design is figuring this step out

    You will have to apply the graphic identity or look and feel of your organization here (or create it if it has not been done already)

    You should know what your content pieces are likely to be, and if you are going to have elements such as:

    • dynamic content (database)
    • interactivity
    • multimedia
    • these don't have to be polished artwork, they can be sketches {I'll accept hand-drawn examples}

    You can also use photoshop, word, powerpoint, whatever, to design the overall look of these pages

    I like to see different sketches for different kinds of pages

back to top...^

Prototypes:

If working with a larger organization/had the resources, you'd turn these into web-based prototypes, with actual elements and some links (for example, from the home page to the major subsite or section pages)

{I don't expect to see this in your proposal}

 

Detailed file structure

Your file structure should make it really clear what piece of content goes where, and where it sits in the hierarchy

For your proposals, you can save a step and combine the architectural blueprint with your content map to show the whole thing if you want

Later in the term, I will post samples of:

  • content map
  • architectural blueprint or site map
  • design sketches or storyboards

 

back to top...^

There is an excellent article available at
C-Net that examines 10 questions about
Information Archetecture.

In this section, I discuss:
Content Mapping
Site Mapping
Design Sketches


Some blank templates for your use:

3-level content map

1-level map

[class information][html][theory][photoshop][dreamweaver]
[home] [fims] [uwo]

page created by Mark A. Rayner, ©2003