Smashing Magazine - #361: State of the Industry

With adaptive pointers, the state of design systems, front-end, component encyclopedia and service design tools. Issue #361 July 12, 2022 View in the browser 💨

Smashing Newsletter

Goedendag Smashing Friends,

Here’s a question for you: as the web industry, where do you think we stand today? Usually, when when we try to answer that question, we think of technologies, tooling and trends. We think about the popular frameworks and methodologies to get work done.

It’s valuable to know what companies similar to ours do out there, what they struggle with, how they fail and succeed, and how they managed to resolve their challenges. Learning these things is why conferences (ahem, ahem) are so useful, yet we should be very careful in adopting these insights to our teams.

Logo Trend Report
Logo Trend Report 2022 highlights trends in logo design in 2022. Trends usually inform, rather than inspire though.

But bust because a big corporation has moved from one framework to another, it doesn’t mean that it’s the right strategy for everyone. In fact, sometimes, especially in design work, they are worth ignoring to create individual work that stands out from everything else out there.

In this newsletter, we highlight some of the useful studies, resources and tools that will help you expand your map as well: from 2022 studies and popular components to service design tools and salary compensation data. We hope you’ll find them useful.

Just a quick note: we have very last early-birds for the upcoming Live Interface Design UX Training with yours truly in September this year, and we have a few exciting online workshops on React performance, Figma and UX coming up later this month. Wonderful people with great insights and hands-on workshopping — we hope to see you there!

Happy learning, everyone!
Vitaly (@smashingmag)

1. Adaptive Pointers

We don’t really think of innovation when it comes to mouse pointers or touch cursors. They are just there, indicating a position on the screen. However, just like we design components to help users navigate faster and more precisely, we can adjust the pointers as well. In fact, the new iPadOS introduced pointer magnetism, so as you approach and hover a component, the cursor changes into a capsule around it, following its “hit region.”

Adaptive Pointers

In the article on Touch-First Cursors, Graeme Fulton explores the new changes in iPadOS and how they can become useful on the web with custom pointers. Do users prefer cursor changing as they navigate the site? Should we have sort of cursor borders or even reduce the size of the pointer to display annotations contextually? It’s still uncharted territory but an interesting area to explore.

One thing is certain: by using pointer magnetism in complex interfaces, we can make smaller areas easier to hit, even though we should be making them large enough for comfortable tapping in the first place. (vf)

2. 2022 Developer Survey

What are some of the attitudes, tools and environments that are shaping the art and practice of software today? That’s the question that Stackoverflow’s 2022 Developer Survey wanted to answer. The study with over 70,000 participants (mostly US, India, Germany and UK and unfortunately 91.88% men) explores developer profile, most popular technologies, frameworks, tooling and work environment.

2022 Developer Survey

While some findings are expected, some are slightly surprising. Apparently, MySQL and PostgreSQL are the most popular databases, AWS and Azure are the most popular cloud platforms, and Node.js, React and jQuery are the most popular web technologies. Neovim and VS Code reign in the world of IDEs, Rust and Elixir are the most loved languages, and Phoenix and Svelte most loved web frameworks.

The study highlights some of the trends of Stackoverflow users; it’s definitely biased and incomplete, so it definitely should be taken with a grain of salt. You can find more details about the study and its results in the 2022 Developer Survey. (vf)

3. Design Systems Survey 2022

It’s unlikely that throughout the last years any company never at least considered the notion of having some sort of a design system. Yet as we are creating design systems, often it’s the same issues that keep showing up. Design Systems Survey 2022, conducted by wonderful folks at Sparkbox, explores common challenges that maintainers of design systems have.

Design Systems Survey 2022

As it turns out, many systems don’t include content guidelines, release information, or a playground to experiment with code and animation guidelines. Good systems have an onboarding process for new subscribers and provide training and support. A common problem is poor documentation and lack of understanding of what’s old, broken or coming soon. A good read worth taking a look at! (vf)

4. Upcoming Online Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. 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 an overview of our upcoming workshops:

5. Component Encyclopedia

These days many companies use Storybook to maintain, develop and debug their UI components. But what if we could make sense of all these implementations and compare how one particular UI component, let’s say an accordion, is built across all the different sites, from Audi and Shopify to AirBnB and European Commission?

Component Encyclopedia

Fortunately, the Storybook team has just released Component Encyclopedia, a large repository of components built in different design systems, now tagged, grouped and searchable, so you can research how UI engineering challenges are solved in real life. Of course, these aren’t necessarily best practices, but they might give you a good starting point of knobs and sample implementations to consider when building your own components. (vf)

6. Salary Compensation Data

