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. Required fields are marked *




Infographics help e-learning designers transform complex concepts into captivating and immersive learning experiences. From statistical insights to engaging timelines, these visuals enrich e-learning experiences, making complex concepts interesting, more accessible and understandable. Get ideas on transforming your training with these versatile tools.
Scroll to Top