SlideShare a Scribd company logo
1 of 40
Download to read offline
Andreas Wissel
@andreas_wissel
User Experience Architect
Robust Design Systems With Storybook & Vue.js
Vue.js Frankfurt
Robust Design Systems With Storybook & Vue.js
• Design Systems Intro
• Tooling
• framework-agnostic
• using the example of Vue.js
• platform-independent
What we’ll talk about
2
• technical deep dive
• Design Systems deep dive
• … because we’re lacking time :)
• however: we can do live
coding, if you want to!
What we won’t talk about
Robust Design Systems With Storybook & Vue.js
User Experience Architect
Andreas Wissel
3
💡 Enterprise UX
❤ Design Systems
👨🎨 Cross-Platform Design
🏢 INNOQ
✍ andreaswissel.com
🐦 @andreas_wissel
Robust Design Systems With Storybook & Vue.js
User Experience Architect
Andreas Wissel
4
• Designer-Developer-Intersection
• Workflow Optimization
• Facilitating Redesigns
• Focus on Design Systems with Storybook
Robust Design Systems With Storybook & Vue.js
• Umbrella term
• “all aspects of the user’s experience when interacting with the
product, service, environment or facility” (ISO 9241-210)
• Most of the time: using well-known patterns to reduce
cognitive load and making applications more accessible.
What is UX?
5
Robust Design Systems With Storybook & Vue.js
Humans Love Patterns
6
Finding UX In Everday Life
Robust Design Systems With Storybook & Vue.js7
Humans Love Patterns
Finding UX In Everday Life
Robust Design Systems With Storybook & Vue.js8
Humans Love Patterns
Finding UX In Everday Life
Robust Design Systems With Storybook & Vue.js9
And We’re Lost Without Patterns…
Finding UX In Everday Life
Robust Design Systems With Storybook & Vue.js
• Features need to be visible
• Features need to be usable
• UX creates:
• Discoverability
• Usability
• Accessibility
User Experience For Developers
10
Access
denied
Robust Design Systems With Storybook & Vue.js
Close collaboration and common understanding leads to a good
user experience. UX is a team effort!
This talk aims to give the necessary tools for this close
collaboration.
Because User Experience Design is all about one thing:
Mission Statement
11
People.
Robust Design Systems With Storybook & Vue.js12
Collaboration ⚡ Departments
Consistency ⚡ Every day work
Scalability ⚡ Agile Processes
People
Robust Design Systems With Storybook & Vue.js
• Real Components
• ready-to-use
• encapsulated
• use case specific
• Pattern Library
• documentation of the UI elements
and/or patterns
What Is a Design System Comprised Of?
13
• Styleguide
• the brand’s static, visual
documentation
• “look & feel”
• Technical Documentation
• Best practices
Robust Design Systems With Storybook & Vue.js
So….
14
Bootstrap?
Robust Design Systems With Storybook & Vue.js
• web-only (not optimised for native-like experiences)
• no component system
• monolithic CSS
Bootstrap - a Design System?
15
Robust Design Systems With Storybook & Vue.js
“Everything used to be easier.”
16
Robust Design Systems With Storybook & Vue.js
relevant target platforms before:
Windows or Web
17
Robust Design Systems With Storybook & Vue.js
relevant target platforms now:
Windows, (Mac), Web/PWA, iOS, Android
18
Robust Design Systems With Storybook & Vue.js
But it doesn’t stop there!
19
Robust Design Systems With Storybook & Vue.js
Ever-growing target market
20
Robust Design Systems With Storybook & Vue.js
• enormous amount of different device types
• various methods of input
• many target platforms
• entirely new possibilities
• entirely new sources of error
Ever-growing target market
21
Robust Design Systems With Storybook & Vue.js
Modern Design Systems: Building Blocks
22
Branding Guidelines
Component library
Documentation
Animation, a11y, etc.
Contents
isolated
iterative
extensible
brown field compatible
Process
Many platforms
Various device types
Own design language
Encapsulation
Requirements
}+
Robust Design Systems With Storybook & Vue.js
• are under pressure from the B2C market
• need to be easy to use
• but still deliver a lot of features
• best be usable on all platforms
Modern Business Applications
23
“Let’s do it like Facebook”
Robust Design Systems With Storybook & Vue.js
• iterative development of UX and code
• fail early, fail often
• robust process
• isolated components
• close collaboration
• strong interaction
• interdisciplinary
The Challenge
24
Robust Design Systems With Storybook & Vue.js
• idea conveyed from industry
• contained, black-box
• well-defined in- and outputs
• easily testable
• reusable
• flexible
• can be supplied by third-parties
Component-based Software Development
25
Robust Design Systems With Storybook & Vue.js
Component-based Design
26
Robust Design Systems With Storybook & Vue.js
Component-based Design
27
Form Group Header
Input
Input
Button
Login Background
Robust Design Systems With Storybook & Vue.js
Figma: Component-based Design
28
Robust Design Systems With Storybook & Vue.js
Figma: Component-based Design
29
Demo Time
bit.ly/ng-ds-figma
Robust Design Systems With Storybook & Vue.js
• Component library
• Interface between design & code
• isolated development of components
• preparation for unit tests
• Documentation sits directly with components
Storybook
30
Robust Design Systems With Storybook & Vue.js
• framework-agnostic
• Open Source
• managed by the JS Foundation
• versatile plugin ecosystem
• snapshot testing is possible
Storybook
31
Robust Design Systems With Storybook & Vue.js
Storybook: Live Example
32
Robust Design Systems With Storybook & Vue.js
Storybook: Live Example
33
Demo Time
Robust Design Systems With Storybook & Vue.js
Login Komponente
34
Form Group Header
Input
Input
Button
Login Background
Robust Design Systems With Storybook & Vue.js
Building a button component with Storybook & Vue.js
Live Coding
35
Robust Design Systems With Storybook & Vue.js
Wrap-Up: Technologies
36
Universally applicable
Robust Design Systems With Storybook & Vue.js
• real components
• modular, isolated development
• easily maintainable
• fit for brown field use
• documentation
• more consistent User Experience
• Bonus: mock data usable for unit tests for free!
Wrap-Up: Design Systems with Storybook and Vue.js
37
Robust Design Systems With Storybook & Vue.js38
User Experience Architect
Andreas Wissel
🐦 @andreas_wissel
📨 andreas.wissel@innoq.com
✍ andreaswissel.com
Thank you!
Robust Design Systems With Storybook & Vue.js39
Figma Project:
bit.ly/ng-ds-figma
Repository:
bit.ly/vue-ds-ffm
Slides:
bit.ly/vue-ds-slides
Links
Robust Design Systems With Storybook & Vue.js40
Quellen
https://twitter.com/DougCollinsUX/status/1021789284846788609
https://www.htc.com/us/newsroom/2019-03-26/
https://www.heise.de/select/ix/2017/11/1509663159694094
https://www.samsung.com/sg/refrigerators/family-hub-rf56n9740sg/
https://www.apple.com/shop/buy-watch/apple-watch-series-3/38mm-gps-silver-aluminum-white-sport-band
https://support.apple.com/kb/sp770?locale=de_DE
https://www.apple.com/de/shop/buy-ipad/ipad-pro
https://www.apple.com/de/shop/buy-mac/macbook-pro
https://www.apple.com/de/shop/buy-mac/imac
https://www.microsoft.com/de-de/p/surface-studio-2/8sbjxm0m58t4
https://twitter.com/rsg/status/1148421102009344000
https://twitter.com/Talk_To_The_Hat/status/1166460235982233600
https://www.reddit.com/r/CrappyDesign/comments/c55puw/piss_poor_location/
https://twitter.com/DougCollinsUX/status/1122881214040420352

