Feb 08 10

Assignment: Wireframing

Due: Feb 17.

Class on the 15th will be devoted to lab time.

Project Requirements

Wireframes for:

  • Site
    • Headers
    • Main navigation
    • Sidebars
    • Footers
  • Main page
  • Single Portfolio Item Page
  • Content Page (For about page, etc)

Your wireframes should map out with boxes and labels where all major pieces of information will be on the page.

Here’s an example of a very simple wireframe I put together in Photoshop:

Wireframe Example

Your wireframe should chart all of the main page concepts listed above, as well as any others you want to be in your design.

Portfolio Interaction Concepts

Here are some of the interaction concepts we identified during class. Perhaps you may want to use some of them in your site.

  • Site Title/Home link
  • Site Description
  • Site Navigation
  • Portfolio Gallery
    • Thumbnail
    • Title
    • Description
  • Single Portfolio piece
    • Piece title
    • Screenshot (larger)
    • Individual gallery/slideshow
    • Description (longer)
  • Categories
  • Lightboxes
  • Close buttons (with X)