Phase 3: Interface Design

Phase 3: Interface Design
An interface should provide different clues (colours, backgrounds, icons, sounds) or screen maps, for navigation – for moving forward, backward, and for exploring.
The ideal interface is the one that has been designed with deep understanding of the user and their needs.
Interface design is more art than science.
Step 1: Visual Design
From Phase 1, we should know something about the end-user. It’s now time to come up with ideas, sketches, and a storyboard for the visual design aspects of the site. Consider sentient design (allowing interaction across the range of human senses). Consider a metaphor for telling the story.

How will the viewer find their way through the content?
• Map, compass, drop down menu, navigation-bar, bookmarks, tabs, search engine, overview, colour scheme, signs (angles, footprints, slope of a hill), sounds, tour guide, flicker of lights, audio…).

Four key navigation tips:
1) Follow a structure and be consistent – meaning: logically harmonious.
2) The viewer should not have to go through more than three clicks to get to the content.
3) The viewer should always know where they are on a site
4) The viewer should be able to return back, and eventually return back to home.

Prepare the following:
1) List of ideas. All ideas matter. Do not judge them; just write them down.
2) Sketches. Create draft sketches on paper, or in Photoshop/Illustrator.
3) Storyboard. How do you imagine the user working through the material?
Step 2: Create a Prototype
The prototype is presented to the client as evidence that the designer understands the requirements and is able to do the work. It will contain evidence of research (phase 1), site structure functionality (phase 2), and the visual design sketches and flow.

Prepare a prototype with the following working hyperlinked pages:
1) index.html. This page is the first page of the site. It may be a splash page or it may be the menu page containing links to all the main categories.
2) Menu and all other pages. Page layouts include sketch graphics and sample text content.
3) sitemap.html. Includes working links to all pages on the site.

Step 3: Client Approval (Production officially begins after this step)
The client is requested to signoff on the prototype, and request any changes to be made.