Published on March 5, 2017
I don’t know why, but I love columns.
There’s something about the neatness of it, the conciseness of it, that makes me very happy and pleased.
The thing is, I would argue that 1-column text is easily the most legible and practical in most situations. Nothing is competing with it. It stands alone to greet your eye with no other elements screaming for your attention.
See, columns inherently introduce competition. And yet, it works. Somehow, when done well, it makes content digestible and even fun to read, even though it’s competing with the column just beside it.
In my obsession, I recently started collecting samples of columns and analyzing them. Let’s take a look at some pieces from my collection and see what we can learn about our mysterious friends.
Quick note: I use examples from Apple’s website a lot in this article. I find their design of columns and icons is perhaps the strongest I’ve ever seen. If you’re an Android nerd, try to appreciate their web design skills, even if you can’t appreciate their (superior) products ???? Jus’ kiddin’
Columns & Icons
What role do icons play in columns, and why do we so often see the two paired together?
Going further: must the icons perfectly represent what the text says? Or is their job simply to capture the “spirit” of the text and display it?
I’d argue the answer is sometimes one, sometimes the other, and usually somewhere in the middle.
Icons should be more “literal” when their paired text covers a crucial benefit that must be understood.
For example, saving or earning money are desires shared by nearly everyone in a capitalistic society. A column speaking about money should feature a currency symbol to immediately alert people: “Here’s something important. Read now.”
This also presents a very practical benefit: People understand the text without having to read it.
What do I mean?
If I described a scared child, how many words would it take? How long for you to read those words?
Now compare that to me showing you a photograph of a scared child. In less than a second, your brain knows what it’s looking at, without having to read a thing.
Look at the 3rd and 4th icons in this row, and notice how, just by seeing the icon and the sub-headline beneath it, you understand the whole of the text:
But what about when text is more abstract and emotions-based, such as “Peace of mind?”
Then you reach into your icon bag for something also more abstract that captures the feeling of “peace of mind.”
You draw on the power of images to evoke meaning and emotion. You allow the icon to do the heavy lifting by getting the user to instantly feel the emotion discussed in your text, before they’ve even read it.
Below, the website and.co uses all 3 of the above variations (literal, abstract, somewhere in-between) to tell its story:
Sometimes columns serve a much more practical purpose: Displaying lists in a less-boring, more-digestible format:
In the image above, the icons’ main job is to continue the feel of the brand, and then, to essentially serve as nifty bullet points for organization.
But isn’t that far more interesting to digest than the same information presented as an ordered list?
- Designers
- Developers
- Writers
- Consultants
- Photographers
- Content Creators
Sometimes I’m not clear on why icons are used – but they seem to add something intangible and attractive that adds value to the website, such as Apple using icons in their navigation here:
Why does this make each option feel so much more appealing? I don’t know. Maybe I’m not supposed to know – maybe that visceral reaction, which the mind can’t unravel, is the very point of their placement.
Here we see Apple using icons in a similar fashion again, but here I’d argue that it gets the user to ingest product benefits they wouldn’t otherwise. The icons make the text more engaging, so the text gets read more often than it otherwise would:
But columns don’t always need icons.
In fact, if the brand you’re designing for, or the subject matter, is more “matter of fact” – icons might not work altogether.
Here we can see how prototyping software “JustInMind” uses colors instead to group relevant columns:
A unified color per section instantly tells you that all columns in that section relate to the highlighted column at the start of the section.
Since they’re presenting so much information (there are 3-4 more sections than this on that page) – icons would make reading this page overwhelming, and chaotic.
They still utilize the illusion of columns feeling “easier” to read than regular text – but in a way that’s, well, easier to read than other columns.
Columns can also be used to present a choice.
Sometimes the choice is equal, where one option is not better or worse than another. In that case, sizing, colors, and design elements should be given equal weight, not preferring one option over the other.
Below: Equal-weighted columns shown (with hover state activated on column 3):
But when you do prefer the user to make one choice over the others, you can highlight a column.
Here we see very clearly that InVision wants you to view the 4 left choices as equal, but Enterprise as special:
While here we see that the Washing Post is more subtly nudging us toward the more expensive option by making it appear the same price, but including more “stuff” for that same price in the right column:
Here, however, Netflix isn’t exactly hiding their presence:
Apple is also making its preference more subtle below. But if you view these columns from left to right, you’ll notice a little “something extra” is added in each progressive one:
Sometimes the designer leaves it up to you to decide which column is more important. They’ll show an image representing each choice, and you’ll choose whichever image resonates with you more:
Columns & Stories
Columns can also tell a product or service’s story – especially when it’s technical or complicated.
On Apple’s MacBook Pro page – the columns and icons tell me things… without really telling me things.
For example, here I’m left with the impression that care and attention went into the sound, without knowing any of the technical mumbo jumbo I don’t really care about:
And here I understand it’s fast and the battery lasts a long time, without actually knowing, or caring, how or why:
Once more, I learn that the screen is great and colorful and bright without knowing their latest way of packing in pixels or anything else:
What do you think? DO you love columns, too?
Tell me about it. I’d love to know why, and if you have any special examples of your own to share.
Leave a comment below 🙂
What is Reliable PSD?
Have you tried “PSD to website” companies, and found yourself frustrated, stressed out, and ready to pull your hair out? You’re not alone. It’s happened to us, too. Many times. That’s why we started Reliable PSD: A PSD to HTML website & WordPress service that actually gets the job done right. With our multi-layered quality assurance process (to ensure your website looks perfect on every browser and device), to our caring, attentive support – we guarantee you’ll love working with us, and that your project will get done right. We’re not just a service provider. We’re your partner who you can truly rely on. Reach out to start the convo today.
This post was last updated on September 19, 2019
