Skip to main content

Smart Interface Design Patterns, 2021 Edition

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

$350 .00 $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 (18:00 – 20:30 CET)
  • Tue, November 2, 09:00 – 11:30 AM PT (18:00 – 20: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 in 2021, 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! ;-)

Register for this workshop →