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 two pages or "views" of the site on different artboards of the same Illustrator document. You may also do the mobile and desktop versions of the same page if they're appreciably different.

• 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 filler text like lorem ipsum.
• Since web fonts are not available on all computers, choose similar fonts for the wireframe, and make a note of the actual font used.
• You will probably need to create a top layer for annotations to describe certain elements. Fonts, hover or button behaviors, etc.
• Spend some time organizing your layers. 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 use.

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 a blueprint.

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