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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
45

Smarter UI Development

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

Konstantin

October 03, 2018
Tweet

More Decks by Konstantin

See All by Konstantin
Global state management
Avatar for Konstantin konstantin_lebedev
0
25
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
110
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
52

Other Decks in Technology

See All in Technology
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
7.9k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for danielconkling870 lufthanahelpsupport
0
210
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
Avatar for Hiroka Zaitsu zaimy
0
130
品質と速度の両立：生成AI時代の品質保証アプローチ
Avatar for odasho odasho
1
390
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
Avatar for ar_tama ar_tama
7
1.1k
MobileActOsaka_250704.pdf
Avatar for AKAI Tadaaki akaitadaaki
0
150
FOSS4G 2025 KANSAI　QGISで点群データをいろいろしてみた
Avatar for kou_kita kou_kita
0
400
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
Avatar for jackkkk harrry1211
0
120
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for dobek566 flyunitedguide
0
240
ビギナーであり続ける/beginning
Avatar for 小田中育生 ikuodanaka
3
770
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
190
Model Mondays S2E04: AI Developer Experiences
Avatar for Nitya Narasimhan, PhD nitya
0
190

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
820

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