Wireframe, Mockup, Prototype and other stages of designing process

This article is for Designers, Developers, Product Managers, Founders or anybody who is part of design feedback loop. You can understand design flow better and give necessary feedback at right time and have clear expectations from design depending on which stage it is.

Interactive/Web designer

Design is a widely used word. It is applied to any process where an outcome is being planned rather than relying on chance. So people in all sorts of occupations speak of designing aspects of their business activities.

Design-related roles exist in a range of areas from industrial design (cars, furniture) to print (magazines, other publications) to tech (websites, mobile apps), etc. here’s a list from Wikipedia. With the relatively recent influx of tech. companies focused on creating interfaces for screens, many new design roles have emerged.

In this article we are going to discuss different steps an interactive designer takes in achieving a final design. Website Landing pages and blog templates to entire websites and mobile apps, the digital space is an interactive designer’s domain.

There are some further specializations to Interactive designer: User experience (UX), User interface (UI), Interaction design and Information architecture (IA). But, I won’t talk more about that in this article, a designer who is designing or a part of end-to-end design will go through the processes explained below.

Designing is done to streamline the development process and hence, design process is obviously very crucial and itself should be streamlined for a good feedback loop and to be tested before finalized.

Steps which should be part of design process:

1. Designing your process:

Different designers approach wireframing and its translation to visuals or code in different ways.

It’s not just designer to choose the path to be followed, sometimes due to time constraints clients prefers designers to directly make mockups or may prefer to have wireframing in-house and further steps outsourced. So define your own sub-set of this process and you’re good to get started.

2. Defining strategy:

Design strategy is a discipline which helps firms determine what to make and do. why do it and how to innovate contextually, both immediately and over the long-term. This process involves the interplay between design and business strategy.

In easier words defining strategy is understanding Business Goals, User Needs and defining a basic spec of what will be made from that, content drafts, site navigation (sitemap) and initial sketches are usually result after designing strategy.

3. Getting inspiration:

I am not a designer [yet], but have a taste and maybe little understanding of design. I am looking to design more and build my own kind-of-design,

Which can be build by copying what you like and making your own changes to it, giving it your own touch and I learned that’s perfectly fine at The Honest Designer’s show’ podcasts.

If you constantly observe your favourite designers or agencies’ works, you’ll be able to understand what is it you like about them and can start picking small-small things and start to create your own design language.

4. Sketching:

Now when you have a plan of approach and you’re inspired & have some rough ideas, it’s time to start with sketching.

No matter how good you’re at controlling your mouse, stylus or whatever you use, they can not beat paper, pencil at simplicity.

While having initial discussions with Product managers or Founder on how they would want product to be, nothing can beat sketching, it’s like taking notes of what they know (after their own process of market research) and how you combined would want to solve it.

Hand sketching on paper is always a good starting point. It provides a quick and easy way to focus and organize. If you’re very precise with sketching, you could even use this as your final wireframe.

5. Wireframing:

A wireframe is a visual representation of content layout in a design. It helps you organize and simplify the elements and content within a space (web or mobile) and is an essential tool in the designing process.

Like the foundation of a building, it has to be fundamentally strong before you decide whether to give it an expensive coat of paint. You can use balsamiq, Moqups or Mockflow for that.

Things to consider while creating a wireframe are:

a) Setting a Grid

b) Determine layout with boxes

c) Define information hierarchy with typography

What to avoid while wireframing :

• Too much happening on the page.
• Emphasis on color
• Too much detail

Benefits of wireframing :

Creating a wireframe gives the client, developer and designer an opportunity to take a critical look at the structure of the website and allows them to make revisions easily early in the process.

Wireframing brings the following key benefits:

• It gives the client an early, close-up view of the site design (or redesign).
• It can inspire the designer, resulting in a more fluid creative process.
• It gives the developer a clear picture of the elements that they will need to code.
• It makes the call to action on each page clear.
• It is easy to adapt and can show the layout of many sections of the website.

6. Mockups/Visual:

Now the final wireframe can be converted to final Mockups or Visual:

Some common tools for Mockups are Sketch, Adobe Photoshop, Adobe XD.

Things to consider while converting to a Mockup are:

a) Information Hierarchy

You may need to consider what to be highlighted and what to be side information, and color scheme, re-positioning and typography are so decided.

b) Typography

Choose visually appealing and readable typography for website with right combination of alternatives. Font-size, weight and colors play a crucial role in readability.

c) Color Schemes

A Color scheme representing Brand Identity and psychological colors as Red for danger, green for Success, etc.

7. Prototypes:

A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.

Wireframes handle structure, mockups handle visuals and prototypes handle usability.

I Suggest inVision, UXpin, proto.io or you can also have a look at full list here Prototyping Tools | Cooper

8. Handover(Bonus):

The designers used to handover their designs to developer in form of specs with editable files, but now it’s easier to do with tools like InVision Inspect, Zeplin, avocode.

I personally prefer InVision workspace, where you can comment and have feedback cycle with PMs / Developers while designing than create a prototype to represent flow, and same can be used for developers to write HTML/CSS faster.

These Handovers are delivered to developer to implement into a full working product. Are you curious what they do ? See here What Front end developers do.

I’m am also learning to design, feel free to drop your suggestions, or comment your views and question in comments section.

If you found this article useful, click the heart below. Have a nice day.