Final Website/Photoshop Project

Description  | Web site Research | Procedures | Check off sheet | Sample

Description:

For your final projects, you must develop a web site, based on a Business/Marketing Web Page.  A Business/Marketing Web Page is one sponsored by a commercial enterprise (usually it is a page trying to promote or sell products.  The URL Address on the page frequently ends in .com (commercial).

You can not use a site or topic that you have used in previous assignments.  Listed below are some Web Page Topic/Ideas.  You do not have to use one of these.

 

Travel Agency

Bed & Breakfast Accommodations

Antique Dealer/Sales

Hunting/Fishing Guide Service

Hunting/Fishing Supplies

All Terrain Vehicle Sales

Appliance Sales and Service

Auto Repair and Services

Baseball Card Collecting

Sports Cards and Memorabilia

Comic book Collecting

Beauty Salon and Service

Fitness Training Program

Health and Diet Program

Health Spa

Men and Women Apparel

House and Business Cleaning Service

Home Builders and Remodeling

Home Improvement

HOW to Do Web

Landscape Contractor/Design

Plumbing, Heating and AC Service

Sporting Goods

Printing and Publishing

Catering and Party Planning

Photography Studio

Recycling Services/Center

Restaurant

Taxidermists

Public Recreation Areas

Cooking/Recipe

 

Before starting, you must visit two sites related to your topic and research your topic.
You will be creating your OWN custom graphics (headings and buttons)

Overall Design Goals

·         Simple

·         Clear

·         Consistent

·         Appropriate

·         Appealing

·         Usable

 

Use a check off sheet to get all work approved.

  1. Select a topic and get topic approved by Ms. Lang.
  2. Complete research of two similar business websites. Submit to Ms. Lang
  3. Design a Flow chart for your 5 page website – submit for Approval to Ms. Lang
  4. Sketch out a design for your page- note the web evaluation criteria you used to grade other sites will be used to grade your site.
  5. Create a mock up of what you would like the page to look like in Photoshop. Get the page design approved.
  6. Create all your headings and buttons for your website in Photoshop. Use an easy naming system heading1.jpg, heading2.jpg – HINT: you can create all the headings in one .psd file. Just make your background, and add a new layer for each text heading- turn on one text layer at a time and save for the web.
  7. Program your site (in note pad using html) you need to create one page for each page in your flow chart- remember consistently is key…
    1. HINT! design one page the way you want it (call it index.html) then save as –name the second name in your flowchart. Then go back and modify the page and add your custom headers, photo’s at text.

 

Be sure to include at least one animation, appropriate copy (text) and graphics on each page. Your navigation should be the same and in the same location on each page.

Sample simple layout:

 

Create custom Buttons in Photoshop. I have a tutorial if you need it.

Do not copy buttons from flaming text etc... 

 
 

 


                                                                                                                  A good size for the headings 800 x 60 pixels- text 60pts

Buttons

 

Buttons

 

Buttons

 
 

 


                                                                                                                  A good size for the buttons: 150 x 20 pixels -text 18pts

 

 

 

 

 

 

 

 

 

 

 

 

                                                                                                                 

 

<html>

 

<head>

<title> My Home page </title>

</head>

 

<body>

<center><img src=heading1.jpg>

<p><p>

<a href=index.html> <img src=button1.gif> </a>

<a href=page2.html> <img src=button2.gif></a>

<a href=page3.html><img src=button3.gif></a>

<a href=page4.html><img src=button4.gif></a>

<a href=page5.html><img src=button5.gif></a>

<p>

<p>

My home page copy

 

</body>

</html>

 
Forgot your html??—I have cheat sheets – but here is the text I used on my sample.