How to sketch a UI on a whiteboard

Roughing out the screen blocks

A whiteboard sketch is a layout in its roughest form: gray blocks standing in for content, arranged the way you think the screen should read. Open the canvas and draw each block as a rectangle with the Shape tool (U), then resize it by dragging the corner handles. The point is proportion, not decoration.

Work at the size of the real screen if you can. A sketch drawn at 1440 pixels wide behaves nothing like a phone screen, and the difference shows up the moment you squeeze a row of four items onto a narrow frame.

An ellipse is the other useful block. It marks a round element such as an avatar, a circle of icons or a chart, and it tells a reviewer that something on the screen has a different shape from the rest.

• One rectangle per region of the screen
• Drag corner handles to set the proportions
• An ellipse marks a round element
• GRAY blocks, no styling yet

LABELING each block with text

Every block gets a text element, and the text says what will live there rather than what it looks like. Press T, click inside the block, and type a name for the content: Recent orders, Primary action, Filter chips, Empty state photo. A sketch with named blocks can be reviewed by someone who cannot see the design in their head.

Keep the labels to a few words, because a label that needs a sentence is telling you the block is doing two jobs. Split it into two blocks and the sketch becomes honest about the problem.

Text elements can be set in any of ten fonts, and the size slider changes how big they look. Use the size, not the font, to show the hierarchy of the screen: the title is bigger, the labels are smaller, and the reviewer can see the structure of the layout from across the room.

• Name the content, not the styling
• One text element per block
• A label that needs a sentence means two blocks
• Use size, not font, to show hierarchy

Adding a rough navigation bar to the top

The navigation bar is the first thing to rough, because it fixes the top edge of the screen and tells you how much room the content has. Draw one long rectangle across the top, drop a small block at the left for the title or logo, and a row of small blocks at the right for the actions.

A bottom navigation bar is the other half of the pattern, and it works the same way: a wide rectangle at the bottom edge holding three to five small blocks. Drawing both on the same sketch is a fast way to see whether the screen has enough content to justify either of them.

The bottom navigation guide covers when a bottom bar earns its place, and the shape guide covers the rectangle and ellipse blocks a rough screen is built from.

• One wide rectangle for the bar
• Small blocks for title, actions and tabs
• Top and bottom bars drawn on the same sketch
• Bars eat vertical space, so count for it

Splitting the screen into zones

Once the blocks are on the page, the layout is really three or four zones with gaps between them: a header zone, a content zone, a floating action, and the margin that holds them apart. The zones are what a reviewer is reacting to when they say a screen feels crowded.

Space them by eye on the sketch, keeping the gap between zones visibly larger than the gap inside a zone. That single rule is what separates a screen that reads as a set of groups from one that reads as a pile of boxes, and it is cheaper to fix in a sketch than in a built screen.

Turn on split view to work on a zone without losing the whole. The split view control opens a second canvas tab beside the first, and the divider between them can be dragged to change the balance, so a detail can be worked on large while the full layout stays visible.

• Three or four zones with clear gaps
• Bigger gap between zones than inside one
• Split view shows a second canvas tab
• Drag the divider to change the balance

Note: The canvas has no grid, so the gaps are placed by hand. A sketch that needs a strict column system is a sign the work belongs in App Builder, where the placement snap grid and the layout grid overlay handle it.

Rebuilding the sketch as a device frame

When the layout has stopped moving, rebuild it as a real frame in App Builder. Press the Builder button, add a mobile or web frame, and pick one of the seven device presets: iPhone SE, iPhone 14, iPhone Pro Max, Android, Tablet, Laptop and Desktop, plus a custom size. New frames start at 390 by 844 for mobile and 1280 by 800 for web.

The preset is not a detail. A sketch that only works on a 390 pixel wide frame is a phone layout, and rebuilding it on a 1440 pixel wide frame shows immediately that the four-column row was the wrong idea. Add both sizes while the layout is still soft, because a change is cheap now and expensive later.

Then replace the blocks with components. A rectangle becomes a Card, a rectangle with a label becomes a Button, a stack of thin rectangles becomes a List item, and the frame takes over spacing, alignment and constraints. The wireframe guide covers that swap in detail.

• The Builder button opens App Builder
• Seven device presets plus a custom size
• Mobile frames start at 390 by 844, web at 1280 by 800
• Check the layout at two sizes before building

What a whiteboard sketch cannot decide

A sketch settles what belongs on the screen and in what order. It does not settle the values a system defines, the empty state, the error state, the behavior of a long label, or how the screen behaves when the content is a fraction of what you drew.

It also cannot produce a working mockup. Canvasola's App Builder exports PNG, JPG, a re-importable JSON project and static HTML and CSS, and the HTML export is a flat set of absolutely positioned divs with inline styles and no interaction in it, so a sketch cannot be clicked through.

Treat the sketch as the cheapest decision in the project rather than a preview of the finished screen. Once the zones are right, the work belongs in the frame, and the mockup tutorial shows the full path from a blank frame to an exported flow.

• A sketch decides content and order, not values
• No empty, loading or error states
• Long labels and small screens still need testing
• Static HTML export has no interaction

A checklist you can reuse

• Every region of the screen is one named block
• The sketch was drawn at the size the product ships on
• The gap between zones is larger than the gap inside a zone
• The top and bottom bars were drawn before the content was placed
• A second canvas tab was used in split view while working on a detail
• The sketch was rebuilt as a real device frame
• The layout was checked at two screen sizes

Common mistakes to avoid

• Sketching on a desktop-width canvas. A wide sketch hides the pressure a narrow phone screen puts on the same content. Sketch at the shipping size, or add a narrow frame beside the wide one.
• Labeling blocks with final copy. Real sentences inside the blocks hide the layout problem they are meant to reveal. Name the content instead, and write the copy later.
• Treating the sketch as a design review. People give detailed feedback on a rough sketch and then expect it to be built. Present it as a question about order and proportion, not as a finished screen.
• Building the screen in the canvas. The canvas has no components, no auto-layout and no alignment, so a screen built there stays hand placed. Sketch on the canvas, build in App Builder.
• Leaving the sketch and the frame in different files. A sketch in one file and a frame in another cannot be compared. Keep both in the same project so the reasoning stays attached to the build.

Frequently asked questions

Should I sketch on the canvas or build directly in App Builder?

Sketch when the layout is still open, and build when it has settled. A canvas sketch takes a couple of minutes and costs nothing to change, while a frame is more expensive to rearrange because components, auto-layout and constraints are involved. Many people sketch and build in the same project so the two stay side by side.

What is split view actually for?

It shows a second canvas tab beside the one you are working in, with a divider you can drag to change the balance. It is useful while sketching, because you can keep the previous version of a layout in the second tab and compare it against the new one, or keep a reference layout visible while you rebuild it.

Can I click through the sketch to test the flow?

Not from the canvas, and not from a static HTML export either. Canvasola's App Builder has frame level prototype links and a keyboard driven Present mode, but the exported HTML and CSS is a flat set of positioned divs with no interaction in it. Testing a flow means building it in App Builder and walking it in Present mode.

How many screens should I sketch before building?

Three is a good number: the entry point, the main task and the result. Sketching those three usually settles the navigation and the zone structure for the rest, and any further screens follow a pattern you have already proved on paper.

This guide is part of the canvas and sketching collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.