GUI builder on concept level

Question

I am looking for a software that allows me to build generic styled GUIs for concept purposes. It's purpose would be to give mainly non-programmers a tool to quickly scribble a few screens and visualize how they are connected.

Example: Let's say I want to visualize a feature for a mobile app that doesn't yet exist. I would use the GUI builder to

1. create a screen with a list of buttons (to navigate to further screens).
2. create a second screen that shows the situation when the first button is pressed.
3. create a third screen that shows the situation when the second button is pressed
4. connect the screens accordingly with lines or arrows

and so on.

It would be nice to have a toolbox with all the default elements available on real GUI builders like checkboxes, radio buttons, text fields.

Until now I would just use a pen and a piece of paper to scribble stuff like this but I wonder if there is any software that can assist on this topic?

Answer 1

Wireframing

Terms used for such work include wireframe and mockups and prototyping.

There many tools available for this now. Some are web-based, some are native apps. See this list comparing wire-framing tools.

Some tools try to create realistic images simulating actual screen widgets. I prefer the tools that use cruder hand-drawn sketch-appearance images as that communicates to the reader that these are mere plans rather than finished software screen-shots.

Balsamiq

Balsamiq was one of the first and best such tools.

OmniGraffle

Mac & iOS users might consider the general drawing tool OmniGraffle, and add a stencil for wireframing.

But this tool does not have all the slick features of a dedicated wire framing tool. On the upside, a businessperson might find learning this tool useful for other tasks such as org charts, flow charts, and diagramming.

You can find many such stencils at Graffletopia.

Answer 2

I am using pencil as suggested here: What is a good way to quickly develop a mock GUI? . it's not exactly what I was looking for but pretty close with neat shapes and stencils for web, android and ios gui elements and forms

Answer 3

How about Netbeans plus JavaFX and the GUI SceneBuilder builder tool? VERY reminiscent of the quick GUI development that VisualBasic 4/5 gave you (only thing I miss about VB in the 90s...)

That would even let you take the layout they've created, properly name the objects, and start writing code.

Here's how I'd set it up - create a VirtualBox VM running LinuxMint 18.x.

Install Java 8 from the webupd8 repo - (Mint is based on Ubuntu, these instructions Just Work)- .

Install Netbeans IDE from a direct download from the netbeans.org website, do it as the root user using sudo. Download the "all" package.

Install the JavaFX Scene Builder 2.0 .deb package from the Oracle website. Link is hard to find it is http://www.oracle.com/technetwork/java/javafxscenebuilder-1x-archive-2199384.html#javafx-scenebuilder-2.0-oth-JPR

Start Netbeans, create a new project, select "JavaFX" and then "JavaFX FXML Application". Once the project loads, in the left side file management pane, select the projects .fxml file, right click and select Open. You'll get the GUI builder. Drag and drop, knock yourself out.