Native, FOSS GUI prototyping tools? [duplicate]


For reasons I don't begin to understand, its authors have written it as a Firefox plugin, but Pencil is a great FOSS prototyping tool. Like Balsamiq Mockups, it comes with a massive number of prefabricated components that allow you to quickly throw together a demo screen. Also like Balsamiq, you can have multiple pages in a sketch, and link between them, allowing your programmers and designers to "click" certain buttons, and get a feel for what should happen when that occurs.

Unlike Balsamiq, its default mock widget set looks like real widgets, which I get concerned causes programmers to slavishly imitate the mockup they see on screen. Thankfully, a sketch widget template has been distributed with Pencil for awhile now. Also unlike Balsamiq—and hopefully not surprising for a Firefox add-on—Pencil exports its sketches to HTML, not Flash/Flex.

I know Pencil looks weird because it's a Firefox extension, but it actually works very well, and is easy-to-use. I am not...

0 0



Last Updated March 27, 2017 14:02 PM

As part of my job as a web developer, I spend an amount of time doing UI prototypes to show the client. It's a pain in the behind but sometimes it has to be done.

I've seen Shuttleworth (and the design team) pump out images like this:

That's made by something called Balsamiq Mockups... Something that balances on top of Adobe Air (yack!) and costs $79.

I've tried it but it kept falling over. I think it had something to do with Air not the app itself. My point is if I'm paying out for something, I want it to be native.

Answers 5

Try Glade Interface Designer, a GTK/Gnome interface designer, usually used for real applications, but could equally be used for prototypes.

August 09, 2010 13:16 PM

Personally I like doing web-ui prototyping in Inkscape (vector graphic drawing program), it is fairly simple to use and you can reuse most of the mockup when you are going...

0 0

We've looked at the best web tools elsewhere on the site, but prototyping tools deserve a dedicated page. Prototyping tools can help us solve design problems before writing even a single line of code. Prototypes bring our ideas to life, and in doing so can change the way we design. Today's clients want to see interactive prototypes; these show the concepts in action and help them see how their ideas will take shape.

The possibility of quickly sharing different iterations of ideas with clients can accelerate the design process. This flexibility becomes even more significant when we consider the many device formats we must now factor in.

With so many prototyping tools now available, perhaps many designers are left wondering how to choose the best one, and simply fall back on familiar methods. Ultimately, the goal is to pick up a tool that will support swift iterations, so you want to be sure to select one that does this with ease and lets you focus on what you do best:...

0 0

I've worked both as a software developer and as a senior engineer at Knewton.

As a software engineer, I modernized our Python build and test infrastructure across the entire company, introducing tox, writing style guides, and improving our private Python package server. I also designed and launched dashboards to monitor deployment time and reliability, and wrote the initial proof-of-concept infrastructure to move Knewton's services to Mesos. I also introduced Flask and dramatically increased DynamoDB usage at Knewton, and made deploying web-based Python services viable.

