
Do you sometimes feel that all websites look the same? In this post, we compiled web design showcases that prove differently. They highlight some of the finest web designs, well-crafted experiences, and delightful interactions from across the web. Inspiration is guaranteed.

Plugins, widgets, and tooling—the second edition of our series on the future of design systems.

On the Encore team (Spotify’s design system), there’s nothing we love more than collaborating with our fellow squads — (1) because they have awesome squad names and (2) because they have awesome people. Enter our most recent collab with the Mandalorian squad, which is in charge of accessibility at Spotify — and aptly named, because accessibility is “the Way.”
ABArielle Benedek , Rose Marantz , and Tamas Geczy·March 1, 2023Design & UX 
Software Engineer Dorothy Chen explains the technical challenges and opportunities in making Figma keyboard shortcuts more accessible for everyone.

In the ever-evolving design tools landscape, it can be difficult to keep up with the latest and greatest. In this article, we’ll take a closer look at Penpot, the first design and prototyping tool that’s fully open-source and based on open web standards, making it an ideal choice for both designers and developers.

Each time we build a field validation from scratch, accessibility doesn’t come out of the box. In this guide, Sandrina breaks down what we need to take into consideration, so that nobody gets stuck on an inaccessible invalid field.

A manager’s guide to redesigning our jobs

Brand new conference on design & UX, for designers and UI engineers who love the web. On design systems, usability, product design and complex UIs. That’s SmashingConf Antwerp, taking place in magical Bourla on October 9–11, 2023.

An accessible product can be daunting to build as there’s so much nuance and technical depth to consider. In this article, Daniel Yuschick demonstrates three keys for approaching and developing accessible content without leaving you lost in the weeds.

Most carousels come along with usability and accessibility issues. To avoid these issues, this article addresses step-by-step design considerations as well as semantic requirements for carousels to be accessible. It is intended to create an in-depth understanding of the implementation and its impact on users.

