Is Making A Website Mockup Worth It?

Authored By: James LePage
Published On: August 1, 2020

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.

Product development stages. This applies to web design, and a website mockup is stage two.

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

Free Graphic Design Software

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.

Lunacy | Software Reviews & Alternatives

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

Craft Duplicate for Photoshop – InVision Support
Source

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

February Update of Adobe XD | Creative blog by Adobe

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.

Image result for adobe xd

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

Introducing Auto-Layout for Sketch | by Anima App | Design + ...
Source

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

Simon Ensor
Managing Director
Catchworks

Over the past 10 years, I have done both. From experience, it is far better to spend the time creating a mock up and iterating said mock up prior to jumping into 'just start building'. It is true that page builders and pre-fabricated templates have grown in the market over the past few years. However, from a design & project perspective we would still recommend mock ups.

Ultimately, every website has its own style. The variance between websites can be small, or significant, but the fact remains that each website has its own individual style. At Catchworks we don't view mockups (and amendment stages on mockups) as wasted time. In fact, we use these mockups on one or two pages to 'set the style'. Once this style has been signed off, it results in the remaining pages being designed far quicker and overall, a much more efficient project.

The risk on the other end of the spectrum is in designing an entire website and then having to change the style throughout the site. On Photoshop this can be a nightmare, especially for larger websites. Platforms like Sketch make this process easier, but it still leaves a significantly larger amount of work during amendment stages. In our opinion it is far better to work through these amendments on mockups before diving in to the rest of the site.

Shirish Shikhrakar
Founder
ux360.design

As a professional designer, I always start with mockup creation before building the website. Let me elaborate more on this.

Why is creating a mockup important before building the website?
 
Let's start with a scenario for big projects. The goal of big projects or big companies is to satisfy a large group of customers. User experience has become the number one priority. A few years back, a good experience was a stand-out feature but now UX has become an expected minimum. This makes skipping mockups a bad move in terms of overall output. Having the advantage of testing the design before it is even released helps us encounter and fix problems early on the development stage.
 
We can also analyze this with regard to team size. Big projects require large teams. For this scenario, designers have to collaborate with large teams of developers, quality analysts, and managers. Page builders are limited to only a handful of features that cannot provide a complete solution for big web software like Facebook. It would be a nightmare creating something as small as a chat feature using a page builder. Not only this, but a well laid out design plan(mockup) is also required to execute something feature-packed like Facebook. This concept is similar to having architectural plans ready for building constructions. When there are a lot of risks involved, all involved parties can't start without deciding on the plans for proper execution.
 
Now let's move on to a designers' perspective. Mockups allow designers to create multiple designs with different visual styles and present them to the client. The client can easily make a choice on which visual style they prefer or change certain elements of the design. This process will prove to be a real hassle when trying to implement directly to a page builder. When designing, maintaining our previous work as a backup is really important. With mockups, I can easily go back to the rejected designs and collaborate with my clients to mix and match design elements from the rejected design elements onto their updated designs to explore more options. Trying out multiple designs is possible with page builders but the general mentality with page builders is that to evolve the design on the go. This is a big no, since testing the designs before implementing them is very important. Making changes to the mockup is less expensive than making changes to the live website. If major problems are not encountered in the design phase then the actual users will be the ones that will have the deal with these issues. At this point, the cost of fixing an issue is really high.
 
When are page builders useful?
 
Let's say as an individual I want to quickly create my blog website. In this scenario, my priority is to publish quality content rather than spending time on building a website. Now a page builder is a perfect solution for me since I can create a customized website and avoid using pre-built themes. For a small scale project like this, the budget will always be considerably smaller, and hiring a professional designer doesn't always make sense.
Page builders are also useful when creating websites for small businesses. Creating a localized website for a small bakery shop doesn't need to be complex. The goal is straightforward here -- sell bakery products. For simple goals like these, page builder tools can save lots of time and money. Businesses can just put something out there without any technical knowledge.

Personally, I would always start with a mockup no matter the scenario. This is because my goals are different. As a UX designer, my primary goal is to make sure every user gets a quality experience. No matter the scope of the project, good planning goes a long way while creating something that the end-users can appreciate. As a best practice, I would suggest to always create a mockup before building a website for designers. However, page builders are a great option for non-technical people to quickly create a website with the benefit of saving time and money.
Brian Robben
Founder
Roben

We have a six step web design process, which includes a wireframe mockup onstep two of the six.

Initially, it was tough to get my web designers andmarketers to go for this. Naturally they wanted to jump into building thesite on a server as they were used to doing. However, once we took about three clients through our new process with the wireframe mockup, they saw the fruits of doing it this way. Now, our web design team loves the blueprint to go off of when building. It clears up any confusion.

It avoids having to rebuild parts of the site later on, which only takes up more internal time and expenses. And, as a side benefit we didn't expect, clients love seeing the initial idea take shape from a mockup to a real site. It's been a game changer for our customer experience. Once you try the mockup, you'll never do the first design on a live site again!

Jordan Zarate
CEO
Digital Mountaineers

“Measure twice, cut once” as the old adage goes. [...]

While synchronous design & development may work for smaller-scale projects, it is more time-consuming for larger, custom development projects.

Our design-first approach saves time and costs for our clients. Since our goal is to serve positive impact organizations (nonprofits, public agencies, etc.), staying within a budget becomes more of a consideration than for other industries. Being able to “go back to the drawing board” is less costly if development work hasn’t begun yet, because we are literally going back to the drawing board.

