Design smarter (not harder) with blurring
In the world of UX, communication between designers and developers is super important — but not always easy. One thing that drives me crazy is having to redo mockups to remove one item or feature that is a few months down the line. Rework is the worst!
In the past few projects I’ve worked on, I have been using a combination of things to try to solve this problem. My favorite approach has been blurring features out.
What does blurring out actually mean?
In my most recent project, I was lucky that the features that we were building later were fairly distinct and separate from stuff we were building now.
In this particular project, various items would have statuses, progress reports, and historical data… but none of this was part of the MVP (aka, Minimal Viable Product).
It would be a huge pain to make two versions of the design, one with this stuff and the other without. So instead, I *blurred out* features that were not to be built right now.
The blur is applied on top of the design, so a MVP design could quickly be delivered without features that were not part of it, but the design still had the post-MVP features in it.
Here are some examples of what blurring looks like:
Why blur, not remove?
Good question! Blurring is a great option because:
- It shows that there will be something in a given spot. So you “reserve” that space, avoiding questions like “Well, why don’t we put it over there?” Because there is something there — we’re just not building it yet.
- It allows the design file to be the full version, while the shared designs only show the parts to be developed.
- You don’t need to maintain two versions.
- It’s pretty easy to do.
How to do blurring
There are a bunch of ways you could achieve this effect, but this is the process I follow, using Sketch.
1. Create a rectangle in Sketch, and place it over the feature you want to hide.
2. On the component panel for the rectangle, turn on Blurs and choose Background blur.
The default value for the blur is a gaussian blur, which blurs around the rectangle. Notice the opacity in the middle is 100%, and around the edges it goes to 0%. This is not the blur you want as it won’t hide everything evenly.
Background blur blurs everything evenly, so it will look like it’s not doing much when you first change it. That’s because it blurs what is behind the rectangle while keeping the same opacity across the entire object.
Remove the fill and border, and you’ll see that the background blur is evenly applied.
Now it is obvious there is something there, but it is also obvious that whatever is behind the blur is hidden intentionally.
3. [Optional] Put all your blurs into one group so that it is easy to turn the visibility of them on/off as you work.
4. Upload the blurred version to the design sharing app of your choice, and keep your design file intact.
And you’re done!
Do you have a tip to improve design/dev communication while saving time? If so, we’d love to feature an article by you. Send your ideas our way.
