A pencil on top of a sketckbook.

Introduction To Wireframing With Pencil

Section Navigation
Diana Arruda

Diana Arruda

About the author

Diana Arruda is a project manager, game producer, designer and technology aficionado who has worked in the digital media industry for the past 18 years. She has been a teacher at Ryerson University and a mentor to new industry initiates. When not working on projects or professional development, Diana enjoys reading, writing fiction, crocheting or getting her feet wet with wood turning.

Introduction

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.

Materials

Non-Computer Activity

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.

Computer Activity

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

Conclusion

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.

Resources

You might also like