Get the course! 10h video + UX training

Get the course! 10h video + UX training

Get the course!

10h video + live UX training

Starts at $300

100 Smart Interface Design Patterns & Live Examples. 10h Video + UX Training.

35 video lessons + 4-weeks UX training.
For UI/UX designers and front-end developers.

Jump to details ↓

Guidelines & best practices for common components in modern interfaces.

Inventing a new solution for every problem takes time, and too often it’s just unnecessary. We can rely on bulletproof design patterns to avoid issues down the line. This course helps with just that.

We’ll study 100s of hand-picked examples — from complex navigation to filters, tables and forms. We’ll dive into actual real-life challenges. And: we’ll design and review each other’s work, together, live.

Jump to the table of contents ↓

Vitaly on stage, presenting at Nordic.js in 2019. Watch the intro + sample

In this video course, we’ll explore:

Lesson number:

Designing for Touch

Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.

Free lesson preview 

Duration

Lesson number:

Accordions UX

The workhorse of all interfaces — the good ol’ accordion, or expander. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.

Free lesson preview 

Duration

Lesson number:

Navigation UX

On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.

Duration

Lesson number:

Hamburger UX

Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.

Duration

Lesson number:

Mega-Dropdowns UX

Do we need mega-dropdown hover menus in 2023? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better navigation UX.

Duration

Lesson number:

Breadcrumbs UX

Breadcrumbs UX are often neglected, but they can be extremely helpful when designing a complex navigation. Let’s explore when we actually need breadcrumbs, how people use them, and how to improve them with sideways navigation, clearer breadcrumbs paths and accordions.

Duration

Lesson number:

Carousels UX

It’s common for us as designers to dismiss carousels at first. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.

Duration

Lesson number:

Infinite Scroll UX

Infinite scroll can be frustrating. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.

Duration

Lesson number:

Modals UX

Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.

Duration

Lesson number:

Footnotes UX

A wonderful yet forgotten UI component that’s left behind in all the conversations about navigation — the footnote, or sidenote. Too often, these notes are found scattered at the bottom of the page. Perhaps they deserve a slightly better placement after all.

Duration

Lesson number:

Search UX

We’ll explore how we search and how we iterate on search phrases, how to refine the interaction design with the search bar, how to show autocomplete suggestions and when to hide them, how many to show and the important details to reveal while users are searching.

Duration

Lesson number:

Autocomplete UX

When customers have a good idea of what they are looking for, they use search. And as they do, they expect autocomplete suggestions to show up. Let’s find out how we can design autocomplete UX to help customers get to their goal faster.

Duration

Lesson number:

Filters UX

Too often dealing with filters can be frustrating. Let’s get them right. That means never freeze the UI on a single input, provide text input fallback and never auto-scroll users on a single input. Here’s why.

Duration

Lesson number:

Sorting UX

Sorting always implies order: be it alphabetical order, timeline, pricing or rating score. But too often sorting isn’t precise enough, doesn’t allow for multi-sorting, and doesn’s support context jumps in a stream of data. Let’s see how we can improve sorting UX, in consumer-focused websites and enterprise apps.

Duration

Lesson number:

Data Tables UX

How do we deal with complex enterprise tables, with filtering, sorting, search and inline editing? A deep-dive into the intricate world of complex tables, with design patterns to keep close.

Duration

Lesson number:

Feature Comparison UX

Chances are high that you’re allowing your customers to select one of the options or variations of your product. However, to choose one of them, they need to be able to compare them easily. And your task is to quickly bring them to the product they will love. How do we get there, especially when we have hundreds of features to compare by?

Duration

Lesson number:

Pricing Plans UX

How do we design a pricing page that doesn’t overwhelm users with all the options, features and variants? How do we communicate differences? And how do we organize everything on tiny mobile screens? That’s exactly the questions that this lesson is trying to answer.

Duration

Lesson number:

Schedule & Calendars UX

How do we design interfaces for products which involve some sort of a schedule table — a TV guide, a multi-track music festival or an appointment calendar? We need to reduce complexity to the essence and allow users to navigate all the details without overwhelming them. Let’s figure out how.

