#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 2024]( [SmashingConf 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. - [SmashingConf Freiburg]( 🇩🇪 — Sep 9–11 - [SmashingConf New York]( 🇺🇸 — Oct 7–10 - [SmashingConf Antwerp]( 🇧🇪 — Oct 28–31 - [Smashing Online Workshops]( on UX, design and front-end. 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. — [Vitaly]( --------------------------------------------------------------- 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 Workshops]( 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: - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. Jan 8–22 - [UX Strategy Masterclass]( UX with Vitaly Friedman. Jan 23 – Feb 6 - [Interface Design Patterns (Spring 2024)]( UX with Vitaly Friedman. Mar 8 – Apr 5 - [Resilient & Maintainable CSS]( Dev with Miriam Suzanne. Feb 26 – Mar 12 - [Scalable CSS Masterclass]( Dev with Andy Bell. May 9–23 - [Smart Interface Design Patterns Video Course]( UX 10h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 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 [ColorDesigner.io]( (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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [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 - [The View Transitions API And Delightful UI Animations (Part 2)]( - [The Magic Of New Beginnings (January 2024 Wallpapers Edition)]( - [Making Sense Of “Senseless” JavaScript Features]( - [New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](