Exercise 7 Reverse Wireframe
Description
Reverse engineer two wireframes for the American Art Museum. The first wireframe should be at a desktop width. If your screen is wide enough try at 1440px but if it is smaller just get it as wide as it can be. The second wireframe should be at a mobile width. Use your phone to view the page in a portrait format. One of the wireframes will be done digitally and one will be done by hand. It is up to you which is which. The hand done wireframe needs to be done nicely and brought back in to your Figma file. The digital wireframe should use a grid that is close to the same grid used on the site.
Both wireframes should be in black and white (grey is acceptable but typically not necessary) and contain no text or images. They both will also be the full height of the website and diagram out all the information on the page. This should be done entirely using shapes and lines. Come up with representations for various levels of type and how you will represent images, graphics, videos, etc.
Technical Requirements
- One desktop wireframe (1440px or so)
- One mobile wireframe (portrait mobile size)
- No text or images in wireframe
- Done in black and white
- One digital wireframe and one hand done wireframe
Due Wednesday, March 18 by 4:30pm ET
Back to Tutorials