Smart Responsive Interface Design Patterns by Vitaly Friedman

Are you ready for a design challenge? In this brand new workshop, Vitaly Friedman, creative lead and front-end/UI consultant behind Smashing Magazine, will be taking a microscopic examination of common interface components and problems appearing in responsive user interfaces. In this workshop, we’ll be spending an entire day drawing and designing responsive interfaces, starting from accordions, to date/time pickers, sliders, feature comparisons, car configurators all the way to insurance calculators and trip planners.

Tickets

Additional Information

Are you ready for a design challenge? In this brand new workshop, Vitaly Friedman, creative lead and front-end/UI consultant behind Smashing Magazine, will be taking a microscopic examination of common interface components and problems appearing in responsive user interfaces. In this workshop, we’ll be spending an entire day drawing and designing responsive interfaces, starting from accordions, to date/time pickers, sliders, feature comparisons, car configurators all the way to insurance calculators and trip planners.

The workshop is intended for intermediate/advanced designers and developers who have an understanding of responsive design, interface design and mobile design. Most techniques are borrowed from mid-size and large-scale real-life projects, such as large eCommerce projects, online magazines and web applications. We won't cover the basics, instead, the workshop covers more advanced — and often obscure and innovative techniques.

When and where

The event will take place at:

Kulturpark Zurich
Pfingstweidstrasse 16
8005 Zurich

Schedule:

09:30 Doors open and coffee
10:00 Morning session
12:00 Lunch
13:15 Afternoon session
17:00 Workshop ends

WHAT WILL THE WORKSHOP COVER?

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

  • Insights into how people interact with mobile interfaces and what it means for thumb-optimized designs
  • Navigation, with accordions, mega-drop-downs, breadcrumbs, carousels and filters,
  • Builders and customizers, diving into details of a car configurator and a mobile plan builder,
  • Forms, with email verification, password input, country selector, sliders, error validation, incl. public transportation and a banking transaction UI,
  • 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,
  • Tables, with a feature comparison table, currency exchange calculator, pricing plans,
  • Timelines, with a historical timelines, soccer game signature and live leaderboard and standings,
  • Maps / Data Visualization, with a shopping mall map, election map, smart region input.
  • Onboarding and offboarding UX for higher conversion and retention rates,
  • Search, with autocomplete, filters, search results,
  • Audio/Video, with a video player UI and audio-based input,
  • Authentication patterns, CAPTCHA and 2-factor-authentication,
  • Privacy UX, incl. GDPR cookie consent prompts, push notifications, pop-ups, permissions UX and data management,
  • Footnotes and sidenotes in magazine articles,
  • Seat selection, for a concert/theatre/exhibition and a perfect airplane check-in,
  • Responsive art direction with practical techniques, strategies and examples for less generic solutions,
  • Responsive PDF for documents and restaurant menus,
  • Offline UX techniques and strategies,
  • Design anti-patterns to avoid to prevent running into maintenance issues and “slow UX decay”.

WHAT HARDWARE/SOFTWARE DO YOU NEED?

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. Laptop is useeful but not really necessary. 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! 😉