Get Inside a Designer's Brain: Prototyping, Wireframing, and More! Co-authored with Devan Bhalla, a Modern Day Marketer, and TEDx Speaker

Flashback to the Design Thinking article of this series. If you had to take away one word from it, it would most likely be - iteration -

Iteration or repetition is a core function of designers when they do what they do best; design interfaces with consumers in mind. Designing is an iterative process that the vehicle of communication between client and designer is - wireframing and prototyping. A concept where a lot of us think they are synonymous, but in reality, they are not.

Let's clear the confusion here before proceeding into the processes of each.

** Unfortunately there is a Linkedin bug today and the pictures/references are not showing up, they are working on fixing it but have not given a time till solution. In case you notice pictures missing, that's the reason why! **

Wireframing:

Imagine you're building a house, the first collateral the architect will showcase is a floor plan; aka a wireframe

Wireframing is a low-fidelity way of showing a design. It is stripped down to basics yet displays a realistic representation of the interface. A designer ideally starts wireframing once they've understood the brief, goal and intended user behavior of that particular interface/page. Some of the things you'll see in a wireframe include: content, layout and hierarchy, placement of pictures/CTA - All of these in the right place and on the right page.

Here's what a very basic wireframe looks like:

Here are some of the reasons why designers must and almost always wireframe:

* Speed and flexibility: When clients see what they are going to get, it builds trust and quick iterations. Since wireframing is very basic, changes can be made easily.

* Functionality based: When displaying your wireframe, as simple as it might look, the client will understand how the interface works and links together for a seamless experience for the consumer.

This whole process and display can, and in most cases, depending on the level of detail required, be done on paper with a pencil. A step above pencil and paper is a digital wireframe.

For digital wireframing, designers use software like Mockflow, Axure, Balasmiq Mocking Bird which digs a little deeper into the interaction aspect of it while still maintaining the wireframe ideology.

The distance between wireframing and prototyping is time and understanding consumer interactions. As you iterate on the wireframes, you've come closer to what your final prototype's functionality. Depending on the project and client needs, there are different fidelities of wireframing, you can read more about that subject by clicking the link here.

Prototyping:

Once you've seen the floor plan and like the layout, now you'd want to see where the furniture goes and what color the walls are.

A prototype is often a high fidelity representation of the final product which is meant to simulate user interaction. It will be more aesthetically pleasing, and concurrently, time-consuming. It is designed to be the 'real experience' and therefore prototyping comes almost at the end of the design process.

Some of the things you'd see in a prototype include: color, animations, and (hopefully) the actual content that will be on or in your product.

The advantages of prototyping are:

* Display interactions as intended

* Rethink navigation systems: You may want to shift things around based on what page the user is on, reducing the cognitive load of UX on the interface

* Experimenting with the style and alignment of UI elements: Usually designers follow a grid when designing, and when transferred onto a prototype, they might need to be altered. Prototyping gives the designer and developer a platform to understand each other's requirements and make changes.

*Set Right Expectations between Business and IT Teams: Via prototyping, the developer understands the level of intricacy of the design and can, therefore, proceed to give the team a realistic timeline of delivery.

To sum it up, a wireframe is a floor plan of a house and the prototype describes the floor color, the placement of the dinner table and what sofa is in the TV room!

Some of the software that are popular for prototyping are: InVision, UXPin, Proto.Io, Axure, AdobeXD

Closing the loop between designers and marketers

As this series is intended to be for marketers, we'd like to use a real case-study from John McGarvey to depict why marketers and designers both need this iterative process.

We're taking one factor into consideration: Content

As obvious, the marketing team decides content and the design team, designs. If the wireframe is not passed around, the marketing team might have a very different idea and plan for content versus the designer. This is where the gap exists.

Wireframing and sharing that wireframe amongst the marketers, will give them an idea of placement, of size, of number of words that can be fit. So on and so forth.

Marketers also LOVE A/B testing and designers are more likely to be flexible to make changes within the wireframe stage rather than the prototyping stage. It's at this stage where effective communication and team collaboration comes into play - to create the interface where content syncs with the design.

The ‘design gap’ happens when a designer and writer work on the same project, but don’t communicate with each other. I think the most visible symptom is when too much lorem ipsum starts appearing in mockups, or when bringing the content and design together results in a jumbled mess that doesn’t quite make sense. Design provides context that makes the content more understandable. Basically, content and design are closely linked. If the two don’t complement each other, you end up with a mess. - John McGarvey

Closing Thoughts

Wireframes and prototypes are essential and integral to the UX design implementation and strategy. Client satisfaction is something we all strive for, and wireframes and prototypes are essential steps in gaining the appreciation of a beautiful interface. As we go through the iterations, we gain trust, fix mistakes quicker and reach solutions faster and understand interactions on a deeper level.

About the Co-author:

Devan is an integrated marketer who creates innovative marketing and branding strategies that increase revenues, drives brand awareness, and solidifies customer relationships and user experience. He is an avid learner and has been a Chairman’s Merit Scholar awardee at Indian Institute of Management. He has also been a TEDx Speaker at National Institute of Technology, Rourkela.

Additional reading:

Appendix: