April 9, 2024 Smashing Newsletter: Issue #451
This newsletter issue was sent out to 206,332 subscribers on Tuesday, April 9, 2024.
Editorial
If you spend a lot of your time designing pixels on the screen, this newsletter issue is just for you. We’ll explore interface design, a handful of useful Figma tips and techniques, design patterns for confirm and undo, how to design better context menus, and some helpful resources to tackle UX challenges.
Of course, if you’d like to dive into more design patterns, we’ve got plenty of design patterns covered in Smart Interface Design Patterns, a friendly video library on UX — along with super-early-bids for the next live UX training.
And if you’d like to dive deeper, here’s a little reminder about a few community events, workshops, and conferences we’re tirelessly working for 2024 — with early-bird tickets and friendly bundles for teams:
- New Online Workshops on UX, design and front-end.
- Smashing Meets Performance, our free upcoming online meet-up on web perf (May 7),
- btconf Düsseldorf, a wonderful friendly conference on UX and front-end by our dear friend Marc Thiele,
- SmashingConf Freiburg 2024 🇩🇪 — The Web, Sep 9–11
- SmashingConf NY 2024 🇺🇸 — Front-End & UX, Oct 7–10
- SmashingConf Antwerp 2024 🇧🇪 — Design &UX, Oct 28–31
We hope we’ll have a chance to meet you online and in-person this year — and in the meantime, let’s explore a few helpful goodies for better interface design!
— Vitaly
1. Figma Design Tips
Sometimes, a small tip can go a long way. If you’re looking to give your Figma workflow a productivity boost, Nitish Khagwal shares all his not-so-secret but powerful Figma tips.
From moving styles and components to preserving color overrides and resyncing text layer names, Nitish’s collection features 100 tips to make working with Figma smart, fast, and super productive. Whether you’re new to Figma or an experienced designer, you’ll certainly find some gold nuggets in there. (cm)
2. Rapid Ideation Session
The power of the team is a company’s greatest asset when tackling complex problems and identifying new opportunities. Evan Karageorgos shares insights into the process the UX team at Booking.com is using for rapid group ideation. It has helped them generate hundreds of ideas for new and existing features and flows.
The approach connects UX ideas to business objectives, factors in competitive insights, and involves all crafts from the start to give teams a holistic overview of their topic. In his rundown of the process, Evan summarized everything you need to know to successfully prepare, run, and evaluate an ideation session with your team. A free Miro template you can use in your sessions is also included. (cm)
3. Confirm Or Undo
Confirm or undo? Which is the better option when designing actions that are potentially dangerous, like deleting items? The most common solution is adding a confirm dialog, but, as Josh Wayne argues, a confirm dialog is wrong in 90% of instances, despite its popularity.
As Josh points out in his post “Confirm or undo?” the problem with confirm dialogs is that they break the user’s flow. And not only that, users also tend to habitually confirm without even reading the dialog.
That’s why Josh advocates for using undo as the better alternative: it doesn’t get in the way, assumes the user knows what they are doing, and reassures them that they won’t break anything. In his post, Josh shares tips for implementing undo successfully, as well as for bulletproofing a confirm dialog for those cases where there’s simply no other option to protect the user from making a serious mistake. (cm)
4. 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.
As always, here’s a quick overview:
- Design System Planning and Process workflow
with Nathan Curtis. April 18–26 - Typography Masterclass design
with Elliot Jay Stocks. May 1–15 - Behavioral Design Workshop ux
with Susan Weinschenk. May 6–20 - Scalable CSS Masterclass dev
with Andy Bell. May 9–23 - Design Token and UI Component Architecture workflow
with Nathan Curtis. June 6–14 - Accessibility for Designers ux
with Stéphanie Walter. June 3–12 - Designing For Complex UI Masterclass ux
with Vitaly Friedman. June 20–July 2 - Jump to all workshops →
5. Intuitive Context Menus
From macOS to Windows, from Xerox Parc to the web, context menus have existed for decades. However, as long as they have been around and as widespread as they are, they still behave differently across web apps, which means that users have to relearn what is possible in each new app they use. How can we do better and build context menus that are so intuitive that users don’t even have to think about them?
In his article “Building like it’s 1984: A comprehensive guide to creating intuitive context menus,” Michael Villar takes us through the basics, as well as some more advanced interactions, for building seamless context menus. He explores everything from positioning the context menu and adding keyboard navigation to giving intuitive access to submenus and dealing with content overflow. A must-read. (cm)
6. Figma For Product People
Sometimes, a quick visual prototype is the best way to explain an idea and get buy-in from stakeholders. If you’re a product manager and want to be able to communicate your ideas visually but have never created anything from scratch in Figma, the free course Learning Figma As A Product Person is for you.
The course takes you through the basics of Figma, one concept at a time, in less than 15 minutes a day, to get you ready to create a lightweight prototype using Figma. The community file includes links to the 15 video lessons, homework, and additional learning resources. A great opportunity to enhance your skill set. (cm)
7. Icon University
You’re playing with the idea of creating custom icons for a project? Or maybe you’d like to improve your icon design skills? Then the Icon University is for you. Since 2010, a team of eight designers has crafted over 170,000 icons for Streamline. Now, they share their secrets of good icon design in the Icon University for free.
The Icon University is a friendly guide to maneuver you through the complete icon design process, with practical tips and principles for good icon design. You’ll learn how to start your icon project, design icons in Figma, and color, customize, and resize them. A hand-picked collection of books on icon design, signs, symbols, and graphic grids is also part of the Icon University. A great learning resource, whether you’re new to icon design or want to get better at the craft. (cm)
8. News From The Smashing Library 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.