Wireframes, Mockups, Prototypes: What's the Difference?

 Wireframes. Mockups. Prototypes. We hear and use these three words so very often in the design world, but most of the time they’re said in the wrong context. It’s actually commonly misconstrued to assume that they all mean the same thing, but in fact they all have very specific meanings and use-cases.

Let’s discuss and clarify those use cases, because you never know: you may find that the workflow that suits your style of web design best is the one that you’ve been neglecting to learn about.

Wireframes

So, wireframes. Wireframes are a direct response to user experience research, where we take evidence-based facts about the way that users interact with websites, and we create a layout centered around those facts. Prior to designing wireframes, the designer would have most likely iterated over several ideas and chosen the best ones to appear in the near-final wireframe.

Wireframes are devoid of visual aesthetics, meaning that we shouldn’t concern ourselves with font families, colors, border radiuses and so on. It’s true: visual aesthetics do contribute towards the user experience of a website, but that comes later.

 

Indranil Wireframe by buatoom

Save

Mockups

Mockups are where the fun happens, and because of that we sometimes like to begin a new design by trying out colours and fancy trends. I do it all the time, and I have to remind myself to take a step back and think about the science behind it all, before conforming to the visual styles I’ve hastily decided upon.

Mocking up is still an important stage in the design operation, but neglecting other areas will surely impact results. Always make sure that you have a solid foundation before moving on to visual aesthetics; anyway, it’ll save you time in the long run!

Aside from mocking up as a concept, mockups can also mean “mockup devices”. Mocked up designs are frequently inserted into mockup devices, usually with Photoshop, to illustrate what a screen would look like in a more realistic setting. Because mockup devices are usually shortened to simply “mockups”, we often confuse the two meanings and forget that there’s more to visual design that “making something look awesome in a real device”.

But that doesn’t mean that we can’t show it off after!

Prototypes

Prototyping is about making static designs interactive. What static designs cannot offer is an accurate example of what transitional states should look like. By that I mean components that can be interacted with, hover states of links and buttons, the user flow from one website to another, and of course the animated transition (if any) that occurs between those states.

Recent years have blissfully awarded us with an abundance of awesome prototyping tools like InVision App, Flinto, Marvel App, Framer and Atomic.io – which means that we can sample interactions and user flows far quicker than ever before, almost to the stage where a design appears to be finished.

Prototyping, in short, is showing how something works even though it isn’t actually built to completion yet. Prototyping is more often than not the final stage before going on to build the real thing, but it still involves a lot of iteration.

Save

Conclusion

Wireframes. Mockups. Prototypes. Each step in this expedition we call “design” is a chance to explore a different aspect of the user experience – layouts, visuals, interactions. By separating the stages of design we’re acknowledging them and not skipping straight to the fun stage, which is of course choosing font families, colors and coming up with beautiful visual ideas.