Lab 4

Wireframes

example wireframe
Example Wireframe

Save into your Lab4 folder two wireframe files as called out in the instructions below. Remember, when creating wireframes you want to call out regions on the page, labeling them with the type of content (not actually putting the content in your wireframe). It should look something like this example, but reflect the structure and content of the page you are wireframing.

Part 1:

You should build the wireframe in an Illustrator file so that you can move the regions around on the page while developing the site. Feel free to use a screenshot of the page to build on, just make sure to hide its layer when you’re done (it shouldn’t show up in the file you turn in). Name the file appropriately (i.e. Bidwell_Homepage_Wireframe.ai).

  1. Create a wireframe for Bidwell Mansion’s homepage

Part 2:

Now that you’ve created a wireframe for an existing site, try creating one for this company (we’ll call them Acme Games & Sweets). You’ll need to include regions for the following data areas:

  • Logo
  • Social Media icons
  • Primary Navigation (categories of products)
  • Secondary Navigation (links to About Us, Site Map, etc.)
  • Slideshow with product photos
  • Featured Product (photo and text)
  • Search Bar
  • Copyright & Phone Number

Use your best judgment to determine the size of regions and placement on the page so that visitors to the website can find the information they’re looking for.

This should be a second Illustrator file; name this one Acme_Wireframe.ai.

Turn In Your Work

  1. Save both Illustrator files in your lab4 folder in LocalRootFolder
  2. Create an index.html file with links to the 2 Illustrator files, so I can download them. | Example
  3. Upload your lab4 folder to your web hosting account.
  4. View the lab4 live index.html file in your hosting account (follow the link to your hosting account from the class website homepage). Make sure everything uploaded OK.
  5. Once you have uploaded your assignment to the web server, you need to officially turn it in on Canvas.