Design of Everyday Shiny Apps
summary
Redesign of a messy Shiny prototype into a production-ready app: layout reorganized to a top horizontal navigation and consistent grid, color limited to a five-color brand palette with gradients and hover states, typography constrained to the provided typeface with uppercase labels and systematic weight/size steps, and components added—persistent tooltip, nested nav, progress-barged downloads, delete confirmation modal, and an Excel-like Handsontable widget. Implementation uses bslib with top-of-file bslib variables plus targeted CSS; repo on GitHub contains branch-by-branch rebuilds.
AI-written summary · about
chapters (8)
- 0:00Shiny app design intro
- 1:27Proof of concept to production
- 3:34Layout for navigation
- 6:28Color for interface
- 8:59Typography for hierarchy
- 11:30Components for interaction
- 14:33Design for adoption
- 15:40Q&A on dark mode
related talks
21mDesigning for people is hard- 21mDesigning for people is hard
17mWe CAN have nice Shiny apps: What's new in Shiny's UI & UX
20mTowards the Next Generation of Shiny UI
12mCreating a Design System for Shiny and RMarkdown- 12mCreating a Design System for Shiny and RMarkdown
38mDesign for Developers
42mIndispensable Principles for Designing Complex User Interfaces