# data[].attributes.attachment_link.readable_text
We use cookies to improve performance and enhance your experience. By using our website you agree to our use of cookies in accordance with our privacy policy.

Close

Import your components from

Code components
made for designers

Design with the exact same UI code components that devs build the product with. No coding skills required - just drag and drop the elements.

Make your
designs accessible

Design inclusive products in line with WCAG standards. Test your prototypes with built-in features like Contrast Checker and Color Blindness Simulator.

Build with user
experience in mind

With States, Variables, Conditional Interactions and Auto Layout, your prototypes will perfectly mimic the end product experience, during usability testing.

"It's amazing to confidently tell my team that I can validate a design in a few days. I can prototype on Monday, test it Tuesday and Wednesday, and show results on Thursday."

Choose an easier way to build products together

Get everyone
on the same page

Wireframe, prototype and ideate together in real time. Work smoothly on Mac, Windows, or in the browser, to support your remote collaboration process.

Collect and provide actionable feedback

Easily share your designs and ask for feedback. Tag your team members, assign comments, and make sure that you're all on the same page.

Simplify your
handoff process

Send your designs to developers with all the specs, code, and automatic redlining. Work with code components and remove the handoff drift completely.

Centralize your
design process

Simplify your design tool stack - try UXPin Merge today and release digital products faster.

# data[].attributes.attachment_link.description
Design tool like no other. Prototypes that feel real, with powers of code components, logic, states, and design systems. Join for free!

# data[].attributes.attachment_link.readable_text
There are lots of ways to create a website 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 four of the most popular options: end-to-end UX tools, mockup tools, graphic design tools, as well as coded designs that start to blur the lines between website mockups and prototypes.

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 switch over 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.

01. End-to-end UX tools

At the highest tier are end-to-end tools that aim to satisfy the entire workflow: mockups, prototyping, documentation, developer handoffs, and design systems. 2017 was definitely the year of the end-to-end design tool. has been catering to this need since the early 2010s, but a number of other brands, such as Adobe and InVision, are now also trying to create the 'one tool to rule them all'.

So how do these tools stack up just up for mockup creation? They can tackle them without any problem - and then some. With UXPin, for example, you can create mockups with multiple states and interactions. It even mimics some features of Photoshop and Sketch by including a Pen tool.

On the other hand, Studio by InVision (its latest tool), allows for some pretty nifty animation editing; while Adobe XD lets you open Photoshop and Sketch files inside your XD designs, and apply colours, symbols, linear gradients and character styles.

Most importantly, end-to-end tools are now offering design systems to ensure consistency of mockups across projects. Design systems give everyone a single source of truth for assets and design principles across tools. If you plan on creating a lot of mockups, this feature becomes almost mandatory.

When selecting an end-to-end tool for creating your website mockup, it's worth considering the following aspects:

Fidelity: How powerful is the tool for visual and interaction design?

Consistency: What features ensure design consistency in your work?

Accuracy: Do the elements you're working with reflect the 'source of truth' in your organisation?

Collaboration: Can you collaborate with stakeholders or other designers?

Developer handoff: How does the tool generate specifications and assets for developers?

02. Dedicated mockup tools

Less robust solutions such as , , or can still provide you with everything you need to build your mockup - you'll just lose the additional workflow and design consistency features. 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.

Dedicated mockup tools have clear advantages: Beginners benefit from their ease of use, while experts appreciate the designs specifically tailored to their advanced needs.

On the more advanced end, tools like Framer and Principle specialise in animations and interactions for mockups.

On the lower end, Moqups and Balsamiq provide more functionality than non-design tools that are sometimes used for wireframes and mockups (such as ), 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, you need to decide if a simple wireframing solution will just do or if you need more advanced screen design. No matter what mockup tool you choose, just make sure you're willing to accept the loss in collaborative workflow and less design consistency features offered by end-to-end tools.

03. Graphic design software

Some designers swear by software like , or Illustrator, especially those particularly skilled or familiar with tools that offer control down to the pixel. Graphic design platforms work best if you're aiming for the highest level of realism and visual fidelity. And as we explain in our guide to rapid prototyping using Photoshop CC, 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.

For style-heavy pages it might help to hammer out the specific visual details during the mockup phase, in which case Photoshop or Sketch will give you the most options. 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.

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.

04. Coded 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 the prototyping stage (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 code into the mockup phase.

While improvements in tools and technology mean that more and more possibilities are opening up in layout design, not everything is easy (or even possible) to recreate in code. Starting in code lets you know right away what you can and cannot do. If you're comfortable with code, it can also be argued that starting with this is less wasteful - the mockup is going to end up in HTML/CSS anyway.

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 aims and keep the developers updated on how you're prioritising features.
Read more:

# data[].attributes.attachment_link.title
4 different ways to create a website mockup

# data[].attributes.attachment_link.description
There are lots of ways to create a website 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.

# data[].attributes.attachment_link.provider_name
UX Week 2018 - The Premier UX Design Conference

# data[].attributes.attachment_link.title
UX Week 2018 - The Premier UX Design Conference

# data[].attributes.attachment_link.description
Design professionals from all over the world gather for four days of community, inspiration and skills building. Now in its 16th year, UX Week delivers new tools you can put to use immediately.

# data[].attributes.attachment_link.description
Six Thinking Hats. Used with well-defined and explicit Return On Investment success in corporations worldwide, Six Thinking Hats is a simple, effective parallel thinking process that helps people be more productive, focused, and mindfully involved. A powerful tool set, which once learned can be applied immediately!

# data[].attributes.attachment_link.title
Sketchnotes and Visual Thinking by Eva-Lotta Lamm

# data[].attributes.attachment_link.description
A collection of beautiful visual notes from leading design conferences - sketched by Eva-Lotta Lamm. Available as printed books or high quality PDFs.