Package as Website Overview

You will be creating a website. As your starting point, you will use a six-sided package that has text on all sides.


Choose a 6-sided package/box that has text on all sides. Some examples of boxes are cereal, granola bar, or frozen pizza boxes. Make sure that the box is relatively clean and does not contain food remains as you will be using it in-class over an extended period of time.

Create new folders for appropriate files set-up like the example below:

package (folder)
styles (folder)
images (folder)

Take the box and determine hierarchy of its information. Imagine that the box is a website, markup all of the content on your box. Use the appropriate elements to create the hierarchy. The existing package hierarchy does not have to be maintained. Instead, create hierarchy that makes sense to you and to your design.

You will create a website using your box as inspiration.

  • Create 1 homepage and 2 internal pages.
  • Use the top of the box as a header on each page.
  • Use the bottom of the box as the footer on each page.
  • Use the front of the box as a homepage.
  • Use the back and one side of the box to create a 2-column layout for an internal page.
  • Use the other column to create a second internal page.
  • You must use all the text on the box (yes, even the text in the barcode).
  • Your navigation must remain in the same location on each page of your site.
  • You must markup and style the nutrition facts. Review the Nutrition Template.
  • Each page must be accessible from every page.
  • There must be a link to the homepage on every other page. This can be an logomark in your header.
  • This will be an almost all text website. You will not use images as main graphics. However, you may use image replacement for headings and replace text with an image of text. You may also use images to create faux-columns and images for bullets.
  • Validate your HTML and CSS on each page before turning in your assignment for a final grade.

You will keep a process book for this project. Your process book needs to be well organized. Make sure to include:

  • Thumbnails.
  • Sketches.
  • Roughs.
  • Typography.
  • Grey box method.
  • Package.
  • Final HTML of all 3 documents printed out.
  • Final CSS printed out.
  • Research.
  • Inspiration.
  • Copyright/permission for any images or typefaces that you use that are not yours. If they are part of the school’ library, make sure to write that in your process book.
  • 100-word synopsis about the project.
  • Intermediate print outs of your 3 pages.
  • Final print outs of your 3 pages.


After creating the markup for your content:

Create 3 versions of the homepage using Photoshop.

  • Print the each version on an 8.5 x 11 piece of paper. Print out in color (unless you are creating a site in black and white.)
  • Bring the 3 versions to class and be prepared to present your ideas and critique your classmates’ work.
  • Then you will choose the best version and refine it.

After choosing 1 of the 3 versions of the homepage:

  • Refine your design.
  • Create 2 internal pages that go along with your design of the homepage.
  • Print these 3 pages and bring into class, be prepared to present and critique.


  • Create a style sheet for you pages.
  • Refine your 3 pages.
  • Be prepared for on-screen critique.


  • Final website.
  • Process book.