Creating a Wireframe SESSION plan by luise grice
Session Objectives
To demonstrate how to create a wireframe
To demonstrate the importance of the wireframe in the design process
Session Activities
1. Introduce wireframes by explaining what they are. A visual guide representing the basic elements of an app or website.
What is a wireframe?
A wireframe is a visual guide representing the basic elements of a website. A well-designed wireframe includes three key elements: interface design, navigation system, and main content areas. In this activity students are introduced to wireframes, learn why they are an important part of the design process, and learn how to create them.
2. Using the sample electronic files provided, introduce and discuss the following:
• Why wireframes are an important part of the design process.
• What’s involved in creating a wireframe and what should be included in a wireframe.
3. Demonstrate how to create a wireframe in sketch
4. Allow for students time to create a series of sketched wireframes for an app or web project they are working on. Before sketching, ask students to think about the design elements that would make the sketches consistent. It is recommended that your students have already learned about design principles. For example:
• Container, object and graphics choice and placement
• Font style, sizing, combining and placement
• Navigation on individual screens and between screens - choice and placement (for both graphical and font navigation bars)
• Color combinations and choices
• Including appropriate visual hierarchy
• Multiple design options for screens of varying sizes on a variety of viewing devices
5. Ask some students to present their wireframes to the class, discussing the design decisions they made.
6. Remind students that creating wireframes is an important step in the production of building web projects. Discuss how using the wireframe workflow can help them go from sketching basic ideas of the project’s structure to a fully-functional interactive prototype. Discuss how wireframes can be especially helpful when working with clients.
Next steps
The following are a few of the possible next steps that could be taken once this wireframe session is complete:
• Critique session from peers to determine validity and userbility of sketched prototypes
• Alter sketched prototypes and arrange to convert into digital form using Adobe Illustrator, Photoshop and/or XD as examples
