Wireframes & Cupcakes

Or: How can you help clients understand the value of wireframes?

There has been a lot of talking about the benefits of wireframing, but not many understand how this really works. Since the easiest way to explain something is by a simple analogy, let’s assume that your project (website, application, etc.) is a cupcake.

You want your cupcake to be colorful, to taste good and to reach a certain target, so you hire a baker to do the job. A smart baker will present you his ideas of making the perfect cupcake that fits your needs, before actually baking one. So wireframing in this case means that he will make a sketch of the whole process (what goes where and when) based on his previous experience, and he will suggest the right ingredients, flavor, shape, toping or even the paper holding it. Why waste time and resources baking 10 different cupcakes until he matches the one you want, instead of simply agreeing with you on these details right from the start?


If the cupcake story makes no sense to you, continue reading for a more straightforward description.

Get To Know Wireframing A Little Better
You’ll see your idea pulled to pieces, and then built right back up, element by element, becoming a real, visual representation.

Creating a wireframe must be one of the first steps before designing a project, because it lets everybody focus on what’s important at the initial stage: understanding the concept, the functionality, the flow. By defining everything that’s going on “behind the scenes”, wireframes provide a clear idea of how users interact with the website / application and how the final design should be structured. This is done via a sketch, using the old jolly pen and paper or an illustration application. Any method is fine as long as it helps you and the designer (or developer) define the backbone of the project.

The wireframe diagram is made out of simple, colorless shapes in order to eliminate look and feel distractions from defining the project’s main function. So it doesn’t contain finished design elements, but it does display where they will appear, helping you organize and simplify your ideas.


Why This Step Shouldn’t Be Skipped
With the designer following a clear roadmap, you’ll get your idea shaped into the desired form, while saving time and money.

Wireframing keeps your project on the right track during development. It is a very important step, and if done properly, it brings a set of benefits to the whole process:

  • It saves time…Wireframing allows you to make revisions easily, by addressing problems early in the development process. Fixing a minor usability problem in a raw sketch takes a matter of minutes, but doing this later on in a graphic design mock-up might take hours, or even days if coding is also involved
  • …and costs. It is far more efficient to adjust this flexible “gray box” layout to match your ideas right from the start, than to wait until the design is completed. Since time is money, wireframing saves you the additional costs spent with back-and-forth, complex revisions.
  • It helps you focus… Giving you a close-up view of the project’s functionality, wireframes help you focus on sizing, layout and placement of design elements. Even at this primitive stage you can get a sense of the user experience and therefore spot potential problems in your application / website design, before adding the visuals.
  • …and enhances communication. A wireframe gives you the opportunity to agree on the structure, the functionality and the elements that need to be included in the project. It makes it easier to communicate ideas, provides clearer specifications for the entire team (coding engineers, designers, copywriters) and encourages early feedback.

Final Thoughts. Wireframing is forward thinking, is planning ahead and defining a clear path of what has to be done. By giving your project a backbone, thinking first at its functionality and then at the visual appeal, you’ll eliminate complex changes in the development process, saving a lot of time and associated costs.

Resources: wireframes examples, learn more about wireframes & prototypes, tools.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s