Smart Interface Design Patterns, 2020 Edition

Дизайн

Тезисы

Are you ready for a design challenge? In this series of online workshops, Vitaly Friedman, creative lead and front-end/UI designer 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 text file to adjust for your needs.
- Access to the evergreen deck, updated regularly.
- Live, interactive session.
- Hands-on exercises and reviews.
- Workshop recording.
- Dedicated Q&A time for all your questions.

In this workshop, we’ll explore:
- How people use mobile interfaces and how we can optimize for thumbs.
- Navigation, with accordions, mega-drop-downs, hamburger icons, breadcrumbs, carousels, filters and search.
- Complex tables, with a feature comparison table, currency exchange calculator, pricing plans.
- Web forms, with email verification, password input, country selector, sliders, error validation.
- Sliders, with insurance calculators, timelines, historical family tree, soccer game signature and live leaderboard and standings.
- Maps and Data Visualization, with a shopping mall map, election map, smart region input.
- 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. You’ll need a lot of sleep reserves since it’s going to be a packed session. Bring a lot of attention to detail and non-standard thinking to this one! ;-)

- 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”.