When we talk about wireframes, mock-ups, and prototypes, we are talking about graphical representations of software - how a system will look to end-users - and, in the case of the prototype, how it will work, too. This is generally in the form of an app (whether web, mobile, or desktop), although you might get clever with things like IoT and smart watch displays, too.

These three tricks of the trade are extremely useful in pre-development, with it being common practice to go through all three of these stages when designing software graphically, before embarking on the actual project itself.

Let’s go through and examine the three in turn to see where they fit into the picture.

The wireframe

The wireframe is the first iteration of your product vision. It’s when the idea first comes to mind, and you sit down and sketch it out - brilliance striking so you want to get it all down on paper.

Now, this may be at your very first inkling of the idea - it may be you get the idea over lunch with friends and start madly scribbling on a piece of paper, fleshing it out what it looks like properly a bit later that evening. It might be an idea you’ve had bubbling around your brain for a little while and you’re finally ready to put pen to paper, to put your ideas in order.

When it comes to software, a wireframe is sketches of the screens a user will see and indications of where functionality lies with some annotated notes, perhaps with workflows from screen to screen. While it’s often done on paper, it can be done quickly with the right graphical software tools .

Think of the wireframe as your jump off point for a software project, the main ideas, to be expanded on and refined. It’s also like storyboarding, if you’ve ever done an animation or video project.

The mock-up

The mock-up is a step up from your sketches done in the wireframe version of the project. It’s your sketches drawn up in a graphics software to look like the real deal - the end product you’re looking to build.

It looks shiny and fancy, with your branding, and all the elements about in the right place. However a mock-up doesn’t actually do anything - it’s just a series of pictures. These are usually produced to encourage client buy-in on the project. The client gets a glimpse of what the end-product might look like, then they get excited.

You can think of a mock-up like those fake TV neighbourhood sets they film shows in. Outside they look like beautiful houses, but there’s nothing inside.

Working through whether the behind the scenes functionality of your software is actually possible before getting approval on a mock-up is important. While many people are impressed by what they can visualise, it’s usually the functionality of software that is the difficult and time-consuming part.

The prototype

A prototype is an operating version of the final product - albeit a very cut down one. A prototype is built to show the product’s main functionality, without all the fiddly bits.

So, perhaps you wanted to build a weather app. A prototype might find the weather in your location from your GPS and display the temperature in degrees celsius. Pretty basic, right? Further features might include a 5 day forecast, whether it will rain, and the choice to add other locations, or change to fahrenheit... but the prototype? Basic.

You should also look at building the prototype from a client buy-in perspective as well. What features will they be wanting to see? What kind of functionality have they focused on during meetings?

Then there’s also the MVP, or minimum viable product . The minimum viable product is a ready-for-test market version of the prototype.

Many organisations think that if they are happy with the prototype of the product, then this is a good base to continue building from, to build the final product. However, this isn’t the case. Since a prototype is generally fairly rough-shod and there have already been lessons learned in building it, it’s better to start again from scratch. You might think that you’re saving costs by reusing the prototype but this is considered bad practice - and can lead to greater costs in fixing issues down the track.

Have some ideas?

Whether you’re at the mock-up, wireframe, or prototype stage, or simply have a great idea that you’d like to start working on the graphics on, we can help. CodeFirst has a team of software developers on hand that are well versed in both front-end and back-end technologies, including graphic design, whether it’s for websites, web apps, mobile apps, or native Windows or Mac software, even IoT devices. We’ve designed and implemented bespoke software solutions for small businesses through to large enterprises. Get in touch with us to find out more about our range of services.