Viking Code School · Web Design

Design Teardown of Medium

This design teardown of the website for Medium is the third of four design teardowns in an assignment for the Web Design Basics mini-course of Viking Code School’s prep work.

Before answering the questions below, a general sketch of the layout of the homepage was made.

Medium sketch
Visual hierarchy sketch of the Medium website as of April 2017.

1. Who is the user?

A younger (18-40) consumer of news, interesting stories, and blog articles.

2. What is the user’s critical goal?

The user wants to discover unique articles that contain substance and interesting stories on diverse topics by a variety of authors.

3. Does the visual hierarchy you sketched lead to that goal?

The visual hierarchy does a good job on helping the user accomplish their goal. The website uses a white background with white space flanking the central stream of articles, which keeps the layout clean and presentable. There are no ads cluttering any of the columns. The top navigation bar is simple and directs users to article categories. A large graphical banner at the top offers the phone app, which would be useful to readers who want to access articles on the go. Below this are a series of articles grouped under category headers. Each article is accompanied by the featured image, a headline, a text excerpt, a small circular profile image of the author, their name, and the date published. There are generally two or three columns used throughout most of the page.

4. What font families are most prominent on the site?

Sergoe UI – headline

medium-content-sans-serif – body text

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

The fonts are easy to read and give the site a simple and modern look. Both headlines and body content are sans serif.

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

The line spacing is good and makes the text easy to read. The headlines are in bold, which allow them to pop out to the user. Headlines are 36px or 24px, while excerpt text is 18px, allowing the user to easily delineate between them. Instead of making the text a solid black, it is given a slight opacity with rgba (0, 0, 0, 0.8). I think this is a good choice as it makes the text easier to read for longer periods of time and eliminates the strong contrast between solid black and white. The articles are asymmetrically balanced. The navigation bar uses a strong opacity, making the text appear grey – rgba (0, 0, 0, 0.6), bring the focus to the articles, but also making the nav bar easily accessible for browsing. Author names for each article are highlighted in a shade of green (#1c9963).

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

Medium does a great job of helping the users achieve their goals of finding and reading interesting articles. The large call to action banner for the app could be smaller and not take up so much space above the fold. Aside from that, the layout is well organized with articles grouped by topic. Some of the articles have none or very short text excerpts, which could be improved to give the user a better idea if they want to click into a particular article. Exploration is obviously key to an optimal use of the site, but I do not think that is a drawback in this case, but rather adds to the purpose of a user’s visit to find a variety of unique articles.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s