Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Smarter UI Development

800c1a87c30c83ccc214e220b09e4def?s=47 Konstantin
October 03, 2018
Technology
0
13

Smarter UI Development

In this short presentation, we explore how we can build UI "the smart way" using StoryBook.

800c1a87c30c83ccc214e220b09e4def?s=128

Konstantin

October 03, 2018
Tweet

More Decks by Konstantin

See All by Konstantin
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
15
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
73
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
23

Other Decks in Technology

See All in Technology
098ad475722e3697ec2fba28c8654f9f?s=48 yuhta28
1
1.2k
8d0803aa4572615f7bce5f5288e6b716?s=48 mochan_tk
0
430
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
1
130
0d7a3b61c5c1f64a50136cf4bb5702b7?s=48 ryomaru0825
0
110
E60aa4f80303f3f386898546ddb3686a?s=48 livesense
PRO
0
230
7a29c02251394fc05ebd88c631c562dc?s=48 takufujii
0
130
5314ec2302336bf68c95bdb5b1476227?s=48 furuhashilab
0
140
95aaab3d693889550fd2e7ae02f2f789?s=48 takaking22
1
3.4k
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
4
410
14c35b43867f0995b8052b1a6783c721?s=48 sugitk
0
320
8847086af047cbf895ab3277b59529fe?s=48 andpad
1
390
6d161fe47f36ac295189c3b6a0db2a9a?s=48 masahirokawahara
3
3.3k

Featured

See All Featured
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.7k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9.1k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
267
11k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
212
7.3k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
280k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
1k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
191
14k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.3k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k

Transcript

  1. SMARTER UI DEVELOPMENT Konstantin Lebedev

  2. WEATHER APP

  3. WEATHER APP

  4. WEATHER APP

  5. WEATHER APP

  6. How can we test multiple visual states of a component?

    PROBLEM #1

  7. TRAVEL APP ONBOARDING

  8. TRAVEL APP ONBOARDING

  9. TRAVEL APP ONBOARDING

  10. TRAVEL APP ONBOARDING

  11. How can we test visual states of a component that

    isn’t always visible on the screen? PROBLEM #2

  12. STORYBOOK

  13. Storybook - isolated environment to quickly develop and design UI

    components STORYBOOK

  14. STORYBOOK

  15. STORYBOOK

  16. WRITING STORIES

  17. STORYBOOK

  18. STORYBOOK

  19. STORYBOOK

  20. STORY SHOTS

  21. STORY-SHOTS

  22. WITH STORYBOOK • test components in isolation • test multiple

    visual states • live documentation for our UI

  23. THANK YOU Konstantin Lebedev / @koss_lebedev