Skip to main content

Front-End Meets UX: Designing & Creating Universal UI Components

Sara Soueidan
Your instructor
Sara Soueidan

Workshop includes:

  • Snacks and drinks
  • Tea and Coffee
  • Lunch
  • Paper and pen/pencil

Full-day workshop • October 25th
In this workshop, we will build a mini-library of reusable, universal components meeting the best UX practices, and that you can plug into almost any front-end project and use right away.

A ‘universal’ component is a universally usable component that contributes to and enhances the overall user experience of the interface. It is an accessible, flexible component that embraces best practices in terms of UX design, and code. Ideally, it has no dependencies and can be customized and plugged in to any (or many) environment(s).

You’ll learn how to:

You will learn about best UX considerations and practices when designing universal patterns and then apply those learnings to work our way through building components with accessibility baked right in. Components we’re going to cover in the workshop include (but are not limited to):

  • navigation systems (mobile navigation, pagination, breadcrumbs)
  • SVG icons
  • Semantic and accessible color swatches for design systems
  • form elements and styling
  • tooltips
  • content accordions
  • and, if time allows, maybe a few more.

We’ll look into UX design best practices, CSS styling, enhanced functionality and accessibility with JavaScript, adding delightful behavior with SVG, all in the context of a progressively enhanced interface and experience.

By the end of the workshop, you will have built a mini library of reusable, universal components meeting the best UX practices, and that you can plug into almost any front-end project and use right away.

Whom is it for

Designers and front-end developers with at least basic knowledge of CSS and SVG. Please bring your laptop to the workshop.

Time & Location

This full-day workshop will be hosted at the (link: locations text: Microsoft Technology Center) and will take place the day before SmashingConf. The workshop will be running from 9:30am to 5:00pm on Thursday, October 25th.

Microsoft is the Workshop Sponsor for SmashingConf2018, hosting workshops in the and Microsoft Times Square facility. Note: Your workshop fee covers event costs and speaker payment – Microsoft does not receive any proceeds from your ticket fee.

Schedule for Thursday, October 25th

9:00 – Doors open, Registration 9:30 – Introduction & Kick-off 11:00 – Coffee Break 13:00 – Lunch 14:00 – Afternoon Session 15:30 – Coffee Break 17:00 – The End

Save $100 when signing up for the conference and a workshop!