You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.
The semantics inherent in HTML elements tell us what we’re supposed to use them for. Need a heading? You’ll want a heading element. Want a paragraph? Our trusty friend
<p></p> is here, loyal as ever. Want a download? Well, you’re going to want... hmm.
What best describes a download? Is it a triggered action, and therefore should be in the domain of the
<button></button> element? Or is it a destination, and therefore best described using an
Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows ▶️ = play, but that users will seek out the icon in order to watch any video or animation.
Reportedly introduced in the 1960s by Swedish engineer Philip Olsson the play arrow was first designed to indicate the direction where the tape would go when reading on reel-to-reel tape players. Since then, we switched from cassettes to CDs, from the iPod to Spotify, but the media controls icons remain the same.
I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system:
I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.
That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later.
Borders, colors, text styles, icons; there’s so much to consider! But what I really wanted to make a quick note of here is the idea of resilience in a design, particularly where Nathan talks about adding components inside a button, like an icon:
When you add an element, even a simple icon, a button layout shouldn’t break down. Coping with less predictable elements reveals pesky issues of spacing and alignment inside.
So whenever you remove a component from inside a button then the button itself should still work. But this isn’t just important for buttons really, it’s important for any component that we’re building. In short: asking questions about how a certain element might break visually, or in terms of interaction, is vital to the process of building an effective design system.