My morning ritual involves visiting my daily rotation of websites, including The Atlantic, Vulture and Buzzfeed. How are these homepages designed to make their stories more easily accessible and appealing?
This is a question that’s been on my mind recently. The INN tech team has been working hard on planning Largo 2 to make it a more powerful WordPress framework. One area that we’re working on is how to make Largo’s default theme more customizable to different newsrooms’ needs.
I’ve started looking at various mainstream news homepages to brainstorm possibilities for Largo’s new default theme. Specifically, I’ve analyzed the homepages for The New York Times, The Washington Post, Vice, Eater, Vox, Vanity Fair, and New York Times Magazine. Here is what I’ve discovered.
Old Print vs Modern Blogs
After creating wireframe mockups of these 7 websites, I found that I was able to separate them into two groups: the traditional websites (Washington Post and New York Times) and the modern ones (Vice, Eater, Vox, Vanity Fair, and NYT Mag).
The Ghost of Print
Unsurprisingly, the Washington Post and New York Times are very similar in layout design.
These sites are the web versions of what you would find in front of your doorstep (in 1996). Compared to modern news sites, there is much more content on these homepages, and most of it is stuffed “above the fold.” A reader can take a glance at the homepage, briefly read all the headlines and then click on stories that interest them.
The goal is to give the reader a summary of what’s going on that day.
The disadvantage to this layout is that the homepage can feel cluttered and overwhelming, given that there’s so many stories competing for your attention.
Modern and Edgy
On the other hand, the modern news sites functioned like blogs.
These layouts are much more focused; there are a lot less stories and content “above the fold.” Rather, certain featured stories are given space to draw attention to themselves.
Unlike the older, traditional layouts, these websites are designed to get readers to click on the latest content. The reader does not get a comprehensive view of the day’s stories that the New York Times and Washington Post provide.
With this dichotomy in mind, let’s get into the specifics.
Layout Differences
The goal of these traditional news sites is to include as much content as possible above the fold, so they range between 4-column to 6-column layouts.
Whereas the modern sites tend to have only 2 to 3 columns.
Design Choices
The traditional websites are quite conservative in their design choices. Color schemes tend to be grays, blacks, and whites (the Ghost of Print coming up again) and main navigation bars are simple.
The modern websites take a lot more design risks. For example, Eater has their main nav under their featured stories, something that I haven’t seen anywhere else.
Vox places headers over images and frequently uses their signature yellow.
Featured Stories
On traditional homepages, featured stories are highlighted in very subtle ways. On the Washington Post, the header size is what draws your eyes to the feature.
Whereas in modern news sites, featured stories are emphasized through size and white space.
Special shoutout to New York Times Mag, which always has visually dramatic feature stories that make my heart swoon.
Conclusion
Analyzing these different approaches to layout design will continually be helpful to us as we start to brainstorm the architecture of Largo’s new default theme. We want Largo 2 to have powerful design and customization capabilities to make your news website look just as polished as these 7 homepages.
Stay tuned for future blogposts on repeating UI patterns, widgets, and much more!