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 for accessibility, AI, navigation, forms, tables 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, AI and navigation to modals, overlays, sliders, feature comparisons, configurators, inclusive and accessible design — 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 .00 Register 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:

  • Accessibility and Inclusive Design with UX considerations, colorblindness, designing for older adults, children, people with autism, dyslexia, dyscalculia, WCAG 2.2 compliance and EU Accessibility Act,
  • Dashboards and data visualization, with complex layouts, data editing, inline filtering, infinite scroll UX, “load more” vs. pagination, choosing charts, layout,
  • Navigation patterns, with accordions, sticky menus, bottom-sheet navigation, mega-drop-downs, hamburger menus, breadcrumbs, carousels, filters and search,
  • Back, Cancel, Undo and Confirm UX, with frequent UX challenges, infinite scroll, form flows, search, real-time UIs,
  • Data tables, with deep-dive into layout, features, inline editing, filtering, tagging, sorting and search — on mobile and on desktop,
  • 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),
  • Error messages UX, with guidelines on how to design better messages, labels and UI copy,
  • Designing For AI, with AI presets, contextual suggestions, temperature knobs, invisible clustering, scoping and how to design better AI UIs,
  • Drag’n’drop UX, design states, interaction modes, accessibility considerations, elevation, “magnetic” effect,
  • 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,
  • Multi-Lingual UX, with language selector, flags, cross-cultural localization and internationalization,
  • 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.

The workshop is happening at Vestar, Lamorinierestraat 53, 2018 Antwerpen. Google Maps

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 .00 Register for this workshop → Get a single workshop, or bundle with a conference.

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