Design Teardown of Medium.com

This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.

Here is the visual hierarchy for the site medium.com as I sketched it.

MediumTeardown

  1. Who is the user?
    The key user is someone who is looking for long form (more than a five minute read usually) writing to read and enjoy.
  2. What is the user’s critical goal?
    The users critical goal is to settle in with a piece of writing and enjoy it from beginning to end with minimal interruption.
  3. Does the visual hierarchy you sketched lead to that goal?
    I’m going to put in a disclaimer here that of all the sites I’ve been reviewing, medium.com is the only one I really truly love and spend a lot of time on. With that said, YES! Medium.com’s visual hierarchy leads users towards pieces that they can read with minimal interruption. The thing that hits you when you visit the site is that there is TONS of whitespace. Every comments link, header, and tiny bit of text is given enough room that it really stands out on the page.

    This is awesome because it means that the site’s visual “background noise” is very low allowing it to achieve great impact with very simple visual hierarchy cues. Here’s an example:

    TMZComparison copy

    MediumComparison copy

    Did you even notice the “Loud” box on the TMZ page? What this means in practical terms is that medium can use very subtle visual cues to achieve great impact. This is great for the flow of reading long form articles because it’s an extremely effective strategy to avoid user eye strain.

  4. What font families are most prominent on the site?
    Well, one really cool thing is that the medium icon in the top left of the site is actually a custom font they packaged called medium-icons – regular. This is the single most visually compelling element on the page because it’s positioned in the top-left corner, quite large, and bolded. This is the only page I’ve reviewed for this assignment that hasn’t had an image logo. I’d imagine this makes later changes to the page much easier.

    Also, there’s a font stack for the large text on the site:
    jaf-bernino-sans, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, Geneva, Verdana, sans-serif;

    And a font stack for the smaller, body text on the site:
    freight-text-pro, Georgia, Cambria, ‘Times New Roman’, Times, serif;

  5. How do these font families contribute to or take away from the site’s flow?
    The title font of freight-text-pro is a serif font with nice tight kerning. It looks a bit like a typewriter font, I would describe it as “boxy”, but overall it reads very, very nicely and looks pleasent.

    To my un-design-educated eyes, mediums title text font (jaf-bernino-sans) looks clean and condensed while still managing to maintain some nice spacing. You can learn more about this font here, and it was interesting looking through all the different ways it can appear. It’s sans serif and tightly packed together (kerning) horizontally and vertically. This is a good counter example for the rule that title’s should be serif fonts.

  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
    I mentioned it above, but I’ll say it again. There is space around every piece of information and text on the page and it makes the page feel very flowy and light. This effect is enhanced by the line spacings being large, colors being generally light (with a few exceptions on the buttons), and font weight being light.

    One thing I really appreciate that helps the flow is that they have both large amounts of space between stories AND a horizontal line to demarcate. Doesn’t this just feel roomy (and clear)?

    MediumSpacingOfArticles

  7. What would you improve to achieve a better hierarchy or flow?
    Generally, I think that medium.com is a triumph of visual design and has a great hierarchy. The only thing I might change would be to decrease the visual significance of the “Start Writing” button. As far as I know medium is supposed to be a place for polished, sometimes professional, writers. How many people actually write for it? It doesn’t seem worth the distraction for most users if only a few click that button.

Leave a Reply

Your email address will not be published. Required fields are marked *