Interaction Design

Objectives | To demonstrate and showcase the skills you have learned in this class as well as your professional and school experience.

To achieve this you will create and publish a professional online portfolio.

Requirements

You are all have different strengths and interests, so the specific content of your web site will vary. However, some things all of you must include on your personal web site and portfolio. These are:

About section | that includes a statement that you write about yourself. This also can include information about your web site.

Resume | that includes your accomplishments and is written in a format appropriate for your field.

Portfolio | Examples of your accomplishments and experience in your field including things like: samples of your work, writing samples, images, or other ways of demonstrating your competence.

Process

Upon completing each of the following steps, post a blog entry summarizing the step. The entry should demonstrate some decision making on your part. Simply posting large quantities of stuff will be of no use.

• Research, Discovery, and Competitive Analysis
• Structure
• Thumbnail Sketches
• Grey Box Method Grid Structure
• Typography
• Imagery
• Composition/Mock-up
• Style Guide
• Execution and Implementation

Research, Discovery, and Competitive Analysis

• Who is your client?
• Who is your target audience?
• What do they expect?
• Write a list of required outcomes.
• Identify the strengths and weaknesses of existing content, web, print or other.
• Make a visual audit of current offerings
• Acquire content
• Develop Site Concept

Structure

Content Document | Gather all of the information written and visual needed to achieve required outcomes and compile it into a document that gives order and accessibility.

Site map | A visual representation of the web pages and how the pages interact or connect with one another.

Interface | What navigational systems will your audience need?

Wire frame | A wire frame divides a page into necessary functions and shows a hierarchal relationship between the functions.

Thumbnail Sketches

Create small sketches that capture the basic ideas for page composition, like header placement, column structure, and text alignment without focusing on small details too early in the process.

Grey Box Method / Grid Structure

Read this article again and make sure to do this step:

This will serve as your visual outline before creating your web site design.

Typography

Identify the different kinds of typographical elements you will need to design, and explore several different options. Use all the typographic skills you have acquired in previous courses. While there are currently some limitations to font choice, don’t limit your initial exploration to the basic font set. You may need some page elements in a font beyond the basics. Design your typographic hierarchy. Pay attention to the structure of your raw copy. Your design will be very different depending if the copy is in paragraphs or a series lists and bullet points.

Imagery

The imagery for this assignment must be self generated or art directed. Explore your visual options. It may be illustration or photography. The mood of the images should enhance the communication and promote the objectives of the project.

Composition/Mock-up

Work in Photoshop to create a mock-up of each type of page of your site before you start working on the HTML and CSS.

Include your type treatments, images, different hyper link states, navigation, and all other visual elements that will appear on the various pages of your web site.

Style Guide

This is a single web page that can be used by another designer to implement, update or add to the work you have begun. It should contain:

• all typographic style and usage
• color pallet
• image styles and usage
• other
• descriptions detailing how and when visual elements should be used.

Execution and Implementation

• Save your images for web using the appropriate file format.
• Markup your content as HTML.
• Define presentation styles with CSS. You must use an external style sheet(s).
• Make sure the design is what you want. Check it in different browsers. At a minimum, it must work properly and look correct in the latest version of Firefox.
• Validate your HTML. (This must be valid.)
• Validate your CSS. (This must be valid.)
• Make your web site live.

Grading

How well your web site meets and exceeds the minimum requirements as listed in this document and any additional requirements given in class. Items that will be considered are:

• meeting predetermined objectives
• effectiveness of teaching
• interface
• information architecture
• writing
• design
• HTML
• CSS
• Summary blog posts
• presentation
• craftsmanship