#358: Design Tools and Advice

With tips on colors in design systems, comparing design tools and taking a closer look at how emotional design works. Issue #358• June 21, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Ahoy Smashing Friends, 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! [SmashingConf SF 2022]( If you’d like to join us live, it’s still not too late to [get your ticket here](. 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](. [Naming colors in design systems]( 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](. [The Font Matrix]( 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) --------------------------------------------------------------- From our sponsor Take Your Skills To The Next Level With Our Graphic And Web Design Program [Take Your Skills To The Next Level With Our Graphic And Web Design Program]( Want to accelerate your career? Our Graphic and Web Design Program is designed to help you gain competitive skills to set you apart! Learn more about our program [here](. --------------------------------------------------------------- 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 World’s Most Satisfying Checkbox]( 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. [Design Tools Database]( 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. [Smashing Online Workshops]( 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 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? [Spotify’s Embodiment of Emotional Design]( 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. [Style Manual]( 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) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- 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. [Peering into the accessibility of Dark Mode]( 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) --------------------------------------------------------------- 9. New On Smashing Job Board - [Expert Wordpress Developer]( at Red Edge (Arlington, VA) - [Product Owner]( at Health Resources in Action (Remote) - [WordPress Developer]( at Codeable (Minneapolis, MN) --------------------------------------------------------------- 10. Recent Smashing Articles - [Precise Timing With Web Animations API]( - [How To Easily Build And Support Tables In Figma]( - [Web Design Done Well: Delightful Data Visualization Examples]( - [The Guide To Windows High Contrast Mode]( - [Adding Search To Your Site In 15 Minutes]( --------------------------------------------------------------- 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). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](