More Related Content

What's hot

What's hot (14)

Java in azure dev ops
Java in azure dev opsJava in azure dev ops
Java in azure dev ops
 
PHP Unconference Continuous Integration
PHP Unconference Continuous IntegrationPHP Unconference Continuous Integration
PHP Unconference Continuous Integration
 
Global Azure Bootcamp - Vancouver (2018) - Testing with Containers
Global Azure Bootcamp - Vancouver (2018) - Testing with ContainersGlobal Azure Bootcamp - Vancouver (2018) - Testing with Containers
Global Azure Bootcamp - Vancouver (2018) - Testing with Containers
 
Docs as Part of the Product - Open Source Summit North America 2018
Docs as Part of the Product - Open Source Summit North America 2018Docs as Part of the Product - Open Source Summit North America 2018
Docs as Part of the Product - Open Source Summit North America 2018
 
PuppetConf 2016: How Not to Freak Out When You Start Writing Puppet Modules f...
PuppetConf 2016: How Not to Freak Out When You Start Writing Puppet Modules f...PuppetConf 2016: How Not to Freak Out When You Start Writing Puppet Modules f...
PuppetConf 2016: How Not to Freak Out When You Start Writing Puppet Modules f...
 
Malmberg meetup June 2018 - Building microservices with Vert.x
Malmberg meetup June 2018 - Building microservices with Vert.xMalmberg meetup June 2018 - Building microservices with Vert.x
Malmberg meetup June 2018 - Building microservices with Vert.x
 
