Smart Interface Design Patterns, 2022 Edition

Your instructor: Vitaly Friedman

Full-day workshop • Monday, June 20, 2022.
Are you ready for a design challenge? In this workshop, 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 with practical examples and action points
100 checklist cards on everything from carousels to web forms
Editable checklists as text files to adjust for your needs
Access to the evergreen deck, updated regularly
Hands-on exercises and reviews
All workshop recordings
Dedicated Q&A time for all your questions
A Smashing Certificate

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

What Will This Workshop Cover?

In this workshop, we’ll go hands-on into exploring:

How people use mobile interfaces and how we can optimize for touch,
Navigation, with accordions, complex mega-drop-downs, hamburger navigation, breadcrumbs, carousels, filters and search,
Advanced configurators, wizards and customizers, taking a car configurator as an example,
Complex tables, with an overview of common techniques for making tables work across screens, feature comparison tables, dashboard, currency exchange tables, pricing plans,
Date/time pickers, date range picker and a time slot picker, incl. booking an appointment, trip planners, booking an airline ticket,
Calendar widgets, a multi-track schedule, TV Guide schedule, music festival schedule, exhibition calendar, spreadsheets and dashboard,
Web forms, with email verification, password input, country selector, sliders, error validation, disabled buttons, incl. public transportation and a banking transaction UI,
Sliders, with insurance calculators, timelines, historical family tree, soccer game signature, 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”.

What Hardware/software Do I Need To Bring?

You’ll need to bring a lot of creativity with your preferred coffee mug. We’ll be spending a lot of time drawing, sketching, designing and thinking. Be ready to challenge your general view of design process and how our interface should look like. You’ll need a lot of sleep reserves since it’s going to be a packed day. Bring a lot of attention to detail and non-standard thinking to this one! ;-)

About Vitaly Friedman

Vitaly loves beautiful content and does not give up easily. Born in Minsk, Belarus, he studied computer science and mathematics in Germany. While writing algebra proofs and preparing for software engineering at nights in the kitchen, at the same time he discovered passion for typography, interface design and writing. His curiosity drove him from interface design to front-end to performance optimization to accessibility and back to user experience over all the years.

Time & Location

This full-day workshop will be hosted at Fort Mason and will take place the day before SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Monday, June 20.

Schedule for Monday, June 20

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save 100 USD when signing up for the conference and a workshop!