A big question for any WordPress website designer is if they should create a mockup before building the site, or jump right into the project, designing as they go.

We see a ton of these type of questions on Reddit and Facebook, and wanted to give our opinion on the process. For more depth, we asked over 70+ design professionals if they create a mockup before building a website, and have included some of their commentary in this article as well.

What’s A Mockup?

A website mockup is a complete visual representation of what the end product of a project will look like.

This is typically used as a way for design agencies to show their clients what direction they would like to take the project in, and is also used by individual creators as a way to get thoughts out of their head and onto a canvas.

Unlike a wireframe, which shows the general structure and organization of a site, a mockup displays content, styling, and structure, all in one static image.

The Argument For Mockups

For many web designers, mockups are a staple of their process and workflow. In the past, this was the only way to do it because the creation of a website took so much time and effort. You need to hardcode the HTML, PHP, CSS, and JavaScript, meaning that revisions were also incredibly difficult.

Creating a mockup allowed you to show your client what was going to be created, and ensure that they were happy with the product beforehand.

Now, many people like doing mockups before building out a complete website because it allows them to 1), showcase their ideas before taking the effort to build a dynamic site and 2) properly understand the flow and user experience of the website.

For large design projects that require third party user feedback, mockups are one of the only ways to gather this important data.

Mockups are also taught by institutions. If you have ever taken a class in web design or product development, you've probably seen a diagram similar to the one above.

The Argument Against Mockups

With the advent of site builders for WordPress, the argument against mockups Is gathering quite the following. Because page/site builders make the process of site creation a lot quicker, many forgo the mockup creation stage of projects altogether.

Some others only create low fidelity wireframes, locking down the general structure of a website, and then heading directly into the creation phase.

Mockups also can drastically increase the timeline of a website design project, giving clients the opportunity to go back and forth on minute details of a website. in some cases, this is really good because the client gets exactly what they want, but it also is a major draw on your time and workflow.

At the same time, eliminating this process could save you time, and your client money.

Our Thoughts On Creating Mockups For Web Design

We create mockups for all of our websites, even if they're not being built for a client. This is because it forces us to really consider the design and user flow of a website.

Instead of building out a whole website off the top of our heads and realizing that the structure is flawed, we can catch any major issues in this phase of the project. You'll see in a later section of this article that the majority of design professionals also harbor this opinion -- Mockups are an essential part of any web design project.

However --- Something else to consider is how the mockup is created.

A trick that we use to save us time is actually generating the mockups with Elementor or Oxygen Builder (the two major page building tools that we use to create custom WordPress websites). We have a library of predesigned blocks and templates (the structure, with no additional styling), which we use to build out the page.

Then, we add content and styling in accordance to our client’s design guidelines and ideas.

This way, if the client signs off on the design, it already exists in HTML and CSS. We don't need to go move from a static image to a dynamic website, as it's already created in a basic form.

In many cases, we're skipping Step 2, jumping directly from the wire frame to a working prototype.

Sometimes, we share the working prototype with the client, but in most cases we do a full page screenshot (even though it's already dynamic), sending our client a static image (similar to the mock up).

At the same time, if we're creating a mockup that we aren't sure a client will like, using some of the tools mentioned below to create a static image is a much better option, as it's quicker to do. If the client rejects the design, we’ll simply move to another mockup idea.

The Best Tools To Create Mockups For Websites

If you find yourself leaning towards static mockup creation, these are the four tools that we recommend. Each of them comes with their own pros and cons, and we've used all of them in a professional setting.

Lunacy

This is a relatively unknown piece of software for Windows, that is Sketch, but free. It even opens .Sketch files.

It's a powerful vector design tool with the intended use case being website and mobile mockup creation. If you're looking for a free and powerful way to generate website mockups, this is the tool for you.

It even includes several powerful features like masked photos, thousands of preinstalled icon sets, vector illustrations, full support of sketch files, and more. It's also twice as fast as Figma, and 10 times faster then Adobe XD when it comes to loading times.

This is our go to tool because it's functionality rivals Photoshop but it's free, quick, and works on Windows. It's also perfect for offline generation, can export code, and save Global components just like Elementor and other page builders.

Photoshop

Photoshop has long been a standard when it comes to website mockup creation. If it fills all the basic tasks, from layers to photo masking, to text and typography, and more.

Many choose to use this if you're familiar with the software from other applications such as editing and graphic design.

Before we stumbled upon Lunacy, this was the main way we generated mockups for our clients. it's also great because there's a large community of those who create mockups around Photoshop, and you can easily find high quality and free templates to get started with.

Adobe XD

Adobe XD is another free offering that is purpose built for mockup generation. When compared to others, this has a couple of tools that set it apart from the pack. First, you can

A major selling point here is the integration with the rest of the Adobe ecosystem, as well as the collaborative tools that it comes with. You can even build out an entire website in real time with others. The new feature functions just like Google Docs.

With design systems, you can easily set standard branding guidelines throughout web sites , and create components which can be quickly added to future projects.

The tool doesn't just integrate with the Adobe system, it also works with other plugins like Microsoft Teams, Hindenburg, and Slack.

If you are a large agency looking for a purpose built system for mockup creation, and want to make use of the new collaborative features , Adobe XD is probably the best choice for you. (Keep in mind, there is a free starter plan, but to access the collaborative features you'll need to opt for the $22.00 per month Teams version.)

Sketch

The final option that we have personally used is well known as the best graphic design platform for Mac OS.

Sketch is essentially Adobe XD on steroids, purpose built for Mac OS. It's definitely enterprise level software, and comes with tons of features like collaboration tools, design tools, and more.

First, everything is vector based, and you get access to tons of design focused features specifically therefore market creation. This whole app is based on productivity and efficiency when it comes to creating website mockups and design Guidelines. that means you get access to reusable components, global styling, tons of collaborative tools , all in a native Mac OS app.

Keep in mind that if you would like to use Sketch for teams, it's $9 per contributor monthly. If you're an individual, you can get a lifetime license for $99.

I'm sure that there's several other great offerings out there that aren't included on this list, so feel free to add platforms and experiences that you have had by clicking this icon And entering your thoughts.

Professional Opinions On Mockups

We surveyed 78 professionals asking the simple question: Do you use mockups in your web design process, or skip directly to building?

As one would expect, there were two major schools of thought - those for, and those against.

Out of the 78, 46 were for using mockups, and 32 were against using mockups.

We selected five of the leading opinions for for using mockups, and five of the leading opinions for those against using markups. They are published below, and should give you some more depth to this question.

Professional Designers who use Mockups

Professional Designers who do not use Mockups

Summary

From these opinions, you can get a good understanding of why some professionals choose to use mockups, while others don't. Something to note, even those who don't use mockups typically plan out their projects before they do it.

Many simply use a sitebuilder as a way to create a “dynamic representation” of what the website could be, essentially a mockup. But, when compared to the traditional market, this way could save designers a lot of time, as the website already exists if the client signs off on it.

And, don't forget, many page builders (Elementor is the most popular) are as simple and easy to use as Photoshop or Adobe XD.  

Conclusion

In our opinion, and what we gathered from our interviews, it looks like “planning” out a website project is as important as ever, but creating static mockups are slowly losing their appeal.

With the rise of page builders making website creation simple, quick and easy, designers are going directly from the idea phase to the prototype phase. Forgoing the static mockup could save a lot of time.

We would love to hear your thoughts about if creating a website mockup is worth it in 2020… Or would you just jump right into the design? Leave a comment below. And, if you found this article interesting, used the social share buttons to the right!