Pencil, make models and prototypes very easily

WebPencil

In the next article we are going to take a look at Pencil. This is an application developed to provide a interface with which we can make models and prototypes. It is a multiplatform application, free, free and open source. With this tool we will have the possibility to create our own web page models, desktop applications, web applications, flow charts and many others.

The application will provide us with a very simple and fast way to create a design to show to a client before getting deeply into its development and programming. The process can be carried out by dragging and dropping. We can also make use of the shape collections, which considerably simplifies the design.

General characteristics of Pencil

About Pencil

  • Pencil offers various collections of shapes to draw different types of user interface ranging from desktop applications to mobile platforms. This makes it even easier to start prototyping our applications with a simple installation.
  • The list of built-in collections include general purpose forms, flowchart elements, desktop / web UI forms, GUI forms of Android and iOS. There are also many other collections created by the community and freely distributed on the Internet. Some of the template collections are compiled in the following link.
  • The application supports exporting the drawing document in different kinds of formats. We can export our drawing as a set of raster PNG files or as a webpage that we can show. Pencil supports the export of documents in popular formats, including OpenOffice / LibreOffice text documents, Inkscape SVG, and Adobe PDF.
  • Pencil has a browser tool for clipart that integrates with OpenClipart.org to easily find cliparts using keywords. We can add the drawing through a simple drag and drop operation. Cliparts listed by the tool are in vector format.
  • The elements in a drawing can be linked to a specific page in the same document. This helps the user to define the flow of the user interface when creating applications or website mockups. Links defined in a document are converted to HTML hyperlinks when the document is exported to web format. This process creates an interactive version of the mockup in which we can see a simulated flow when clicking on the elements of the user interface.

Installation on Ubuntu

Pencil is a multiplatform tool available for Gnu / Linux, Mac OSX and Windows. To install it on Gnu / Linux, we will have to download the DEB or RPM format package corresponding to your system (32bits or 64bits) that are available in the download page by Pencil.

In this example, I will install this application on Ubuntu 17.10. To install, we will only have to open a terminal (Ctrl + Alt + T) and write the following commands:

wget http://pencil.evolus.vn/dl/V3.0.4/Pencil_3.0.4_amd64.deb

sudo dpkg -i Pencil_3.0.4_amd64.deb

We can also double-click to start the installation immediately.

Creating designs with Pencil

As I said, Pencil provides various collections of shapes to create different types of interfaces. Some of these collections are built into the latest version of Pencil, but you can also download others and install them easily.

To create a design of a mobile application for Android with the design of Lollipop, for example, we will be able to download the collection of shapes or Pencil Stencils from the next link. We will also find collections one for the design of web pages based on Bootstrap, Material style icons and the Twitter emoji.

Your first pencil design

To start, we just have to select the option New document. Next we will have to select the collection of shapes that we want to use based on the design that we want to develop.

If we want to create an interface design, we have Desktop - Prototype GUI. This is just a simple example, but it will serve as a sample. An example of the result of an information window made with Pencil can be seen in the following screenshot.

Information window created with Pencil

Creating this design takes a few seconds. It will allow us to have a general idea. Pencil will also allow us have multiple pages in the same document.

Uninstall Pencil

If the program does not convince us, we can easily uninstall it from our system. We will only have to open a terminal (Ctrl + Alt + T) and write in it:

sudo apt remove pencil

Be the first to comment

Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.