Process Blog


Post your thoughts and decision-making process for your exercises on your WordPress blog*

*Each week you are required to find one or more online resources regarding the topics we discuss in class. Post the links to the online resources to the Links section of your WP blog.

Recommended: Subscribe to your classmates’ blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.

Midterm & Final Projects

Document your design process following the first 6 steps below. Record your challenges, explorations, and discoveries using text and imagery on your class WordPress site.

I’ll give you more information on each of these steps weekly.

1. Defining Project & Audience

Conduct a client interview using the client survey. Summarize your findings and write a one page project brief. Consider using Kelly Goto’s Communication Brief Worksheet as a guide. Content Brief required components:

  1. purpose
  2. audience definition
  3. value to audience
  4. desired perception
  5. technical and user needs
Develop a Persona

Review the article Building a Data Backed Persona. Look back at the client survey and project brief you completed in Lab 1 and develop a persona for the primary audience. Use the persona template to bring an imaginary audience member to life by filing in the following details:

  • photo
  • name
  • quote
  • description
  • demographics
  • technical profile
  • top three user goals
  • top three business objectives for the site

2. Sketching

Create a preliminary sketch for your design based on the information you have gathered so far.

Watch the video below (located on the site) regarding practical methods of sketching.

Video: Interaction Design: Process and Inspiration with: Brendan Dawes

welcome 0:54 19.4 MB

Interaction Design: Process and Inspiration
approach 14:43 22.9 MB
designing for my mum 10:16 18.6 MB
‘need to know’ design 6:37 10.5 MB

Also read the Grey Box Methodology article.

3. Information Architecture

Review the content for the site and be sure it is well-organized. On a large project, the information architect will be responsible for this. If a sitemap hasn’t been created yet, you will create a sitemao at this stage.

Other Information design guidelines to consider

Every web page needs:

  • An informative title (which also becomes the text of any bookmark to the page)
  • The creator’s identity (author or institution)
  • A creation or revision date
  • A copyright statement, Creative Commons statement, or other statement of ownership to protect your intellectual property rights
  • At least one link to a local home page or menu page, in a consistent location on all pages
  • The home page url

Most web pages should also incorporate these additional elements:

  • An organization logo or name near the upper left corner, with a link back to your home page
  • Navigation links to other major sections of your site
  • At least one heading to identify and clarify the page content
  • Mailing address and contact information or a link to this information
  • Alternate (“alt”) text identifying any graphics on the page

Include these basic information elements and you will have traveled 90 percent of the way toward providing your users with an understandable web user interface.

Above notes from the article:

Create a wireframe for your site

“Wireframes, also referred to as content layouts or page schematics, are non-design oriented sketches (don’t worry about colors or button shaped, this is all about information) of unique pages showing rough navigation, copy layout, graphic allocation, key headers and any other elements that need to appear on a page. Wireframes show a certain hierarchy of information but do not dictate exactly how something should be represented.”

Wireframe examples:
Example 1
Example 2

Template: to use when you create wireframes for your Midterm Project
Wireframe template in Illustrator

4. Interface Design

Begin design of the navigational system keeping in mind the principles we covered in class

There are three basic questions a well-designed navigational system must answer.

Navigation should answer these questions:

1) Where am I? (Present)
2) Where else can I go? (Future)
3) Where have I been? (Past)

Navigation design “rules”

Revisit the general rules to follow (Week 04) when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!

5. Visual Design
Create design in Photoshop or Illustrator

Keep in mind the visual elements we studied in class:

  • Dimensions
  • Color
  • Visual Flow
  • Grid layout
  • Typography

6. Prototyping: Moving from Wireframes, Photoshop, to HTML

After creating the wireframe, and visual design in Photoshop: create a prototype of the website using Dreamweaver.

Dreamweaver as prototyping tool
  • Slice and optimize your images for the web.
  • Review the 2 column and 3 column layouts we studied in class.
  • Review the following video “Dreamweaver CS4 Essential Training with: James Williamson” on if you have specific questions about working in Dreamweaver.
7. Usability Testing
8. Iteration
9. Repeat
10. Final Version