Smashing Magazine - #378: Interface Design

With drag’n’drop UX, blend modes, design principles, forced colors and useful Figma plugins. Issue #378 November 8, 2022 View in the browser 💨

Smashing Newsletter

Hyvää päivää Smashing Friends,

If you are passionate about interface design, you are in the right place. In this issue, we explore how blend modes work in detail, how we can make drag’n’drop work better in enterprise apps, how forced colors work and how a few simple Figma plugins can make a whole world of a difference for your workflow.

Next week, we also host our Design Systems Meets (Tue, Nov 15), with 3 wonderful sessions around design systems, from choosing a component to design to how apparently small shifts in design systems can make a big difference. Jump to the schedule and register for free! (And of course, tell your friends, too!).

Smashing Meets Design Systems
Free, friendly, approachable: meet our Design System meet-up (Tue, Nov 15, 11am EST / 5pm CET).

Also, let’s dive into UX nightmares and frustrations, a free 1h-session with yours truly on Dark Secrets and Nightmares of UX in 2023, and How To Fix Them 👻 on Wed, Nov 16. Expect some fine dark revelations on carousels, infinite scroll, password recovery and hamburgers! Save your spot and don’t be late! ;-)

Dark Secrets and Nightmares of UX in 2023, and How To Fix Them
A free 1h-session on Dark Secrets and Nightmares of UX in 2023 👻. Bring your friends and save your spot 🎉🥳

In the meantime, let’s dive into the wonderful world of interface design, with a few fine details and pointers to useful resources!

Vitaly (vitalyf)


1. Blending Modes Explained

Blending modes are a way of creating new colors based on two input colors, a foreground color and a background color. But which modes are there? And how do they work? If you’ve always relied on your gut feeling when it comes to blending modes and you’d like to make a more informed decision next time, Dan Hollick’s article on blending modes is for you.

Blending Modes

In the article, Dan explores different blending modes, from the simplest Darkening and Lightening blending modes to more elegant versions like Multiply and Screen and advanced blending modes that manipulate individual HSL components. A great overview. (cm)


2. Figma Autoname

Naming things properly is something you easily forget when tinkering with the details of a design. Now, the problem isn’t that you need to rename that ‘Frame 563” to “Button” in your Figma file sooner or later, but the fact that there are 562 other frames that need to be renamed, too. Hugo Duprez built an AI-powered plugin for Figma that solves the naming hassle.

Figma Autoname

Figma Autoname renames all your Figma layers in one click. The plugin is free and the code open-source so that all designers and developers can contribute to making it even better. A real timesaver. (cm)


From our sponsor

Delight Your Users And Eliminate UX Friction With CommandBar

Delight Your Users And Eliminate UX Friction With CommandBar
CommandBar is a blazingly-fast widget that combines onboarding nudges, effective search, and relevant help content to deliver step-change improvement in UX. Serving 7M people for user-obsessed teams at Freshworks, HashiCorp, Gusto, & others.


3. Component Inspector For Figma

A handy little tool for inspecting your Figma components is the Component Inspector plugin that Jake Albaugh built. It provides a look at Figma component properties similar to how they are described in code.

Component Inspector

The plugin does not generate style code, but code that describes component properties. It currently supports instance and component code generation for React function components, Angular components, Vue components, Web components, and JSON. Nice! (cm)


4. Humane By Design

Technology has become a vehicle for stealing our attention, making money with our personal information, and exploiting our psychological vulnerabilities. However, the good news is that you, as designers, can make a difference and take responsibility for the impact the products and services you build have on people. But where to begin?

Humane by Design

In his guide Humane by Design, Jon Yablonski shares practical tips and resources for designing ethically humane digital products that are focused on user’s well-being. You’ll find best practices for prioritizing meaningful and relevant content, steering people towards healthier digital habits, centering products on value instead of revenue, and more. It isn’t rocket science to make the web a better, human-friendlier place; a few small changes can already make a significant difference. (cm)


