Assignment: Final Project Wireframe

Now that most of the content is ready and you have a plan for your site, the next step is a visual design (wireframe). These should be comprehensive, including artboards for every page/view on the site.

Remember, wireframes are about designing the visual layout of a website, not the structure of the underlying code.

  • These wireframes should be "high fidelity", so color is allowed. Lay out as much of the actual text, images, and content as possible.
  • Substitute fonts are ok. While not required, it might be helpful to note the fonts and color swatches/values in an annotation somewhere.
  • If your project is going to be fully responsive, you'll likely need separate artboards for the major breakpoints (mobile and desktop).
  • Include annotations for any elements that require them. Links should be obvious from looking at the artboard, but hover states may not be. Interactive behaviors like image carousels should also be noted, along with any other special elements that aren't clear from looking at the static artboard alone.
  • These can be submitted as original files (e.g. XD files) with all of the layers and notes in tact. Since they won't be published to your splash pages or anywhere else, there's no need to export to png.