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 (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.
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)
From our sponsor
How Will Human And AI Developers Work Together?
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.
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.
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?
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
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.
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)
From our sponsor
How To Create Better Online Shopping Experiences
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 17th — register 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?
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