Duration

Lesson number:

Date Pickers UX

No date picker is like the other one: they come in various forms and flavors, from date input to date range picker, at times with filters, requirements and input limitations. How can we make date input easy and painless? We’ll dive in and explore dozens of examples.

Duration

Lesson number:

Sliders UX

Imagine a helpless little slider masked as a duration filter and tucked away in a sidebar on an airline website. So often such sliders are difficult to manipulate, and too often they frustrate customers and slow down the entire experience. Let’s find out when it makes sense to employ sliders, and how we can make them more usable.

Duration

Lesson number:

Timelines UX

Every history textbook and every sport event will have some sort of a timeline at their heart: a flow of historic events, or a tennis match timeline, or perhaps a boxing match protocol. So what if you want to provide your customers with an insight into dozens of events happening within a particular timeframe?

Duration

Lesson number:

Maps UX

With zooming in and out in place, maps seem to be quite obvious to get right. But what if we want to display pins to locations on a shopping mall map? Or what about an election results map with autocomplete, filters, and search? That’s where maps become slightly messier and more complex.

Duration

Lesson number:

Seat Selection UX

What if we combine all the previous challenges into one? Imagine you are selling tickets for a cinema, a baseball stadium, or an opera house. Surely you’ll want to provide your customers with an overview of available seats, and allow them to select the best seat as well. The challenge is to do it well on mobile. Let’s tackle this beast!

Duration

Lesson number:

Configurators UX

Perhaps you have a multi-page wizard, or you’d like your customers to customize your product? In such cases, we need to ensure that users can easily move between steps and complete the task without being slowed down by the interface.

Duration

Lesson number:

Reviews and Ratings UX

95% of users rely on reviews to make their decisions and learn more about how well a product fits their needs. Unfortunately, too often the way we design reviews and ratings UX confuses and frustrates users, rather than helping them. Let’s fix that.

Duration

Lesson number:

Language Selector UX

How difficult can it be to design a bulletproof language selector? It’s not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Let’s dive in!

Free lesson preview 

Duration

Lesson number:

Closed Captions and Subtitles UX

When we think about closed captioning, we often think about noisy environments. There, consuming content via audio is difficult, and so captions help communicate information in an alternative, textual way. Captioning can be much more than text though. Let’s explore design patterns for better UX of subtitles, captions, video players, transcripts and on-screen text.

Duration

Lesson number:

Back Button UX

Users rely on a “Back” button to go back, but often we mismatch their expectations, bringing frustration and abandonment. Let’s explore how to design a better “Back” button UX and where to put these buttons in our interfaces.

Duration

Lesson number:

UX Metrics and Design KPIs

Design solves problems. So we should be able to measure how well a particular design solves a particular problem. That's why I start working by setting Design KPIs, and tracking them over time. Let’s explore how to define, design and track design KPIs in small and large projects.

Duration

Lesson number:

Design Systems

Nobody is surprised by design systems these days. Their main benefit isn’t only in a library of reliable UI components, but in a strong alignment between teams that removes redundant or unnecessary work.

But for that, a design system needs to be healthy and work well. Let’s explore how we can keep our design systems relevant over time, and keep it healthy and up-to-date for the entire organization.

Duration

Lesson number:

Authentication UX

How can we make authentication and password recovery slightly more obvious and slightly less frustrating? In this session, we’ll look into authentication UX, design patterns around login/password, 2FA, magic sign-in as well as just the right timing to speed up and simplify authentication.

Duration

Lesson number:

Privacy UX

With GDPR and CCPA in place, we need to think twice about how we ask customers for their data, or specifically, how do we get permissions if we really need them. It’s really the art of asking tough questions at the right time and in the right way.

Let’s take a look at omnipresent cookie prompts and see how we can make better privacy-related design decisions without hurting the bottom line.

Duration

Lesson number:

Web Forms UX

