19

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

4 Answers 4

18

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.

3
  • 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. Mar 21, 2015 at 17:29
  • 1
    Also mention this fork
    – wb9688
    Jan 3, 2016 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, 2018 at 14:25
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.

Update Sep. 23:

There are two relatively new tools being developed as FOSS alternatives to Sketch/Figma (the current industry standards):

  • Penpot, which is a web application that can be self-hosted (and also offers a SaaS version).
  • Akira, a desktop Linux app that was designed for elementary OS, but can be installed on basically any Linux distro via Flatpak

Right now, both are in alpha. Penpot is farther along in terms of features and also has a bigger team behind it.

0

Take a look at https://penpot.app/.

The website says "[penpot is a] browser-based design tool". I have used Penpot in the past, I'm not connected to it. It can be used online (free of charge), or you could install it on your own server.

Penpot offers many plugins, one of them for creating wireframe designs. Check out https://penpot.app/libraries-templates.

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jul 31, 2023 at 9:39
-1

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

3
  • 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, 2015 at 17:24
  • 1
    While, it has a version for free, actually! mockplus.com/download
    – Charles
    Sep 9, 2015 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, 2018 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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