{"id":3552,"date":"2015-08-11T10:06:15","date_gmt":"2015-08-11T08:06:15","guid":{"rendered":"https:\/\/usersnap.com\/?p=3552"},"modified":"2025-08-06T17:56:16","modified_gmt":"2025-08-06T15:56:16","slug":"prototyping-tips-website-mockups","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/prototyping-tips-website-mockups\/","title":{"rendered":"5 essential tips for improving your website mockups & prototypes!"},"content":{"rendered":"\n

Have you ever received feedback on new website mockups or prototypes starting with \u201cWhich language is that? I don\u2019t understand \u201clorem ipsum!!<\/em>\u201d?<\/span><\/p>\n\n\n\n

Well, yes? Then you\u2019ve been there. And it isn\u2019t really a great feeling. Not because of the question itself. <\/span><\/p>\n\n\n\n

In this post we are going to show you 5 tips on how to prevent yourself from receiving such feedback and how to make your website<\/a> mockups even better.<\/strong><\/span><\/p>\n\n\n\n\n\n\n

Try Usersnap for Website Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

1. The Definition of Prototype Fidelity<\/span><\/h2>\n\n\n\n

As Jerry Cao wrote in a <\/span>recent article on sixrevisions.com<\/span><\/a>, the key to a successful website mockup can be found in the definition of the level of fidelity that will be used in the prototyping stage.<\/span><\/p>\n\n\n\n

Starting with pen and paper for working on some first scribbles and sketches is a clear win. These sketches will be pretty generic and low-fi. While increase the fidelity of those sketches, I\u2019d recommend launching a simple sketch tool, like <\/span>balsamiq<\/span><\/a> or moqups. Only <\/span>go pro<\/span><\/i> and use tools like Photoshop (or similar software) when you\u2019re working high fidelity sketches.<\/span><\/p>\n\n\n\n

The key takeaway here is to find a great timing from sketch to low-fi, to hi-fi.<\/span><\/p>\n\n\n

\n
\"sketches
(source: jfarny.com<\/a>)<\/figcaption><\/figure>\n<\/div>\n\n\n

Both, starting too early or too late with high fidelity mockups will waste resources (both time and material) and you\u2019ll risk to end up with a mediocre prototype.<\/span><\/p>\n\n\n

\n
\"website<\/figure>\n<\/div>\n\n\n

<\/span><\/p>\n\n\n\n

2. Identify problems<\/span><\/h2>\n\n\n\n

While working on sketches and wireframe we easily tend to think about solutions, before we tackle the \u201creal problem\u201d. <\/span><\/p>\n\n\n\n

\n

The customer request: \u201cmake the logo bigger\u201d isn\u2019t identifying any problem. <\/i><\/b><\/h3>\n<\/blockquote>\n\n\n\n

It\u2019s a proposed solution, though you\u2019re not given information about the problem for that solution. Asking a lot of \u201cWhy\u201d-questions can help in such situations. <\/span><\/p>\n\n\n\n

Nowadays, we are trained to think in solutions and in many situations those thinking can be quite handy. Though, it isn\u2019t really that much helpful when we\u2019re in the middle of the creative process drafting wireframes and mockups.<\/span><\/p>\n\n\n\n

And most of these solutions come in form of change requests, like \u201cCan we change the color from red to blue?\u201d.<\/span><\/p>\n\n\n\n

So, if you\u2019re getting such a \u201csolution\u201d from your colleagues and clients, try to ask the Why-question. For example: \u201cCan you tell me what the challenge is that you\u2019re trying to solve with this?\u201d. <\/span><\/p>\n\n\n\n

Getting to the ground and discovering the real problems will not only result in a way better outcome, but will make your life as a designer and developer easier \ud83d\ude42<\/span><\/p>\n\n\n\n

3. Use realistic assets<\/span><\/h2>\n\n\n\n

I know, images and copy won\u2019t be on your priority list while working on a new mockup. Though they should be. Really.<\/span><\/p>\n\n\n\n

The right asset in your mockup can not only ruin your whole wireframe, but it can also bring it to the next design level, <\/span>the high fidelity design<\/i><\/b>. <\/span><\/p>\n\n\n\n

Besides the sketching and mockup stage, you (and your colleagues & clients) should be working on the visual language of your new web app or website as well. <\/span><\/p>\n\n\n\n

Of course, there\u2019s no need to present custom images or finished illustration in those mockups. <\/span><\/p>\n\n\n\n

There\u2019s a <\/span>broad range of great stock images and videos<\/span><\/a> available which will help you to make your mockups more vivid and will definitely make the difference when presenting those mockups.<\/span><\/p>\n\n\n

\n
\"visual
(source: Google Style Imagery)<\/figcaption><\/figure>\n<\/div>\n\n\n

4. Fail fast and fix things faster<\/span><\/h2>\n\n\n\n

Keeping your mockup and prototyping workflow static can be a great waste of time. In most cases it\u2019s way more efficient to keep it lean and simple. When concluding on the first sketches and wireframes you can iterate more quickly by little <\/span>baby steps<\/span><\/i> and a close feedback process. <\/span><\/p>\n\n\n\n

Therefore I\u2019d recommend to:<\/strong><\/p>\n\n\n\n