Meet Mockup, young-yet-versatile GUI-mockup desktop utility

Via Ubuntu Software Center, users are able to install image editors like GIMP, Darktable, Pinta, etc, applications that feature a built-in massive amount of functionalities needed to edit, export as, under-the-hood refine, etc, images, apps targeted towards a more complete global editing approach.

Yet, there are situations demanding sketching-capable tools, tools to be rooted into a get-a-specific-job-done, while removing unnecessary (in the sense of hundreds of menu entries, buttons,--aimed at different-from-the-solely-intended approach) clutter from the screen.

Mockup is a handy exciting utility, designed with easily creating mockups in mind, definitely bearing a simplistic-yet-effective approach.

Mockup is addressed to users searching a tool to create GUI mockups, adopting an interesting manner of plunging the user directly into a creation table.

Launching the application, exposes a properly structured interface: on the left-side of the screen the to-be-used widgets are displayed, while the right-side acts as a canvas.

A definitely interesting aspect of Mockup is its creation flow, in the sense of incorporating an easily-graspable intuitive approach, approach centered in drag & drop.

Looking at the sidebar, the user can observe a (symbolic) window and buttons, bundle of objects that can be clicked & hold & dragged & dropped onto the white-ish canvas.

In order to create a window (that basically represents the mocked app window) click on the symbolic window and drag & drop it onto the white-ish area, actions that add the window to the canvas; finally, click on the sidebar's Add button (or just click inside the white area), action that fully adds the window to the white-ish canvas, while reverting the sidebar to its initial filled-with-widgets view.

By default, the symbolic window comes with the Window name, changing the name with a preferred app name is to be achieved via the Title area (clicking on it, highlights the Window title, allowing the user to type a preferred name).

The mentioned adding-windows method is repeatable (the user can add multiple windows) and easily revert-able, removing a window from the canvas is as simple as clicking on it & holding & dragging & drooping it into the sidebar, action that deletes the window (while retaining other windows).

The added window is resizable, selecting it (by clicking on it) exposes a square, dragging the square resizes the window to meet the user's demands.

Mockup features an effective set of widgets, such as icons representing search, shutdown, battery, network, start, triangle, ON/OFF switches, etc, widgets that are created with ON/OFF state or resizable/non-resizable state.

Dragging and dropping an ON/OFF switch, automatically populates the sidebar with an Enabled entry, switching it OFF, renders (on the canvas) the previously-added ON/OFF switch as OFF.

Furthermore, clicking on added elements (directly on the canvas), updates the sidebar with supported actions (such as Enabled, etc), essentially, added elements are editable post-adding (as well as removable via dropping them into the sidebar).

Along with various buttons, Mockup features Note, meaning, dragging & dropping the yellow-colored Note (from the sidebar), allows users to add explanatory areas (explanatory attitude backed by the noticeable yellow color) to created mockups.

If, after typing a long text-description, the text is rendered outside of the actual yellow area, resizing the note properly surrounds long descriptions (presenting itself as a manner of properly in-depth describing various details, actions, use cases, etc for a mockup).

Along with an effective set of features, Mockup comes with support to export mockups:

• saving a mockup as PNG, exposes the mockup as a PNG file (later being open-able with image viewers, etc)
• saving a mockup as SVG, saves it as a SVG file
• saving a mockup as a MOCKUP file, saves it as MOCKUP file, file format that can be opened via Mockup (the application)-->Open, action that allows users to further open and edit a specific mockup

The result (saved as PNG):

The result (saved as PNG with multiple windows):

How do we install Mockup 0.0.2?
Add the following official PPA (Precise, Quantal, Raring)

sudo add-apt-repository ppa:mockup-team/releases

sudo apt-get update
sudo apt-get install mockup

Launch mockup via the Dash by typing mockup in the search area.