1. Illustrator/Sketch/Fireworks are well-known as a prototyping tools. For this week’s assignment, you will mockup a web page in one of these editors (or other software of your choice).
    • Your page should include a banner, navigation, footer, placeholder text with hierarchy (i.e., at least headings and body text), and fake links (to demonstrate color and style).
    • Your mockup page should be 960 pixels wide. It should be at least 500 pixels high. If your page is longer than 500 pixels, be cognizant of placing the important information “above the fold.” If you decide you want to address responsive design considerations you can provide additional layouts at various breakpoints, but these are NOT required for this assignment.
    • Save your mockup in your editor’s native file format, and attach it to the 05 Design Principles Assignment in Blackboard with a description of the intended audience and the site purpose.
    • The success of a page layout is greater than the sum of its parts. Be sure and incorporate some creativity.
    • I’ve attached a the checklist (to the actual assignment in Blackboard) I will be using when I grade this assignment. Please take a look at it so you know what I will be looking for.
  2. Examples of web page mockups (Note that 2 are not interactive, just PNGs for example use. The 3rd is a tutorial video.):
  3. Don’t forget to continue browsing for layouts that you find creatively inspiring. This week pay specific attention to website layouts and how successfully they make use of the elements of design.


  1. Review this article on web design critique and use it to step back from your own work and evaluate what you have done. Make adjustments to your layout as needed.
  2. Post your page mockup on the class website and explain the design decisions you made while creating the page layout. It may help to provide details relating to the context of the website it will be part of (imagined or otherwise).
  3. Provide information on the type of site for which you created the page, who the audience is, and what sort of devices you think viewers will be using when they eventually come to your site.
  4. You are presenting your page layout to the rest of the class, so be sure and include information and detail in your post. If you prefer to do this presentation as a screencast, you can. Just upload your screencast video to Youtube or Google Drive and link it in your post.