Skip to main content

Smart Interface Design Patterns, 2020 Edition

Vitaly Friedman

Workshop, 5×2h + Q&A • Apr 2–17
09:00 — 11:30 AM PDT (Pacific Daylight Time)

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.

The workshop includes:

  • 1500+ workshop slides and examples
  • 20 checklists for everything from accordion to maps
  • Interactive sessions
  • Hands-on exercises and reviews
  • All workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Who is this workshop for?

This is a full workshop, delivered in five 2-hour long sessions with lots of time for Q&A.

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 interfaces and how we can optimize for thumbs,
  • Navigation, with accordions, mega-drop-downs, hamburger icons, breadcrumbs, carousels, filters and search,
  • Advanced configurators, wizards and customizers, diving into details of a car configurator,
  • Complex tables, with a feature comparison table, currency exchange calculator, pricing plans,
  • Date pickers, date range picker and a time picker, incl. booking an appointment and booking an airline ticket,
  • Calendars, with a multi-track schedule, TV Guide schedule, music festival schedule, exhibition calendar, spreadsheets and dashboard,
  • Forms, with email verification, password input, country selector, sliders, error validation, incl. public transportation and a banking transaction UI,
  • Sliders, with insurance calculators, timelines, historical family tree, soccer game signature and live leaderboard and standings,
  • Maps and Data Visualization, with a shopping mall map, election map, smart region input.
  • Onboarding and offboarding UX for higher conversion/retention,
  • Authentication patterns, permissions UX, GDPR/CCPA, CAPTCHA and 2-factor-auth,
  • 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”.

Schedule and Format of the Workshop

The workshop sessions will run on the following days:

  • Thu, Apr 2, 09:00 – 11:30 AM PDT
  • Fri, Apr 3, 09:00 – 11:30 AM PDT
  • Thu, Apr 9, 09:00 – 11:30 AM PDT
  • Fri, Apr 10, 09:00 – 11:30 AM PDT
  • Fri, Apr 17, 09:00 – 11:30 AM PDT

All sessions will follow the same format:

  • 8:45 AM PDT
    Virtual doors open, chat and networking.
  • 9:00 AM – 09:45 AM
    45 mins session.
  • 9:45 AM – 10:00 AM
    Coffee break (15 mins)
  • 10:00 AM – 10:45 AM
    45 mins session (incl. hands-on exercise).
  • 10:45 AM – 11:00 AM
    Coffee break (15 mins)
  • 11:00 AM – 11:30 AM
    Q&A + discussion

Of course we can be flexible and adjust timing depending on how the day goes!

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! ;-)

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 remote workshop is split over five days. The schedule may change slightly based on how we are progressing through the material, giving time to answer questions as we go along. The workshop will be running from 9:00 AM PDT to 12:30 PM PDT on Thursdays and Fridays between April 2–17.

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

Thu, Apr 2: Navigation

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

9:00 AM – 11:00 AM
Designing in 2020, 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!

Friday, Apr 3: Tables

8:45 AM PDT
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!

Thu, Apr 9: Timelines & Calendars

8:45 AM PDT
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!

Fri, Apr 10: Sliders and Maps

8:45 AM PDT
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!

Fri, Apr 17: Forms, Authentication

8:45 AM PDT
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!

Register for this workshop →