2-wireframing

#Lesson 2 - Wireframing

Before Class

###Teacher Preparation

• The teacher should become familiar with the wireframing slide deck (see references).

Daily Objective

• Students should be able to layout an interface based on project requirements.

Key Points

• A wireframe is a sketch or document that depicts the visual layout and content of an interface for websites, software and applications.

Assessment

1. Review students' wireframe after class.

Vocabulary

• Wireframing

###References

• https://jsbin.com/
• Wireframing Slides

During Class

Do Now

1. Volunteer takes attendance. Procedure found here.
2. Using the wireframing slides (see references), tell students to take 2 minutes and sketch a picture of a popular website using only boxes and no text. Have your neighbor try to guess which website you are drawing.

Opening

“Today we will be learning how to use a technique called wireframing to convey a visual idea of what you intend to build. You already started to do this a moment ago. This is important because wireframes help you know what you need to build -- you can’t build an app if you don’t know what it’s going to look like.”

Introduction to New Material (“I Do”)

Lead instructor will display the wireframe for YouTube, and have students guess which website it is a wireframe for. Ask them how they knew.

Explain that a wireframe is a tool that is used by lots of people who are involved with app creation -- developers, coders, designers, business analysts are a few people who might use a wireframe. Feel free to elaborate on how you use wireframesand how they have been useful to you.

Guided Practice (“We Do”)

Now let’s try this together. I’ll demonstrate up front, and you can do your own drawings in your notebooks. We’re going to create a wireframe for Facebook. We start out with the layout of main sections and then add detail progressively (instructor demonstrates at the front of the room). The entire experience is centered around the Wall, with supporting sections on the sides and branding at the top. Notice how I’m adding labels to indicate what each part of the page will be -- that will help the developers later!

Independent Practice ("You do")

You are going to start drawing a wireframe. The wireframe should be for a site you are making about another person. Think about what are the things you would want showcased on the side. Will there be photos? Videos? Where would they be placed on the page. If you have time, start to plan out psuedocode for the code you’ll have to write later.

Closing

Have students submit their wireframes and save them in the designated ScriptEd keeping place for use for their upcoming project.

###Homework

Students who are not complete with the wireframe by the end of class should complete it at home for homework.

After Class

• Teachers must look over the wireframes and provide feedback if necessary.

• Prepare for next lesson / hand off to next volunteer in rotation.