June 21, 2022 Smashing Newsletter: Issue #358
This newsletter issue was sent out to 176,698 subscribers on Tuesday, June 21, 2022.
Editorial
After what feels almost like an eternity, we are finally back in person for SmashingConf in San Francisco! You may have already seen speakers being quoted and attendees sharing their photos and insights on Twitter via #smashingconf, but this time around, we’ve made it possible for folks to also join us LIVE via Vi.to. Do join in, learn with us, and have fun with us online for our very first hybrid SmashingConf!
As always, we put our hearts and souls into crafting personal, inclusive and valuable events to help each other become better professionals in our careers. Every single person has their own goals and ambitions, and too often, our individual goals are left far behind the company’s goals and product development roadmaps. In a very special and personal post, our one-and-only Vitaly shares his background story and a good number of eye-opening things he wished he had known when starting out earlier in his career.
Without further ado, here’s this week’s issue with some incredibly talented folks and their creative projects that deserve all the recognition and appreciation, so kindly do share your thoughts and feedback with them and help spread the word!
— Iris (@smash_it_on)
1. Color In Design Systems
When you’re creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobe’s Spectrum Design System, shares valuable insights into their approach.
As Jess explains, the Spectrum color nomenclature uses a combination of color family classifier (e.g., blue or gray) paired with an incremental brightness value scale (50–900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.
Another handy little helper when creating a color system is the Open Source Color System. It includes different color palettes that are based on different usages and color challenges you might face when designing a complex web app. (cm)
2. The Font Matrix
Have you heard of the Font Matrix already? The concept helps us see typefaces from a different perspective, and by doing so, it can save us a lot of time and guessing when it comes to choosing and combining them. Because, well, we all know that it can be hard to go for your gut feeling. Oliver Schöndorfer summarized how the Font Matrix can help.
Developed by Indra Kupferschmid, the Font Matrix is based on the idea that every typeface consists of three layers: skeleton (form model), flesh (contrast and serifs), and skin (finer differentiation). To see which font combination works best, you arrange the skeleton and flesh layers of different typefaces in a grid, and the Font Matrix reveals. What becomes obvious is that it’s not the serifs that bind it all together but the bare bones underneath it. As Oliver explains, that’s why typefaces with the same form model, regardless of sans, slab, or serif, make a good fit. A perfect helper to become more confident in your type combinations. (cm)
3. The World’s Most Satisfying Checkbox
Building the world’s most satisfying checkbox. That was the challenge the team at Andy Works set for themselves when they built the habit tracker Not Boring Habits. And, well, the undertaking was successful and was even awarded the Apple Design Award for Design & Fun. But what makes their checkbox so exceptional? Game feel. On their blog, the Andy Works team shares valuable insights into what it is all about.
The idea behind their checkbox is to give the mundane, everyday action of logging a habit a rewarding “feel”, similar to the satisfying feeling you get when you cross out an item on a piece of paper. To make the moment more deliberate and meaningful, they made the entire screen the button and opted for a long press to check the checkbox. The checkmark itself got a 3D look with animation communicating interaction states and their relationship to one another. Sound and haptics add a new dimension to the feel for a truly rich experience. A fantastic reminder that it’s the everyday actions in product design that can make a product feel a lot more personal. (cm)
4. Design Tools Compared
There are a lot of design tools out there. But which one is the best for you and your team? The Design Tools Database helps you make an informed decision.
Curated by Jordan Bowman and Taylor Palmer, the database highlights and compares UX design tools. For each tool, they list usage, rating, platform, and cost, as well as different features, such as offline capabilities, pen tool, collaboration, comments, handoff, and many more. The tools covered range from UI and prototyping tools to tools for whiteboarding, user flows, handoff, design systems, versioning, and session recording. A real timesaver! (cm)
5. Upcoming Online Workshops
You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. 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.
As always, here’s an overview of our upcoming workshops:
- Figma Workflow Masterclass UX
with Christine Vallaure. July 7–22 - Effective Usability Testing UX
with Steph Troeth. July 11–25 - Level-Up With Modern CSS Dev
with Stephanie Eckles. July 11–25 - Designing Better UX With Top Tasks UX
with Gerry McGovern. Sep 13–27 - Interface Design Patterns UX Training UX
with Vitaly Friedman (Live UX training + video course). Sep 9 – Oct 7 - Jump to all online workshops →
6. The Embodiment Of Emotional Design
As of the first quarter of 2022, Spotify had 182 million premium users worldwide. Since 2017, the user base has more than doubled. But what makes Spotify so successful? What’s the secret ingredient that makes people want to open the app over and over again?
An aspect that stands out about Spotify’s user experience is the focus on personalization and emotional connection — think of tailored playlists or the beautifully curated Spotify Wrapped reviews at the end of the year. In her article “Spotify’s Embodiment of Emotional Design”, Jasmine Bilham takes a closer look at how details like these play a key factor in Spotify’s iconic, personalized experience, and what we can learn from them. An inspiring example of how a product is used more frequently if it makes us feel that little more connected, valued, and human. (cm)
7. Style Manual
Apostrophes, dashes, quotation marks, spelling. Not every project has the means to hire a professional copywriter to take care of things like these. And even if you’re an English native speaker, it can be challenging to get the subtle differences between British and American English right. To help you circumvent the common pitfalls that the English language brings along, Andy Taylor created Style Manual, a reference document for punctuation, style, and spelling.
The manual is by no means complete but rather a personal reference of things that can be hard to remember. When to use an en-dash instead of an em-dash, for example, when to use a semicolon, how to get capitalization right, or how to correctly spell commonly misused words. A bibliography with references for both British and American English is also featured in case you want to dive deeper into the topic. (cm)
8. The Accessibility Of Dark Mode
Dark mode has become an emerging trend in user interface design. It is often considered to ease the visual strain on our eyes and be more sustainable. But how true are these notions? And how does dark mode fare in terms of accessibility? Dora Cee wanted to find out.
In her article “Peering into the accessibility of Dark Mode”, Dora takes a sneak peek into the eye and its preferences. As she found out, the decisive factor that aids readability is contrast, not the question if it’s light characters on a dark background or dark characters on a light background. There’s no evidence to support the claim that dark mode improves productivity either. And what about accessibility? It depends. Dark mode can be problematic for users with astigmatism, while users with abnormal light sensitivity or cloudy ocular media can benefit from dark mode. As Dora recommends, to improve the user experience, the best course of action would be to incorporate both options and let your users choose. (cm)
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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.