Skip to main content

Smart Responsive UX Design Patterns

Vitaly Friedman

Full-day workshop • Monday, October 19th
Are you ready for a design challenge? In this 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.

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 and how it works.

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.

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,
  • Real-time experience with betting UI for soccer, poker and live video streaming,
  • 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. Laptop is preferred but not absolutely 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! ;-)

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 & Location

This full-day workshop will take place the day before SmashingConf at a location to be decided. The workshop will be running from 9:30 AM to 5:30 PM on Monday, October 19th.

Schedule for Monday, October 19th

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!

Register for this workshop →

On the web
smashingmagazine.com
On Twitter
@smashingmag
Workshop includes:
  • Snacks and drinks
  • Tea and Coffee
  • Lunch
  • Paper and pen/pencil