3 ways to create website mockups

There's lots of ways to create a mockup. It's true there is no 'best' approach, but depending on certain UI and UX designers' styles and preferences (and the design process), some will work better than others.

In this article, we'll look at the pros and cons of mockup tools, graphic design tools, as well as coded mockups that start to blur the lines with prototyping.

01. Using bespoke tools

Using a tool like UXPin, or other solutions like Moqups or Balsamiq, will provide you with everything you need to build your mockup and facilitate the entire process. These tools are designed to make the creation process as easy as possible, so you can focus more on stylistic decisions and less on how to manipulate the program.

Tools like UXPin can help you build mockups quickly and easily

Both experts and beginners feel most comfortable with mockup tools, as beginners prefer their ease of use, while experts appreciate the designs specifically tailored to their advanced needs.

Moqups and Balsamiq provide more functionality than non-design tools that are sometimes used for wireframes and mockups (such as Keynote), but they are limited to only low fidelity designs. They can, however, be quite useful if the goal is to create low-fidelity wireframes very quickly.

When it comes to mockup tools, many are targeted more towards wireframing than true mockups. With built-in collaboration, UXPin offers dozens of element libraries to save time, and it's a simple matter of dragging, dropping, and customising to create your mockup. 

02. Using graphic design software

Some designers swear by software like Photoshop, Sketch or Illustrator, especially those particularly skilled or familiar with tools that offer control down to the pixel. As Nick Pettit of Treehouse points out in a piece explaining mockup types, graphic design platforms work best if you're aiming for the highest level of realism and visual fidelity. And as we explain in our rapid prototyping using Photoshop CC guide, it may be easier than you think.

Working in graphic design software gives you access to an almost endless selection of highly defined colours, so if you're working within the restrictions of a rigid and preset colour scheme – for example, under particular branding rules – then these programs may be your best option. More than colour options, these programs offer far more visual tools, allowing you to tackle the minutiae of detail.

However, the drawback of using this type of software is that it can be difficult to translate when it's time to start coding the design. What worked in Photoshop may not always work in code (elements like fonts, shadows, gradient effects, and so on), which can translate to time wasted figuring out solutions for the prototyping phase.

Learn how to create a mockup in Sketch

If you have a style-heavy page, it might help to hammer out the specific visual details in the mockup process (in which case Photoshop or Sketch will give you the most options).

Just take a look at Hubspot's list of the most beautiful homepages, and it's easy to understand why it sometimes helps to sort out all the visual details sooner rather than later. Similarly, if you're dealing with a nit-picky or hard-to-please client, presenting them with a gorgeous and impressive mockup might win them over more easily.

Mockups created in Photoshop or Sketch can be dragged and dropped into the free UXPin app

It's also worth mentioning that mockups created in Photoshop or Sketch can be dragged and dropped into the prototyping phase with UXPin. This lets you easily animate all layers (no flattening) with a few clicks, and ensures you don't need to start from scratch when it's time to prototype. For more details of how this works, take a look at our tutorial on how to automate your handoffs.

If visuals are not your only priority, you might be more efficient using a tool that allows you to do the wireframing, mockups, and prototyping all in one place. Graphic design software can be more trouble than it's worth for mockups unless you're looking for optimum visualisation – you'll definitely need to communicate regularly with your developer, since these tools aren't designed for collaboration.

03. Coding your mockups

For starters, if you're mainly a designer and not comfortable with coding, then this obviously isn't an option. As discussed in The Guide to Mockups, coded mockups are not the default choice.

Most coding can be postponed until prototyping (if you're creating an HTML/Javascript prototype) or even later (if you use a prototyping tool). But despite the complexity and potential obstacles, there are many respectable designers who advocate introducing coding into the mockup phase.

As Joel Falconer shows us on TNW, building a structure in HTML and then moving to CSS for the basic layout can streamline the entire development process. In theory at least – many would argue that focusing only on visuals during the mockup phase saves time in decision-making and organisation down the road. But those who prefer coding early understand that more mathematical changes such as sizing can be implemented more easily when the code is already written.

Ash Maurya defends the HTML/CSS route to creating mockups

One of the biggest proponents of coded mockups is Ash Maurya, Founder/CEO of Spark59 and speaker on development. When describing how he prefers to build mockups, Maurya defends the HTML/CSS route, and makes some solid points:

  • Feasibility: 'Flashy' mockups designed only to look good can be difficult to translate into code, resulting in wasted time and effort. Elements like gradients, fonts, and effects – while easy to create in other tools – can be cumbersome or even impossible to recreate when coding. Starting in code lets you know right away what you can and cannot do.
  • Quick iteration: According to Maurya, coding actually saves time by simplifying the iteration process. However, others suggest it adds time by dragging out design decisions.
  • Minimal waste: "Creating a mockup in anything other than the final technology in which the product is delivered creates waste." Because the mockup is going to end up in HTML/CSS anyway, Maurya suggests adding fidelity there.

But as we mentioned before, mockups with coding are not a popular strategy, for more reasons than the difficulty of coding. Starting to code too early may limit your creativity and readiness to experiment, as it's easy to worry about the feasibility of your ideas in code rather than how exciting they could look. 

It's up to you when to introduce coding. Just make sure you know your design priorities and keep the developers updated on how you're prioritising features.

Conclusion

Don't make the mistake of thinking all mockups are the same. Simple decisions about platforms, fidelity, and coding will all produce significantly different results.

Know what you want and what your goals are before you even begin the design process – if you want a tool that supports all three phases, it's best to start out using it than to begin halfway through. Likewise, if you need a stellar, fully realistic mockup, keep in mind that you'll be using a graphic design editor at some point.

If you enjoyed this, check out these related articles: