Page Dimming
June 16th, 2009
Page dimming is another visual tactic which can be used to focus attention away from what is less important toward what really matters. Here is one example from Rebecca, of an overlay being used in a wireframe in combination with the background page becoming more grey and faded. I’m not exactly sure how it was technically implemented here, however often all that is required is a drawn rectangle with a see through opacity. The elements which require more attention (such as the overlay in this case) are then brought up above all layers. This approach provides another way of emphasizing certain interface elements for users of the interface, and also for readers of design documentation.
Credits: Rebecca M. Allen
6 Responses to “Page Dimming”
June 16th, 2009 at 1:54 pm
I do this from time to time (usually using a semi-transparent layer in Omnigraffle) but there is a slight danger if used improperly. If you're doing it to demonstrate an actual behaviour – such as dimming the page behind a modal layer – it's fine, but if you're doing it to highlight something for the purposes of the documentation, it can cause confusion.
I once used the technique purely to draw a client's attention to something in the document, but they thought I was proposing a behaviour on the page.
By no means the end of the world, but something worth bearing in mind when using this technique.
June 16th, 2009 at 2:23 pm
It's a handy technique, but I've found that when you open up a PDF of a Visio doc with transparent elements, it near as crashes Acrobat Reader completely. Anyone else experienced this?
June 16th, 2009 at 2:26 pm
I really like page dimming when I experience it in software and online. It's a nice way to remove distractions without forcing the user down into a tunnel and then back out again. I've used it a few times, but had a lot of pushback from engineers. It's always a negotiation!
June 17th, 2009 at 2:43 am
I've found that same thing and sometimes it appears as if it has a crosshatch pattern fill. I usually convert to JPG and then from JPG to PDF to prevent that. It's not a fast process, but a viable workaround.
June 17th, 2009 at 12:47 pm
It's a very useful technique and I had users that specifically requested support for it in WireframeSketcher. Technically it's easy to implement using a semi-transparent rectangle overlay. Here's how it looks in WireframeSketcher:
http://wireframesketcher.com/samples/PageDimming….
June 17th, 2009 at 12:58 pm
Agreed. Good point.