Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Project: Web Site

VCA222 Web Design

Project: Multi-Page Web Site

Assignment

Design and build (part of) an original web site based on the content provided. Your subject is The Presque Isle County Tourism web site, a tourism site for an area of Northern Michigan. They actually have a site, but it's hideous; your job is to make it better. The full site, if brought to completion would probably consist of several dozen pages. However, you will not build the entire site, rather you will complete just four pages—the home page, plus three other pages.

Part One: Site Map

1. I will give you a folder containing text, photos, ads, and other goodies to use for this project ("content"). If you miss class, make sure you contact me ASAP to get the content.
2. Look over the provided content. Ask yourself, what sort of site will this be? Who is the target audience? How should the information be organized? How many sections should the site contain? How many levels down should it go?
3. Create a site map that diagrams the number of pages and the way they will relate to one another. Hint: start with a home page and work down from there. Though I would prefer you create the site map with Illustrator or similar application, it could be hand-drawn as long as it's neat and easy to read.
4. The site map could be based on the existing site, or you could rearrange the information so that the site is intuitive & easier to navigate. Feel free to create new sections and/or new pages. You can eliminate sections but you can't eliminate written content (you'll have to find a new home for the information).

Site map due: week 7 .

Part Two: Interface Mock-Up

1. Create a mock-up of the interface; this a graphical representation of what a typical page will look like. 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, therefore there should be no unfinished or vague parts. As you design, also consider 'how can I build this with HTML and CSS?' Don't try to do anything too fancy or difficult. Here is a sample in pdf form.

Hint: mock-up an interior page, not the home page, so that you can show an example of secondary navigation as well.

Build your mock-up in Photoshop (or Illustrator or even InDesign if you prefer). I'd recommend a width around 750 pixels. As far as height goes it's up to you, but aim for somewhere between 450 and 800 pixels (your actual web pages will likely vary in height depending on the content. It maybe easier to make a really tall Photoshop page (800+ pixels), put all of your content on the Photoshop page, scale & design it, then crop the page to whatever height is required).

For this site, I require certain elements that must be included and conventions that must be followed (see below). Beyond these you are free to be creative.

Requirements

The following elements must be included in your mock-up:

• A Site ID that contains the name of the site (Presque Isle County Tourism). The size of the id, style, colors used, font choices, etc. are all up to you. You may want to incorporate one or more of the photos I gave you in the id, but I'll leave that up to you.
• Main navigation menu. The menu may be horizontal or vertical. You must determine the number and nature of the links. You could design these as tabs, fancy buttons, or simple links. Consider also how the link will appear when it's rolled-over (an 'over-state') and whether it will look different when you are on that page or within that section (a 'current' or 'active' state).
• Sub or secondary navigation menu. These are links to sub-sections and pages within the main categories. As with the main menu, the sub menu could be horizontal or vertical.
• Main content/article area. This is usually the largest part of the page, containing the "meat" of the page—articles, pictures, featured content, stuff to see and do, etc.
• Advertising space. While not found on every web page, many commercial sites contain some form of advertising. Although advertising could occur virtually anywhere on a web page, there are a few spots that more typical:
• A long horizontal ad above the banner.
• To the right of the banner/site ID.
• A tall vertical ad (or column of ads) to the right of the main content.
• Under a navigation menu in the left column.
• A horizontal block of ads at the bottom of the page (least desirable to advertisers).
  

For this site choose at least one spot to commit to advertising. I will provide you with a choice of ads to use. Note the size and shape of any ads you wish to use to make sure they will fit.

• A footer that contains the copyright and perhaps the address (see the provided home page text for the address). The footer may also contain redundant site navigation and/or utility navigation. Use your own name/design company in the copyright.
• Options: utility navigation, breadcrumbs, and/or a search field. Utility navigation usually includes links to contact information, terms and conditions, 'about us' pages, etc. Basically content that is important but not directly related to the theme of the site. Breadcrumb navigation is a convention which is sometimes employed to help users find their way around a site. The links at the very top of this page (Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Project: Web Site ) are and example of breadcrumbs. I find breadcrumbs very useful and encourage their inclusion, but they are not a requirement.

Mock-up due: week 8.

Part Three: Build the Home Page

1. Assemble your assets (various pictures, text, etc.). Choose which of the photos you will use and how. Most of the photos I've provided are pretty large so you will have to cut them down & re-save them as jpegs, gifs, or pngs.
2. Create your site ID and any other graphics you wish to use in Photoshop and/or Illustrator. Save these as jpegs, gifs, or pngs (note: that I will show you an easy way to create site ID and other graphics based on your mock-up, but you will need a good mock-up first!).
3. Create a root folder. Inside make an 'images' folder for your photos and graphics.
4. Launch Dreamweaver and begin building your home (index) page. As we did with the resume, and page layout projects, start with just headings, paragraphs, and lists (use lists for your navigation menus); surround the different sections of your page with <div> tags (for example: a 'siteID' section, a 'navigation' section, a 'mainContent' section, and so on). Here is the HTML I used to make the sample web site I mocked-up above (also as a pdf).
5. Once everything is in place, begin writing your CSS. Use CSS to size and position your various <div> sections, as well as add design. Here is the CSS I created for the sample web site (as a pdf). And here is the sample page as a working web page.

Home page due: week 10.

Part Four: Build the other pages

1. Create three more pages for you site. Choose any pages on your site map (but I recommend you make pages that are connected to one another and the home page for easy linking).
2. Hint: Use the finished home page as a template for the other pages. Simply save it with a different name, then change the content on the page.
3. Link all of your pages together. Hint: determine what you're going to name all of your pages ahead of time you that you can write the links for your navigation on the home page before you duplicate it. This way, when you 'save-as' in order to create new pages, you will have the links all set and ready to go.

Site due: week 11.

Deliverables

Upon completion you should give me your root folder with all pages, images, CSS documents, etc.

Student samples

My Generic Web Page example:

• Mock up
• HTML
• CSS
• Finished page

Class schedule

Syllabus

Student resource index