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.
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.
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.
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.
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.
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.
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 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 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.)
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.
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.
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.
As a professional designer, I always start with mockup creation before building the website. Let me elaborate more on this.
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!
“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.
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.
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.
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.
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.
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.
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.
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.
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!