15 votes

End the Tyranny of Arial: The big internet platforms use the same fonts and backgrounds. Let’s make it interesting again.

15 comments

  1. [4]
    unknown user
    Link
    I. The argument I heard is that the ongoing unification of design ideas (e.g., all apps look the same) is, in a way, the UX industry's maturation, in that the plainer, simpler designs allow the...
    • Exemplary

    I. The argument I heard is that the ongoing unification of design ideas (e.g., all apps look the same) is, in a way, the UX industry's maturation, in that the plainer, simpler designs allow the user to focus on content and interactions with the software, which is supposed to improve your (user's) experience. Medium was that for blogging in the beginning.

    It's meant to stand out in the same way a well-made tool stands out: by paying attention to detail, rather than bursting the user with colors and forms in order to capture their lower-brain crow-like "shiny!" instincts.

    II. When I see Ethan Marcotte's website, I squee a little. The front page seems cluttered, but take a look at any blog piece of his, and you'll see what real high-quality web design looks like. I disagree with some of the specific choices he made – like the lists and the initial post date prefixed with a dash – but overall, it's very good: clean, handsome, spacious without feeling empty, and – oh good lord that height map. The "fat footer" (the kind of a footer that gets filled with relatively-much content) is well-done, works well on its own, and presents the content in a clear, distinguishable fashion.

    I'd hire him to make my website.

    III. The state of the web, UI-wise, is pretty good, as far as I'm concerned. The newcomers have a lot of theory to rely on as far as building a website is concerned – there are special occasions that don't occur in any other medium, and it is not reliably possible to handle those gracefully.

    IV. The web that people get nostalgic about – the 90s semi-self-made websites with startling backgrounds, and <marquee>s (text that floats across the line repeatedly), and extremely-bright colors (hello, hot pink!) – is "bad" in the same way a child's painting is "bad": insufficient from the standpoint of an adult, yet charming in how sincere it is and from with how much excitement it was made. It was also personal – as in, built by the person and reflective of their preferences – and the IKEA effect is strong.

    (I once built an IKEA table all by myself. Never had that experience before, and it was super-exciting – so much so that I shared the photos of it with my friends, something I'd otherwise consider silly. It took me being separated from it for two years to see that it wasn't a good table, per se – especially not for the price I paid for it. I could've had something well-made for the same price and not have a complaint about it. But it felt like my table.)

    V. The majority of people have very little aesthetic taste – or none at all. That's why designers and artists stand out so much: they don't just have good taste – they know how to apply it to get what they want. If you let an average user (anywhere that isn't a design forum) build a theme for the site, most of the time, you'd get an ugly environment to work with.

    Taste is a skill. It can be trained and honed so that people who wouldn't usually describe themselves as artistic could use it to decorate their home, or their workplace, or... their website. It isn't offered as such, though: in that, you can't subscribe to an online course on "taste". It's a product of the details and the connections you take in as you delve deeper into a particular venue of design. This is how you make a subtle, accent color for your bedroom. These items go well together, but beware of this particular combination. This font represents a playful-business attitude, and you want to use that in your brand if you want to appeal to the younger users.

    There is no requirement to have taste to theming akin to early social networks, which... bright-red watermelon slices in the background, which can't possibly be offset by anything on the foreground... yeah.

    VI. I use Inter on most of my website because it gives me exactly what I want: a well-made font that doesn't stand out on its own and lets you focus on the content. I'm writing long parts, which means I seek to eliminate as much distraction from the UI as possible. Inter does its part of the job well.

    Indigrid does something similar: it uses Segoe UI, the default Windows font, to leverage thinking and ideation without the distraction of the interface. Yes, the app features orangered highlights amidst the sea of white – but it only serves as a way to underline text nodes. Once you start editing one, the rest of the app dims to allow you to focus on the thing that matters most in the moment: the text you put down.

    VII. There's a reason you hire experienced UI designers with an established portfolio to do work for your serious online project: it matters a great deal, the vibe your project gives off. You, personally, may like something like Courier, or Montserrat, or, hell, even Papyrus, but without the experience and the honed taste a professional is willing to lend you, you're not likely to know what's best for the project as a whole.

    It's not just the font, of course, but given that the Web is primarily a written medium – with images, audio, and video standing not even close. Typography turns out to be important. Spacing, color schemes, navigation – even content structure – all matter for the perception of the thing you're making. You call a plumber if a pipe is leaking. You call a UI designer when your website needs a facelift. Much like you'd trust any other professional about doing their work, you give your trust in the senses of a designer – often a mix between artistry and engineering – so that they, too, produce the result you want.

    VIII. Generally, you people to engage with your content.

    Generally, the more people engage with it, the better.

    Generally, a design that stands out is a design people remember, but it's not necessary a design people want to associate with.

    Generally, you don't want to be Hulk Hogan, or Elon Musk, or Iggy Pop, or Gordon Ramsey. You want to be able to admire their craft and their achievements from the comfort of your own, very personal space. You may like fighting, or engineering, or performing with a band, or cooking, but you don't want to do all of that on a level celebrities do it. Theirs is to stand out.

    IX. Typeface matters in the same way the way you speak matters. It can appeal, or it antagonize.

    X. It takes a while to learn this stuff.

    15 votes
    1. [2]
      Comment deleted by author
      Link Parent
      1. unknown user
        Link Parent
        Bad rendering isn't usual with webfonts. They're all supposed to like fine, because they're just fonts. This may be an issue based on your hardware and/or software. (Arial does look sharp, just as...

        As usually with webfonts

        Bad rendering isn't usual with webfonts. They're all supposed to like fine, because they're just fonts. This may be an issue based on your hardware and/or software.

        (Arial does look sharp, just as much as other default Windows fonts. Don't ask me why they're good and others fail.)

        For comparison: this is what the very top of Inter's page looks to me. The large text is just fine, and the small text is a little blurry. Is that the same thing you see?

    2. [2]
      unknown user
      Link Parent
      I've got to say, I disagree a little. Maybe it's just me, but out of the corner of my eye, "that height map" makes it look unpleasantly like there's grease or oil on my screen, and I don't...

      II. […] overall, it's very good

      I've got to say, I disagree a little. Maybe it's just me, but out of the corner of my eye, "that height map" makes it look unpleasantly like there's grease or oil on my screen, and I don't understand the necessity of the tiny black border around the whole page – it just makes the page feel weirdly detached from the browser, like I'm looking at the page through a window, and it's a jarring contrast to the websites I use regularly, none of which do that. I especially dislike the big sticky footer on the article pages; that effectively breaks the page-up/-down buttons, since it covers up a line of text between pages.

      I also don't entirely understand why he's chosen to serve a PWA manifest, meaning I get a button to "install Ethan Marcotte's website"; I'm not sure why anyone would want to do that, to be honest (it's not even "Ethan Marcotte's blog", it's literally a link to the homepage).

      Out of interest, what about the lists do you disagree with? Assuming you mean the bullet-pointed <ul>s, they look pretty unobjectionable to me. (Although the designer has clearly missed the fact that nudging them to the left means that the bullet-points peek out from behind the aforementioned sticky footer!)

      2 votes
      1. unknown user
        Link Parent
        Got nothing to say about your disagreed points. Maybe it's preference, or maybe there's an underlying reason you dislike those things. I like height maps in general, so maybe I'm biased towards...

        Got nothing to say about your disagreed points. Maybe it's preference, or maybe there's an underlying reason you dislike those things. I like height maps in general, so maybe I'm biased towards that one.

        Do you think the implementation of it is good enough? – as in, the way it lies on the page, being confined to the header on the right but slowly appearing down the article as it goes left. Do you think that portion is done well, or do you not like that, either?

        The page frame is a new trend I've noticed. It's not common, but it's present. I don't dislike it, and as a designer, I'd like to know why you do. Take a look at /r/slatestarcodex – just the looks of it, with subreddit styles enabled. It's clearly detached from the edges of the viewport, served more like a scanned page than a typical subreddit. How do you find it?

        Out of interest, what about the lists do you disagree with?

        One puts so much attention to the rest of the design, and the lists are left entirely bland. I like what CSS Tricks did with their ordered lists in the 2019 design: they have bold, big numbers that stand out, with a proper padding from the left and decent spacing otherwise. Ethan's... don't.

        I'd rather push them a little to the right, making it stand out of the flow of the text the same way it's styled by default. Probably muck about with the list markers, too, though I don't have a clear idea why to make them into.

        (Although the designer has clearly missed the fact that nudging them to the left means that the bullet-points peek out from behind the aforementioned sticky footer!)

        I suggest you message the man about it. I talked to him once over how one of the elements on the page (the right arrow at the navigation bar at the bottom of the article, above the footer) hovers over the frame's bottom edge (which is, if I recall correctly, a pseudo-element). I figured it must be that they have the same z-index, and since the arrow is rendered later than the frame, HTML-wise, it takes priority in the "height levels" of the page. Maybe it's the same thing here. You should let him know.

        1 vote
  2. Deimos
    Link
    Sigh, I saw this thread was active and thought it was going to have an actual on-topic discussion in it. Let's (mostly) start this over.

    Sigh, I saw this thread was active and thought it was going to have an actual on-topic discussion in it. Let's (mostly) start this over.

    7 votes
  3. nsz
    Link
    This comment by u/demifiend from a previous thread is particularly relevant. https://bestmotherfucking.website/ from the comment is a great example of minimal web design.

    This comment by u/demifiend from a previous thread is particularly relevant.

    https://bestmotherfucking.website/ from the comment is a great example of minimal web design.

    5 votes
  4. [8]
    alyaza
    Link
    i know this is basically antithetical to what social media platforms want and that they make their designs as sterile and bland as possible so everybody gets the same experience, but there is...

    i know this is basically antithetical to what social media platforms want and that they make their designs as sterile and bland as possible so everybody gets the same experience, but there is really something that we have lost from the internet zeitgeist in no longer being able to annihilate people's eyes with neon green text on a hot pink background. pretty much the only big place that lets you do any customization on the visitor end nowadays is tumblr, and tumblr is probably deader than disco at this point. reddit technically qualifies too i guess, but they're obviously in the middle of rectifying that with the redesign.

    4 votes
    1. [2]
      Gaywallet
      Link Parent
      But why? What purpose does bad design proliferation provide other than satisfying nostalgia?
      • Exemplary

      no longer being able to annihilate people's eyes with neon green text on a hot pink background

      But why? What purpose does bad design proliferation provide other than satisfying nostalgia?

      6 votes
      1. alyaza
        Link Parent
        i mean... actually letting people be people? that was one of the big draws of a lot of early social media: you could basically do whatever the fuck you wanted with it even if what you wanted to do...

        i mean... actually letting people be people? that was one of the big draws of a lot of early social media: you could basically do whatever the fuck you wanted with it even if what you wanted to do with it flew in the face of all sorts of basic typographical and stylistic rules. nowadays, i can basically customize my banner and avatar on youtube and twitter and literally nothing else, and everybody's shit looks pretty much the same. in nuking all the inevitable bad design, we also got rid of a whole lot of people who used all of those choices to radically define themselves--you're seeing this with how the redesign is playing out on reddit actually, because so much cool shit literally cannot exist on the redesign since there's not the support for it (and there might never be at this rate, considering the glacial pace reddit is working on it).

        13 votes
        1. Removed by admin: 13 comments by 4 users
          Link Parent
    2. TheJorro
      Link Parent
      I agree with you. That era of the internet was garish and a soup of bad design decisions but there was a creative spirit behind it all as everyone was trying to figure out what worked and what...

      I agree with you. That era of the internet was garish and a soup of bad design decisions but there was a creative spirit behind it all as everyone was trying to figure out what worked and what didn't, from Maddox's yellow on black to the seizure-inducing Geocities pages that any child could generate. I'm sure that era of flopping around like psychedelic fish is exactly why we have such a strong UX industry today, as many in there must have cut their teeth and learned many lessons about digital UX design from that time period.

      I'd say the something lost is the freedom to make one's own mistakes. Everything has become so homogenized that style is largely dictated in terms of layout and heavy animations rather than typography now. I think the clamour for more dark modes has started making many outlets aware that the one-stop solution of black-on-white isn't always the solution.

      3 votes
    3. [4]
      unknown user
      Link Parent
      Yeah: the nuclear weapons of CSS. Thankfully, the saner minds prevailed there. But if you're North Korea, it takes about three days from zero to hosting your own handcrafted website with whatever...

      there is really something that we have lost from the internet zeitgeist in no longer being able to annihilate people's eyes with neon green text on a hot pink background

      Yeah: the nuclear weapons of CSS. Thankfully, the saner minds prevailed there.

      But if you're North Korea, it takes about three days from zero to hosting your own handcrafted website with whatever bullshit color scheme and font combo you want to put in.

      1 vote
      1. [3]
        alyaza
        Link Parent
        sure, but unless your website happens to be a big internet platform that the article is talking about, this point of yours doesn't really pertain to the point of the article (and most people have...

        But if you're North Korea, it takes about three days from zero to hosting your own handcrafted website with whatever bullshit color scheme and font combo you want to put in.

        sure, but unless your website happens to be a big internet platform that the article is talking about, this point of yours doesn't really pertain to the point of the article (and most people have no idea how to host a website or code anyways, so that's also a cop-out way of addressing what the article's talking about, lol).

        2 votes
        1. [2]
          unknown user
          Link Parent
          See my main-thread comment.

          See my main-thread comment.

          1 vote
          1. alyaza
            Link Parent
            your arguments don't really sway me because half of them don't apply at the user level on big, user driven websites, which is all we're talking about here, but also because i don't really care for...

            your arguments don't really sway me because half of them don't apply at the user level on big, user driven websites, which is all we're talking about here, but also because i don't really care for what designers at the whims of corporate think is inherently good design.

            3 votes
  5. teaearlgraycold
    Link
    I'm actually very happy that the web is getting to look more uniform. I shouldn't have to learn every web developer's personal UI paradigm and design style just to browse multiple sites. There's...

    I'm actually very happy that the web is getting to look more uniform. I shouldn't have to learn every web developer's personal UI paradigm and design style just to browse multiple sites. There's still plenty of room to be creative, but uniformity is better from a user's perspective.

    1 vote