Smashing Magazine - #451: Interface Design

100 Figma Design Tips, UX challenges, Icon design, context menus, Confirm or Undo. Issue #451 Apr 9, 2024 View in the browser

Smashing Newsletter

Dobrý večer Smashing Friends,

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.

SmashingConf Antwerp 2024
SmashingConf Antwerp (Oct 28–31, 2024), a friendly conference on design, UX and research.

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:

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.

100 Figma Design 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.

Tackling UX challenges as a team

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)


From our sponsor

How Will Human And AI Developers Work Together?

Compose: Web + AI
What does the world look like when human developers can partner with fully realized AI software engineers? Join us on April 25 for our virtual event where we explore the future of human and AI partnership. Reserve your seat for Compose: Web + AI today.


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.

Confirm or undo?

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.

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 a quick overview:


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?

Building like it's 1984: A comprehensive guide to creating intuitive context menus

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)


From our sponsor

Build Powerful Web, Desktop And Mobile Apps With Syncfusion’s Cutting-Edge UI Component Suite

Syncfusion
Stop coding common elements! Syncfusion offers a developer’s dream-over 1,800 prebuilt UI components for web (Blazor, Angular, and so on), mobile (Flutter, .NET MAUI), and desktop (WinForms, WPF) platforms. Focus on your app’s unique features, not repetitive UI tasks. A free community license is also available for individual developers and startups. Try Syncfusion for free today.


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.

Learning Figma As A Product Person

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.

Icon University

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)


From our sponsor

How To Create Better Online Shopping Experiences

Microsoft
Learn how to elevate the shopper journey with global data based on the analysis of 25 billion site visits across 10 retail verticals. Hear strategies directly from industry experts themselves and get the tools to enhance your site experience. Save your spot for the workshop on April 17thregister now.


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
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.


9. 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

#450: Localization and Internationalization

Tuesday, April 2, 2024

Issue #450 • Apr 2, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, How would you go around localizing your product? When we speak of localization, we think about how to

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

#448: AI Interfaces

Tuesday, March 19, 2024

Design patterns for AI interfaces, EU AI Act, generative search UX, AI and design systems. Issue #448 • Mar 19, 2024 • View in the browser Smashing Newsletter Ahoy Smashing Friends, It was April 29,

#447: Web Performance

Tuesday, March 12, 2024

Interaction To Next Paint, web font analyzer, web performance course, and Tailwind vs. Semantic CSS. Issue #447 • Mar 12, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends,

#446: Onboarding UX Playbook

Tuesday, March 5, 2024

Choosing onboarding methods (Figma kit), guidelines, best practices, ways of working and how to onboard users on mobile devices. Issue #446 • Mar 5, 2024 • View in the browser Smashing Newsletter Bună

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

#463: Data Visualization

Tuesday, July 2, 2024

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 • July 2, 2024 • View in the browser Smashing Newsletter Hello

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