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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
63
0

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

More Decks by Konstantin

See All by Konstantin
Global state management
Avatar for Konstantin konstantin_lebedev
0
33
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
130
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
73

Other Decks in Technology

See All in Technology
AmazonRoute 53ではじめてのドメイン取得！HTTPS化までの道のりを整理してみた
Avatar for usanchuu usanchuu
3
120
日本 Fintech 未来予測レポート 2027〜2028年（手動編集版）
Avatar for 8maki 8maki
0
790
手塩にかけりゃいいってもんじゃない
Avatar for ming ming_ayami
0
180
地球に⽣きるAI —GeoAIと「中間領域」— / AI Living on Earth — GeoAI and the “Intermediate Layer” —
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
170
チームで進めるAI駆動アジャイル×ウォーターフォール
Avatar for 熊井悠 kumaiu
0
140
Disciplined Vibes: Scaling AI-Assisted Engineering
Avatar for Sheharyar Naseer sheharyar
0
120
Bucharest Tech Week 2026 - Reinventing testing practices in the AI era
Avatar for Eric Deandrea edeandrea
PRO
1
130
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
30
23k
データ基盤をDataformで整えた話 〜 開発環境を添えて 〜
Avatar for Takanobu Nozawa takapy
0
140
AI Engineering Summit Tokyo 2026 AIの前に、やることがある 〜医療データ企業の4フェーズ〜
Avatar for Daisuke Taniwaki dtaniwaki
0
2.4k
Agentic Web
Avatar for dynamis dynamis
1
200
ブロックチェーン / Blockchain
Avatar for Kenji Saito ks91
PRO
0
120

Featured

See All Featured
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
320
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
140
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
410
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
250
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
200
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
220
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.9k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
790
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
380
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270

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