Medium Design Teardown

Hi everyone! This is another project for Viking Code School. This time, it involves a design teardown of Medium.com. This one was actually pretty tricky because I love to read articles on Medium so it was difficult to critique. I’m a big fan of a minimalist aesthetic, particularly for sites where you do a lot of reading, so this might not be as inspired of a a teardown. But – I try to be thorough!

Who is the user?

The user is somebody who is interested in reading longform news – someone who wants to stay a little while, and do some thoughtful reading. From my anecdotal evidence, it might also be someone who is interested in tech and the tech industry.

What is the user’s critical goal? (or at least what do you think the site owner wants them to do?)

The user’s critical goal is to find a news story that interests them and take their time reading it – and then hopefully find another story they like and keep reading! 

Does the visual hierarchy you sketched lead to that goal?

Yes – what the user wants to do is find stories that catch their eye, and read those without a lot of distraction. The visual hierarchy is really simple, which actually really enhances the ability of the user to reach their goal. The simplicity is done in a very clean way, and gives the site a kind of serenity that lends itself to settling in for a long read. 

What font families are most prominent on the site? (use the WhatFont add-on or your browser’s developer tools to inspect this).

  1. Medium-content-sans-serif-font
  2. System-UI

How do these font families contribute to or take away from the site’s flow?

These font families are both really simple, which contributes to the site’s flow by fitting in with the overall theme of simplicity. By focusing on an ease of reading, Medium sticks with what is important which is the content. 

How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?

Line spacings – the lines are spaced very far apart. There is a lot of space between stories, and not a lot of text on the homepage overall. The spacing is good because it draws your eye to the text that there is, increasing the likelihood of you finding something that interests you without resorting to clickbait-y titles or bright colors or flashiness to get the point across.

Sizes – On the homepage, the titles are the text in the biggest size. This is great because it means that the text that is getting the most attention will be the titles. It also means that, with clearly marked titles and blurbs, it will appear to be organized and make sense. It will look neat. 

What would you improve to achieve a better hierarchy or flow?

Honestly, there isn’t a lot that I would improve. I really like this site. It matches my own aesthetic and style, which is pretty minimalist, and I really appreciate a site that doesn’t get in the way of its content. I like that there is one accent color, green, which keeps the page from looking boring, but there isn’t green everywhere and it still looks very clean and crisp. 

Advertisements

3 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s