Mock-up Tools

From free to very expensive tools, from prototyping tools needed for specialised tasks and products, from desktop to online applications offering limited to extensive features, there is a wealth of applications that are of interest in some circumstances. In this column, I focus on mock-up and wireframe.

Early Design Mock-up

Within our team, Rachel Hageman uses to sketch by hand. I begin sketching by hand or with a spreadsheet (yes, a spreadsheet). "us on your ideas, this way you stick to representing what you have in mind", says Rachel, whose job in our team is web design. She thinks that starting with a computer is dispersive and prefers to fine-tune representing the idea first, on a sheet of paper. For me, the main drawback of designing with a computer is that circles designed by computer are somehow too round. Early design mock-up can however be useful. There are interesting mock-up and wire-framing tool, including open-source and on-line tools.

After trying a ton of them, I ended with two tools that suit my requirements: intuitive and straightforward. This way, the tool does not add an extra layer of work to the early design process.

Happy discovery! Online platform

This wireframe tool targets websites and mobile apps. It offers a minimal interface, intuitive click and drag to draw, and double-click to edit. Minimal number of stencils and limited color palette allow keeping the idea on track without unnecessary flourishes. Easy annotations. The presentation of the application states: "Most parts of the user interface are presented to you only when you need them". The list of stencil elements becomes available just before inserting an element. The context-sensitive user interface makes the tool intuitive and straightforward.

Price per month range from $15 (1 user) to $99 (unlimited users). (second window)

Pencil project

Pencil is an open-source and free to use multi-platform mockup and early-prototyping tool. Pencil has everything you need to create mockups for websites, mobile and desktop applications. Pencil lets you print your work, and export it to various formats: as a PNG image, multi-page SVG file, web page, OpenOffice document, and PDF file. Pencil Project (second window)

Note from the developers: Pre-release of Pencil V3 ..."a rewrite of Pencil that aims to fix major performance and scalability issues of the application. The new version is under heavy development and we are expecting GA builds in June" (2017).

SnapUp Online platform

SnapUp design makes sharing easy with a ready to share URL for public preview (you can also go private). Five minutes learning curve, intuitive and straightforward, this application has all needed tools for a versatile mock-up process. It offers real-time collaboration opportunity, supports notes and annotations, and quickly produces complete requirement documentation. An application intended to be time-saving

Today SnapUp is a beta and is free to use. SnapUp (second window)

Web app prototyping

I think there is no better tool for creating the prototype of complex web applications, such as multisite information systems, multisite publishing systems, service-rich intranet, etc. than a quick HTML prototype, simulating non-existent functions through simple hyperlinks, for instance, or through truly interactive early components. This is a problem for the developer, however, that arises after the preliminary mock-up stage.

Wireframe and mock-up have similar use. Wireframe: static, rough representation of a design; helpful to document a project. Mock-up: static, visual design sketch; helpful to visualise, document a project, and get feedback.

Tools and hand sketching

Commented sources

You can download this page as a reminder (click Download to save as PDF file)Download

Other resources are available on this matter. Today, we selected the below ones:

UX Concept and Methods
Discussion on methods
Mock-up and Wireframe Tools

Want to hear about new columns and resources:

Want to add a tool? To add a comment? Your comments are welcome.

Leave us a

Go Top