Introduction To Wireframing With Pencil

Wireframes are digital illustrations of the plan and design for the structure and basic functionality of a website, application or another piece of user-facing software. They are important to the functional and user experience design process, as they help us understand and establish how a program should function before any major graphic or code development is started. They are used in the early stages of the design process so that consensus can be built between team members and clients.

Learning Goals

Students will learn about wireframes: what they are and why they are important to the software development process. The module involves a hands-on tutorial featuring the open source wireframing program Pencil. They will learn the basics of navigating the program and create a small wireframe for a hypothetical mobile Task List application. Students will then be asked to consider alternative ways of building the wireframe and other functionality they could add using Pencil.

Vocabulary

Wireframes and low-fidelity prototypes

Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. The first and most important role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product.

High fidelity prototypes

Prototypes are more sophisticated than wireframes, with additional functionality that gives a truer experience of the final product. It is a further step in the design process, where feedback from the wireframing stage is incorporated.

Curriculum Links

This module provides an opportunity to address curriculum expectations in the Arts, Communication Technology and Computer Studies. Students will be introduced to application development, UI/UX and communication. This lesson is geared to students in Grades 9 to 12.

Background Information

What is a wireframe?

Wireframes allow designers to focus on critical areas of the application and keep in mind small things (such as allowing a user to log out or search a list, for example), that could be missed in our initial designs.

A wireframe is graphically simple: lines, boxes, text etc, that keeps the focus on functionality, rather than getting distracted by graphics and art. Many wireframe programs allow the creation of simple interactivity to create a “low-fidelity” prototype. This way you can get people to test the rudimentary designs and see if they have any trouble understanding or navigating simple tasks in your program.

Creating functionality and graphics can be very expensive, so it is important to reach consensus about the basic interface before moving to the design phase.

• Pencil GUI Prototyping tool – Download Pencil
• Introduction to Wireframing with Pencil presentation – Download Asset Folder (ZIP)

The Paper Prototype

You can test your designs without using software or special programs. The paper prototype is a simple but popular way designers can put quick sketches and mockups in front of users in a very fast and efficient way. In paper prototyping, all screens are drawn on paper. As a user tests through the different “screens” there is often another individual that will act on behalf of the computer, switching different paper “screens” for the user.

Try to create the task application from the Pencil tutorial (in the computer activity section) as a paper prototype. Add some more functionality and ask someone to test out your designs. Ask students simple questions such as “try to logout of your account” and see if the user can navigate your design.

For the full step-by-step tutorial, please see the Introduction to Wireframing with Pencil presentation included in this lesson’s asset folder.

This tutorial demonstrates one of many ways of prototyping an application. In following this tutorial in Pencil, did you think of any other buttons or functionality that should have been included? Was anything missed? What other features do you think users would like in a Task Application? You can expand the prototype you created in this tutorial by changing or adding more screens and testing your design with others.

• Wireframing for UX: What it is and how to get better at it
• How to Create Your First Wireframe

You might also like

Tutorial Series

How the Internet Works Series

Have you ever wondered how the internet works? Well in this series author Daniel Nikpayuk will cover everything you need to know!

Lesson Plan

Introduction to Facebook

Grade 5 – Grade 8

Students will learn how to safely and effectively use Facebook to connect with friends and family.

Lesson Plan Series

Pathfinder Series

Author Jon Corbett will teach students about Pathfinder using Microsoft Small Basics in this series.