Very often forms are inaccessible and difficult to use, with awkward live validation and notorious error messages; not to mention a birthday date-picker starting from 2023, a tiny newsletter checkbox, disabled “submit” buttons and horrendously evil CAPTCHAs in the disguise of street signs and crosswalks. So let’s fix web forms for good!

Duration

Lesson number:

Disabled Buttons

In this segment, we’ll look into common usability issues with disabled buttons, how to fix these issues and when disabling buttons actually makes sense. We’ll start from the beginning, looking into when disabled buttons cause more trouble than help.

Duration

Lesson number:

Live Validation UX

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 for good.

Duration

Lesson number:

Error Messages UX

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.

Duration

Lesson number:

Bringing Personality Back to the Web

The web has become quite generic and soulless, hasn’t it? Every single website looks alike, and only few websites manage to convey a unique and charming personality. As a result, nothing is particularly memorable, and only few sites manage to connect with us emotionally.

But we can do better and be charming and unique and attractive without breaking accessibility and usability. Let’s dive into a few techniques to achieve just that!

Duration

Lesson number:

Summary

Giddy up — you made it! Well done! Now, let’s wrap up and recap everything we’ve learned in the course and see how it all fits together, and how you can apply all the insights to your regular design work.

Duration

10h video course for designers, UX engineers & front-end developers.

← Check the packages

Get once, watch forever. New videos added regularly.

A growing library of video lessons & examples. With 35 lessons available now, and more added every few months.

Ideal for interface designers, UI engineers and developers who’d love to be prepared for complex UX challenges.

