DESIGN SYSTEMS -...
33
DESIGN SYSTEMS Creating a consistent UI for Magento store
Transcript of DESIGN SYSTEMS -...
DESIGN SYSTEMSCreating a consistent UI for Magento store
BARTEK IGIELSKI Lead Front-end Developer @ SNOW.DOG
Core team member @ Vue Storefront Founder of Frontools / SASS Blank / Alpaca
twitter @igloczek facebook /iglodottech
WHAT ISA DESIGN SYSTEM?
#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.
#MM18RO@Igloczek
#MM18RO@Igloczek
Pattern Library – A subclass in the design system, this is the set of design patterns for use across a company.
#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.
#MM18RO@Igloczek
#MM18RO@Igloczek
#MM18RO@Igloczek
ARE THERE OFFICIAL STANDARDS FOR DESIGN SYSTEMS?
No, because each company have different problems and goals
#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/
#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/
#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/
#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
BENEFITS
#MM18RO@Igloczek
• Simpler environment
• Working without backend
• Parallel development
• Components library
• Live documentation
• Focus on one thing at a time
• Visual testing
• Faster feedback
RISE OF DESIGN
SYSTEMS
#MM18RO@Igloczek
The concept of design systems has been around
for quite some time, for example 1975 NASA
Graphics Standards Manual.
#MM18RO@Igloczek
Recently some companies given attention to
design systems as they realized their designs
weren’t scaling as quickly as their businesses.
SNOWDOG’S DESIGN
SYSTEMS STORY
#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
#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
#MM18RO@Igloczek
#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
ALPACA FUTURE
#Reacticon@igloczek
Future is bright!
#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)
#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
FINAL THOUGHTS
#MM18RO@Igloczek
Design systems should be built for change They are living, breathing resources that naturally evolve as the
products/services mature.
#MM18RO@Igloczek
The more integrated the system
will be with the designers and
developers workflows, the more
effective it will be.
#MM18RO@Igloczek
And all of this is only a beginning!
