Wireframing and Prototyping Course – What Students say:
“I’m going to recommend this course to all product managers and team leaders in our company. It’s not only about the Pencil tool – but also about some cool ideas and good practices for wireframing in general. I specifically like the lectures about creating wireframes for dashboards and for mobile devices.”
**** Updates to Wireframing and Prototyping course August 2017 ****
A new user interface version has been introduced for Pencil. This lesson quickly covers the new look and feel and shows you how to get around with it.
**** Updates to Wireframing and Prototyping course April 2016 ****
New wireframing and prototyping for specific use cases section added with videos to show you how to create wireframes in Pencil for specific uses – such as Mobile device app prototyping or for planning Big Data Website Dashboard screen wireframes.
***********************************************************************************
Are you planning or designing a website, a software product or an application? If you are then creating a great user interface is probably one of the most important factors to the success of the project.
There are many tools to design a software user interface. In this course I introduce you to an easy to use, freely downloadable tool called Pencil, and quickly show you how to create user interface wireframes and prototypes by yourself.
Within an hour, you will be able to create your user interface sketches and prototypes, and share them with clients, designers and developers.
No prior skills or experience is required to take this course. It takes you all the way from downloading and install the free Pencil tool, through creating wireframes and prototypes and working with all the Pencil tools, and onto saving and exporting your prototype designs.
You’ll also find some extra Goodies on the course, such as icons and assets you can add to Pencil, and example wireframe designs to help you get started.
There are several paid wireframing tools out there – tools such as OmniGraffle, Blasamiq, Axure and Visio would cost you anywhere from $89 to $600 and more. Before using those, make sure you take this course to be able to try out wireframing by yourself for free. Even if you do plan of using one of the paid tools for wireframing, the skills you will learn and apply through this course will prove invaluable.
Creating a great wireframe or prototype with ease
-
1Wireframes - what are they and what you can use them for
Before we get started with Pencil tool for wireframing, this brief lesson takes you through five reasons you should embrace this practice.
-
2Downloading and installing the Pencil Wireframing and Prototyping tool
This lesson will show you how to download and install the Free Pencil program on your computer.
-
3Getting to know the Pencil user interface
The Pencil user interface is what you will be using through the rest of this course, and of course whenever you use this software.
It's not a complicated interface, but still this quick lesson takes you through the major tools on the screen to get you quickly up to speed with the program.
-
4August 2017 UPDATE - New Pencil Version - Get to Know the UI
A new version of Pencil has introduced an updated user interface. This lessons familiarizes you with the new look and feel of the new interface.
Tips for faster and more effective work with Pencil
-
5Basic page actions
In this lesson we will learn how you can rename pages, change the canvas size, choose a page background color, and add some space around the objects which you've placed on the canvas.
-
6Adding and Editing objects to wireframes
Adding and editing objects on the canvas is what you will be doing most of the time when using Pencil in order to create your wireframes.
This lessons shows you the basics of dragging objects onto the canvas and working with their properties to get them to look exactly as you would like.
-
7Common editing functions
This lesson shows you how to quickly add and edit the properties of objects on the Pencil canvas.
-
8Searching and Finding objects in the collections pane
There are so many objects or assets you can have on the Pencil collections pane. Watch this lesson to learn how to quickly search and find exactly the one that you need to add to you wireframes and prototypes.
-
9Adding and managing pages
You can any number of pages in a Pencil project. This lesson shows you how to copy pages, reorder them on the pages tab, duplicate them or delete pages.
-
10Test Your Knowledge Mini Quiz - Creating Wireframes with Ease
Test you knowledge in this short quiz on the lesson in the Creating Wireframes section
Saving, Publishing and Sharing wireframes
-
11Grouping and ungrouping objects
Grouping and Ungrouping objects can make your life much easier in Pencil. Once grouped, it's easy to resize the objects, copy and paste them, and even edit their content.
-
12Hiding and unhiding collections and installing new collections
Collections are Pencil's way to keep things organized. However, if you have too many of them, it may hinder your work. This lesson will show you how to hide any collections you are not using, as well as where you can find and how you can install new object collections.
-
13Using "my Stuff" - Creating collections of assets you frequently use
Adding private collections and putting your favorite objects there, will help you work much faster - you'll be able to reuse complex groups of objects without having to recreate them.
-
14Using Sticky notes for clarification and information
Adding additional information for other team members such as designers or developer may prove invaluable. It can make them understand exactly what you are trying to achieve.
This lesson includes a best practice tip that will help you use sticky notes to make sure the information and ideas come across clearly.
-
15Free Goodies - stencils just for you!
Here are a number of assets you can install to use as collections in your Pencil projects - icons, flags and user interface elements.
Wireframing with for specific uses
-
16Exporting a single page or object in PNG format
Naturally, you would want to export and share the wireframes you create with Pencil with designers, clients and developers. Learn how to do so in this short lesson.
-
17Exporting multiple pages in PNG format
See how you can export all or some of the project pages as PNG image files
-
18Exporting as PDF
Exporting as PDF allows you to choose the pages with Wireframes you created, and save them as PDF files so you can either send or print them for offline review.