10 Easy & Quick Online Mockup Tools That Help You Imagine Anything
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 , 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.
Let’s say you want to build a website, or create an iOS or Android app . The first thing you should do is sketch a wireframe , 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.
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 (Free)
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 .
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.
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.
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.
123D Circuits (Free)
All this talk about Arduinos and rapid prototyping electronics . 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.
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.
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 when it was still in private beta. It makes even Matt the programmer a pretty decent designer too!
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.
Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.