As a team lead and later engineering manager, I got my start by taking a team from weeks behind schedule to weeks ahead of schedule through a mixture of technical improvements (continuous integration, improved integration tests, improved systems architecture to permit better unit and integration tests) and process improvements (shorter sprints, a tighter focus on estimation, improved scheduling made...

0 0

Create Wireframes, Mockups, and Prototypes

How many times have you found yourself standing in front of a whiteboard, trying to explain how your application or website will work, only to be met with blank stares? Then, after working tirelessly to bring your creation to life, those same people take one look at it and say "But that's not what we thought it was going to be!" Step away from the ledge, and let's talk about ForeUI GUI Prototyping Tool.

ForeUI GUI Prototyping Tool lets you create mockups, wireframes, and prototypes for applications and websites, bridging the gap of understanding that seems to always exist between programmers and clients. With ForeUI GUI Prototyping Tool, you'll find an easier way to share ideas, review design concepts, collect feedback before committing hours, and measure usability in a meaningful way.

Featuring the ability to skin your prototypes in a variety of popular themes, ForeUI GUI Prototyping Tool lets you test out several...

0 0

Evolus Pencil provides a free and open source GUI prototyping tool that can easily be installed and used to create mock-ups in popular desktop platforms. Pencil incorporates popular drawing features to simplify drawing operations. While it has a large collection of shapes included in it by default, it has even more collections developed by the community.

Pencil is an open source GUI prototyping tool which lets the user design user interface mock-ups and diagrams, quickly and easily. The current stable release of Pencil is 2.0.5. It is available on all leading desktop platforms in their native installation formats and even as a Firefox add-on.

Pencil is available in the software repositories of Fedora and ArchLinux, so users can install it using the built-in package manager. On Mac OSX and Windows, the user can download the bundle and Windows installer from Pencil can also be installed as a Firefox...

0 0

This topic explores how prototyping a user interface can help minimize design flaws and ensure a successful user experience.


Sometimes, as a project moves forward, small assumptions and well-intentioned but poor decisions accumulate, turning hours of work into a lousy user experience. The smart teams eliminate their mistakes before they ship by using a technique called UI prototyping. Combined with usability studies, prototypes keep teams headed in the right direction.

Why Prototype?

Prototyping is a means of exploring ideas before you invest in them. All experienced craftspeople and engineers create prototypes of their work before they build anything: Architects create models out of paper or cardboard, or with virtual reality tools. Aeronautic engineers use wind tunnels. Bridge builders create stress models. Software and Web designers create mock-ups of how users will interact with their designs.

The best reason to prototype is to...

0 0

Best prototyping software

Have you ever heard that UI/UX design is a significant aspect of building a website or application work? Today we are going to talk about best prototyping software and interactive prototyping tools. Making and modifying products driven by prototypes is spinning up and the prototyping tools come in any form or by any means. The market of UI/UX prototyping tools is huge, new instruments appear daily, so how to figure out the best tool for your particular project and needs? Selecting the correct prototyping tools for mobile app design will increase the efficiency with half the diligence.

Read also: Mobile App vs Mobile Website: Which is Best for Your Business?

Prototyping is an imprescriptible side of development. It can help with concept reviews and feedback sharing in the early stage of a project. With interactive mockup of a site or mobile application, you’re able to “diagnose” any shortcomings in the flow and generic usability afore...

0 0

Prototyping tools help developers create websites, apps, and other products faster and more efficiently. The best prototyping tools go one step further – enabling the creation of better, more effective products. Today, interactive prototyping tools are transforming the way developers create web mockups and end products, and are, by extension, transforming the user interface (UI).

Innovative UI prototyping tools are hitting the market at a rapid pace thanks to emerging web design trends and technologies, but here are four top contenders of 2018 so far:

Moqups – One of the Best Prototyping Tools

Moqups, according to the designers, is an “all-in-one online design platform that’s smart, simple, and fast.” Moqups made the cut as one of the best prototyping tools on the market thanks to its wide array of stencils developers can use to create wireframes of projects and mockups online. Developers can customize each component of the stencil in terms of color,...

0 0


Create fully interactive prototypes to simulate what your application will really feel like. Use clicks, touch gestures, device motion, keyboard entries and even location data to trigger highly configurable reactions in your prototypes.


Share prototypes, collect comments and edit screens with others in real-time. Our collaboration features are easy to use and include versioning, comment history and issue tracking to give you all the tools you need.

Mobile Simulation

Test drive your prototypes on iOS and Android devices in real-time. Our app allows you to run your prototypes on mobile devices directly at the click of a button without downloading or installing any code. Or test them in your web browser.

Exports & Specifications

Generate handy specification documents at the click of a button to hand...

0 0

An open-source GUI prototyping tool that's available for ALL platforms.

Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms.

The latest stable version of Pencil is 3.0.4 which contains stability fixes and features a visual stencil builder. More details can befound in the releaste notes.

Project News

Jun 27, 2017 Pencil 3.0.4 is released released.

Jun 06, 2017 Pencil 3.0.3 is released released.

May 11, 2017 Pencil 3.0.2 is released released.

Feb 20, 2017 Pencil 3.0.0 GA is now released.

Feb 09, 2017 Pencil 3.0.0 rc2 is available for testing.

November, 2015 Development for the new version of Pencil started.

0 0

There’s guesswork, there’s theory, and then there’s actual results. That’s where prototyping tools make the difference.

You could have the best — or worst — design in the world, but you won’t know it until you see it in action. Prototyping tools bridge that gap between the initial design and the finished product, a rough draft to identify what works and what doesn’t.

Prototypes serve a variety of functions in the web design process, but we can organize them into four main categories:

Pitch an idea — You want to demonstrate how your idea works while presenting to clients.User testing — You want to fine-tune the product based on your target users’ preferences.Proof of concept — You want to get the rest of your team on board with your suggestion.Test logic — You want to see for yourself whether or not an idea will work as you planned.

Different types of prototypes, with different end goals and audiences, mean the same prototyping tool won’t work for every...

0 0

Concept of globalization hits the world with ceaseless creativity and imagination amongst people ranging from the youths to the elders. Judging by the fact that creativity produces opportunities in the field of marketing, wireframing and prototyping are definitely in the list. These are tools which not only make your websites appear to be nice and neat, but also attracting.

Following on from our Great Usability Tool Roundup we’d like to feature a number of helpful wireframing and prototyping tools. Based on my own experience in talking with people working on user experience design, I know there isn’t one tool for everyone, so today we’d like to present you with some of the better options available.

Wireframing and Prototyping: In a nutshell

Wireframing is a really great way to help you work out the initial layout and design of your (or your clients) site. It means you can come up with a range of different concepts without having to invest a huge amount of time...

0 0

Planning and sketching ideas before taking them to implementation is a useful quality that developers have learned to value. In website development, the concept of a wireframe, which is a diagram or sketch of a website ready to be handed over to a graphic designer, resonates with this need. On the other hand, prototyping deals with laying out a plan before execution for successful product development. Pencil Project is a useful GUI prototyping tool that equips creative individuals to lay out, sketch, analyze and finalize their ideas using a wide range of elements, including common shapes, basic web elements, Sketchy GUI, stencils and more. These can then be exported in PNG, SVG, HTML, PDF and ODT file formats for applications in various development domains with an artistic yet technically sound plan, ready for finishing.

As soon as the installation completes, you can use Pencil Project to begin creating diagrams. The application is built on the Firefox platform, due to which...

0 0

=== Update July 2017 ===

I am writing an updated, and much more detailed tutorial on this topic. I will announce it on my social media pages when ready, but you can also sign up to the UX training newsletter to get notified.

Many new tools are now available on the market, each covering specific UX workflows. Others that are already mentioned in this article have seen a substantial re-haul so they are going to be re-evaluated from the ground up.

=== Update December 2016 ===

At the time of writing, Axure RP Pro is still the most all-embracing UX software available, including rapid wireframing to high fidelity prototyping with advanced interactions, and rather advanced diagramming tools to document user journeys. The author of this article has also created a widget library called UX Map. It's Axure-specific and it allows to add interactive annotations that can be toggled...

0 0

Let’s take a look at some prototyping tools available for web designers today, in no particular order:

Framer Adobe XD Adobe After Effects Adobe Animate CC Craft Prototype Principle Atomic Proto JustinMind Origami Flinto Webflow Marvel App Extra: Placeit

Dishing out ideas to stakeholders and clients can seem effortless at first, but when things get difficult we need tools to help speed up the feedback process. The web is becoming more complicated for front-end designers, with ever-more interactive requests. Actions such as swiping and dragging are just the tip of the iceberg, and figuring out how the whole puzzle fits together is where the true art of prototyping lies.

Where Prototyping Fits

By definition, a “prototype” is an early sample built to test specific concepts. A prototype is used to evaluate and enhance a system to gain better insight into the project as a whole. We all work on projects on a daily basis and some are far more intricate...

0 0
0 0

The wireframing process is the straight-to-the-point and completely non-tech stage of any web project. It only requires that you define a skeletal outline of essential page elements such as headers, footers, navigation and content area and should illustrate how to cater and respond to any possible interaction from a user.
It is the most important, yet underused, stage of any web or apps development.

Please note that this post is quite old, so some of these apps may not longer be free. Tread with caution.

There are several avenues you could take for sketching a wireframe, most notably pen and paper (the easiest and most cost effective way), but for the sake of this article we have focused on apps that are not only highly effective and easy to use, they are also completely free.

We have covered free wireframe apps before (here), but a year is a long time in web development – some of the apps we had previously covered are either no longer completely free or...

0 0

This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about wireframing, you may find this recent article on free online wireframing tools of great interest.

In recent years the number of tools available to help you document and design your web site has just exploded. It seems that we all need a wireframing or prototyping tool at our fingertips (at least in the design arena). So in order to save you the hard work required to find one, I’ve assembled this list. It can be expanded upon, so if you use an unlisted application, please let me know and I’ll add it to the list.

The tools tend to fall into two categories:

purpose-built applications multifunctional applications

Within these two groups I’ve found that usefulness can vary markedly among tools; some are only suitable for diagramming and wireframing, while others focus only on prototyping. The best are blessed with both capabilities and more.

0 0


Programmer vs User

The situations of misunderstanding between software developers and users occur rather often. The user wants to get an effective tool able to solve his problems, but in most cases he doesn't have even a slightest idea of how programmers work. Programmers can hardly imagine the tasks users have to deal with.

What seems brilliantly realized to the programmer, at the same time can be extremely uncomfortable for the user. ?rogrammers very often don't pay any attention to the things that users consider as obvious. Are there any possible ways to get over the misunderstanding between users and programmers?

Internal war

Software development and websites creation is complicated process. Different people, who are engaged in it, think different – programmers, designers, managers... Each of them has a concrete task: the programmer codes, the designer cares for the visual design, the...

0 0

Download the free trial version below to get started. Double-click the downloaded file to install the software.

UpdateStar is compatible with Windows platforms. UpdateStar has been tested to meet all of the technical requirements to be compatible with Windows 10, 8.1, Windows 8, Windows 7, Windows Vista, Windows Server 2003, 2008, and Windows XP, 32 bit and 64 bit editions. Simply double-click the downloaded file to install it. UpdateStar Free and UpdateStar Premium come with the same installer.

UpdateStar includes support for many languages such as English, German, French, Italian, Hungarian, Russian and many more. You can choose your language settings from within the...

0 0