Guide section 33 of 55
Web/app design vs Power BI design
| Topic | Web / product design | Power BI design |
|---|---|---|
| Primary building blocks | Application components | Data visuals, slicers, tables, cards, navigation, report pages |
| Layout | CSS Grid, Flexbox, responsive containers | Positioned visuals on a report canvas |
| Responsiveness | Breakpoints and automatic reflow | Desktop canvas plus a separately optimized mobile layout |
| Styling | Very high control through CSS/components | Limited to properties exposed by visuals, themes and configuration |
| Components | Can be custom-built | Prefer existing native Power BI components |
| Interactions | Almost arbitrary | Must map to supported report interactions |
| State | Application/client state | Filters, selections, bookmarks, parameters, drill context |
| Data | UI consumes API/application state | Visuals bind directly to model fields and measures |
| Navigation | Routes, dialogs, drawers, nested screens | Pages, page navigation, bookmarks, drillthrough |
| Hover | Can contain rich interaction | Mainly tooltips and visual feedback |
| Animation | Highly controllable | Limited |
| Forms / input | Normal application pattern | Limited; Power BI is primarily analytical |
| Tables | Fully programmable data grids | Native Table and Matrix with Power BI-specific behavior |
| Design system | Components + tokens + code | Foundations + theme + native component configuration + page patterns |
| Handoff | Layout, components, states, API behavior | Visual mapping, data fields, measures, filters, interactions, formatting |
| Performance | Frontend/render/API performance | Semantic model, DAX, visual/query count, report rendering |
| Accessibility | HTML semantics + ARIA + CSS | Native accessibility capability + author configuration (alt text, tab order) |