Learn about CodeQL’s improved user experience and enhancements that let you scan new languages, detect new types of CWEs, and perform deeper analyses of your applications.
WC
Walker Chabbott, Pierre Tempel·February 16, 2023Design & UX 
How to apply powerful storytelling to design a compelling and memorable digital experience on a landing page. A case study of the [Smart Interface Design Patterns landing page](https://smart-interface-design-patterns.com/).

In this article, Andy Budd shares his way of requesting feedback: rather than sharing a linear case study that explains every design revision, the first thing to do would be to better frame the problem.

In this episode of the Smashing Podcast we ask how has the design industry changed? Is technology making our work easier? Vitaly Friedman talks to veteran designer Veerle Pieters to find out.

Podcasts are a fantastic opportunity to get up close with the people who know their craft. In this post, we compiled podcasts that are bound to provide valuable insights into UX and new perspectives on the field. Perfect for a short coffee break or a long commute.

In this series, we talk to industry experts about how they’re managing the the future of design systems—from tooling to automation to accessibility.

Throughout a customer journey (particularly in B2B), there will be interactions that are primarily between two people rather than a human and an interface. In this article, Paul Boag explains why you cannot improve the user experience without considering the entirety of the UX journey.

In this article, Pratik Joglekar explores the typical traits of introverts and uses them to make parallels and categorize digital experiences that can stand out without being loud.

Get better at your craft and support the people in Ukraine — that’s the idea behind our Figma Auto Layout Masterclass with Christine Vallaure. **We are donating all proceeds** from the online workshop to humanitarian aid in Ukraine. Monday, March 27, 09:00AM – 12:00PM PT / 18:00 – 21:00 CET. Donate and join!

Captioning can be much more than text. Design patterns for better UX of subtitles, captions, video players, transcripts and on-screen text.

That’s how people behave on the web in 2023. Some observations from real usability testing on what people do and what they don’t do on the web. From disabled copy-paste to magic link sign-in.

In this article, Thomas Bohm shares strategies and methods to tackle some common graphic communication problems and gives you insights into how to improve accessibility and usability and make your designs much better.

In this article, Masha goes over five tips that make it easier to manage a design system while increasing its effectiveness. This short guide is aimed at smaller teams.

As we reimagine how our physical office spaces support the work we do at Cloudflare, sustainable design and operations is at the forefront of our design philosophy and one of the underlying premises that affects all aspects of our workplaces.

Wrap up 2022 with some self-reflection and set creative intentions for the year ahead with Figma’s Persona Quiz.

Are you ready for the countdown to Christmas? This year, the web community was once again busy creating tech advent calendars jam-packed with fantastic content to sweeten your days. But which ones to follow? We help you find the right one, whether you’re a front-end dev, UX designer, or content strategist.

We just published our vision for GitHub accessibility at accessibility.github.com. Here’s the TL;DR: the prime directive of the GitHub accessibility program is to empower people with disabilities to build cool technology.

Today, we’ll take a look at the Sass function that does all the work for you — with no media queries, no breakpoints, and no design jumps. In this article, Fabienne Bielmann explains what FabUnit stands for and why she decided to create her very own responsive magic formula.

Ashwin explains why and how we implemented server-driven UI in the Shop App’s Store Screen, and his experience working on the project as a Dev Degree intern.

So far, we’ve covered how to work with data from an external API in a custom WordPress block. We walked through the process of fetching that data for use on

What they’ve learned from the community and their vision for what’s ahead

In this article, Noah Mashni and Mark Steadman share their approach to how to leverage the automated test results from the accessibility checks to drive change and reach sustainable digital accessibility transformation.
NM
Noah Mashni And Mark Steadman·November 16, 2022Design & UX 
Schema keynote speaker and product manager Jacob Miller shares his thoughts on the state of design systems.

Everything design systems on accessibility, enterprise design systems, Figma kits, data visualization, motion design, multi-lingual design, naming, ROI calculator and UX writing.

When designing navigation on mobile, we don’t have to rely on slide-in-menus or nested accordions. We can also use the curtain design pattern, and show multiple levels of navigation at once.

Design has always been a team sport. These improvements make sure everyone is on the same page.

GitHub Actions changed how developers automate workflows with GitHub. Today, we’re introducing a new navigation to manage your GitHub Actions experience, improving discoverability and accessibility as well as opening up future feature opportunities.

In this article about conducting productive meetings, Andrii Zhdan will give you a step-by-step guide on preparing a solid meeting structure that will let you follow the original plan and reach the meeting goals, and he will also share a few tips based on his design experience.

In this article, Adrian Bece will show how to create same-document page transitions for Single Page Apps using Shared Element Transitions API and check out its future implementation and potential for creating cross-document transitions in Multi-Page Apps.

Develop your design and collaboration skills to get your clever intentions off the ground.

Give back to open source projects during the month of October! This year, we’re encouraging more than code contributions: writing, design, advocacy, and financial donations.

Shared Element Transitions API is a game-changing feature that will enable us to create impressive and elaborate UI animations easily. In this article, Adrian Bece will explore its incredible potential by building four real-life examples from scratch.

At Cloudflare, we believe the Internet should be accessible to everyone. And today, we’re happy to announce a more inclusive Cloudflare dashboard experience: adherence to the industry accessibility standards, including WCAG 2.1 AA and section 508 compliance.
RJ
Rachel Jenkins, Emily Flannery·September 30, 2022Design & UX 
The link between design culture, happiness, and hiring

Throughout the research and design processes, our unconscious biases are the greatest risk to delivering inclusive experiences. From who we include and exclude in our research to how we plan and conduct research, it’s crucial that we understand how our unacknowledged biases can perpetuate systems of exclusion.

A round-up of updates and improvements to Figma and FigJam

The customer journey is not limited to a website alone. Simply by combining the world of website design and telephony, far better results can be obtained for your organization. And thanks to the similarities and mutual benefits, it is an easy step to take.

In this article, Dave Feldman shares his lessons learned and the experiments has done as a multidisciplinary designer-founder-CEO at an early-stage startup. Let’s take a look at what it is that makes a great design process for teams of any size.

Live, or inline validation in web forms is useful when it works, but frustrating when it fails. Too often it leads to an endless stream of disruptive error messages or dead-ends without any chance of getting out. Let’s fix it.

Today, we’re announcing the exciting news that Figma has entered into an agreement to be acquired by Adobe.

Do you want to make your new website as accessible as possible? Amazing, that’s a great mindset! Let’s have a closer look at the factors you should take into consideration when choosing a content management system (CMS) in terms of web accessibility.

Figma has always encouraged collaboration between developers and designers. It strives on an endless treasury of community-made plugins.

Design systems are a crucial success factor for digital businesses, and virtually every major player works with one. Still, they can sometimes be hard to sell to management. Here’s a ready-to-use formula to calculate the ROI of any design system.
MS
Maximilian Speicher Guido Wehrmann·September 9, 2022Design & UX 
UX checklists with best design practices, accessibility guidelines, design system checklist, tables UX checklist, UX research methods, form design UX and flowcharts.

In this article, Andrew Somers, a 35-year veteran of the Hollywood film and television industry, shares his experience about the hard-fought battles and lessons learned designing for illuminated presentations.

In this article, Mike Herchel covers Drupal’s new default theme, Olivero, which is usable, accessible, robust, and beautiful and will help you improve websites’ navigation systems.

A round-up of updates and improvements to Figma and FigJam

Ever felt overwhelmed by the number of things you need to learn? Today, we look at how [Uxcel](https://uxcel.com/) eases this transition and approaches actively learning new skills to take our careers to the next level.

The problem of how to design an effective toggle button that shows the selected option clearly is a long-term open question among UI/UX designers. In this second part, Eduard Kuric explains a complex list of visual cues used by toggle buttons to communicate which of their options is active.

Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea.