Have you confused Wireframes with Mockups?

Have you ever wondered Wireframes and Mockups are the same? I've always thought they're the same, until recently. And, thought I should share this information with those of you who had the same confusion as I did! So here you go...

Wireframe is only a rudimentary skeleton of an interface, often lacks aesthetic details. These are specifically designed to understand the space and structure of the web site or app, primarily aimed at capturing the usability and functionality. Not the way the web site will finally look like! Designers and Devs keep wireframes simple enough to avoid distraction. Also, wireframes are quick to create as they only display the web site's framework with little or no details, colour or graphics.

Simple black-and-white wireframe skeleton

 

Contrary to wireframes, mockups are models of the web site design. Wireframes may give the overall feel of the app, but mock ups will more or less give the appearance of the final web site. This will include details, colour, logos, and images. Building mock ups is the best way to get a design out to clients. If wireframe is the skeleton, then mockup is the skin!

A colourful, lively contact form mock up for your web site

 

Before, when somebody wanted to build a website, they had to make sketches on paper. But when clients asked for more than mere sketches, designers and devs started using Powerpoint to build mockups. But, soon with the birth of web 2.0, static wireframes just didn't take the developers anywhere. Clients ended up only asking for more - like interactive, clickable wireframes and mock ups.

There are many online diagram makers in the market, but Creately is one with some special features like smart online diagramming. With Creately's smart KObject framework, wireframing is like child's play! Create interactive mockups, and share them with your team & clients by inviting them to review & comment. Engage clients to iterate over your Mockups to save project time. You can also publish your mockups and wire-frames online or embed them in your project Wiki, making it easy to work with developers and clients. Creately does it all - painless diagramming and collaboration!!

Image from - http://popmuslim.com/wp-content/uploads/2010/09/Confused.jpg

Learn How Creately Diagrams works

Learn How Creately Diagrams works