Table of Contents →

  1. Lesson number:

    Designing for Touch

    Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.

    Free lesson preview 

  2. Lesson number:

    Accordions UX

    The workhorse of all interfaces — the good ol’ accordion, or expander. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.

    Free lesson preview 

  3. Lesson number:

    Navigation UX

    On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.

  4. Lesson number:

    Hamburger UX

    Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.

  5. Lesson number:

    Mega-Dropdowns UX

    Do we need mega-dropdown hover menus in 2023? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better navigation UX.

  6. Lesson number:

    Breadcrumbs UX

    Breadcrumbs UX are often neglected, but they can be extremely helpful when designing a complex navigation. Let’s explore when we actually need breadcrumbs, how people use them, and how to improve them with sideways navigation, clearer breadcrumbs paths and accordions.

  7. Lesson number:

    Carousels UX

    It’s common for us as designers to dismiss carousels at first. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.

  8. Lesson number:

    Infinite Scroll UX

    Infinite scroll can be frustrating. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.

  9. Lesson number:

    Modals UX

    Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.

  10. Lesson number:

    Footnotes UX

    A wonderful yet forgotten UI component that’s left behind in all the conversations about navigation — the footnote, or sidenote. Too often, these notes are found scattered at the bottom of the page. Perhaps they deserve a slightly better placement after all.

  11. Lesson number:

    Search UX

    We’ll explore how we search and how we iterate on search phrases, how to refine the interaction design with the search bar, how to show autocomplete suggestions and when to hide them, how many to show and the important details to reveal while users are searching.

  12. Lesson number:

    Autocomplete UX

    When customers have a good idea of what they are looking for, they use search. And as they do, they expect autocomplete suggestions to show up. Let’s find out how we can design autocomplete UX to help customers get to their goal faster.

  13. Lesson number:

    Filters UX

    Too often dealing with filters can be frustrating. Let’s get them right. That means never freeze the UI on a single input, provide text input fallback and never auto-scroll users on a single input. Here’s why.

  14. Lesson number:

    Sorting UX

    Sorting always implies order: be it alphabetical order, timeline, pricing or rating score. But too often sorting isn’t precise enough, doesn’t allow for multi-sorting, and doesn’s support context jumps in a stream of data. Let’s see how we can improve sorting UX, in consumer-focused websites and enterprise apps.

  15. Lesson number:

    Data Tables UX

    How do we deal with complex enterprise tables, with filtering, sorting, search and inline editing? A deep-dive into the intricate world of complex tables, with design patterns to keep close.

  16. Lesson number:

    Feature Comparison UX

    Chances are high that you’re allowing your customers to select one of the options or variations of your product. However, to choose one of them, they need to be able to compare them easily. And your task is to quickly bring them to the product they will love. How do we get there, especially when we have hundreds of features to compare by?

  17. Lesson number:

    Pricing Plans UX

    How do we design a pricing page that doesn’t overwhelm users with all the options, features and variants? How do we communicate differences? And how do we organize everything on tiny mobile screens? That’s exactly the questions that this lesson is trying to answer.

  18. Lesson number:

    Schedule & Calendars UX

    How do we design interfaces for products which involve some sort of a schedule table — a TV guide, a multi-track music festival or an appointment calendar? We need to reduce complexity to the essence and allow users to navigate all the details without overwhelming them. Let’s figure out how.

  19. Lesson number:

    Date Pickers UX

    No date picker is like the other one: they come in various forms and flavors, from date input to date range picker, at times with filters, requirements and input limitations. How can we make date input easy and painless? We’ll dive in and explore dozens of examples.

  20. Lesson number:

    Sliders UX

    Imagine a helpless little slider masked as a duration filter and tucked away in a sidebar on an airline website. So often such sliders are difficult to manipulate, and too often they frustrate customers and slow down the entire experience. Let’s find out when it makes sense to employ sliders, and how we can make them more usable.

  21. Lesson number:

    Timelines UX

    Every history textbook and every sport event will have some sort of a timeline at their heart: a flow of historic events, or a tennis match timeline, or perhaps a boxing match protocol. So what if you want to provide your customers with an insight into dozens of events happening within a particular timeframe?

  22. Lesson number:

    Maps UX

    With zooming in and out in place, maps seem to be quite obvious to get right. But what if we want to display pins to locations on a shopping mall map? Or what about an election results map with autocomplete, filters, and search? That’s where maps become slightly messier and more complex.

  23. Lesson number:

    Seat Selection UX

    What if we combine all the previous challenges into one? Imagine you are selling tickets for a cinema, a baseball stadium, or an opera house. Surely you’ll want to provide your customers with an overview of available seats, and allow them to select the best seat as well. The challenge is to do it well on mobile. Let’s tackle this beast!

  24. Lesson number:

    Configurators UX

    Perhaps you have a multi-page wizard, or you’d like your customers to customize your product? In such cases, we need to ensure that users can easily move between steps and complete the task without being slowed down by the interface.

  25. Lesson number:

    Reviews and Ratings UX

    95% of users rely on reviews to make their decisions and learn more about how well a product fits their needs. Unfortunately, too often the way we design reviews and ratings UX confuses and frustrates users, rather than helping them. Let’s fix that.

  26. Lesson number:

    Language Selector UX

    How difficult can it be to design a bulletproof language selector? It’s not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Let’s dive in!

    Free lesson preview 

  27. Lesson number:

    Closed Captions and Subtitles UX

    When we think about closed captioning, we often think about noisy environments. There, consuming content via audio is difficult, and so captions help communicate information in an alternative, textual way. Captioning can be much more than text though. Let’s explore design patterns for better UX of subtitles, captions, video players, transcripts and on-screen text.

  28. Lesson number:

    Back Button UX

    Users rely on a “Back” button to go back, but often we mismatch their expectations, bringing frustration and abandonment. Let’s explore how to design a better “Back” button UX and where to put these buttons in our interfaces.

  29. Lesson number:

    UX Metrics and Design KPIs

    Design solves problems. So we should be able to measure how well a particular design solves a particular problem. That's why I start working by setting Design KPIs, and tracking them over time. Let’s explore how to define, design and track design KPIs in small and large projects.

  30. Lesson number:

    Design Systems

    Nobody is surprised by design systems these days. Their main benefit isn’t only in a library of reliable UI components, but in a strong alignment between teams that removes redundant or unnecessary work.

    But for that, a design system needs to be healthy and work well. Let’s explore how we can keep our design systems relevant over time, and keep it healthy and up-to-date for the entire organization.

  31. Lesson number:

    Authentication UX

    How can we make authentication and password recovery slightly more obvious and slightly less frustrating? In this session, we’ll look into authentication UX, design patterns around login/password, 2FA, magic sign-in as well as just the right timing to speed up and simplify authentication.

  32. Lesson number:

    Privacy UX

    With GDPR and CCPA in place, we need to think twice about how we ask customers for their data, or specifically, how do we get permissions if we really need them. It’s really the art of asking tough questions at the right time and in the right way.

    Let’s take a look at omnipresent cookie prompts and see how we can make better privacy-related design decisions without hurting the bottom line.

  33. Lesson number:

    Web Forms UX

    Very often forms are inaccessible and difficult to use, with awkward live validation and notorious error messages; not to mention a birthday date-picker starting from 2023, a tiny newsletter checkbox, disabled “submit” buttons and horrendously evil CAPTCHAs in the disguise of street signs and crosswalks. So let’s fix web forms for good!

  34. Lesson number:

    Disabled Buttons

    In this segment, we’ll look into common usability issues with disabled buttons, how to fix these issues and when disabling buttons actually makes sense. We’ll start from the beginning, looking into when disabled buttons cause more trouble than help.

  35. Lesson number:

    Live Validation UX

    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 for good.

  36. Lesson number:

    Error Messages UX

    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.

  37. Lesson number:

    Bringing Personality Back to the Web

    The web has become quite generic and soulless, hasn’t it? Every single website looks alike, and only few websites manage to convey a unique and charming personality. As a result, nothing is particularly memorable, and only few sites manage to connect with us emotionally.

    But we can do better and be charming and unique and attractive without breaking accessibility and usability. Let’s dive into a few techniques to achieve just that!

  38. Lesson number:

    Summary

    Giddy up — you made it! Well done! Now, let’s wrap up and recap everything we’ve learned in the course and see how it all fits together, and how you can apply all the insights to your regular design work.

