Designing on a phone: how the mobile Editor is laid out, and why

A phone is often the device closest to hand when a change is needed: a date to fix, a post to resize, a photo to cut out. The Voidcanvas Editor runs on a phone as a full editor, not a viewer, and it saves and exports on the phone like everywhere else. This post explains how the phone layout is organised and the reasoning behind it.

Two layouts, chosen by width#

The Editor picks its layout from the width of the window. Below 768 pixels, which covers most phones held upright, you get the phone layout. Wider than that, including most tablets, you get the full desktop Editor with menus, tool rail and panels, and touch still works there.

Shrinking the desktop interface onto a phone would leave dozens of targets too small for a thumb. So the phone layout starts from a different question: what are the handful of things you do most, and how do you reach them from the bottom of the screen?

Five modes along the bottom#

The top bar holds the way back to the start screen, the design name, Undo, Redo and Share. The canvas fills the middle, with a Layers button and count at the top right. Along the bottom sits the mode bar:

Each mode opens a short sheet with only the controls that matter for it, so the canvas stays visible. Tapping a layer opens the Select sheet for it; tapping empty canvas closes it. While you type on the canvas, the sheets and mode bar hide to make room for the keyboard.

Nothing removed, just moved#

It would have been easier to build a cut-down phone editor. I did not want a design started on a phone to hit a wall the moment it needed a mask or a clone stamp. So every desktop tool is still there: open Select, tap More tools, and pick the brush, eraser, selections, heal, clone stamp, pen, gradient or any other. A pill at the top of the canvas names the tool, and Done takes you back to moving and selecting.

Filters and adjustments added from the Effects mode are layers, as they are on desktop. You can change or remove them later, and a design made on a phone opens on a computer with the same structure.

Gestures#

The two and three finger taps count only when they are quick and your fingers stay still, so a pinch does not undo anything by accident. The same gestures work in the desktop layout on a tablet.

Tablets and pens#

With a pen that reports pressure, pressing harder makes brush strokes bigger. On a tablet, turn on Touch mode from the View menu. It makes controls bigger, and once you have used a pen, your fingers pan and zoom instead of painting, so resting your hand on the screen leaves no marks.

Getting the file out#

Tap Share. Share PNG, JPG and PDF hand the file to your phone's share sheet, so it can go straight into a chat, an email or your photos. If the phone cannot share files from the browser, the button reads Save PNG and downloads instead. Pick 1x or 2x under Size, or More options for the full export dialog.

The rest of Voidcanvas on a phone#

• Effects puts the canvas on top and the effect list underneath, with Undo, Reset, Clear, Editor and the download buttons pinned to the bottom within reach of your thumb.
• Studio works on a phone, but some parts need room. Naming a direction, setting its palette and recording the client's choice need a wider window, and format due dates are hidden on narrow screens.
• The brand guideline builder stacks the preview, page list and controls in one long scroll. Everything works.

Good to know#

• Photos, PSDs and PDFs open as layers on a phone, and nothing leaves the phone.
• Phones have less memory than computers. If the Editor slows down, work at a smaller size or with fewer large photos.
• Adding Voidcanvas to your home screen gives it the full screen and lets it work offline. See Install Voidcanvas as an app.
• In a private session, the Share sheet reminds you that nothing is saved on the phone unless you export it.

Design on a phone or tablet is the reference for every control mentioned here.

Open the Editor on your phone