Creating website wireframes on GNU/Linux with a free/libre tool

Question

I want to create website wireframes.

Locally/offline, or on my own server.

Requirements

1. License:
   • The tool needs to be FLOSS
   • The included graphics need to be licensed under the same license, or under a different free content license (which doesn’t require attribution when publishing wireframes)
2. OS:
   • Needs to be available for GNU/Linux
3. Features:
   • Export the wireframe as graphic (e.g., PNG)

Nice to have

• The exported wireframe should not include a watermark or something like that
• Included in a GNU/Linux distribution’s repository
• Availability for other OS (Unix-like, Microsoft Windows)
• Ability to import new graphic sets

Answer 1

Update: The original tool seems to be no longer in development (last release from 2013-09). @wb9688 mentioned that there’s a fork: https://github.com/prikhi/pencil

Update 2: @nradk commented that the fork is no longer maintained. https://github.com/evolus/pencil is another fork, "in active development, and it is actually a rewrite of the old one".

---

Pencil (License: GPLv2) is a "GUI prototyping tool" which is available as

• a stand-alone tool for GNU/Linux (*), Microsoft Windows, and Mac OS X, and
• a Firefox add-on (**).

(*) It’s included in the software repositories of Arch Linux and Fedora (as pencil).

(**) The Firefox add-on hosted by Mozilla seems to be out of date (currently it’s version 1.0.6 from 2009), while the version hosted on Pencil’s download page seems to be the current one (currently version 2.0.5 from 2013).

---

I use Pencil as Firefox add-on. It opens a new window (with no Firefox chrome, it got its own menu bar etc). Sometimes, it gets kind of slow (e.g., when I rearrange graphics), but here my old PC might be to blame.

The graphics are called "Shape Collections" or "stencils". It ships with a few sets for different interfaces (including Web). Additional graphics can be imported. Here’s a sample wireframe I made to get an idea of some of the included graphics:

Export of wireframes is possible as PNG, HTML, PDF, SVG, and ODT. A nice thing about the HTML ("Single web page") export is that you can add hyperlinks that link to other mock-ups (included in the same Pencil document), i.e., you can simulate user interactions.

Answer 2

While not primarily a wireframing tool, Inkscape tends to be used for wireframes and mockups in open-source circles--GNOME and elementary use it, for example. (Similarly, in the proprietary world, UX designers tend to use generic vector design tools like Sketch and Figma.)

If you're looking for components to start with, it'll depend on the platform you're designing for.

• For GNOME and elementary, I recommend starting with the svgs from their design repositories (links above).
• For web and mobile, you can find various open-source wireframe kits around the web. Inkscape can import AI files, but, unfortunately, many kits are Sketch-only. You may use the proprietary web app Figma to upload the Sketch file and then export it as an SVG for use in Inkscape.

Answer 3

Perhaps you may consider the Mockplus for a while. It can help you to create brilliant prototypes/wireframes both for mobile phones and webs.

• With it, you could export images (PNG & GIF)or htmls to your stakeholders to present your ideas and designs.
• For the app project, you could even preview it on your smart phone by scanning the QR code generated by the project.
• It supports both Windows and Mac.
• The interactive design in Mockplus is fully visualized, that's WYSIWYG. With a simple drag-and-drop to build interactive prototypes effortlessly.It has several trigger command such as rotating, resizing, etc. As well as a set of pre-designed components, including pop-up panel, stack panel, scroll box, sliding drawer and image carousel, make you create fully interactions faster and easier.