Layouts and Wireframes

Process

Ahead of Class

Ask students to choose a printed newspaper, magazine, or other periodical. If you’re doing this online, ask them to find the home page (desktop or mobile) of a news site, an app on their smartphone or smart watch.

Teachers can watch this video (5:07) about reverse wireframes to prepare, or share it with students before class. 

EXERCISE

Step 1: 
Explain this is a lesson about wireframes. Wireframes are the underlying structures of websites and digital apps. They are like blueprints for building a building, or the wire armature inside a figurative sculpture.

Explain that usually wireframes lead to a built webpage, but today we are working the other way, from website to wireframe, to understand their structure. 

Step 2: 
Project the homepage of a news website (nytimes.com, washingtonpost.com, cnn.com, your local newspaper). If remote, share the homepage of a newspaper on your screen with a tool that lets you annotate it, such as Zoom.

Ask students what the first thing they notice is on the page, and the next, and the thing after that. 

Step 3:
Draw boxes over the images and text over the wiggly lines. As you do, teach a vocabulary of content types:

• Text: wiggly lines
• Images (including ads): a box with X through it
• Video (including ads): a box with a video player
• Audio: a box with a speaker or ear
• Avatar: a head and shoulders

Step 4:
Ask the students how much of the page is taken up by text vs. image. 

Step 5:  
Show the wireframe without the page

• In person, you can do this by shutting off a projector that points to a whiteboard
• Online, show  your Zoom annotation against a plain background

Optional: Choose an article page from the same news site and do the same: annotate that. Before drawing a reverse wireframe, ask students what the first thing they notice on a page, and the next, and the thing after that.

Step 6: 
Do the same with a homepage and article page of an image-heavy site like papermag.com. Again ask where their eyes go first, and ask how much of the page is taken up by text vs. image. Compare. 

You can also do this exercise with a tweet or an Instagram post — a media form that students may be more  familiar with.

Step 7:
Now, turn off the projector, or navigate away from the website., so all you see is the wireframe, and ask them if they think they would still recognize it.

Step 8:
Check in: What have we learned so far? 

• Page structure and layout being recognizable instantly without any words;
• Consistency of structure as clue to what to look at first;
• How does the structure convey what kinds of stories can be told?
• How does that first glimpse answer the question: “What is this?”
• How does the wireframe suggest which audience this might be for?

Step 9:
Then take out print newspapers and magazines, ask students to draw a wireframe of the cover on a piece of paper. Online, you can do this exercise on a virtual whiteboard. Mural is free for educators and students,, and you this sample board to begin the project.

In print, this structure is usually referred to as a page layout. Pictures are boxes and words are squiggles. Tell them not to write the name of the publication, just make the nameplate or text logo a big squiggle.

Step 10:
Collect the publications and the cover drawings. Put the drawings up on a wall and hand out the publications to students, making sure each student gets a different publication than the one they brought with them. 

Step 11:
If in person, ask students to stand across the room from the drawings and see if they can still recognize the cover they drew. 

Step 12:
Ask one student to match the publication they are holding with a cover on the wall. If you don’t have a wall, use a table. 

(If there are more than one of a given publication, start with that one, and ask the students holding matching covers to work together.) 

Ask the student who is guessing to explain why they made the choice they did: what shapes, page orientation, density of text. Ask the student who drew the cover to say whether they guessed right or not. 

Step 13:
Once a student makes a correct guess, ask the person who drew the cover they guessed to go next. Keep going through the whole class.