Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Systems Engineering - Scaling User Inter...

Design Systems Engineering - Scaling User Interfaces @trivago

In 2015 we started with an iterative rebuild of our user interface at trivago. With this we introduced a Design System and started to rethink the way we build our user interfaces in code and design. I'll present our experiences, approaches and learnings with integrating and rolling out the System.

Christoph Reinartz

May 23, 2017
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. CSS.inc
 We don’t always write CSS but when we do

    we make sure to save it in dot inc files
  2. Components Process UI Layer Styleguide Design 
 Language Documentation Assets

    UI Kit Design 
 Principles Inspired by: https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5
  3. Definition
 CSS Framework This is the front-end code and production-ready

    design assets. The CSS framework is referenced and consumed by the product(s). It is a modular, scalable, and extensible tool that fosters rapid development and typically confirms to a CI/ CD development environment. https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
  4. This is the documentation resource for the design system. Since

    the design system is purely code and assets, the style guide is a site to demonstrate the UI patterns with references to aid in implementation and usage. Definition
 Styleguide https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
  5. Definition
 Pattern Library This is a library of standardized UI

    patterns. They are the final designs, and can be delivered in the form of a repository of design files, or a symbol library/UI kit. It is the resource for designers to build from. https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
  6. Definition
 Design System The entirety of the standardized UI patterns,

    framework, assets, and documentation, as well as the processes and people involved. It is the ecosystem that drives and supports the unified evolution of the product(s). https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1
  7. 
 “We built a Design System for you w/o knowing

    your needs. You should totally use it”
  8. New CSS Core Old CSS Core normalize.css reset.css border-box content-box

    mobile first (min-width) desktop first (max-width) media queries inline in separate files embed SVG icon image sprites ITCSS layering [something] BEM, OOCSS [something] Post processing (MQPacker etc.) nothing (Assetic)
  9. description details infobig hotelconnect smiley heart towel star pictures wifi

    spa beach breakfast pool pet golf tv family eco parking bed_single bed_double bed_small couple universal home menu share edit checkout checkin general rates faq_circle faq info_circle info arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle filter dashboard statistics hotel2 hotel travel2 travel booking hotelchain upload delete tick_circle exclamation_circle contact profile info product history giveback lock calendar search publisher career comment download map smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent level sort department poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports filterreset join thin share2 movie call piechart diagram music multimedia wifi spa beach breakfast pool pet golf tv family eco parking bed_single bed_double bed_small couple universal home menu share edit checkout checkin general rates description details infobig hotelconnect smiley heart towel star pictures icn_profile icn_info icn_product icn_history icn_giveback icn_lock icn_calendar icn_search icn_publisher icn_career icn_comment icn_download icn_map icn_dashboard icn_statistics icn_hotel2 icn_hotel icn_travel2 icn_travel icn_booking icn_hotelchain icn_upload icn_delete icn_tick_circle exclamation_circle contact image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle icn_filter arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus faq_circle faq info_circle info smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent level sort department poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports join thin filterreset share2 movie call piechart diagram music multimedia
  10. trv-blue-light #3f9fc1 trv-red-light #d67763 trv-green-light #8cba3f trv-green-lighter #b2d17f trv-green-dark #4c7b00

    trv-juri-light #697379 trv-juri-lighter #9ba2a6 trv-juri-lightest #ebeced trv-blue-dark #005f81 trv-blue #007fad trv-orange #f48f00 trv-red #c94a30 trv-orange-dark #b76b00 trv-orange-light #f6ab3f trv-blue-lightest #e5f2f6 trv-red-lightest #f9ecea trv-orange-lightest #fdf3e5 trv-red-dark #963724 trv-green #66a400 trv-juri #37454d trv-juri-dark #293339 16 12 18 16 12 12 18 12 18 16 * trv-juri-very-light #cdd0d2 trv-red-very-light #f1d1cb trv-green-very-light #d8e8bf trv-orange-very-light #fce3bf trv-blue-very-light #bfdfea trv-red-lighter #e4a49b trv-orange-lighter #f9c780 trv-blue-lighter #7fbfd6 trv-green-lightest #eff5e5
  11. Step 2 Iterate new versions of UI components A new

    Search Result component based on the new base
  12. 21 admin-library patternlab-loader admin-lib trivago-core_patterns daisy-and-trivi fork visualisation admin-tools application

    composer package composer package composer package symfony application scss _patterns _patterns
  13. Thank you
 all this wouldn’t have been possible without Jean,

    Ann-Kristin, Daniela, Kay, Ian, Ailin, Lukas, Jan, Radovan, Tom, Janine, Frank, Gregory, Jessica, Daniel, Ulf, Dejan, Mirja, Christina, Karan, Celine, Andrej, Lisa, Victor, Timon, William, Andrea, David, Annett, Thomas, Tim, Alexandru, Irfan and many many more