Vert.x NL meetup October 2017 - Building microservices with Vert.x
Vert.x NL meetup October 2017 - Building microservices with Vert.xVert.x NL meetup October 2017 - Building microservices with Vert.x
Vert.x NL meetup October 2017 - Building microservices with Vert.x
 
Dublin JUG February 2018 - Building microservices with Vert.x
Dublin JUG February 2018 - Building microservices with Vert.xDublin JUG February 2018 - Building microservices with Vert.x
Dublin JUG February 2018 - Building microservices with Vert.x
 
From Junior Dev to Senior Dev
From Junior Dev to Senior DevFrom Junior Dev to Senior Dev
From Junior Dev to Senior Dev
 
PuppetConf 2016: Easily Manage Software on Windows with Chocolatey – Rob Reyn...
PuppetConf 2016: Easily Manage Software on Windows with Chocolatey – Rob Reyn...PuppetConf 2016: Easily Manage Software on Windows with Chocolatey – Rob Reyn...
PuppetConf 2016: Easily Manage Software on Windows with Chocolatey – Rob Reyn...
 
FestiveTechCalendar2021 - Have Yourself An​ Azure Container Registry
FestiveTechCalendar2021 - Have Yourself An​ Azure Container RegistryFestiveTechCalendar2021 - Have Yourself An​ Azure Container Registry
FestiveTechCalendar2021 - Have Yourself An​ Azure Container Registry
 
Software architecture : From project management to deployment
Software architecture : From project management to deploymentSoftware architecture : From project management to deployment
Software architecture : From project management to deployment
 
Continuous Integration (& Mr Jenkins)
Continuous Integration (& Mr Jenkins)Continuous Integration (& Mr Jenkins)
Continuous Integration (& Mr Jenkins)
 
Respawn 2015: Chimera Entertainment - A decade of game development
Respawn 2015: Chimera Entertainment - A decade of game developmentRespawn 2015: Chimera Entertainment - A decade of game development
Respawn 2015: Chimera Entertainment - A decade of game development
 

Similar to Robust Design Systems With Storybook & Vue.js

Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
MvkZ
 
Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
MvkZ
 
Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
MvkZ
 

Similar to Robust Design Systems With Storybook & Vue.js (20)

Design systems-2021-fall
Design systems-2021-fallDesign systems-2021-fall
Design systems-2021-fall
 
UI Dev in Big data world using open source
UI Dev in Big data world using open sourceUI Dev in Big data world using open source
UI Dev in Big data world using open source
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the Browser
 
Innovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkInnovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and Framework
 
Dev trends 18_q1
Dev trends 18_q1Dev trends 18_q1
Dev trends 18_q1
 
DevOpsCon 2015 - DevOps in Mobile Games
DevOpsCon 2015 - DevOps in Mobile GamesDevOpsCon 2015 - DevOps in Mobile Games
DevOpsCon 2015 - DevOps in Mobile Games
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Microsoft Tech Series 2019 - Azure DevOps
Microsoft Tech Series 2019 - Azure DevOpsMicrosoft Tech Series 2019 - Azure DevOps
Microsoft Tech Series 2019 - Azure DevOps
 
Development Processes and Tooling
Development Processes and ToolingDevelopment Processes and Tooling
Development Processes and Tooling
 
Cloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool IntegrationCloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool Integration
 
ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)
 
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
 
Automation: The Good, The Bad and The Ugly with DevOpsGuys - AppD Summit Europe
Automation: The Good, The Bad and The Ugly with DevOpsGuys - AppD Summit EuropeAutomation: The Good, The Bad and The Ugly with DevOpsGuys - AppD Summit Europe
Automation: The Good, The Bad and The Ugly with DevOpsGuys - AppD Summit Europe
 
