Throughout this semester we have discussed the preparation of still and moving images, as well as audio, for presentation on the web. As a professional, the web graphics and multimedia you create will ultimately live on the web on some sort of web site. We have looked at a number of web sites and the techniques and technologies they employ and have talked about why web developers choose different presentations strategies based on a site’s audience(s).

Your final project for this class is meant to be a culmination of all of this information and is based on the layout assignment we created during Week 05 when we covered design principles, pallets, and page elements. You are to refine your layout (from Week 05) in to the point that you feel it is finalized and ready to be presented to a client and coded as a page on the web (note that you do not have to actually code the page for this project).

When presenting a final web page design to a paying client you will find that being able to articulate your design decisions helps them understand the process they are paying for. The presentation aspect of this final project is to help you start thinking from the point of view of both the client and the viewer (a person visiting the site).

Your page layout should:

  • contain the actual imagery and text as it would if it were live on the internet
  • include a banner that contains a company name, logo, and/or accompanying tag line
  • incorporate full navigation that suggests the underlying structure of the rest of the web site
  • exemplify your understanding of the basic design principles we covered in week 5
  • take into consideration an audience that may or may not include viewers using assistive or alternative technologies to view the page
  • be submitted through Blackboard as a native file from whichever editor you used to create it.

You are going to share your final layout on the class website. Introduce your layout and intent for the web site,   and explain the decisions you made (for instance, why did you choose to you the images you are using, and what is the reasoning behind your navigation strategy?). If you have ideas for the rest of the pages on the site, please share them, but you are not obligated to create layouts for them. Also please discuss you plan for optimizing the items in your layout.

Include an image of your web page mockup to accompany your explanation of your design.

You’re welcome to place UI elements (as placeholders) in our layout if your [live] site will incorporate audio or video. Obviously, you will not be able to place live media in the editor you are using, but please discuss the purpose of this media and how you intend to optimize it for the web.

Examples of web page mockups (Note that 2 are not interactive, just PNGs for example use. The 3rd is a tutorial video.):