Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

Wall Street Journal Redux

October 2, 2007

The Wall Street Journal online edition has nearly 990,000 paying subscribers. So I can safely say it is something of a Web giant. But while the print edition is a well designed and smartly laid-out publication, the main page of the online edition lacks most of the design soundness and all of the panache of the print version. In fact, it’s a visual train wreck. But not for the big picture elements; this page fails badly because of simple details.

The Wall Street Journal online

What is surprising is that the interior sections of the WSJ are not badly designed at all. Or at least they’re nowhere near as badly designed as the main page. This disparity is not, however, simply due to the volume or complexity of content on the main page. Rather, the page is just a mishmash of graphical elements, and presents us with a clear example of how details matter.

Problematic issues

Presented with the challenge of neatly presenting a large volume of content, most of it textual, it is a given that the page will be somewhat visually complex. Therefore it is the designer’s job to simplify things and create a clear content hierarchy—while not doing things that exacerbate the visual complexity. The designer(s) of the WSJ online forgot that last part.

Color

One way to simplify things is to use a limited color palette in the design. Doing so mitigates the visual noise otherwise created by a collection of colors. With the WSJ, however, they’ve chosen the opposite route.

WSJ color palette

These colors in the image above come only from the content and page structure, and do not reflect colors used in advertisements or on-screen widgets from third parties. While most readers’ eyes will not pick out the individual colors and variations, the overall result is an inference of high-complexity from the content. This creates a degree of reader stress and a discomfort that is entirely unnecessary.

The link text and non-link text is difficult to distinguish for how color has been used. While all of the blue text is links, some of the red text is links and some is not. Also, some of the orange text is links and some is not (and what’s with the red and orange used here??).

In some places there is a palpable degree of color dissonance, as can be seen in this example:

color dissonance

This is just plain shoddy work. It’s as if there is no regard whatever for the hues or tints used within the basic color palette. Looks like a third grade art project. But no, it’s actually the largest online subscription publication in the world!

Section headings

Again, presented with the challenge of neatly presenting a large and complex volume of content, a designer must take steps to minimize the visual noise. One way to do this is to use a consistent and simple mechanism for things like section headings. The WSJ online again goes the opposite route:

section headings

Here we see that they’ve used a seemingly random and wholly dissociated collection of section headings on the main page. Aside from there being no reason for this whatsoever, the result is simply sloppy. What’s more, most of these headings don’t follow the branding at all.

Now, the idea of visual differentiation for semantic variation is a valid one. However, here it is an unnecessary concern and the method used to address it fails. It would be completely appropriate to use identical or similar section headings here, because unlike how people generally regard content on the Web, people do come to this site to read the text. No fancy embellishment is required in this context.

Typography and branding

header

True, the WSJ.com main page looks trite, amateurish, and dated (especially the cramped and chaotic masthead), but that’s not often compelling enough reasons for a redesign; there are usually more important factors to consider and address. In this case, however, the overall effort is fundamentally unsound, so…

I know that the WSJ has a visual identity that differs from, say CNN, but there’s very little effort here to maintain any relationship with the WSJ branding. Further, you can’t be dogmatically idiotic when you take your brand online. If your corporate look/feel becomes problematic online, you’ve got to take steps to appropriately adapt your identity to serve your fundamental purpose(s).

The printed WSJ is so well designed that there is absolutely no excuse for not bringing that same design sensibility and craft quality online. In print, they do a rather nice job of employing typography, both generally and as it relates to their brand identity. Online, they seem to lose all grasp of typography and the page design suffers accordingly. There are very elegant ways to combine serif and sans-serif fonts in a design online. This ain’t it.

Additionally, they’ve use images for some text, with the result being horribly pixilated text on the page that smacks of very low quality design. There’s simply no reason to use images for text like this, especially when the results create such a negative impact on the page.

pixelated text
Details

I won’t beat up the layout or grid too terribly here. It’s not all that bad. I still hold with the idea that as the Web environment is largely horizontal, they should in some measure abandon the slavish adherence to long vertical columns of content, but that is a minor concern in light of what’s done poorly here: details.

This page fails for how details have been neglected or abused. If not for these awfully treated details, this could be a rather nice main page for a news site. As it is, however, it’s a study in chaos, so let’s address the details a bit better.

Wall Street Journal Online Redux

For this redux exercise I’ll not craft some significantly different design. Instead, I’ll use basically the same grid and same content architecture, but with more attention to details. I’ll also treat certain areas with more of an advisable approach to the overall look and feel and visual impression offered by the page. I also want to bring a bit more of the WSJ’s branding to the fore.

Wall Street Journal redux

See the full-size version >>

This redux is quite close to the current design because I want to show the benefits of treating details carefully.

Note: you’ll have to ignore that I did not use the actual WSJ serif font in this redux. I don’t have that one.

First of all I’ve limited the color palette to 4 colors; three of them are shades of the primary WSJ blue. The last color is complimentary and very close to the orange of the current design. Limiting the color palette in this way has likely the largest impact on improving the design. Gone is the chaos of the 15 colors—they’re simply not necessary.

I’ve taken easy steps to simplify and strengthen the masthead of the page. The Wall Street Journal is a strong brand and it deserves to maintain its strength online. The logo, login, associated links, and the top navigation are all much more neatly arranged and in line with the dignity of the WSJ brand.

One color for text links (outside of the navigation buttons) is all that is necessary. The result is a much neater, much visually easier-to-grasp system for hyperlinking. The result is that the large volume and complex nature of the content is now seemingly simpler and easier to visually consume.

I’ve used one simple motif for the section headings and I’ve worked to bring more of the look and feel of the print version to this page. As a result, the branding is stronger and the page is again visually simplified. I believe that the overall impression of this page has much of the dignity of the print version while maintaining the necessary online mechanisms.

Conclusion

By maintaining the overall current design with this redux I hope that the power of details—fewer details treated more carefully—becomes apparent. The current design of the WSJ online tries needlessly to make too many elements on the page distinct and uses too many structural mechanisms.

Content has structure, and can be structurally self-supporting. As the volume and complexity of content increases, it becomes correspondingly important to exploit this characteristic. Perhaps a good rule of thumb would be that as volume and complexity of content increases, structure and embellishments should decrease. Else you end up with a page like the current WSJ main page.

Archives

Archive

Practice