style type="text/css">

Final Project Preparation

Steps to a Successful Final Project!

1. Read the final project guidelines carefully and select a topic.

2. Take pictures and gather your images.
3. Create a wireframe and mockup of your final project.
4. Start coding! Code your homepage first. It's often helpful to use dummy text while you fine tune the layout and styling of your homepage. Once you feel satisfied that the design and layout of your homepage is complete, then make a copy or several copies of the completed design for your subsequent pages.
5. Replace dummy text with the real content
6. Tweak your site until you are happy.
7. Spell check everything!
8. Run the site by a few friends and family members. The more eyes, the better!

Wireframe

• a skeletal three-dimensional model in which only lines and vertices are represented.

  • an image or set of images which displays the functional elements of a website or page, typically used for planning a site's structure and functionality.

  
  

Mockups

Mockup example using Moqups - a mockup is similar to a wireframe, but it includes some visual elements like a few images, fonts, perhaps background image/colors and the color scheme you plan to use for your site. Below is an example using a program called Moqups. You can create a moqup by signing up for a free account, creating your mockup and using the "share" link to link it to your hw7.html page.

Homework 7

1. Create a "wireframe" and "mockup" drawing for your final project homepage (final project homepage only) that maps out the primary layout for your site. The mockup should include some images you plan to use for your homepage, color scheme, fonts and background image/or color.

2. You are free to use any program you like to create these documents. Create a hw7.html pages that is linked to your course homepage. hw7.html should contain two links, one that links to your wireframe document and the other should link to your mockup document.