1 | 38

10h Video, Real-Life Examples, Checklists & Live Sessions.

With 100s of practical examples, guidelines, gotchas, checklists, takeaways & exercises — applicable to your project right away.

Get a taste!

Get 3 video lessons for free — in your inbox!

Add-on: Live UX training. Deep-dive sessions with 1:1 feedback & UX certification.

In a 4-weeks sprint, you’ll learn how to deal with real-life UX challenges from the ground up. You’ll be designing complex interfaces, receive feedback and work with Vitaly and people around the world.

Every week, we’ll host 2×2.5h-long live sessions on:

  • Real-life UX challenges,
  • Full UX workflow, from start to finishg,
  • UX deep dives and case studies,
  • Design reviews and revisions
  • Personal 1:1 feedback with Vitaly.

You’ll have enough time to ask all your questions and learn at your own pace. And: you can get a UX certificate as well. Check the next UX training.

Next UX training: Nov 1 – Dec 2, 2024 
(Can’t make it? Mark Mar 10 – Apr 7, 2025)

Sneak peek into the video training sessions. What's UX training like?

That’s what these wonderful people say about the course!

Smart Interface Design Patterns, curated by yours truly chef in charge, Vitaly Friedman.

Vitaly sitting at a computer desk with a cup of coffee

My name is Vitaly, and over the last 15 years, I’ve been scouting the web for reliable interface design patterns. I was honored to be involved in design and testing first-hand, studying solutions that worked well or failed miserably. All these learnings and insights from all these years are now collected in this video course.

Over the years, I was wearing many hats, as designer and as developer, being involved in UX, interface design, usability testing and performance optimization.

I love our wonderful community, and so love writing articles about the web, speaking, workshopping and teaching. I’m the editor-in-chief and creative lead of Smashing Magazine. In my spare time, I’m a front-end & UX consultant in Europe and abroad, working with big and small companies and organizations, such as European Parliament, Haufe-Lexware, Axel-Springer and others.

Twitter — LinkedIn

vitaly@smashingconf.com

Simple prices, no surprises. Buy once, access forever.