Screen size, orientation and panel settings
Set the screen size and orientation first: they apply to every page in the project and decide the canvas shape, the default widget sizes and how text fits.
Where to find them
Click an empty part of the canvas, then scroll the Page tab to Panel settings. Changes here affect all pages, not just the one you are on.
Orientation
Landscape or Portrait. Pick the way the display will be mounted on the wall or held.
Screen size
| Category | Options (pixels) |
|---|---|
| Wall touch panels | 5 inch (480x320), 7 inch (600x400), 10 inch (800x533) |
| Phones | iPhone SE (375x667), iPhone 14 (390x844), iPhone 14 Pro Max (430x932), Pixel 7 (412x915), Samsung S23 (360x780) |
| Tablets | iPad Mini (768x1024), iPad Pro 11" (834x1194), iPad Pro 13" (1024x1366), Samsung Tab S9 (800x1280), Surface Pro (912x1368) |
| Other | Custom dimensions |
When a phone screen size is selected, new widgets default to a wider size so they stay readable. New projects opened on a phone pick a phone screen size automatically.
Menu type
No menu, Top navigation, Bottom navigation, Left navigation or Right navigation. Choosing any menu reveals the Menu items and Menu style sections. See Navigation menus and navigation buttons.
Good practice
Match the screen size to the actual hardware before laying out widgets. Changing it later means re-checking every page for fit and text wrapping.
Use Preview's device menu to sanity-check the design on other sizes (see Previewing and testing your design).
Leave room for the menu bar: a top or bottom menu takes 48 px by default (set by Menu height).
