A Dive Into Design: Delfi.ee
Taking a look at the design of an online news site.
This post is a part of Viking Code School Prep Work. The purpose is to take a hands-on approach to web design and “tear down” a website’s design.
I chose the news site Delfi, because I’ve used it frequently and noticed the good and the bad in its design.
When you first load up the site (without an adblocker) you’re greeted with a pretty horrible sight:
There’s 3 huge ads right at the top of the page, two of them animated. The only „real” part of the site is the small page title (DELFI) and even tinier links to topics and related sites. Even though the screenshot is taken on a laptop, you’d still have to scroll down to the actual content on a normal screen (and most likely on a mobile screen as well, I didn’t dare loading it on my phone).
Moving forward and looking at the actual content, we can answer the following questions to get an understanding of the site’s design.
Who is the main user?
Since Delfi is an Estonian site, the primary user is obviously an Estonian who wants to stay up to date with the latest national and international events.
What is the critical goal?
The ciritcal goal of the site is to provide a quick and easy overview of the latest headlines and the opportunity to read the full article if the user is interested in it.
Does the visual hierarchy lead to that goal?
Here’s the actual content of the site without too many ads. I blurred it out so the hierarchy would stick out a bit better.
The articles are divided into a grid based on the (subjective) importance of any article, where the more newsworthy stories have a 2-column grid, older stories get a 3-column grid and small or local articles are put into a 4-column grid.
What font families are most prominent on the site and how do they conrtibute or take away from the site’s flow?
Here’s an example of an article:
Nearly the entire page of Delfi uses a sans-serif font, Roboto being the default font with the exception of the „Leave a Comment” window, which utilizes the Open Sans font. However, the latter is such a small part of the whole site, we might aswell ignore it.
I think using only one font for the entirety of the content on the site is great. Not only is it good from the loading time perspective, it’s also stylistically pure. All of the hierarchy within the content (i.e. an article) is achieved through manipulating font size and font weight. Combining all of this with Roboto’s formal sans-serif type and good readability, I would say the font choice of Delfi makes the site’s flow a lot smoother. An additional upside to using only Roboto is it makes the distinction between actual content and ads fairly simple because none of the ads use the this font.
How do the line spacings, sizes, colors and weights contribute or take away from the site’s flow?
Looking at the example article above it’s pretty easy to see the visual hierarchy of the content. Spacing correlates with how related each element is to the other so words and sentences are closer together than headings and paragraphs.
Different font weights distinguish headings from paragraphs and links are coloured blue so they stand out from the rest of the text. Although the headings are coloured black and the site’s background is pure white, the massive contrast is tolerable since headings are not too long. The content of an article is coloured gray (#171717) so the contrast is not as stark and allows to comfortably read longer pieces of text.
Again, all of this combined gives the site a smooth flow and great user experience.
What design aspects would make the flow or hierarchy better?
Aside from the obvious point of reducing ads, especially in the middle of articles there’s honestly very few aspects to improve. The readability is great thanks to font size/color choices and visual hierarchy created with spacing. On the main page I would add thin and light-coloured borders to articles to make it more obvious which headlines and pictures go together and also give a bit of contrast between different articles.
Within an article I think making quotes stand out more by putting them in cursive or by changing font weight/color would add more diversity and structure to any article without messing with the site’s flow.