When Wireframes Attack
/When you're wireframing an existing site and realize you're running out of shades of gray, this may be a tip-off that the structure and design of the site is trying to shoehorn in too many layers of information and actions, overburdening the site's layout and design.
Five shades of grey. Not a sexy best-seller.
Here I've had to use five of the six available shades of grey (I could have created more, but that would dilute the ability of the eye to quickly note the information hierarchy). In fact, I've cheated a bit by appropriating white as a layer in the information hierarchy, too.
This site has a tabbed container which sits on top of a background; this container sports boxes for heterogeneous information. Some boxes have to signal that they are selected (as in the "Hed large text" box, which features a slide show of the content of the three boxes directly below), boxes contain text and links, some boxes have heds of their own, and so on.
A site inventory and full IA map could certainly signal the same red flags, and give systemic insight, but those are often comprehensive and resource-consuming tasks. This took me less than an hour and shows us not only that these red flags exist, but where they are.