5. Upcoming Online Workshops

That’s right! We run online workshops on 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 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 an overview of our upcoming workshops:


6. Drag'n'Drop Best Practices

For some users, drag and drop is a simple interaction. But if you have ever designed a drag and drop, you know how challenging it can be — from accessibility considerations to interaction design. As Ceara Crawshaw points out, basically every consideration in interaction design happens for a drag-and-drop interaction: In the first place, you need to convey the interaction exists, the object needs to physically move, live feedback matters, and, well, there also are a lot of other decisions to make it ‘feel’ right.

Drag And Drop Best Practices

In her article on drag and drop best practices, Ceara explores everything you need to consider when designing drag and drop experiences. She takes a closer look at different types of drag and drop, interaction patterns, affordance issues, and advantages and disadvantages. A deep-dive into UX patterns. (cm)


7. Color Tools And Resources

How to create and maintain consistent, accessible color palettes? The Nord Color Generator helps you do just that. Created by the team who works on the Nord Design System, the tool generates color palettes programmatically. You can use it to develop existing color palettes and test new color variations.

Nord Color Generator

Another handy helper when dealing with color is Leonardo. The Adobe open-source project delivers tools to help you create, manage, and share accessible color systems for interface design and data visualization. From in-depth color analysis to color contrast checking, Leonardo has got you covered. You can download your theme or color scales as SVG files and copy and paste them directly into your design tool of choice. The output is also available as CSS custom properties and design tokens.

Looking for more? In our roundup of color tools and resources, we collected useful helpers for all kinds of projects, from all types of color palettes and generators to getting contrast and gradients just right. And if you want to go beyond colors, our SVG Generators post might be for you. (cm)


From our sponsor

Introducing iA Presenter

iA Presenter
“Incredible innovation around presentation software. iA Presenter has responsive layouts, typographic themes, and great UX, all created within a text editor. Beautiful work, iA!” — Vitaly Friedman


8. Forced Colors Explained

Forced colors is a CSS media query that radically changes the way your site looks. Available in all versions of Windows and Ubuntu, when active, Forced colors set UI elements like text, background, links, and buttons to colors that the user chooses. To prevent bad surprises and accessibility pitfalls, there are a few things you can do to make sure your site works well with Forced colors.

Forced colors explained: A practical guide

In his practical guide to Forced colors, Kilian Valkhof explores how Forced colors work and why they are used. He shares tips for how to test your design for Forced colors and what you need to take care of to make it look good in them. Little changes that don’t take a lot of time but that make a real difference for everyone who sets their device’s UI to Forced colors. (cm)


From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.


9. New On Smashing Job Board


10. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Older messages

#377: UX Writing

Tuesday, November 1, 2022

With UX writing guidelines, tools, library, inspiration and better error messages. Issue #377• November 1, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends, Words matter. They

#376: Design Systems

Tuesday, October 25, 2022

With accessible design systems, Figma kits and real-life examples. Issue #376 • October 25, 2022 • View in the browser 💨 Smashing Newsletter Dobryi vechir Smashing Friends, There is a moment in time

Meet “Understanding Privacy”, a new Smashing Book

Thursday, October 20, 2022

Meet “Understanding Privacy”, our new book on privacy, by Heather Burns. What privacy really is, beyond scary headlines. Understanding Privacy • View in the browser 💨 Understanding Privacy by Heather

#375: UX Workflow

Tuesday, October 18, 2022

With guidelines for design critique, design workshops, product design interview process, UX sketches and UX patterns. Issue #375• October 18, 2022 • View in the browser 💨 Smashing Newsletter Góðan

374: Obscure Treasures Of The Web

Tuesday, October 11, 2022

With QR codes, visualizations, dark secrets podcasts, type treasures and Mini Tokyo 3D. Issue #374• October 11, 2022 • View in the browser 💨 Smashing Newsletter Howdy, Smashing Friends! New York, New

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