How to create a wireframe with Pencil desktop software

An example of anq interactive HTML5 quiz – drag and drop entries to the correct places. I created it using the open source H5P software. The quiz aims for learners to apply their knowledge and as the explanation of answers (both correct and incorrect answers) to help learners better understand…

The process of creating websites is similar to that of building a house.
And we don’t start building without the project plan – an outline of areas and other details informing those conducting construction works of everything involved. A wireframe is like an architectural drawing in the design process. It outlines functional specifications and helps to begin creating screens.
Whether I design websites or online course, wireframing and storyboarding is part of it.

I recently worked on creating a website for an online course. With the basic site-map flow and the learning goals. and objectives document, I started working on a new website wireframe.

I considered using several pieces of software to create my wireframe:

  • had some restrictions on the free account and the free version was not enough to do everything I wanted. looked interesting too, but eventually decided to install Pencil software on my PC (
Here is the short presentation of how it works and what it does.

Leave a Comment

Your email address will not be published.




an image of a person recording a webinar with the text screen recording
Screen recording tools are a brilliant way of sharing your knowledge with your team, your clients, partners and learners. In this video, I am sharing with you a few screen recording tools that are used, and links to all of them are below. It is much easier to explain concepts with a visual illustration of what you are talking about. I often record instructional videos could like quick explainers – talking my team through their tasks, project details and so on.
There are various tactics to consider, but one element you can not afford to leave out is addressing learners’ motivation. Motivated students learn more effectively and are more actively involved in the learning experience. Today, I want to look at Gilly Salmon’s 5 Stage Model and how you can use it.
Scroll to Top