With the advent of better software for mockups, it is even more affordable to design before beginning development. We use MockFlow for all our design efforts. [...] When we have finished a design, we simply send a link to the client and they can directly comment on the mockups. 

This allows for quick iterations and nearly real time design work. MockFlow also helps us develop faster as it generates specs for our developers that make it easier to go direct from design to code.

Jason Mageehan
Founder
LinkedIn Profile

It’s easier than ever to whip up a website – whether you’re going for WordPress, Wix or Squarespace, you’re simply assembling blocks of content; making pretty pictures.

But, does that really work?

We all know that to do create anything of quality; we need to prep. With online advertising more competitive than ever, why would anyone just dive in and see what happens? I’ve helped dozens of companies at all kinds of levels, but the advice I give to all of them…

“If this were a bricks and mortar store, what would you do?”

Easy website builders encourage us to ‘give it a go’, whereas the reality is, that, as entrepreneurs and businesspeople, our time is valuable. Just like getting lost in a hardware store to build a bricks and mortar store, getting lost in all the features at your fingertips on a site builder will suck more time from your day than reading “just one chapter” of a John Grisham novel.

My advice? Start with a structure for your first page, based on the tried and tested marketing methodology: AIDA – Attention, Interest, Decision, Action. What will grab my customers attention, how will I interest them and entice them to want to find out more, what solutions can they choose from and how do they give me money?

That’s what most of us are creating websites for, right? Getting money? Growing our business?

Get some paper, and a pen, give your customer journey a lot of thought; from first click to credit card number. You have more flexibility and creativity with paper and pen than you’ll ever have with a keyboard and mouse.

Professional Designers who do not use Mockups

Michał Moroz
Software Engineer
ResumeLab

Here’s the thing:

As the Internet continues to evolve, mockups are increasingly growing less popular when it comes to site creation.

After all, designers typically craft mockups during design at a stage that is usually not an easy one for most clients to understand. The proposed interactivity in the form of fully-clickable design isn’t just there, and that takes away from experience.

That’s why many site designers and creators are switching over to pre-built sites, which make it possible to skip mockups altogether for several reasons. For one, pre-built sites provide the client with a simple layout to work with and comment on. Second, the client can play around with the actual UI, browse the pages, observe special effects and animations, and much more.

That’s why if you’re looking to build your own site or a site for a client, you may want to tap into the power of pre-built sites to have an improved perspective on where the design is headed and what the final product will look like.

David Alexander
Developer
Mazepress

As a web designer with over 15 years of experience, I can attest to the decline in the use of mockups as personally I have gone from creating a mock-up 100% of the time 10 years ago to pretty much never creating them over the past few years. 

Today it's often easier to work within the confines of your web environment and page builder than it is to create mockups in Photoshop, particularly since mobile responsive websites became the de-facto standard thus requiring 3 mockups to illustrate different sizes. 
 
If the first draft of the website isn't 100% to the client's requirement then it's not that time consuming to change course and work on design changes in the staging environment. 
 
I also mitigate the need for mock-ups by being communicating clearly with the client and looking at examples and competitor websites to get some good direction from the start. 
 
When you are building websites to be responsive, the whole pixel-perfect Photoshop to HTML process has become antiquated and less necessary. 
 
Most of the web designers I know that still utilize mockups in the development and design process are those who come from a graphic design background first and foremost and prefer to flex their creative muscles in their preferred environment (Usually Photoshop). 
 
I specialize in using WordPress with either Beaver Builder or Elementor as the page builder component and also use Webflow which is equally fast when designing and building at the same time.
Dan Bochichio
Cofounder
Bocain Designs

No, we no longer create mockups in the traditional sense, unless the client specifically requires it. We've found it is typically faster (cost-effective) to build out a website using Elementor PRO page builder. For reference, our typical clients are small businesses and mom and pop shops.

We'll build out layouts using latin filler, brand imagery, icons, and stock photos, just like we use to do in Photoshop, except it's much easier to deploy it directly in a page builder. This lets the client see how their website will look on desktop, mobile, and tablets.

When it comes time to revisions to our design, the page builder allows us to do it in real-time with the client, and as soon as we're done, THAT'S IT! We don't have to send it off to our development team to implement the design revisions.

This method saves our clients money in two ways.

- The labor hours are cut significantly by (some) redundant work
- The website is built in a way that they can make edits themselves
after it launches, allowing them to avoid on-going fees for simple text
edits or image swaps.

It keeps our clients happier because the process has fewer steps and they get an end-product that provides them the ability to control their website.

Valentyn Svit
Freelance
dudedisciple.com

Most of the time, I don't create a mockup before I start creating a website because it takes up too much time.

Instead, I send my clients a couple of templates from similar websites in their industry to get a feel for what they're looking for. Once I have a few templates that they like, I'll ask them which sections of that template they absolutely love. Then, I start building their website with those features in mind.

It's easier for me to do it this way because I don't have to try to figure out what I think my client will like and spend hours working on a mockup that can turn out to be a complete redesign later.

This also saves me a lot of design and delivery time by cutting my workload in half since I dive straight into building the website. As a result, I'm able to deliver a quality product in a shorter period of time for my clients.

Kamron Nelson
Director
Business Growth Partners

These days I like to have a client find sites they like and build out the site (using a theme or page builder) so they can "play" with it. I've noticed after design mockups in photoshop or another designer, there is still an element missing.

A picture of a Farrari is great, but it's more fun to test drive it. You get a lot more feedback that way.

Thankfully page builders allow us to make quick updates, sometimes just as quickly as one would editing a flat mockup.

Flat mockups are better for web application development as there are a lot of pages and elements to design.

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!

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.