Design processes in companies and how Protein can help to live in the dynamic world of design and development

1. theprotein.io

2. Anton
Vinogradov
Senior UI software engineer at Yandex
CEO at The Protein Corp.
BEM contributor
Open Source evangelist
@awinogradov

3. Design process
in companies
14.04.2017

4. How are you make design?
theprotein.io

6. Idea Design Development Hoooray!

8. Idea Design DevelopmentPrototyping
x Screens
x Fails
Test
x Fails

9. Idea Design DevelopmentPrototyping
x Screens
x Fails
Test
x Fails
UX Test
x Failsx Fails

10. 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

11. Features x Screens x Fails = x Months

13. DevelopmentPrototypingDesign

14. DevelopmentDesign

15. Your design really works?
theprotein.io

22. The design system will save us…
theprotein.io

23. 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+

24. Design system Concept
Design tools
Prototyping tools
Dev tools Web
Android
iOS
Web
Android
iOS

25. 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

26. Design system Concept
Design tools
Prototyping tools
Dev tools Web
Android
iOS
Web
Android
iOS
1
2
3
4
5
6
7

27. Cons
Too much extra work for sync

29. Protein delivers innovative
tools for UI design & development
theprotein.io

30. 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

33. 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

34. The better way
to design
with code
theprotein.io

35. Cons
SVG based format
Too difficult API for prototypes
Absolute elements
It’s not production ready code

37. Pros
Two-way design export
Component’s code generation
VCS integration
Simple things are made easy
Some code it’s no bad thing

38. Imagine Design IDE
theprotein.io

40. Screens. Import. Export.

41. Create.

42. Instance editor for style…

43. Handlers…

44. Handlers…

45. JSX like…

46. Data connection…

47. Components?

48. Import. Convert. Explore.

49. Something else?
theprotein.io

50. Sure
Design/Dev difference
Windows & AI support
External libraries connection
Configurable assets export

51. July 2017. Beta.

52. Anton
Vinogradov
awinogradov@theprotein.io
ask@theprotein.io
@awinogradov
@protein_io