Skip to main content

Smart Interface Design Patterns, 2022 Edition

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:


Workshop, 5×2.5h + Q&A Mon & Tue, Oct 25 – Nov 8 2021
09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)

Are you ready for a design challenge? In this series of online workshops, Vitaly Friedman, creative lead behind Smashing Magazine, will be taking a microscopic examination of common components and design patterns in modern interfaces — on desktop and on mobile.

We’ll study 100s of hand-picked examples and we’ll be designing interfaces together, starting from accordions, to mega-drop-downs, sliders, feature comparisons, car configurators — all the way to timelines and onboarding. And: We’ll be reviewing and providing feedback to each other’s work as well.


Video Message From Vitaly (1 min)

A short introduction to the workshop by Vitaly himself.

The workshop includes:

  • 1500+ workshop slides with practical examples and action points
  • 150 checklist cards on everything from carousels to web forms
  • Editable text file to adjust for your needs
  • Access to the evergreen deck, updated regularly
  • Live, interactive sessions
  • Hands-on exercises and reviews
  • All workshop recordings
  • Dedicated Q&A time for all your questions
  • A Smashing Certificate

$450 .00 Register for this workshop → 5 × 2.5h live sessions + Q&A. Oct 25 – Nov 8.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with Smashing Membership.

Who is this workshop for?

This workshop is for interface designers, UX designers, front-end developers who’d love to be prepared for complex and time-consuming design challenges.

You’ll walk away with a toolbox of techniques and examples of doing things well — in your product, website, desktop app or a mobile app.

In this workshop, we’ll explore:

  • How people use mobile interfaces and how we can optimize for thumbs,
  • Navigation, with accordions, mega-drop-downs, carousels, modals, hamburger icons, bottom bar navigation, tabs and breadcrumbs,
  • Filters, sorting and search for eCommerce websites, government and enterprise websites, museums, archives, libraries and dashboards,
  • Advanced wizards and configurators used for complex multi-step flows, such as a custom car configurator and a multi-journey trip planner,
  • Complex enterprise tables, with a enterprise dashboards with filters, tables, feature comparison, pricing plans and currency exchange calculator,
  • Reviews and testimonials, when and how to use them, the details to include, the frequency of appearnace, with plenty of examples to use right away,
  • Date and time input focusing on date pickers and calendar widgets, incl. birthday input, day/time mini-jumps and horizontal split menus when buying tickets or booking an appointment,
  • Schedule and timelines for spreadsheets, exhibition calendars, multi-track schedule, festival schedule and TV guides,
  • Sliders, with mortgage and loan calculators, family trees, football game signature, live leaderboard and standings,
  • Web forms, with form design and layout, input types, inline validation, tooltips, segmented control, autocomplete, error messages, email verification, password input, incl. enterprise forms, authentication and multi-column forms,
  • Maps and data visualization, with map hotspots, detail views, axis swaps, charts layout, shopping mall and election maps and smart region input,
  • Onboarding and offboarding UX for higher conversion/retention, incl. modals, empty states, loading indicators and guided tours,
  • Privacy UX and authentication, with design patterns for GDPR/CCPA-compliant experiences, dealing with cookie prompts, permissions and notifications UX, CAPTCHA and 2-factor-auth,
  • Seat selection, in which complex forms meet complex maps, for concerts, theatre performances, sport events, exhibitions and Formula 1 seat selection,
  • Design anti-patterns, with design patterns that often create ambiguity, cause maintenance issues and initiate a “slow UX decay”.

Register for this workshop →

About Vitaly Friedman

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

  • Mon, October 25, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Tue, October 26, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Mon, November 1, 09:00 – 11:30 AM PT (17:00 – 19:30 CET)
  • Tue, November 2, 09:00 – 11:30 AM PT (17:00 – 19:30 CET)
  • Mon, November 8, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

You can always re-watch the sessions at a more convenient time and follow the webinar at your own pace.

Day 1 — Navigation

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Designing today, navigation, mega-drop-downs, hamburger, accordions, carousels, filters. Advanced configurators, wizards and customizers.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 2 — Tables

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Complex tables, with a feature comparison table, currency exchange calculator, pricing plans.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 3 — Timelines & Calendars

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Historical timelines, multi-track schedule, TV Guide schedule, music festival schedule, exhibition calendar, spreadsheets and dashboard.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 4 — Sliders and Maps

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Data visualization, common issues with sliders, insurance plans, shopping mall maps, election map, opera/theatre seating plans, Formula 1 seat selection.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 5 — Forms, Authentication

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Privacy issues, forms, permissions UX, push notifications, authentication patterns, CAPTCHA, onboarding. Wrapping up.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

What hardware/software do you need?

To view the webinars, please install the Zoom client for Meetings, which is available for all the main OSs. It may take a little time to download and install, so please grab it ahead of time if you can.

You’ll need a lot of sleep reserves since it’s going to be a couple of packed sessions! Bring a lot of attention to detail and non-standard thinking to this one! ;-)


Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below: