Online editorial design has had brief moments in the limelight, as with the New York Times Snow Fall article of 2012 (In fact, the New York Times is doing amazing work in this area as evidenced in this lovely collection). Everyone pretty much agreed that the results of this particular project were pretty much amazing. This project certainly was an interesting exploration of what modern, interactive editorial design could be. And there have been many other explorations along the same lines.
While this is interesting to the world of editorial design, I think the basic ideas that make this type of design work tick can be used as inspiration for web design in general. In fact, I think in many ways we have already embraced many of the same ideas. By formally calling out the connections I think we can better understand what is happening, and apply those principles even more effectively. After all, editorial design has been around a lot longer then the web. Perhaps we can learn a trick or two.
#1 – Content is king
Yeah, I know, the web is all about the content. We have heard this for a really long time. But content is more than the words on the page. In editorial design, everything in the design communicates something and is therefore a part of the content. The images, the text, the colors, font choices and even the overall flow of the article; all of these say something to the reader.
The most common way I see this rule broken on the web is with really lame filler images for blog posts. Every post needs an image, so someone finds something to fill the whole. In editorial design of the highest quality, the illustrations or photography is crucial to the piece, not just some afterthought to fill in before the article goes live.
Making sure every element of your design communicates what you are trying to say is key. No element should be selected on a whim.
In this interesting article on Medium.com, we find an image used in a very cliché way. The article talks about Net Neutrality as a pawn. And then we have this stock photo of a chessboard. It is just kind of lame. And the fact that it is cliché and generic isn’t the worst part; it doesn’t say anything about the content. We learn nothing about the article from this image. In fact, it suggests the article is about chess.
Write killer copy for your website in Denise Bosler’s new course, Copywriting for Designers. Learn to elicit the attention, response and action that words bring, and become a dually valuable resource as an accomplished copywriter/designer in this in-depth informative course.
#2 – Make everything as big as possible
When in doubt, make everything bigger. Images look better when they are huge and clipped off the page. Text can look absolutely stunning at large sizes where the subtle details of a typeface can shine. And of course text is simply easier to read at larger sizes.
What I love about this approach is that it tends to simplify the contents of a design. Instead of trying to find more crap to pack into the design to make it feel complete or full, you simply do the most you can with fewer elements. Using text as decoration is one huge key.
Another nice benefit to this approach with text is that it helps draw in your readers. Small, dense text is intimidating. Editorial designers figured this out long ago. Analyze almost any editorial design and you will see that things tend to go down in size like a funnel drawing you in. A huge image with really large text, leading to slightly smaller text, leading to a first paragraph set in large type, and finally into the body of an article. It is like a lovely trail of beautiful text intended to draw you in. On the web we tend to default to a title and just a huge blob of text. We have in many cases abandoned this art of onboarding people to our content.
In this example from Teen Vogue we can vividly see how the typographic funnel works. The huge text is set such that you slowly work your way towards the dense content of the article.
This is something Medium.com does really well. Here you can clearly see how the type treatment draws you into the article—in contrast to the example above with the stock chess piece.
#3 – Do not stay between the lines
In editorial design there is always an underlying grid system. And yet the designers will frequently break the boundaries and the rules they have in place. This is done to add depth and interest to the designs and to prevent them from being overly formulaic and boring.
On the web, and inside content management systems, the rules are most often enforced universally and without exception! This is, of course, an upside to the web that we love, and it is generally a great attribute of technology. But it has sucked the element of surprise out of design. If we know how an article will look on a site, every one of them will be the same. And the formula can become monotonous and boring. Sites that have figured out how to bend and break their own rules do a service to their readers.
I am not calling for a rebirth of the art directed blog style, but something more subtle. Why not craft our sites such that we have a grid, and a system for doing things? We can build into this various ways to break the boundaries, and break the rules when it makes sense—and when it can be used to beautify the design and enhance the experience of consuming it.
Don’t get me wrong—consistency is good. And overal,l we should have a strong sense of it in our designs from page to page. But that doesn’t mean we have to stick to a rigid system without fault.
I believe that editorial design has a lot to offer the world of interactive design. And the more I explore the field, the more I find aspects of it that translate beautifully to the web. I keep finding myself saying things like “wow, that dramatic use of large type would look lovely online.”
If inspiration is what you seek the very best way to get new ideas is to look outside your normal boundaries. Inspiration, after all, is a new idea, and how can you expect a new idea if you never explore it?