Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
80
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
41
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
150
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
96

Other Decks in Technology

See All in Technology
顧客合意を取りながら進めるAWSコスト削減の実践
Avatar for OPTiM optim
0
150
なぜ東京にいる私が、新潟の技術コミュニティを運営するのか by 八雲慎之助
Avatar for やくも yakumo
0
230
PostgreSQL オプティマイザ統計の秘密
Avatar for Noriyoshi Shinoda nori_shinoda
1
440
AWS Quick 入門 | 目指せ Quick マスター 01
Avatar for Riku INADA inariku
PRO
2
250
Shared Signals Framework 仕様解説
Avatar for OpenID Foundation Japan oidfj
0
310
Context Ontology Accelerator 入門 (業務データの意味を、AI エージェントに渡す)
Avatar for Riku INADA inariku
PRO
3
600
2026 Apache Flink Community Checkpoint
Avatar for Robert Metzger rmetzger
0
200
仕様と現実の間で落とし所を探るリモートMCPの認証・認可 — Sansanの認証基盤における課題と実践
Avatar for SansanTech sansantech
PRO
2
200
超⼩型・多⾔語検索モデル Bekko Embedding
Avatar for Yuichi Tateno hotchpotch
1
140
Kiro 入門 (1 つのエージェントを、どの画面からでも) | 目指せ Kiro マスター 01
Avatar for Riku INADA inariku
PRO
6
1.4k
AI Agent 時代のデータ基盤： ClickHouse で実現する 超高速分析とコスト削減の両立
Avatar for jozono jozono
0
220
分析作業をどこまで任せるか自分で決められる
AIネイティブBI『Golden Analytics』が
良さげな話 /golden-analytics-is-ai-native-bi
Avatar for shinyaa31 shinyaa31
0
130

Featured

See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
510
Side Projects
Avatar for Sacha Greif sachag
456
43k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
430
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
23k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
1k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
490
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
470
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
17k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
240
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k

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