Assignment: Wireframes

Usually wireframing comes before coding, but for this assignment we're going to work backward.

Create a wireframe from a web site of your choosing. Wireframe 2 pages or "views" of the site on different artboards of the same Illustrator document.

  • Emphasize precision with sizing and spacing. Use guides, align elements, and type the proper sizes for things in the palettes.
  • Do everything in greyscale.
  • Do not pull any actual images or logos from the web site you choose - use properly sized placeholders instead.
  • For text, you can use actual copy from the site, or just filler text like lorem ipsum.
  • Since web fonts are not available on all computers, just use something similar for the wireframe, and make a note of the font that it should be.
  • You will probably need to create a top layer for annotations to describe certain elements (like notes about fonts). Using separate layers for guides and annotations makes it easy to hide the clutter and see just the layout.
  • Include screenshots of the web pages you used.

While there is no black and white (no pun intended) method for creating wireframes, the bottom line is that they should be detailed and instructional enough that someone could build a web page using your wireframe as instructions.

Finished files can just be submitted as Illustrator documents and screenshots, no exporting required.