Smashing Newsletter: Issue #521

Editorial

Design patterns are often perceived as generic, one-size-fits-all solutions. Solutions that we, as designers and UI engineers, often take off the shelf and apply as is to solve a problem at hand, without reinventing the wheel every single time.

However, design patterns can do much more than that. They can be very useful — predictable, familiar, well-understood. We just shouldn’t rely on them at all times — and know when to use them as a starting point, rather than a final solution.

In this newsletter, we look at some websites that highlight and curate design patterns, design examples, and UI components. And in fact, we even launched a whole video library with them, and as it happens, we will be running a live UX training with UX certification in October this year as well.

Smashing In-Person Workshops — In-person workshops in Antwerp, with Brad Frost and yours truly.

On our end, we’ll be travelling to the magical city of Antwerp, Belgium 🇧🇪 for a series of in-person workshops — on How to Measure UX and Advanced Design Systems with Brad Frost. In fact, we also have friendly bundles for friendly teams.

Also, happening this and next week:

Building Interactive, Accessible UI Components 🧱 (online, with Stephanie Eckles)
UX Strategy Masterclass 🧭 (online, with Vitaly Friedman)
Smashing Meets AI 🔮 (free, Aug 27, online)

In the meantime, though, let’s dive into design patterns — we hope you’ll find them useful. Have a fantastic rest of the week!

— Vitaly

1. Push Notifications Library

When we send our users a push notification, we want to encourage them to take action. But how can we achieve that? How do we design push notifications that don’t get lost in a flood of alerts and actually make users want to act?

For some inspiration on what successful push notifications can look like, be sure to check out Pushkeen. The curated collection features push notification patterns from mobile apps like LinkedIn, Apple Health, Duolingo, Snapchat, and many more, reflecting the best in growth and user re-activation. Lots of ideas for your own push notifications are guaranteed. (cm)

2. Footer Design Examples

Whether it’s contact information, links to terms of service, social media profile links, or copyright notices, a website footer not only signals to users that they’ve reached the bottom of the page, it also provides quick access to useful information. Utility doesn’t mean that footers need to look boring, though, as Footer beautifully shows.

Footer collects inspiring footer designs from across the web. You’ll find e-commerce footers just like footers from personal portfolios, news and finance sites, and much more. A nice detail: The footers are categorized by style, so if you’re looking for examples for one particular footer style (e.g., small type, illustrative, grid, etc.), with more than 30 different styles, the collection sure has got you covered. Happy browsing! (cm)

3. Alternative Design, Code, And Content

Dedicated to uncovering extraordinary web designs, Hoverstat.es never ceases to inspire. The site describes itself as “the home of alternative design, code and content on the world wide web” and features an extensive collection of websites that experiment with interactivity and content in new and interesting ways.

In the collection, you’ll find browser split experiences where the user explores the site between two separate but connected interfaces, nostalgic cinematic screen wipes, off-kilter typography, rotating navigation, video timelines with draggable clips, and much more. As unique as the featured websites are, they all have one thing in common: they aren’t afraid of leaving the beaten tracks. A breath of fresh air in times when a lot of websites look rather similar! (cm)

4. Pricing Pages Design Vault

A great pricing page combines good design, clear messaging, and strategic UX choices. And let’s be honest, getting all of this right can be quite challenging. If you’re looking for some real-world examples of pricing pages that have mastered the challenge, Pricing Pages Design Vault is for you.

You can browse the pricing pages in the collection by components (e.g., tier cards, feature checkmarks, usage-based calculators, etc.) or design patterns (e.g., enterprise pricing, subscription option, content-light, content-heavy, and more). A useful resource to inspire better design decisions that’ll, hopefully, turn into better performance. (cm)

5. 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.

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:

UX Strategy Masterclass UX
with Vitaly Friedman. Aug 20–29
Accessible Typography for Web & UI Design Masterclass Design
with Oliver Schöndorfer. Sep 11–19
Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
Dataviz Accessibility Workshop Dev
with Sarah L. Fossheim. Sep 22 – Oct 6
UX Bundle: Design Patterns + Measure UX UX
with Vitaly Friedman. Video + UX training
Jump to all workshops →

6. Delightful Designs

A carefully crafted pull-to-refresh animation, floating action buttons, smooth sliding sidebars — small design details like these add that extra sprinkle of delight to a design. If you’re looking for real-world examples of well-thought-out design details, Design Spells is a treasure chest.

Design Spells collects micro-interactions, easter eggs, and other seemingly extra design details from across the web so you don’t have to hunt them down yourself. Each of the featured examples is unique and bound to bring life, personality, and fun back into the web. Inspiring! (cm)

7. OpenGraph Image Gallery

Does your website have an Open Graph (OG) image? If not, it might be a good idea to create one. An OG image is displayed when someone shares your site on social media. So instead of reverting to a default placeholder image or a random image from your site, social media platforms will use the visual preview you created.

For some inspiration of what great OG images can look like, be sure to check out OGimage.gallery. The site collects well-designed OG images and comes with a previewer that lets you view the OG image of any website just by entering its URL. By the way, an OG image not only builds brand identity, it can also help boost user engagement and SEO. So the effort of creating one is more than worth it. (cm)

8. Meet Accessible UX Research, A Brand-New Smashing Book 📚

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. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price!

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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

August 19, 2025 Smashing Newsletter: Issue #521

Previous Issues