Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Interface Mock-Up

VCB328 Advanced Web Design

Web Site (Part 3: Interface)

Now that you have a good idea as to what information the site will contain, how it is to be organized, and what you want it to look like in general terms (colors, fonts, graphics), it is time to get specific. Your next task is to create a mock-up of the site interface. In this context, think of the interface as a typical page in the site. As long as all pages use essentially the same layout, one mock-up is sufficient. However, if you plan on using different layouts on different pages you will need 1) one mock-up for each page style, and 2) a good reason you plan to use more than one style!

The mock-up should be an accurate representation of the finished page. It should contain the name of the site & company logo (usually in a banner of some sort), navigation, other links, footer, pictures, text, etc. There should be no unfinished or vague parts. The mock-up serves two main purposes: 1) it provides the client with an accurate picture of the site you are building so she can make sure she is getting what she wants, and 2) it acts as a template/guide for you, the designer, to work from as you build the finished site.

Procedure

1. Do a series of detailed sketches/drawings on paper. Work out all of your design issues—where will the logo go? Horizontal or vertical navigation? Or both? How big should the various elements be? What colors? etc.
2. Create a finished mock-up in Photoshop (or Illustrator). Keep elements on separate layers so you can easily move/alter them. Make sure the mock-up is the size of the actual page you plan to build (Hint: a good width might be 760 pixels).
3. Include examples of changeable elements (button 'over-states,' extended drop-down menus, roll-over items, etc.). These could be included on separate layers so they can be 'turned-on' and 'off' during your presentation to the class.

Due: Beginning of class, week 4 .

Class schedule

Syllabus

Student resource index