If you are unsure about how much you can ask for while negotiating your next job, might have all the information you need to make a good decision. This is the only compensation data source that provides a detailed breakdown by level, location, skills, company size, and location. With you can get an edge over traditional, averaged salary surveys for free.

Salary Compensation Data

To help people make better career decisions, brings a full comparison between companies and roles remunerations, as long with salary calculators — to calculate and compare how much you'll actually get paid by factoring in company growth, benefits, and so on. You can contribute to the community by sharing your salary, your company benefits or your company level mapping, and also by checking out the annual software engineer compensation report from 2021. (nl)

From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.

7. Service Design Tools

Overwhelmed with so much decision-making on design projects? Don't worry, Service Design Tools will get you covered. This is an open collection of tools and tutorials that helps you to deal with all complex design challenges. With these resources organized by each stage of the design process, you won't ever have to make an empty decision during design projects anymore.

Service Design Tools

When it comes to customer-centric innovation and digital transformation processes, design tools and methodologies provide a solid framework for organizations to understand user behaviors and develop relevant solutions. Service Design Tools is an ongoing project bridging academic research and professional practices that created a complex framework of processes, methodologies, and design theory for a more profitable application of design thinking and design methodology to immaterial products.

After 13 years of deep research and case studies, this arsenal of theory finds its way to be easily applicable to design projects, focusing both on what would be better for the users and more profitable for the services. (nl)

8. New On Smashing Job Board

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

#360: Web Performance

Tuesday, July 5, 2022

On priority hints, third-parties, speculative prerendering, dealing with LCP and preload scanner. Issue #360• July 5, 2022 • View in the browser 💨 Smashing Newsletter Namastē Smashing Friends,

#359: A Mixed Bag of Goodies

Tuesday, June 28, 2022

From book covers and machine learning to accessibility and moodboards. A mix of goodies for everyone! Issue #359• June 28, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing Friends

#358: Design Tools and Advice

Tuesday, June 21, 2022

With tips on colors in design systems, comparing design tools and taking a closer look at how emotional design works. Issue #358• June 21, 2022 • View in the browser 💨 Smashing Newsletter Ahoy Smashing

#357: The Web is Fun!

Tuesday, June 14, 2022

With exciting and obscure websites — some of them not necessarily useful but remind us why we love the web so much in the first place. Issue #357• June 14, 2022 • View in the browser 💨 Smashing

#356: Useful Front-End Tools

Tuesday, June 7, 2022

With clamp() calculator, SVG techniques, Arraybuilder, text cleaner, font subsetting and Illustrator Figma plugin. Issue #356• June 7, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing

WTF is operations?

Sunday, August 7, 2022

Issue 104: A primer on overall operations in software and design ops ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Materials Not Features, Polypane 10, Scroll Snapping, Gamification vs Incentivization, San Francisco

Friday, August 5, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar August 5 2022 Design with materials, not features thesephist.

ABBA’s Former Hideaway Hits the Market + More Real Estate News

Friday, August 5, 2022

Plus, the best blue paint shades for interiors View in your browser | Update your preferences Architectural Digest AD PRO Logo Parma Gray-painted cabinets in a breakfast room with wallpaper and rattan

Wastebaskets That Actually Look Good

Friday, August 5, 2022

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image These well-designed wastebaskets do not belong hidden behind cupboards or tucked

The Window Treatments Ruling Interiors Now—From Sheer Panels to Tasselmania

Thursday, August 4, 2022

Plus, Louis Vuitton tasked Peter Marino, Frank Gehry, and others to reimagined the iconic trunk View in your browser | Update your preferences Architectural Digest AD PRO Logo Louis Vuitton LA facade

Notable People, :has(), Accessible Charts, Authentication UX, DocuSign UX

Thursday, August 4, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar August 4 2022 Notable People Map This map

Interpolation, Border Animations, Growth Path, Cloudscape, Audio Logos

Wednesday, August 3, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar August 3 2022 How to choose an interpolation for your color

The Pitcher With the 1500-Person Waitlist Is Back in Stock

Wednesday, August 3, 2022

Plus, 25 dreamy wood kitchens from the AD archive View in your browser | Update your preferences Architectural Digest AD PRO Logo water pitcher THE PITCHER WITH THE 1500-PERSON WAITLIST IS BACK IN

Unlock a New Member Benefit

Wednesday, August 3, 2022

Learn more about our free online courses (image) Architectural Digest AD PRO Logo Looking for CEUs? We Can Help With That. (image) AD PRO event Dear AD PRO Reader, Whether you're in the earliest

Fluid Sizing, Junior Designers, Generational Colors, Implicit Grid, Dictionary App

Tuesday, August 2, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar August 2 2022 Fluid Sizing Instead Of Multiple Media Queries?