Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
theprotein.io
Anton
Vinogradov
Senior UI software engineer at Yandex
CEO at The Protein Corp.
BEM contributor
Open Source evangelist

@a...
Design process
in companies
14.04.2017
How are you make design?
theprotein.io
Idea Design Development Hoooray!
Idea Design DevelopmentPrototyping
x Screens
x Fails
Test
x Fails
Idea Design DevelopmentPrototyping
x Screens
x Fails
Test
x Fails
UX Test
x Failsx Fails
x Features
Idea Design DevelopmentPrototyping TestUX Test
Idea Design DevelopmentPrototyping TestUX Test
Idea Design Devel...
Features x Screens x Fails = x Months
DevelopmentPrototypingDesign
DevelopmentDesign
Your design really works?
theprotein.io
The design system will save us…
theprotein.io
Design system
Universal Windows Platform
Google Material
IBM Design Language
Lightning by Saleforce
Mailchimp patterns
…
b...
Design system Concept
Design tools
Prototyping tools
Dev tools Web
Android
iOS
Web
Android
iOS
Pros
One concept and common terms
The same language in the team
Ready to use components for design and development
Common ...
Design system Concept
Design tools
Prototyping tools
Dev tools Web
Android
iOS
Web
Android
iOS
1
2
3
4
5
6
7
Cons
Too much extra work for sync
Protein delivers innovative
tools for UI design & development
theprotein.io
Keep design
and code
in sync
214 views
Button
Test Project
Text
Illustration
Input
Search for com
...register__button ...e...
Cons
Base components change very rarely
Uncomfortable working with the composite components
Doesn’t update components in t...
The better way
to design
with code
theprotein.io
Cons
SVG based format
Too difficult API for prototypes
Absolute elements
It’s not production ready code
Pros
Two-way design export
Component’s code generation
VCS integration
Simple things are made easy
Some code it’s no bad t...
Imagine Design IDE
theprotein.io
Screens. Import. Export.
Create.
Instance editor for style…
Handlers…
Handlers…
JSX like…
Data connection…
Components?
Import. Convert. Explore.
Something else?
theprotein.io
Sure
Design/Dev difference
Windows & AI support
External libraries connection
Configurable assets export
July 2017. Beta.
Anton
Vinogradov
awinogradov@theprotein.io
ask@theprotein.io
@awinogradov
@protein_io
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс
Prochain SlideShare
Chargement dans…5
×

"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс

Выступление на конференции DUMP-2017

  • Identifiez-vous pour voir les commentaires

"Дизайн-процессы в компаниях, или Protein нам в помощь" Виноградов Антон, Яндекс

  1. 1. theprotein.io
  2. 2. Anton Vinogradov Senior UI software engineer at Yandex CEO at The Protein Corp. BEM contributor Open Source evangelist
 @awinogradov
  3. 3. Design process in companies 14.04.2017
  4. 4. How are you make design? theprotein.io
  5. 5. Idea Design Development Hoooray!
  6. 6. Idea Design DevelopmentPrototyping x Screens x Fails Test x Fails
  7. 7. Idea Design DevelopmentPrototyping x Screens x Fails Test x Fails UX Test x Failsx Fails
  8. 8. x Features Idea Design DevelopmentPrototyping TestUX Test Idea Design DevelopmentPrototyping TestUX Test Idea Design DevelopmentPrototyping TestUX Test Idea Design DevelopmentPrototyping TestUX Test Idea Design DevelopmentPrototyping TestUX Test Idea Design DevelopmentPrototyping TestUX Test
  9. 9. Features x Screens x Fails = x Months
  10. 10. DevelopmentPrototypingDesign
  11. 11. DevelopmentDesign
  12. 12. Your design really works? theprotein.io
  13. 13. The design system will save us… theprotein.io
  14. 14. Design system Universal Windows Platform Google Material IBM Design Language Lightning by Saleforce Mailchimp patterns … bit.ly/ds-arch - Design systems arch design-systems.slack.com 2k+
  15. 15. Design system Concept Design tools Prototyping tools Dev tools Web Android iOS Web Android iOS
  16. 16. Pros One concept and common terms The same language in the team Ready to use components for design and development Common assets Simple things are made easy Сomplex things are made difficult Possibility to minimise design variations
  17. 17. Design system Concept Design tools Prototyping tools Dev tools Web Android iOS Web Android iOS 1 2 3 4 5 6 7
  18. 18. Cons Too much extra work for sync
  19. 19. Protein delivers innovative tools for UI design & development theprotein.io
  20. 20. Keep design and code in sync 214 views Button Test Project Text Illustration Input Search for com ...register__button ...egister__button ...register__button ...register__form ...register__input …register__input ...register__form ...register__input …register__input theprotein.io
  21. 21. Cons Base components change very rarely Uncomfortable working with the composite components Doesn’t update components in the existing design Too much design review in PR’s for developers Alternatives with the same ideas
  22. 22. The better way to design with code theprotein.io
  23. 23. Cons SVG based format Too difficult API for prototypes Absolute elements It’s not production ready code
  24. 24. Pros Two-way design export Component’s code generation VCS integration Simple things are made easy Some code it’s no bad thing
  25. 25. Imagine Design IDE theprotein.io
  26. 26. Screens. Import. Export.
  27. 27. Create.
  28. 28. Instance editor for style…
  29. 29. Handlers…
  30. 30. Handlers…
  31. 31. JSX like…
  32. 32. Data connection…
  33. 33. Components?
  34. 34. Import. Convert. Explore.
  35. 35. Something else? theprotein.io
  36. 36. Sure Design/Dev difference Windows & AI support External libraries connection Configurable assets export
  37. 37. July 2017. Beta.
  38. 38. Anton Vinogradov awinogradov@theprotein.io ask@theprotein.io @awinogradov @protein_io

×