bureau

It means “desk” or “work table” in french : how metaphoric for a blog discussing what my work's about. Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on twitter or by email at thibaut ✉ tsailly ◦ net.

Le Baby is an iOS app I made with Amadour Griffais, a shared and private memory helper for parents with newborns. View on the App Store.

Topics

Archives

© 2010-2022 Thibaut Sailly · Powered by Movable Type · RSS

Previewing at 1 to 1 scale

When working on a project for a touch interface, screen design should be reviewed at the size it will be displayed at, on device. This is important to correctly assess text legibility, and dimensions of tappable areas.

While designing in Sketch, setting the document's zoom level at 100% does not necessarily display your work at the size it will be viewed at by users. The Sketch Mirror app was a great way - when it functioned as intended - to have a high fidelity preview in your hands while working on an iPhone app project. But the new iOS Sketch app now requires the files you want to preview to be stored in your online Workspace. So previewing on device is not possible anymore if you like to keep things local.

I'm sharing here the solution I came up with years ago, and still use daily: a symbol that I've sized in a way that when I select it and "zoom to selection", the artboards are displayed at the correct scale. Maybe you'll learn about it, maybe you'll let me know of a better way. Here is how to set it up.

  1. Cut a sheet of paper to the actual width of the device's screen you want to replicate, lay it on your screen (without touching it of course).
  2. Open Sketch, make sure the document window is displayed at full height.
  3. Add an artboard at the device's dimensions.
  4. Beside the artboard, draw a rectangle and select it.
  5. Press ⌘+2, shortcut for the "Selection" menu item found in "View > Zoom To".
  6. Compare the width of the paper to the width of the artboard by superposing the two.
  7. If the artboard width is larger than the paper's, increase the rectangle's height. If it's smaller, decrease it.
  8. Go to 5 until both dimensions seem identical.
measuring a the width of the screen with a sheet of paper
Getting the device's width
A sheet of paper cut to the width of the target device laid on the monitor
Adjusting the width of the artboard to the width of the paper
A screenshot from the Sketch app showing the symbol used to set the zoom level at 1 to 1 scale
The symbol I use to set the zoom level

I chose to make it #F4F4F4 so it doesn't visually interfere with the artboard to be evaluated. A 60px width makes it wide enough to be selected comfortably with a zoom level in the 10~20% range. If you make it a symbol, you may add a comment detailing the computer's screen size it was made with, and the device it is made for. For example: MacBookPro16"/iPhone5.8". This way you'll know what you're selecting when you have some of them laying around in your documents. It's especially important if you work with two monitors of different dimensions, and/or for different device sizes at the same time.

I'm curious to know how other designers deal with this issue, so please get in touch if you found another way to display your work in progress at final physical size. There's always room for improvement! If someone from the Sketch team stumble upon this: there could be a "Physical size" item in the "Zoom to" menu with a dedicated keyboard shortcut, active when a selected artboard has the dimensions of one of the device templates with known physical dimensions. It would be more efficient than this method, and would work for whatever dimensions the document window would have.

« past