Go faster with mockups

Mockups are worth their weight in gold.

It’s infinitely quicker to create, tweak, even chuck in the bin and start over with a mockup, than it is a partially working feature built in Blazor, or any other framework.

Iterating mockups is cheap, writing and rewriting code is expensive.

Whether you’re devising it on your own, or as part of a brainstorming process with others, the mockup is a really useful way to get your brain going and to dig in to what this feature is all about.

The real value here comes from the critical thinking you do to get something down on ‘paper’ (even more so than the mockup you end up with).

What if you’re migrating an existing app?

If you’re migrating an existing app it can be really tempting to just use the existing app’s screens as the template for building the new version

This might even be the right call, but make sure you consider the alternative.

Taking some time to revisit the core functionality of the existing app in order to create some mockups of how the new version could work, is likely to surface some useful conversations about the existing app, how it works and, crucially, how it might be improved for the new version.

But how do you actually create a mockup? Here are some pointers:

Stick to low fidelity mockups

It can be tempting to run off and create all singing and dancing mockups that look as close to the ‘real thing’ as possible.

Avoid this temptation!

The problem is, the more ‘high fidelity’ the mockup, the more likely you are to get dragged into non-functional details about the UI, like the colours that should be used, the fonts, which logo or picture should go where…

These are important conversations to have at some point, but if you’re creating a mockup in order to really get your head into a feature, and figure out what it’s for (and how it should work) these other factors are likely to suck up a lot of time and ultimately make it harder to tweak and iterate.

Use software specifically designed for creating mockups

This is closely related to keeping the fidelity low! Some tools are deliberately designed to be minimal.

Minimal in terms of how much “designing” you can actually do, limiting you to some basic UI elements, so you can focus on a ‘rough sketch’ and think about the “how” and “why” rather than the finer details of how it will eventually appear on screen.

Indeed, if you’re happy with a whiteboard and a couple of pens, you may already have found the only tools you need!

Alternatively, here are a couple of useful tools to get started (both offer free versions):

Just watch that the mockup tool itself doesn’t turn into a rabbit-hole sized distraction :)

Remember the aim; to better understand the feature/requirement you’re about to build.

Next up