HTML PROJECT – PRODUCT WEBSITE

 

For this project, you will combine product photography and html web design in order to create a website focused on a specific product of your choice.  Note that since you must photograph the product, you must have access to it.

 

A few example topics:

  • a stapler
  • a pair of shoes
  • clothing
  • hat
  • phone
  • computer
  • mouse
  • water bottle
  • a drill
  • a chocolate bar
  • sporting equipment (bat, hockey stick, skates, racket, skis, …)
  • car (must be photographed at home)

 

 

   

   Xbox One S vs. X: Is it still worth buying one? | Windows Central

 

 

 

DESCRIPTION

 

You will create a simple website advertising your product to customers or to retailers or to both.  It is up to you to determine what information is needed on your site and how to organize it.

 

You are expected to have the following:

  • at least 4 html documents with the file index.html being your home page;
  • an organized website with good colour scheme;
  • a user-friendly navigation menu or navigation bar;
  • at least 8 different photos of your product (with both preview images and full-sized images of each);
  • a variety of types of product photography shots
  • text that compels others to purchase your product;

 

VARIETY OF PRODUCT PHOTOGRAPHY SHOTS

 

You should use a variety of shots of your product.  The most common are the Individual Product shots and the Lifestyle shots but you can also include other types of shots.

 

Individual Shots

·       The key type of shot in product photography. 

·       Shot includes only the product. 

·       For background, you can use the product’s natural location (ie soccer ball on grass)

·       For background, you can also use a sweep (usually white or black) to place behind product

·       For background, you can also cutout the product entirely from the photo

·       These shots can also be taken from many different angles (front, side, top, back, bottom and at 45 degrees)

 

Lifestyle Shots

·       Another common type of shot.

·       Shot includes product but also the environment.

·       Shot can include the product being used or enjoyed.

·       Shot is often staged.

 

Group Shots

·       A type of shot that is sometimes used – notably when a product comes in different colours or sizes.

·       Shot can also be used to demonstrate additional “stuff” that comes with product (ie: a tool might come with a blade, a case and safety glasses).

·       Shot often requires many attempts with different product placements and angles.

 

Scaling Shots

·       A type of shot that demonstrates the size of the product.

·       The shot will include other objects or a background that allows the viewer to understand the product’s size.

·       In some cases, the shot include a measuring tape to show the exact dimensions.

·       This type of shot is sometimes used to deceive the viewer in regards to the product’s size (ie: Hamburger on TV are huge!)

 

Packaging Shots

·       A shot that shows the product in its packaging.

 

Detailed Shots

·       Zoomed shots on parts of the product to show specific details

 

MARKING CRITERIA

 

Your project will be marked based on the following criteria:

 

Website demonstrates a variety of HTML concepts (images, tables for layouts, buttons, mouseovers) (5 marks) (A)

Website look is clean and esthetically pleasing (5 marks) (K)

Website content (text) is well written and communicates your message well (5 marks) (C)

Variety of product shots used (5 marks) (A)

Quality of product shots (5 marks) (T)

Project presentation (5 marks) (C)***

 

***Teacher will determine if there will be a 1 on 1 presentation or a classroom presentation.