Not all information was created equal. Or perhaps you could say that some information is more equal than others. Regardless, there are few times in which, as a designer, you want to splay it out with equal weight on the screen.
The vast majority of the time, you want to determine the information hierarchy. What should the viewer see as the top-level, categorizing content? What should they see as the important detail? As we view web pages (and, indeed, life in general), we as humans are always building mental models of what we’re experiencing. That helps us fit experiences into patterns and then know how to react.
So when people experience one of our web applications or websites, we want to make sure it feels at least a little familiar (even when we’re designing something way-wacky, there has to be something for the user to grab onto). So one of the first things we do when wireframing or mocking up pages is to determine the information hierarchy.
Once the chunks of content are bucketed that way, it becomes a matter of how to represent that in the design. There are several ways to do that, including through spacing, through padding or placement, through color, and through size.
This is an important header!
Virtually all of those four were employed in the above header, and as the eye scans the page, the viewer will assume that’s an organizational point for the content. But you need not be so obvious about it – often, we will use some subset of the characteristics to consistently denote hierarchies.
For example, one more subtle way to accomplish this is through strategic shading. Of course, we don’t use shading where it will impede accessibility or readability, but some light changes can help the eye determine where the important content is and where it isn’t. (Or, to be more generous, where the slightly less-promoted content is.)
In any event, the conversation about information hierarchy is one that comes pretty early in our discussions with almost every client project. And it’s a key fundamental of visual design.