DESIGN SYSTEMS -...
Transcript of DESIGN SYSTEMS -...
![Page 1: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/1.jpg)
DESIGN SYSTEMSCreating a consistent UI for Magento store
![Page 2: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/2.jpg)
BARTEK IGIELSKI Lead Front-end Developer @ SNOW.DOG
Core team member @ Vue Storefront Founder of Frontools / SASS Blank / Alpaca
twitter @igloczek facebook /iglodottech
![Page 3: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/3.jpg)
WHAT ISA DESIGN SYSTEM?
![Page 4: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/4.jpg)
#MM18RO@Igloczek
Design System – the complete set of design standards, documentation, and principles
along with the toolkit (UI patterns and code components) to achieve those standards.
![Page 5: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/5.jpg)
#MM18RO@Igloczek
![Page 6: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/6.jpg)
#MM18RO@Igloczek
Pattern Library – A subclass in the design system, this is the set of design patterns for use across a company.
![Page 7: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/7.jpg)
#MM18RO@Igloczek
Style guide – Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.
![Page 8: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/8.jpg)
#MM18RO@Igloczek
![Page 9: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/9.jpg)
#MM18RO@Igloczek
![Page 10: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/10.jpg)
#MM18RO@Igloczek
ARE THERE OFFICIAL STANDARDS FOR DESIGN SYSTEMS?
No, because each company have different problems and goals
![Page 11: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/11.jpg)
#MM18RO@Igloczek
Salesforce’s Lightning Design System contains design patterns, components, and guidelines, but doesn’t contain JavaScript code, allowing
teams to use any front-end development framework of their choice.
https://www.lightningdesignsystem.com/
![Page 12: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/12.jpg)
#MM18RO@Igloczek
Google’s Material Design includes interactive motion guidance as it
emphasizes on natural motion and smooth animation for a “delightful” experience.
https://material.io/
![Page 13: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/13.jpg)
#MM18RO@Igloczek
IBM’s Carbon Design System is fully featured, explaining rules and patterns for designer and developer, but also giving
them a sandbox to play with components.
http://carbondesignsystem.com/
![Page 14: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/14.jpg)
#MM18RO@Igloczek
GOV.UK Elements - http://govuk-elements.herokuapp.com/
Shopify Polaris - https://polaris.shopify.com/
Atlassian - https://atlassian.design/
And many more… https://www.designerlynx.co/design-systems
![Page 15: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/15.jpg)
BENEFITS
![Page 16: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/16.jpg)
#MM18RO@Igloczek
• Simpler environment
• Working without backend
• Parallel development
• Components library
• Live documentation
• Focus on one thing at a time
• Visual testing
• Faster feedback
![Page 17: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/17.jpg)
RISE OF DESIGN
SYSTEMS
![Page 18: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/18.jpg)
#MM18RO@Igloczek
The concept of design systems has been around
for quite some time, for example 1975 NASA
Graphics Standards Manual.
![Page 19: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/19.jpg)
#MM18RO@Igloczek
Recently some companies given attention to
design systems as they realized their designs
weren’t scaling as quickly as their businesses.
![Page 20: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/20.jpg)
SNOWDOG’S DESIGN
SYSTEMS STORY
![Page 21: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/21.jpg)
#MM18RO@Igloczek
JANUARY 2017
An idea of Component Driven Development
Rough structure and naming rules
Fractal.js as a “framework”
SNOW.DOG page redesign project
One Junior Front-end Developer and me
![Page 22: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/22.jpg)
#MM18RO@Igloczek
APRIL 2017 - OCTOBER 2018
3 214 commits
373 674 added LoC
292 001 removed LoC
34 releases
~5 stores on production
9 front-end developers
2 designers
2 repositories
![Page 23: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/23.jpg)
#MM18RO@Igloczek
![Page 24: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/24.jpg)
#MM18RO@Igloczek
Design system based Magento 2 theme v1.0 released today!
https://github.com/SnowdogApps/magento2-alpaca-theme
https://github.com/SnowdogApps/magento2-alpaca-components
![Page 25: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/25.jpg)
ALPACA FUTURE
![Page 26: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/26.jpg)
#Reacticon@igloczek
Future is bright!
![Page 27: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/27.jpg)
#Reacticon@igloczek
Move from Fractal.js to Storybook Ongoing - https://github.com/SnowdogApps/alpaca-storybook
Vue Storefront theme based on Alpaca Starting soon!
Open source design files Soon! (code sharing is way easier, because there are good tools for it)
![Page 28: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/28.jpg)
#Reacticon@igloczek
Better checkout Ongoing - https://github.com/SnowdogApps/magento2-vue-checkout
Better product gallery Fotorama is PITA, but it’s just this morning idea :D
Better menu Done! - https://github.com/SnowdogApps/magento2-menu
Magento 2 B2B modules support Ongoing internally
![Page 29: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/29.jpg)
FINAL THOUGHTS
![Page 30: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/30.jpg)
#MM18RO@Igloczek
Design systems should be built for change They are living, breathing resources that naturally evolve as the
products/services mature.
![Page 31: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/31.jpg)
#MM18RO@Igloczek
The more integrated the system
will be with the designers and
developers workflows, the more
effective it will be.
![Page 32: DESIGN SYSTEMS - ro.meet-magento.comro.meet-magento.com/wp-content/uploads/2018/10/Bartek-Igielski-D… · Lead Front-end Developer @ SNOW.DOG Core team member @ Vue Storefront ...](https://reader036.fdocuments.net/reader036/viewer/2022071007/5fc489df89b3774ba338b894/html5/thumbnails/32.jpg)
#MM18RO@Igloczek
And all of this is only a beginning!