Smashing Magazine - #437: New Ways of Working in 2024

New work practices for 2024, UI Stack, “How to work with me”-manuals and useful tools for Figma and SVG. Issue #437 Jan 2, 2024 View in the browser

Smashing Newsletter

God kveld Smashing Friends,

So 2024 is here. With it come new hopes and new goals, new challenges and achievements and perhaps new and better ways of working together. Our very first newsletter this year is just about that: new ways of working on digital products — with helpful pointers and tools along the way.

SmashingConf Antwerp 2024
SmashingConf Antwerp 2024
Ah, memories! That was SmashingConf Antwerp 2023. New SmashingConfs this year: from front-end to design and UX.

It’s a good time to get ready for the upcoming adventures in 2024. If you are looking for unforgettable experiences in 2024, we’ve got a few friendly SmashingConfs coming your way — with early-bird tickets and friendly bundles for teams.

As always, we are sending a lot of hope, optimism, good vibes and positive energy your way. And we look forward with hope and optimism for peace and better times ahead.


1. New Ways of Working

Changing the ways of working is hard. Usually, it’s a slow, painful process that requires a lot of patience and persistence. But it’s possible. In New Ways Of Working: Playbook For Modern Teams, Mark Eddleston has been putting together a growing library of helpful practices and working patterns used by progressive modern organizations.

New Ways of Working

In the Notion hub, he covers everything from roles and meetings to decision-making and conflict resolution — with templates, books and key takeaways. It turns out, small changes can have a big impact — as long as you have passionate people willing to carry these changes with you. (vf)

2. UI Stack For Product Designers

Every screen you interact with has multiple personalities: blank state, loading state, partial state, error state and ideal state. In “How To Fix a Bad User Interface,” Scott Hurff highlights strategies to avoid awkward and confusing UIs with the UI Stack, carefully designing personalities for every screen.

UI Stack For Product Designers

We start with the ideal state. It’s the zenith of your product's potential. We then explore the error state, when things go wrong, with unexpected problems, error messages and input validation UX. From there on, we move to the partial state — when the page is sparsely populated. Our job here is to prevent people from getting discouraged and giving up on our product.

In the loading state, we must avoid frustrating rage taps/clicks. We need to avoid an entire page takeover, but rather lazy load content panes or use inline loading. Finally, we improve the blank states by using skeleton screens where we show the structure and layout early. A great reminder that UX is not just what happens when everything goes as planned. It’s also what customers experience when things break unexpectedly. (vf)

3. New Videos in Smart Interface Design Patterns

Roll up your sleeves: it’s time to boost your design and UX skills! Over the years, Vitaly has been working on Smart Interface Design Patterns, a growing video library of design patterns for everything from multi-level navigation to enterprise-grade data tables and filters UX. Free preview.

Smart Interface Design Patterns

We’ve just added 4 new videos on search and filtering UX, design patterns for better search experience and autocomplete UX. If you already have the course, new videos are waiting for you in your dashboard — free of charge, of course!

And if you haven’t signed up just yet, it's a good timing to do just that — use the coupon code NA2024 to get a friendly 15% off the regular price. And perhaps you’d like to join the live UX training as well! Happy learning, everyone! (vf)

4. Figma Manager For Frames And Components

If you have to deal with hundreds of frames and components in Figma, you know very well just how tiring that experience can be. FrameHop is a friendly Figma plugin for bookmarking frames and components, quickly jump back and forth between them, and keep a history of recently selected frames, components and component variants.

Figma Manager For Frames And Components

You can type the keyboard shortcut ‘hop’ to quickly hop backwards or forwards in your frame history list. A neat to little tool to jump back and forth without having to refind the right frame or component over and over again. Kindly released by Addison James. (vf)

5. Upcoming Workshops and Conferences

We have plenty of online workshops on frontend and UX, be it accessibility, performance, or design patterns. A couple of workshops are 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:

6. “How To Work With Me” Manuals

We always have assumptions about how other people work. But what if you shed some light into your preferences, how and when you wish to receive feedback, and how you communicate? That’s the idea behind “How To Work With Me” manuals — typically just a Google Doc, a Notion page or a Miro board, made visible to everyone in Slack’s profile.

How To Work With Me Manuals

What I find most valuable about these templates is how humane they are. They show personalities, but also set expectations and help avoid misunderstandings. Everybody is different, and has their own priorities and preferences. If we could just respect it a bit more by understanding each other a bit better, it can create an incredible culture of collaboration and support. And this can move mountains.

If you need a few ideas and template to get started, I’ve put together a few templates and guides to get started. A great little practice to include in your work as part of the onboarding, to help everyone understand each other just a bit better. (vf)

7. Working With Colors Simpler And Faster

So you have an idea, but you’re not sure where to start? Sometimes, the first step can be to begin with engaging your visual thinking by picking a few colors. You can then bring your ideas and visions to life with tools that make working with colors simpler, faster, and downright enjoyable.

Working With Colors Simpler And Faster

Perhaps one of the most comprehensive color tools platforms available is (created by Wojciech Banaś). It currently offers 11 various tools that allow you to effortlessly create tints, shades, harmonious color palettes, and more. You can even find and install addons for Figma and Adobe Photoshop/XD, so you can delve into the world of color and explore the endless possibilities. It’s a designer’s playground — enjoy exploring! (il)

8. Free Custom-Color Elements

Without a doubt, there isn’t a shortage of SVG libraries out there, but if you happen to still be looking for a library of custom-color SVG elements that can be used freely on personal or commercial projects, then the SVG Hub library is a great one to bookmark. It’s worth having a look — we promise — you can customize the colors and copy them to your clipboard instantly!

Free Custom-Color Elements

A couple of months ago, we collected a comprehensive guide to SVG generators, breaking all tools into sections and groups. We keep updating the guide, adding even more generators regularly. And if you know of one that is missing there, please let us know on Twitter (@smashingmag), and we’ll add it right away. Happy SVG generating! (il)

9. 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
… and we’re currently working on a new book: Success At Scale, shipping in February. Pre-order your copy 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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#436: State of Front-End, AI and UX 2024

Tuesday, December 19, 2023

New opportunities and challenges ahead of us — from new CSS and JavaScript features to state of AI, UX, email design and graphic design in 2024. Issue #436 • Dec 19, 2023 • View in the browser Smashing

#435: Figma

Tuesday, December 12, 2023

Figma file organization, advanced Figma techniques, optimizing large and slow Figma files, wireframing toolkits and accessibility plug-ins. Issue #435 • Dec 12, 2023 • View in the browser Smashing

#434: Magical Front-End Features

Tuesday, December 5, 2023

New front-end technologies, CSS nesting, JavaScript and TypeScript Features, INP and useful tooling. Issue #434 • Dec 5, 2023 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, The

#433: Dashboards, Maps & UX

Tuesday, November 28, 2023

Designing better dashboards, AR, in-car voice assistant, maps UX and natural language input — along with SmashingConfs 2024 and community events. Issue #433 • Nov 28, 2023 • View in the browser

#432: Design Systems

Tuesday, November 21, 2023

How do you organize a design system with 900 components and 25 designers? How do you design a UI component from scratch? How do you choose the right parts, products and people for your design system?

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 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