1 / 25

Title of this presentation

Join Erik Kroes, Photographer, Visual Artist, and Accessibility Specialist, as he discusses the importance of design systems and how web components can create scalable and accessible foundations. Discover the benefits and challenges of implementing web components and get insights on creating reusable and extendable UI components. Don't miss this opportunity to enhance your design and development workflow. Presented in Driebergen on May 16, 2019.

dcarman
Download Presentation

Title of this presentation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Title of this presentation • Subtitle of this presentation • Driebergen • 16 May 2019 Erik Kroes

  2. Hi, I’m Erik Kroes • Photographer • Visual Artist • Creative Coder • Accessibility Specialist • Front-end developer • Fabric store owner

  3. The story today • The part where I am really enthusiastic and hope you are too • The part where I tell you it's not that easy • The part where I make you happy again

  4. The part where I am really enthusiastic and hope you are too

  5. What is a Design System? “[The] ingredients [that] come together to tell the story of how your organization designs and builds products” - Brad Frost

  6. What is in a design system? • In general it will have some of these elements • Corporate identity (colors, fonts, images, etc) • Design principles • Guidelines (Development and UX) • Style guide • Design library • Coded components • Component guidelines • Way of working

  7. I 🦁 Design Systems • Separation of concerns • Quality • Speed • Unified User Experience • Efficiency, Create once use many

  8. A scalableandaccessible foundation with Web Components is pricelessbut youcan get themfor free.

  9. Thankyou

  10. What are Web Components • Web Components are a set of standards • Custom Elements: A way to create your own HTLM elements • ES Modules: Self-contained modules of JavaScript code that can be reused and extended • HTML Templates: Reusable fragments of DOM • Shadow DOM: Encapsulation of DOM And when their powers combine…

  11. What are Web Components? “Reusable extendable encapsulated self-contained components for the web.”

  12. I 🦁 Web Components + Design Systems • Reusable: Create once, use anywhere • Extendable: Create variations • Encapsulated and self-contained: Consistent, and controlable • Support • Flexible

  13. The part where I tell you it's not that easy

  14. What isn't shared is a waste “Write guidelines, not books”

  15. One point of truth • One point of failure • One point of blame

  16. Quality and contributions • New component Old component

  17. Freedom “As much as need but as little as you can”

  18. It’s hard “Making accessible UI components is really really hard”

  19. Making accessible UI components is really really hard • Know this by heart • Focusable • Visible states (focus, active, hover) • Functional states • Keyboard interaction • Semantics, role • Accessible name • Communicate state and properties • Relationships • Global standards/conventions • Circumvent browser bugs and variations

  20. Everybody should use Web Components “Few people should build them”

  21. The part where I make you happy again

  22. Web Components + Accessibility = 🦁 • Lion is a set of open source web components by ING • Performant • Flexible • Accessible • Completely unstyled

  23. A scalable and accessible foundation with Web Components is priceless but you can get it for free.

  24. Thank you @erikkroes

More Related