Newsletter Subject

#358: Design Tools and Advice

From

smashingmagazine.com

Email Address

newsletter@smashingmagazine.com

Sent On

Tue, Jun 21, 2022 06:27 PM

Email Preheader Text

With tips on colors in design systems, comparing design tools and taking a closer look at how emotio

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](

Marketing emails from smashingmagazine.com

View More
Sent On

01/10/2024

Sent On

24/09/2024

Sent On

17/09/2024

Sent On

10/09/2024

Sent On

03/09/2024

Sent On

27/08/2024

Email Content Statistics

Subscribe Now

Subject Line Length

Data shows that subject lines with 6 to 10 words generated 21 percent higher open rate.

Subscribe Now

Average in this category

Subscribe Now

Number of Words

The more words in the content, the more time the user will need to spend reading. Get straight to the point with catchy short phrases and interesting photos and graphics.

Subscribe Now

Average in this category

Subscribe Now

Number of Images

More images or large images might cause the email to load slower. Aim for a balance of words and images.

Subscribe Now

Average in this category

Subscribe Now

Time to Read

Longer reading time requires more attention and patience from users. Aim for short phrases and catchy keywords.

Subscribe Now

Average in this category

Subscribe Now

Predicted open rate

Subscribe Now

Spam Score

Spam score is determined by a large number of checks performed on the content of the email. For the best delivery results, it is advised to lower your spam score as much as possible.

Subscribe Now

Flesch reading score

Flesch reading score measures how complex a text is. The lower the score, the more difficult the text is to read. The Flesch readability score uses the average length of your sentences (measured by the number of words) and the average number of syllables per word in an equation to calculate the reading ease. Text with a very high Flesch reading ease score (about 100) is straightforward and easy to read, with short sentences and no words of more than two syllables. Usually, a reading ease score of 60-70 is considered acceptable/normal for web copy.

Subscribe Now

Technologies

What powers this email? Every email we receive is parsed to determine the sending ESP and any additional email technologies used.

Subscribe Now

Email Size (not include images)

Font Used

No. Font Name
Subscribe Now

Copyright © 2019–2025 SimilarMail.