3 Completely Free & Open Source Wireframe Tools for Creating Mock Ups

When working on client projects, mockups tools are great for quickly demonstrating the probable layouts of web and mobile apps. While there are paid tools out there with dozens of features for creating professional grade wireframes/mockups, not every UI designer needs the amount of bloat that some of these tools carry.

Compared to commercial tools, some free and open source alternatives have fewer options and features but may just be what an UI designer needs to whip up a mockup quickly. Plus another advantage – these are free!

Pencil project

Pencil Project is a free and open source GUI tool for creating wire frames and mock ups of web and mobile apps.

It has built in shapes collections – lines, arrows, triangles, polygon and connecting shapes for creating flowcharts easily. You can also download and use shapes created and distributed freely by their community of users.

Export mockup to png, svg, html, pdf or open office formats.

wireframe cc

Wireframe CC is another open source prototyping tool. It is very basic with simple drag and drop shapes – line, slider, drop down, input, box, rectangle, circle, scrollbar and image holder. Good enough to draw out simple web or mobile layouts that do not require complex features.

wireframer

Wireframer is a self hosted Javascript (Vue.js) Application. It has simple blocks for creating simple mockups. Not very easy to use – i did not find an option to delete an unwanted element once added to the canvas. Also creating a horizontal menu was tedious with each item dragged as a label and then edited. Also being self hosted means you need to know how to install it on your own server. Unless you just want to tweak around and check things out as a developer, probably not good for UI designers.