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.
  • 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.
  • 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 as needed 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 example, if you measure a button in dev tools at 58px wide, round to 60 or snap to your grid. That's fine.
  • For navigation links and other short text, use the actual text from the site. For longer text, like paragraph product descriptions, you can use the actual copy or lorem ipsum text.
  • 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 reference screenshots of the websites you use.

Here's what you will submit:

  1. Adobe XD documents for two websites, each with two artboards - mobile and desktop.
  2. Reference screenshots