DevOpsGuys - DevOps Automation - The Good, The Bad and The Ugly
DevOpsGuys - DevOps Automation - The Good, The Bad and The UglyDevOpsGuys - DevOps Automation - The Good, The Bad and The Ugly
DevOpsGuys - DevOps Automation - The Good, The Bad and The Ugly
 
Mastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net TricksMastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net Tricks
 
Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
 
Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
 
Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
 
Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
 
Big datatraining.in devops-part1
Big datatraining.in devops-part1Big datatraining.in devops-part1
Big datatraining.in devops-part1
 

More from Andreas Wissel

design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
Andreas Wissel
 
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & AngularINNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
Andreas Wissel
 

More from Andreas Wissel (7)

design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & AngularINNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
 
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und AngularVon Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
 
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
 

Recently uploaded

NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
ykucop
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
pillahdonald
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
Amil baba
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 

Recently uploaded (20)

CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna College
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
Avoid these common UI/UX design mistakes
 Avoid these common UI/UX design mistakes Avoid these common UI/UX design mistakes
Avoid these common UI/UX design mistakes
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 

Robust Design Systems With Storybook & Vue.js

  • 1. Andreas Wissel @andreas_wissel User Experience Architect Robust Design Systems With Storybook & Vue.js Vue.js Frankfurt
  • 2. Robust Design Systems With Storybook & Vue.js • Design Systems Intro • Tooling • framework-agnostic • using the example of Vue.js • platform-independent What we’ll talk about 2 • technical deep dive • Design Systems deep dive • … because we’re lacking time :) • however: we can do live coding, if you want to! What we won’t talk about
  • 3. Robust Design Systems With Storybook & Vue.js User Experience Architect Andreas Wissel 3 💡 Enterprise UX ❤ Design Systems 👨🎨 Cross-Platform Design 🏢 INNOQ ✍ andreaswissel.com 🐦 @andreas_wissel
  • 4. Robust Design Systems With Storybook & Vue.js User Experience Architect Andreas Wissel 4 • Designer-Developer-Intersection • Workflow Optimization • Facilitating Redesigns • Focus on Design Systems with Storybook
  • 5. Robust Design Systems With Storybook & Vue.js • Umbrella term • “all aspects of the user’s experience when interacting with the product, service, environment or facility” (ISO 9241-210) • Most of the time: using well-known patterns to reduce cognitive load and making applications more accessible. What is UX? 5
  • 6. Robust Design Systems With Storybook & Vue.js Humans Love Patterns 6 Finding UX In Everday Life
  • 7. Robust Design Systems With Storybook & Vue.js7 Humans Love Patterns Finding UX In Everday Life
  • 8. Robust Design Systems With Storybook & Vue.js8 Humans Love Patterns Finding UX In Everday Life
  • 9. Robust Design Systems With Storybook & Vue.js9 And We’re Lost Without Patterns… Finding UX In Everday Life
  • 10. Robust Design Systems With Storybook & Vue.js • Features need to be visible • Features need to be usable • UX creates: • Discoverability • Usability • Accessibility User Experience For Developers 10 Access denied
  • 11. Robust Design Systems With Storybook & Vue.js Close collaboration and common understanding leads to a good user experience. UX is a team effort! This talk aims to give the necessary tools for this close collaboration. Because User Experience Design is all about one thing: Mission Statement 11 People.
  • 12. Robust Design Systems With Storybook & Vue.js12 Collaboration ⚡ Departments Consistency ⚡ Every day work Scalability ⚡ Agile Processes People
  • 13. Robust Design Systems With Storybook & Vue.js • Real Components • ready-to-use • encapsulated • use case specific • Pattern Library • documentation of the UI elements and/or patterns What Is a Design System Comprised Of? 13 • Styleguide • the brand’s static, visual documentation • “look & feel” • Technical Documentation • Best practices
  • 14. Robust Design Systems With Storybook & Vue.js So…. 14 Bootstrap?
  • 15. Robust Design Systems With Storybook & Vue.js • web-only (not optimised for native-like experiences) • no component system • monolithic CSS Bootstrap - a Design System? 15
  • 16. Robust Design Systems With Storybook & Vue.js “Everything used to be easier.” 16
  • 17. Robust Design Systems With Storybook & Vue.js relevant target platforms before: Windows or Web 17
  • 18. Robust Design Systems With Storybook & Vue.js relevant target platforms now: Windows, (Mac), Web/PWA, iOS, Android 18
  • 19. Robust Design Systems With Storybook & Vue.js But it doesn’t stop there! 19
  • 20. Robust Design Systems With Storybook & Vue.js Ever-growing target market 20
  • 21. Robust Design Systems With Storybook & Vue.js • enormous amount of different device types • various methods of input • many target platforms • entirely new possibilities • entirely new sources of error Ever-growing target market 21
  • 22. Robust Design Systems With Storybook & Vue.js Modern Design Systems: Building Blocks 22 Branding Guidelines Component library Documentation Animation, a11y, etc. Contents isolated iterative extensible brown field compatible Process Many platforms Various device types Own design language Encapsulation Requirements }+
  • 23. Robust Design Systems With Storybook & Vue.js • are under pressure from the B2C market • need to be easy to use • but still deliver a lot of features • best be usable on all platforms Modern Business Applications 23 “Let’s do it like Facebook”
  • 24. Robust Design Systems With Storybook & Vue.js • iterative development of UX and code • fail early, fail often • robust process • isolated components • close collaboration • strong interaction • interdisciplinary The Challenge 24
  • 25. Robust Design Systems With Storybook & Vue.js • idea conveyed from industry • contained, black-box • well-defined in- and outputs • easily testable • reusable • flexible • can be supplied by third-parties Component-based Software Development 25
  • 26. Robust Design Systems With Storybook & Vue.js Component-based Design 26
  • 27. Robust Design Systems With Storybook & Vue.js Component-based Design 27 Form Group Header Input Input Button Login Background
  • 28. Robust Design Systems With Storybook & Vue.js Figma: Component-based Design 28
  • 29. Robust Design Systems With Storybook & Vue.js Figma: Component-based Design 29 Demo Time bit.ly/ng-ds-figma
  • 30. Robust Design Systems With Storybook & Vue.js • Component library • Interface between design & code • isolated development of components • preparation for unit tests • Documentation sits directly with components Storybook 30
  • 31. Robust Design Systems With Storybook & Vue.js • framework-agnostic • Open Source • managed by the JS Foundation • versatile plugin ecosystem • snapshot testing is possible Storybook 31
  • 32. Robust Design Systems With Storybook & Vue.js Storybook: Live Example 32
  • 33. Robust Design Systems With Storybook & Vue.js Storybook: Live Example 33 Demo Time
  • 34. Robust Design Systems With Storybook & Vue.js Login Komponente 34 Form Group Header Input Input Button Login Background
  • 35. Robust Design Systems With Storybook & Vue.js Building a button component with Storybook & Vue.js Live Coding 35
  • 36. Robust Design Systems With Storybook & Vue.js Wrap-Up: Technologies 36 Universally applicable
  • 37. Robust Design Systems With Storybook & Vue.js • real components • modular, isolated development • easily maintainable • fit for brown field use • documentation • more consistent User Experience • Bonus: mock data usable for unit tests for free! Wrap-Up: Design Systems with Storybook and Vue.js 37
  • 38. Robust Design Systems With Storybook & Vue.js38 User Experience Architect Andreas Wissel 🐦 @andreas_wissel 📨 andreas.wissel@innoq.com ✍ andreaswissel.com Thank you!
  • 39. Robust Design Systems With Storybook & Vue.js39 Figma Project: bit.ly/ng-ds-figma Repository: bit.ly/vue-ds-ffm Slides: bit.ly/vue-ds-slides Links
  • 40. Robust Design Systems With Storybook & Vue.js40 Quellen https://twitter.com/DougCollinsUX/status/1021789284846788609 https://www.htc.com/us/newsroom/2019-03-26/ https://www.heise.de/select/ix/2017/11/1509663159694094 https://www.samsung.com/sg/refrigerators/family-hub-rf56n9740sg/ https://www.apple.com/shop/buy-watch/apple-watch-series-3/38mm-gps-silver-aluminum-white-sport-band https://support.apple.com/kb/sp770?locale=de_DE https://www.apple.com/de/shop/buy-ipad/ipad-pro https://www.apple.com/de/shop/buy-mac/macbook-pro https://www.apple.com/de/shop/buy-mac/imac https://www.microsoft.com/de-de/p/surface-studio-2/8sbjxm0m58t4 https://twitter.com/rsg/status/1148421102009344000 https://twitter.com/Talk_To_The_Hat/status/1166460235982233600 https://www.reddit.com/r/CrappyDesign/comments/c55puw/piss_poor_location/ https://twitter.com/DougCollinsUX/status/1122881214040420352