The Best Tools For Creating Website Mock-Ups

When you hire a web design team, you are essentially paying them to take the website you visualize in your mind and then make that into a reality. They have the coding skills, so really the only thing posing a challenge will be their inability to see what you’re imagining. This is what makes communication so vital between a business owner and a web designer – and it’s what makes mock-up tools so useful.

Essentially, a website mock-up is an image of your website that shows roughly where you want all the graphical elements and content to go in relation to one another. This will be a crude sketch of your website; that will basically give an idea for the kind of elements you want and where they should be. Slightly different is a website ‘wireframe‘.

A wireframe shows your navigation, how pages interlink and how users will find their way around your site. Ideally, you will provide your designers with both and there are several tools that can help you to do just that.

Balsamiq Mockups

Balsamiq Mockups is a well-known and very popular tool for website mock-ups. This is a cloud-based tool that works through a desktop application which enables the creation of sketchy images with a hand-drawn look. It has a large range of items for you to drop into the page and is well-suited for beginners who don’t need precise controls. Unfortunately though it’s not free, with the desktop application costing $79 for a license. A slightly cheaper alternative is Mockingbird.

Mockup Builder

Mockup Builder is a free application that runs in your browser, build with Microsoft Silverlight. It’s a versatile package that allows you to create mockups for websites and apps and software. It has a lot of features and lets you share easily with your designers or colleagues after exporting files as PNGs or PDFs.

Wireframe|cc

Wireframe|cc is another free tool that can be used for both wireframing and mockups. It runs in the browser and provides more of a minimalist experience. For the purposes of creating a rough outline of a website though, it will likely suffice.

Photoshop

If you have a copy of Photoshop though, then this will more than fit your needs – and you can even use images from the web, transparencies and various fonts. In fact then, Photoshop is actually more feature rich than most of the mockup tools you’ll find online. The only downside is that it’s expensive and it can take a bit of getting to grips with if you’re not familiar with it already.

There is also a free alternative to Photoshop called ‘GiMP‘ which has pretty much all the same features. This lacks some drawing tools though, so it works best when used in conjunction with another tool such as Illustrator (or even MSPaint). Another excellent alternative to Photoshop is Design Wizard. This tool has over 1 million high-quality images and hundreds of thousands of image templates. Standout features include a custom color palette, free font library and resize feature

Pen and Paper

Not too sure of any of those tools? Then why not just sketch it out yourself with a pen and paper. This can be just as informative and again you have several options that you wouldn’t do with online tools – you can even create collages! Sometimes there’s no need to get fancy and the old analog options will do just fine.