18

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
17

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:

Example webpage wireframe, using Pencil’s "Sketchy GUI" 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.

  • 2
    Frankly I have the latest Pencil 2.0.5 on my Debian and it's quite buggy. I never managed to get the HTML export to work. It just generates empty documents or such with part of what I actually have in Pencil. – rbaleksandar Mar 21 '15 at 17:29
  • 1
    Also mention this fork – wb9688 Jan 3 '16 at 8:11
  • 1
    That fork too is no longer maintained. There is another one here in active development, and it is actually a rewrite of the old one. – nradk Jul 24 '18 at 14:25
1

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.
-2

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.

enter image description here

  • 1
    This does not meet 2 of my 3 requirements, does it? It doesn’t seem to be free/libre software, and it doesn’t seem to be available for GNU/Linux. – unor Sep 2 '15 at 17:24
  • While, it has a version for free, actually! mockplus.com/download – Charles Sep 9 '15 at 2:55
  • @Charles the OP wants Free as in speech, not free as in beer. Although free is usually a result of Free. – ivanivan May 9 '18 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.