Eliminate the variables, be lightweight, move quickly. Mockups.

When in the web design process, there are a few stages, (Ideation, Wireframing, Mockup, Prototyping, Real environment.)

I want to point a few things out about the use and benefits of creating mockup’s while in the design process.

Often times the mockup stage is ignored / skipped too “safe” time / cost.

First let's understand what is a mockup?

A mockup is a static design of a web page or application that features many of its final design elements but is not functional. A mockup is not as polished as a live page and typically includes some placeholder data.

It’s useful to breakdown each part of that definition.

As a “static design,” a mockup does not have the functionality of a live website. Though a mockup would include a colored CTA button, for instance, it would not open up a form when clicked on, unlike a website (or the prototype of a website).

A mockup may show a cover image at the top of the page, but it won’t have an active carousel like a website. A mockup is not the first stage of website development, so it’s on its way to being a finished product, but it still has a ways to go.

A mockup may include placeholder copy (think “lorem ipsum”) or images, but it is meant to give a pretty good feeling of what the page will look like, though not what it will act like.

The mockup comes into play during a design stage where most of the structure is set, but elements that have a relation with other elements are put in an environment where it is more flexible to change. This is to keep the variables limited, so that when changes and ideas are shared, it wouldn't require time to put in other elements that are already decided unnecessary with the initial decision making, but need to adapt to the change or idea otherwise it defeats the purpose of the mockup.

So what is the purpose of mockups?

Ultimately, a mockup serves as a visual draft of what a web page or application. It is created to bring life to an idea or wireframe and allows a designer to test how various visual elements work together. 

Mockups gives stakeholders in the page the ability to see what that page will look like while making suggestions for changes in layout, color, images, styles, and more. If you wonder what a page would look like using a secondary color, you can test how that will appear by making a second version of the mockup. Similarly, if you want to make a change like adding a header while centering an image, your mockup can let the team see how that potential change might look.

A page should be created for a specific purpose with a particular goal in mind. Mockups provide the team the chance to see how that purpose can be achieved through the layout created by a UI designer with a wireframe, and how that layout can be brought to life using their brand standards and visual creativity. 

There are different stakeholders involved when working on a design project, each with their own perspectives and variables not ever-one is aware off. To keep the time efficient it is important to be able to move quickly (lightweight = quick), when making changes while trying out different colors, styles which, as not everyone is able to imagine how something is going to look like and might have a different perspective on things.

So where does a mockup come into the web design process?

In terms of stages, mockups come at roughly the midpoint of the web design process. In terms of time, they’re still in the early stages of design.

A loose design process looks like this:
Ideation
Wireframing
Mockup
Prototyping
Go live

The wireframing stage is ultimately about creating a rough layout for the page, taking an idea or a goal and using design theory to create a page that will accomplish that goal. The mockup is used to take that layout and make it more robust and lifelike.

After stakeholders come to an agreement on the visual aspects of the mockup, it moves into the prototyping stage where real development is needed to turn a mockup into a near-functional version of the page. Of course, all of this happens before a page goes live and is tested with real users or visitors.

So the it is about being lightweight, create in an efficient manner various "visual data" so that each stakeholder involved in the project can make their judgement based on visual data instead of independent interpretations how something would look like.
After all, it comes down to an agreement, so it's crucial to make a decision based on the same data, in order to move forward together. 

So why don't we do this earlier at the wireframe stage?

A mockup comes after a wireframe in the design process, and it builds upon the design of the wireframe. Mockups, obviously, are more robust and closer to a finished product than a wireframe. There are some important differences that can help you keep wireframes and mockups straight:

Wireframes are black and white; mockups are in color

Wireframes are used for functionality; mockups are for visuals

Wireframes show simply elements of a page; mockups provide substance

As an analogy, the wireframe represents the blueprint of a house. It shows, in two dimensions and black and white, the layout of the house and how the rooms interact with one another.

If a wireframe is a blueprint, a mockup is a two-dimensional rendering of a standing home. It shows the color of the siding and the style of trim. It offers a cross-section of the living room, complete with wallpaper and granite for the fireplace.

These images can quickly be altered to show different wallpaper or a darker wood floor. In the same way, a mockup can show stakeholders different visual looks to a page without changing its structure.

Each stage has its purpose, and with each stage the design becomes more dens. The denser the design, the more time consuming changes, where shortcuts are being made which will come to light at the next stage…prototyping / testing

What is the difference between a mockup and a prototype?

Mockups come before prototypes, which are simulations of what a live page will be. While a mockup is a static image, a prototype offers most of the functionality of a live website, showing stakeholders something very close to the real user experience.

To go back to the architectural comparison, if a mockup is an image set up on a computer screen or eisel, then a prototype is a three-dimensional virtual reality program that lets you walk through the home. The image lets you see the way colors work together or the layout of a single room; the computer program would let you simulate walking from one room to the next to experience the open floor plan, or see how tight a hallway feels.In the same way, a prototype lets stakeholders put themselves in the shoes of a real user, and gives them as close to a real experience as possible before pushing a page live.

As we are getting more aware of the different purpose of stages, it comes down to…

The mockup stage in website development is one that is sometimes left behind; it can seem non-essential in comparison to wireframing and prototyping. Still, there is high value for any development team in breaking mockup creation into its own stage.

By producing mockups and iterating on the designs created, a team allows itself to be intentional about the design choices it makes for a given page. It lets the aesthetics of a given page be analyzed by stakeholders in multiple roles give feedback and make the page as best as it can be.

Shortcuts (skipping on Mockups / Prototyping) come with consequences. And eventually they are going to cost;

・Workload of designers / Engineers (changes due to realizations at later stages) 
・Delays (due to amount of work caused by changes) 
・Unhappy clients / stakeholders (difference in expectations - no visual confirmation)

With experience (getting to know the client / stakeholders) and smooth direction the overall process could be more efficient, but we are working with people overall. Nothing is the same next time we work on projects…so eliminate the variables and lightweight = quick.

References:
https://en.99designs.jp/blog/tips/creating-professional-mock-ups/

https://cliquestudios.com/mockups/#:~:text=A%20mockup%20is%20a%20static,each%20part%20of%20that%20definition.

https://www.sketch.com/blog/2022/03/10/what-is-a-mockup/