Assignment: Wireframes

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

Create two wireframes from websites of your choosing, using Adobe XD.

The browser dev tools will be very useful for this assignment. They can help you see the current size of your viewport and any given element, fonts, padding and margins, etc.

  • Do everything in grayscale.
  • Do not pull any actual images or logos from the website you choose. Use properly sized placeholders instead. Light gray boxes, or boxes with a placeholder "X" will work.
  • Without the actual images or full color these wireframes will be somewhat "low fidelity", but that doesn't mean they should be sloppy. Use smart snapping and guides if necessary to align elements.
  • Try to match the proportions and sizing of elements as reasonably close as possible, but you don't need to go crazy making a pixel perfect reproduction.
  • For text, you can use actual copy from the site.
  • Since web fonts are not available on all computers, choose similar fonts for the wireframe, and make a note of the actual fonts used.
  • Include annotations that describe behaviors or interactions that aren't clear from looking at the static shapes and text alone. Dropdowns, notable hover states like overlays, button behaviors, etc.
  • Include reference screenshots of the websites you use.

Here's what you will submit:

  1. Two XD documents (one for each website), each with two artboards (mobile and desktop).
  2. Reference screenshots