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 web site, not the structure of the underlying code.

• Design in greyscale and lay out as much of the actual text as possible.
• Substitute fonts are ok.
• If you're creating icons or buttons, you can include those if you want (especially since you're already in Illustrator). Use placeholders for the main media content like photos and videos.
• Create a base layer for the boxes and text. Create a second layer for any hover states (like drop down menus). A top layer should have any annotations about things that aren't obvious by looking at the layout alone. Annotations can be in color if you want, so they stand out when the layer is turned on.
• If your project is going to include flexible content and media queries, you'll likely need separate artboards for each major breakpoint.
• Don't forget the document setup and tips from the wireframing lesson.
• These can be uploaded as original files with all of the layers and notes in tact. These won't be uploaded to your splash pages or on any final web sites, so we don't need exported png's or images.