A sketch plugin: Add blur effect to artboards for easily testing visual hierarchy in your design process.
Add blur effect to artboards for easily testing visual hierarchy in your design process.
Select the artboards (or any layers inside) you want to blur, then press ctrl+option+b, every selected artboard will be covered by a background-blur layer. If do it again, the blur layer will be removed.
You can set the blur amount of all blur layers in Blur amount setting in plugin menu.
Every interface designer knows the importance of visual hierarchy in interface design. Good visual hierarchy can inform users and communicate content relationship better. When a user see your interface, they form an impression in the first few seconds. So a good interface should be able to present a clear and obvious visual hierarchy instantly.
Lee Munroe‘s articel offers a great method to test visual hierarchy easily, Blurring Technique, which is to blur your interface and see is if the elements you want to stand out still stand out.
Inspired by him, I made Blur Artboard, which helps designers toggle blur effect easily at their work in Sketch.
给画板添加模糊效果，让你快速在设计过程中测试视觉层级。
选中你想要有模糊效果的画板（或者其内部任意元素），按ctrl+option+b，可在每个目标画板生成一个覆盖整个画板的背景模糊图层，再按一次则删除该模糊图层。
打开插件菜单中Blur amount setting，可对所有模糊图层的模糊程度进行设置。
每一个界面设计师都理解视觉层级在界面设计中的重要性。好的视觉层级有利于向用户传递信息和明确内容关系。当用户浏览一个界面时，通常在极短时间内就对界面形成了大体印象。因此好的界面必须在第一时间给用户呈现出明确清晰的视觉层级。
Lee Munroe的文章提供了一个好办法来快速测试界面的视觉层级，Blurring Technique，将你的界面模糊后来观察你想突出或减弱哪些元素。
受到他的启发，我做了Blur Artboard，方便设计师在设计过程中快速开关选中界面的模糊效果。