Skip to main content

Smart Interface Design Patterns, 2022 Edition

Workshop, 5×2.5h + Q&A Mon & Thu, May 5–19 2022
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, hamburger navigation, to enterprise tables, dashboards, sliders, feature comparisons and onboarding — all the way to timelines and multi-page web forms. And: We’ll be reviewing and providing feedback to each other’s work.


Video Message From Vitaly (1 min)

A short 1-min introduction to the workshop by Vitaly himself.

The workshop includes:

  • 2000+ 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

$350 .00 $450.00 Register for this workshop → 5 × 2.5h live sessions + Q&A. May 5–19.
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, front-end designers and 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 in 2022, how we can optimize for faster and more preciseinput,
  • Navigation, with accordions, mega-drop-downs, hamburger navigation, breadcrumbs, carousels, sideways navigation, navigation queries,
  • Configurators and wizards, with multi-step flows, in-page navigation, customizers, diving into details of a car configurator,
  • Advanced tables, with filters and inline editing, feature comparison, medial library and pricing plans,
  • Date pickers, date range picker and a time picker, incl. booking an appointment and booking an airline ticket,
  • Timelines and calendars, with a multi-track schedule, TV Guide schedule, music festival schedule, exhibition calendar, spreadsheets and dashboard,
  • Sliders, with insurance calculators, timelines, historical family tree, game signature, live leaderboard and standings,
  • Reviews and testimonials, with user references, layout, distribution of ratings, order, filtering, diversity-based sorting.
  • Web forms, with form layout design, single page vs. multi-page forms, email verification, password input, incl. public transportation and a banking transaction UI,
  • Maps and Data Visualization, with smart regions, a shopping mall map, election map, smart region input.
  • Onboarding and offboarding UX for higher conversion and retention,
  • Seat selection, for a concert, theatre or exhibition and a perfect Formula 1 seat selection,
  • Design anti-patterns to avoid to prevent running into maintenance issues and “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, May 2, 09:00 – 11:30 AM PT
  • Tue, May 3, 09:00 – 11:30 AM PT
  • Mon, May 9, 09:00 – 11:30 AM PT
  • Tue, May 10, 09:00 – 11:30 AM PT
  • Mon, May 16, 09:00 – 11:30 AM PT

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

Mon, May 2: Navigation

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

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

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

Tue, May 3: Tables

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

9:00 AM – 11:00 AM
Enterprise tables, with filtering, sorting, search, a feature comparison table, currency exchange calculator, pricing plan matrix.

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

Mon, May 9: Timelines & Calendars

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

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

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

Tue, May 10: Sliders and Maps

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

9:00 AM – 11:00 AM
Data visualization, 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!

Mon, May 16: Forms, Authentication

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

9:00 AM – 11:00 AM
Form design metrics, layout, copy, inline validation, required and optional fields, floating labels, error message UX, accessibility, disabled buttons, 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! ;-)

Register for this workshop →