Smashing Newsletter: Issue #569

Editorial

It’s always little side projects that remind me just how much I love the web. Often little websites that have absolutely nothing to do with efficiency, or productivity, or even practicality — just fun little stuff that somebody came up with, and launched for everybody to explore.

In this newsletter, we feature some of these wonderful projects, put together by wonderful creators, just for the sake of it. Some are slightly more practical than others, but they are the reason why we truly love the web and people building and designing it. 💚

So here’s just a friendly shout-out to everyone doing just that — and sharing it with other people to use and learn from!

At SmashingConf Freiburg 2026 🇩🇪, we're hosting six full-day workshops on the 7th and 10th of September. Save your seats →

Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1
Design Patterns For Complex UIs and Enterprise UX UX with Vitaly Friedman. Sep 2–3
Naming Design Systems DS
with Samantha Gordashko. Sep 8–22
Smart Interface Design Patterns Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12
Figma MCP Masterclass Design
with Christine Vallaure. Sep 14
Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29
Figma Workflow Masterclass Design
with Christine Vallaure. Sep 23–29
Resilient & Maintainable CSS Dev
with Miriam Suzanne. Oct 1–15
Jump to all workshops →

— Vitaly

1. Sounds of Earth

What does Earth sound like? Earth Garden is a little tool to explore our beautiful world through real field recordings of what the Earth actually sounds like in different parts of the world.

And if you’d like to dive deeper, you can tune in on any radio around the world, live via Radio.Garden or use Radioooo Time machine to play songs across the world from different decades. (vf)

2. Football Data Portraits

What if you turn every 2026 World Cup football match into a 3D visualization, reconstructed from roughly 1,500 recorded events — every touch, pass, shot and card? Well, the result is Football Data Portraits (example) — whimsical, interactive, and communicating the dynamics between teams as the dance in the game.

I love that it isn’t the most comprehensive coverage of each game, but rather “data portraits” — designed to capture the emotion of the match, as the creator Alexandre Bogachev explains it — the momentum swings, the pressure, the moment it turned. (vf)

3. Laws of Software Engineering

As in every practice, for software engineering there are principles and patterns that shape software, teams, and decision-making. Laws of Software Engineering is a collection of 56 principles and patterns — from architecture and planning to scale, design, and decision-making. Put together by Dr. Milan Milanović.

Each law comes with takeaways, examples, origins, visualization, and useful resources and references to explore in more detail. Plus, each law is grouped for different levels of experience. You can also save the sheet as print deck, or download a mind map, or a poster PDF. One for the bookmarks! (vf)

4. Color Symbols And Alphabet

We should never rely on colors alone to communicate meaning to users. So what if we could add meaning with symbols? Colorsym is a free set of SVG symbols and a typeface to help people identify color — with 3 primary base shapes that can be combined to tell differences apart, e.g., for digital UIs, product packaging, wayfinding, in board games, subway lines, and so on. (Just beware of the accessibility overlay on the site.)

ColorADD is another wonderful project, with a whole color alphabet and five graphic symbols that represent the Primary Colors (Blue, Yellow, Red) plus White and Black. Open source, and free to use in commercial and personal projects. (vf)

5. Reverse Pac-Man

Chances are high that you have been playing Pac-Man at some point in your life. But what if the roles were reversed? What if you were the ghost, with the task to corner Pac-Man before it clears the maze?

Well, meet Reverse Pac-Man, just a little game to play, with the goal to catch Pac-Man to win — just keep in mind, if Pac-Man eats a power pellet, you are the one being hunted — run! (vf)

6. Name That UI

So how do you call a new UI component, or a new feature? Name That UI is a visual dictionary of UI: you can describe that UI component in your own words, and get an autocomplete suggestion right away.

And if you need to find a good name for a new feature, Erin Gannon has published a little playbook for user-centered product naming decisions with a whole process and a decision tree to follow.

Bonus: just a little post I’ve put together on how to name everything — from colors to class names to layers to variables. Happy naming, everyone! (vf)

7. Accessible UX Research, Now Shipping 📚

We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.

Accessible UX Research is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Download a free sample (PDF, 2.3MB) or get the book right away.

8. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1
Design Patterns For Complex UIs and Enterprise UX UX with Vitaly Friedman. Sep 2–3
Naming Design Systems DS
with Samantha Gordashko. Sep 8–22
Smart Interface Design Patterns Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12
Figma MCP Masterclass Design
with Christine Vallaure. Sep 14
Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29
Figma Workflow Masterclass Design
with Christine Vallaure. Sep 23–29
Resilient & Maintainable CSS Dev
with Miriam Suzanne. Oct 1–15
Measure UX and Design Impact UX
with Vitaly Friedman. Video course + Live UX Training
Design Patterns For AI Products in 2026 UX
with Vitaly Friedman. Video course + Live UX Training
Jump to all workshops →

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

July 28, 2026 Smashing Newsletter: Issue #569

Previous Issues