Wireframe-blog-3-1- Png

If you’ve ever worked on a website design or redesign project, you know how difficult it is to please everyone involved. Sales wants every page to generate leads. Customer support wants to make sure the design doesn’t lead to an increase in support volume. People Ops wants to highlight how great it is to work at your company.

Before committing resources to coding your new website, it’s valuable to make sure that your key decision-makers and stakeholders are happy with the design you’ve arrived at. That’s why it’s so valuable to create a website mockup. A mockup is a static representation of your website that helps you visualize and evaluate the site’s design before you move on to coding it.

There are a number of ways that you can create a website mockup. The method you choose will depend on your design skills and what you want from your mockup. We’ll help you choose the way that’s right for you.

1. Create your website design mockup on paper

It’s not best for most people, but if you’re open to taking the low-tech approach, you could create your website mockup using pen and paper.

It’s not easy to collaborate or get feedback on a paper-based mockup — unless, of course, your collaborator happens to be in the same room with you.

You can only take a physical website mockup so far before you need to recreate it in a digital format. After all, the point of a mockup is to get a highly realistic representation of what the website will look like. Trying to achieve that in a non-digital format would be difficult, tedious, and time-consuming. (However, if you do start with a pen-and-paper sketch, you can easily digitize it with Uizard — just take a picture of it.)

Best for

Quick-and-dirty sketches or wireframes, rather than mockups
Paper-based mockups can be a useful first step for getting the basic ideas for your website out of your head, so you can begin to see what your website might look like. But to easily edit your mockup, add detail to it, and share it with collaborators, you’ll want to move your mockup into a digital format.

2. Create a website mockup with design software

You can use design software like Sketch and Adobe XD to mock up a website in far more detail than you ever could with pen and paper. However, non-designers might find these tools overwhelming.

As with many software tools, there are trade-offs for all the power and extensibility that these tools offer. They’re complex and can be difficult to learn. The learning curve may cause your mockup project to take longer than you had planned.

These tools can also be resource-hungry and require a powerful workstation. Reviews of both Adobe XD and Sketch note that the desktop apps can slow down your computer.

Best for

Experienced UX designers who want to create their own detailed, customized website mockups

3. Hire a designer to create your website mockup

There are plenty of professional designers who could create a website mockup for you. Whether or not you want to go this route will depend on your priorities and budget.

The first one is obvious: designers aren’t cheap, and the better they are, the more they cost.

Plus, while a designer saves you the burden of the creative work, it does not save you the burden of, well, hiring a designer. Hiring a designer entails signing up to find a designer, negotiating a price, and, above all, managing the project. You need to be actively involved in overseeing the designer’s work and giving prompt feedback on the mockup to keep the project moving forward.

Best for

People who want a highly detailed website mockup without having to create it themselves and who are willing to pay for a professional to create one

4. Use Uizard to create your website design mockup

Uizard occupies a unique space among website mockup options and might be the best option for those among us who are not professional designers.

We built Uizard for rapid creation and prototyping, not for designing every minute detail. Experienced designers may find the lack of advanced editing capabilities frustrating. (However, it’s easy to export your design from Uizard so that you can share your mockup with a designer.)

Best for

Non-designers who want to easily create and collaborate on a website mockup

Start mocking up your next website design

Once you’ve determined which of these methods best fits your needs, kick off your next mockup by grabbing your pen, installing the design software of your choice, emailing your designer, or trying Uizard for free.

This content was originally published here.

Scroll to Top