Skip to main content

Smart Interface Design Patterns, 2024 Edition

Vitaly Friedman
Your instructor
Vitaly Friedman
Tickets
Get a ticket

Workshop includes:

  • 🍵 Tea, coffee, snacks and drinks during the whole day
  • 🥪 Lunch
  • 📒 Paper and pen/pencil

Full-day workshop • Thursday, October 31, 2024.
Are you ready for a design challenge? In this in-person workshop, Vitaly Friedman, creative lead behind Smashing Magazine, will be taking a microscopic examination of common UX challenges 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 onboarding UX, loading indicators and navigation to modals, overlays, sliders, feature comparisons, configurators — all the way to timelines, drag-and-drop, multi-lingual UX and offboarding. And: we’ll be reviewing and providing feedback to each other’s work.


Here’s What You Should Be Expecting:

  • Inspiring & Inclusive

    A full day of teaching in a friendly, inclusive group

  • Interactive & Practical

    Plenty of time for practice & feedback

  • Hands-on exercises

    With 1:1 reviews by Vitaly

  • Collaborative

    Learn from your teacher and other attendees

  • Dedicated Q&A time

    To ask all your questions

  • Digital Smashing Certificate

    A well-deserved reward for your work


Get ready to take notes, bring your own doubts, problems and concerns — let’s get to the bottom of it! By the end of the day, you’ll have a neat toolkit with design patterns to get to better results, faster.

549 .00Register for this workshop →Get a single workshop, or bundle with a conference.

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

In this workshop, we’ll explore:

  • Designing for touch, and how we can optimize for mobile use for left- and right-handed users,
  • How users read on the web, why F-shape is harmful, the layer-cake pattern, marking pattern, commitment pattern, and how to design with them in mind,
  • Navigation patterns, with accordions, sticky menus, bottom-sheet navigation, mega-drop-downs, hamburger menus, breadcrumbs, carousels, filters and search,
  • Forms UX, focusing on form components, one-column vs. multi-column layout, error recovery, progress steps, inline validation, routing, conditional reveal, disabled buttons, input buffering (e.g. complex multi-column multi-page forms with dozens of steps),
  • Loading indicators, skeleton screens, gradual loading, the UI stack of states, determinate and indeterminate loading indicators,
  • Drag’n’drop UX, design states, interaction modes, accessibility considerations, elevation, “magnetic” effect,
  • Transitions and animations, how to animate transitions, maintain consistency, balance speed and establish spatiality,
  • Feature comparison and pricing plans UX, with comparison tables, pricing options on mobile, highlighting differences and similarities,
  • Modals and overlays, confirm vs. undo behavior, right timing, interaction design, with guidelines and best practices to improve click-through rates and decrease mistakes (e.g. enterprise software),
  • Sliders UX, with insurance calculators, timelines, historical family tree, hockey game signature, live leaderboard and standings,
  • Reviews and Ratings UX, how people read them, how to display them effectively, incl. filtering, sorting and search,
  • Back Button and Cancel UX, with frequent UX challenges, infinite scroll, form flows, search, real-time UIs,
  • Multi-Lingual UX, with language selector, flags, cross-cultural localization and internationalization,
  • Error messages UX, with guidelines on how to design better messages, labels and UI copy,
  • Onboarding and Offboarding UX, with just-in-time hints, tours, and offboarding UX for higher conversion/retention,
  • 100s of real-life examples, government and university websites, trip planners, financial services, eCommerce, online banking, configurators, insurance and mortgage calculators, data grids and enterprise products.
  • Designer’s toolkit, with useful Notion templates, Miro boards, Figma plugins and UX workshop kits for design and UX research,
  • Checklist for complex UIs with guidelines and decisions to consider when designing any component in a complex setting.

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 Hardware/Software Do I Need To Bring?

You’ll need to bring along good sleep your preferred coffee mug. We’ll be spending a lot of time thinking, designing, sketching. Be ready to challenge your design process and familiar design patterns. You’ll need a lot of sleep reserves since it’s going to be a packed day. Also, 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 moved to Germany in 1999 where he studied computer science and mathematics. While writing algebra proofs and preparing for software engineering at nights in the kitchen, at the same time he discovered passion for typography, UX 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 take place the day after SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Thursday, October 31.

Schedule for Thursday, October 31

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 EUR when signing up for the conference and a workshop!

549 .00Register for this workshop →Get a single workshop, or bundle with a conference.

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