10 Easy & Quick Online Mockup Tools That Help You Imagine Anything

Guy McDowell 27-06-2014

What if you could just think of something, sketch it up, and then start using it later that day? We’re getting closer to that reality every minute with the advent of 3D printers for home use 6 Ways To Make Use Of A 3D Printer At Home Let's say you had a 3D printer set up next to your computer right now, what could you realistically make with it today? Here are some ideas. Read More , drag-and-drop programming, CNC routers becoming cheaper, and other emerging technologies.


To make the best use of these instant-creation technologies, you need the ability to mock-up your design so that you can evaluate it, fix potential flaws, and tweak it to your needs before creating it. That’s what this article is going to help you with.

Let’s look at ten tools that can help you design prototypes for just about anything.

Application Design

Let’s say you want to build a website, or create an iOS or Android app Create Your Own Smartphone App With Infinite Monkeys - No Coding Knowledge Required It would be great if we all had the time, skills, and patience to learn computer coding, especially since technology pervades so many areas of our life. But thankfully, there are applications and web developers... Read More . The first thing you should do is sketch a wireframe What Is a Website Wireframe & How Can It Help You Develop Your Website? On a technical level, a modern website isn’t just one thing. It’s a complex soup of interacting technologies, such as HTML (the markup you see on the page), JavaScript (the language running in your browser,... Read More , so you know how the app will work. A wireframe is a non-working layout of a program that helps you figure out how your app will look and how the information will flow. Here are a few online mockup tools to help you with that.

Frame Box (Free)

Frame Box is a very simple drag-and-drop tool for mocking up a website. It’s free, easy to use, and if you register with the site, you can save your wireframes and share them with others. This really helps if you’re collaborating with a friend or client.



iPhone Mockup (Free)

Allowing for either a sketch mode (shown) or design mode with straighter lines, iPhone Mockup is a simple drag-and-drop Apple app-mockup tool. If you bookmark the URL of the page that you’re working on, you can send that to other people to view your design. Maybe not as handy as registering and saving the design, but for a quick mock-up it meets the need.


Creately (Free)

If you’ve ever used some of the more robust flow charting software out there, Creately will be a breeze for you to use. Not only can you mock up website designs, but you can do iPhone apps, site maps, database design and a host of other things.It is free to use online, but for the unlimited experience there are different pricing plans.



MIT App Inventor

When you want to fiddle with an idea for an Android app, the MIT App Inventor is the best place to do that online. Based on Google’s Blockly, App Inventor allows you to drag and drop user interface elements and blocks of code to make your program. You can test the app with their online emulator or right on your Android device. With lots of tutorials, you don’t need a software engineering degree from MIT to mockup programs like a pro.

App Inventor and Blockly are incredibly similar to MIT’s Scratch programming tool. You can learn more about Scratch here How To Teach Kids Programming From Scratch! Read More .

3D Design

Being able to design your world in three dimensions has never been easier. From laying out a home or building, to manufacturing pieces of art or engineered prototypes, there are many great online tools to help you mockup your designs and bring them to fruition. Here are just a few you can enjoy:

Autodesk Homestyler (Free)

When you get to the Autodesk site, you’ve got the choice between using their 3D Room Designer or their 3D Floor Planner. What you can do from there is just mind blowing. Every aspect of a room or home can be laid out, changed up, furnished with items you can buy from your favourite retailers, and saved for future reference. For inspiration, their galleries of user-submitted creations will get you going in directions you may not have even dreamed of.


Just watch this video showing you what can be done in the floor planner.

These tools are also available as downloadable apps for iOS or Android. Learn some more about the usefulness of 3D Room Designer app DIY Droid: 6 Apps To Help With Your Next Home Improvement Project Imagining your summer home renovation project? Get started with some Android apps to help you every step of the way, from inspiration to planning to building. Read More s and several other home renovation apps on an Android.

Leopoly (Free)

Leopoly is a great site to get your feet wet in 3D design. All designs created on the site are considered to be part of the Creative Commons, making for a large library of items that you can simply edit to meet your wants and needs. Tools are as easy to use as any simple paint program. If you upgrade from the free membership, you can export your design in formats that most 3D printers will accept.

TinkerCAD (Free)

If Leopoly is a sample of 3D design, then TinkerCAD is the full meal deal. There are many pre-defined shapes to choose from but if you want to get into creating something from scratch, TinkerCAD can get as complex as you want it to be. They are kind enough to provide several walk-through tutorials to get you started.


Once you’ve finalized your design, you can export the file, download for use in Minecraft, order a 3D print from one of several services. or upload it to Thingiverse.

 Electronics Design

123D Circuits (Free)

All this talk about Arduinos and rapid prototyping electronics What is Arduino: Everything You Need to Know (In Video) What is an Arduino and why should you care? In this video, I attempt to answer that question, and more. Read More . Did you know that you can get started with learning electronics and designing your own circuits for free? Safely? 123D Circuits gives you a virtual breadboard, a bunch of components, including Arduino boards and AVR microcontrollers. Then you have the ability to run simulations without having to buy any parts, risk damaging components or shocking yourself.

Take a look at the video below to see just what this beginner to pro tool can do.

Graphic Design

FontStruct (Free)

Got an idea for a custom font you’d like to have a designer perfect for you? FontStruct is a good place to play with your idea, flesh it out, and get instant feedback. Once you have something resembling what you really want, working out the details with a professional font designer should go a lot quicker.

Following is an intensive introduction to FontStruct from the makers, FontShop.

Canva (Free)

Currently in beta testing, Canva is to Photoshop what automatic transmissions are to cars. Way easier, but lacking nuance. No matter, that’s why this article is about mocking something up. Get it out in Canva and share it with your graphic designer. This will help you avoid being every designers nightmare – the person that says, “I don’t know how to describe it, but I’ll know it when I see it.”

Take a read through our article from Matthew Hughes about Canva Making Beautiful Designs The Easy Way With Canva [Signup & Free Credit] What if an application promised to make it possible for anyone to create aesthetically pleasing designs? What if creating a genuinely beautiful design was just a matter of dragging and dropping? Read More when it was still in private beta. It makes even Matt the programmer a pretty decent designer too!

In Conclusion…

The Internet and World Wide Web have really given rise to the Age of the Maker. Ideas can become reality in days, or seconds if you know where and how to mock one up. Will you use any of these tools to learn more about making things? Do you have ideas that you can finally get out  of your head and into the real world?

I hope so, and I hope you share them with us. Ideas inspire and teach, and that’s what we’re all about. After all, we’re all in this together.

Image Credit:Writing Ideas on a Wall, Female Architect 3D Printing via Shutterstock.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Anonymous
    July 23, 2015 at 12:30 pm

    Hi, is the fastest easiest online mockup tool. The editor is simple and uncluttered. It will give you space to be creative, it also has widget libraries for all of the major platforms so you can visualise your ideas quickly.

    • Guy McDowell
      July 23, 2015 at 12:46 pm

      The above comment is a submission for
      Endorsement of is not to be inferred or implied. ;)

      But give it a shot anyway.

  2. Guy M
    June 30, 2014 at 12:15 pm

    You know, Pencil was one of the applications I downloaded and tested. But that was the problem - it needs to be downloaded. This article focuses on web-based tools that you don't need to install on your computer.

    That being said, yes, Pencil is a very good application.

  3. Chun Tat David Chu
    June 28, 2014 at 2:29 am

    I am surprise that you didn't mention the Pencil Project. It's actually a pretty good a software to create application mockup.