Badr Abardazzou

Tools

Power BI Layout Studio

Design the page before you build the report. Choose a navigation frame and a palette, drag the cards into place on a live canvas, and download the backgrounds, the theme, the exact position of every visual and a Power BI project with the page buttons already wired.

  1. 1
    Frame and colours

    Seven navigation frames, 16 report palettes or your own brand colour, light or dark.

  2. 2
    Arrange the cards

    Start each page from a layout, then drag, resize or draw cards. Everything snaps to a 12 by 12 grid.

  3. 3
    Take it to Power BI

    PNG backgrounds, a theme .json, a positions table and a .pbip with navigation that works.

Start this page from a layout

5Take it to Power BI

Every page with its background, page buttons that navigate, placeholder visuals in each card, and your theme.
This page as PNGTwice the canvas size, sharp on any screen. Format page, Canvas background, Image, Fit.
Every page (zip)One PNG per page, the theme, the positions as CSV and a short read-me.
Theme (.json)Data colours, fonts and transparent visuals so the background shows through. View, Themes, Browse for themes.
PositionsX, Y, width and height of every card and button, in Power BI pixels. Paste into Format, General, Properties.

Where each visual goes on

Power BI pixels at . A visual placed on its slot lines up with the card in the background.
How to use it in Power BI Desktop. The fastest route is the .pbip: unzip it to a short path such as C:\PBI\, double-click the .pbip, and every page opens with its background, the theme and a placeholder visual on each card. Swap each placeholder for your own visual and keep its position. The page buttons already navigate. By hand: Format page, Canvas background, Browse, pick the PNG, set Image fit to Fit and transparency to 0%. Then load the theme (View, Themes, Browse for themes) so the visuals turn transparent, and type each visual's X, Y, width and height from the table above.
Why the cards live in the background. A shape drawn under every visual is the usual way to give a report a clean card look, and it costs a visual each time: more to load, more to align, more to restyle. A single background image carries every card, line and label at no cost to the report, and the theme switches the visual backgrounds off so the image shows through. When the layout changes, you export one new image instead of moving forty shapes.
Why a 12 by 12 grid. Cards that share column edges read as one system, so the eye can compare a KPI with the chart under it without hunting. Twelve columns divide into halves, thirds, quarters and sixths, which covers almost every report layout. Change the frame or the canvas size and the cards keep their place on the grid, so the layout follows.
Privacy. Everything runs in this page. Your logo is read by your browser and never uploaded, the images and the project are built on your machine, and your last layout is kept in this browser only. Related: Theme Builder for a full brand theme, Theme Check to audit one, and the Power BI project templates.