How to choose a wireframe tool

What a wireframe is allowed to leave out

A wireframe is a structural argument rather than a picture of a product. It answers three questions: what is on the screen, what order the parts appear in, and how much of the screen each part occupies. Everything else is a decision that can be made later without redrawing the plan.

That is why a wireframe is allowed to look unfinished. Color, typography, illustration, motion and decorative icons can all go. What cannot go is the labels, because a label too long for its box changes the layout, and a label that says nothing hides the content decision.

The payoff is speed. A structure that is wrong is cheap to correct while it is still four gray blocks, and expensive to correct after it has become a styled screen that somebody has already quoted engineering work against. The app wireframe guide shows that low-fidelity pass in full.

• Leave out: color, type styles, illustration, shadow, motion
• Leave out: photography, icon sets, brand treatments
• Keep in: every label, in real words
• Keep in: the order of the blocks and their relative size

Note: A wireframe with no labels is a block diagram, and block diagrams answer a different question. If the reviewer cannot tell what a block is, the wireframe has already failed.

GRAYSCALE first: prove the structure before the style

GRAYSCALE is a test rather than a look. When every surface, border and label is the same family of tones, the only things left that can carry meaning are position, size, grouping and alignment. If the screen still makes sense in that state, the hierarchy is real. If it collapses, color was doing work the layout should have done.

Run the test early. Once a team has argued about a blue versus a green, the conversation is about taste and the structure goes unexamined. GRAYSCALE keeps the review on the thing that is still cheap to change.

Canvasola does not ship a grayscale theme. It has two theme token sets, light and dark, switched with the Toggle dark theme button in the toolbar. The discipline is on you: leave fills and text at their defaults, and never let a color be the only thing that says what a block is for.

• Same tone for every block, so only size and position carry meaning
• One accent color at most, and only for the single primary action
• No color-only status: pair it with a word or a shape
• Judge the structure in the light theme before adding any accent

Note: GRAYSCALE wireframes are for the first review. Once the structure is agreed, a second pass in the real theme is worth the extra time, and the same frames can hold it.

Checking a wireframe tool for frames and containers

Frames are the first thing to check, because a wireframe drawn on an unbounded artboard will not survive contact with a real device. App Builder opens mobile frames at 390×844 and web frames at 1280×800, with presets for iPhone SE 375×667, iPhone 14 390×844, iPhone Pro Max 430×932, Android 412×915, Tablet 820×1180, Laptop 1280×800 and Desktop 1440×900.

Containers are the second thing, because a wireframe that has to be positioned by hand becomes a pile of rectangles the moment one label changes size. Canvasola has nine container kinds that hold children: group, container, card, nav bar, tab bar, form, bottom sheet, dialog and banner. The nesting limit in the editor is 8 levels deep.

Auto-layout is what makes those containers useful. Turn it on with Auto-layout on in the inspector, then set Direction, Gap and Padding, both of which run from 0 to 96. A container whose width or height is zero hugs its content, so a block that grows with its text does not need a hard-coded size. The complete Canvasola guide shows where the App Builder sits in the wider product.

1. Choose the frame. Add a mobile or web frame and set the Preset dropdown to the device the wireframe is for.
2. Add a container. Drop a container into the frame, then switch Auto-layout on in the inspector and set a vertical direction with a gap of 12 and padding of 16.
3. Fill and check. Place blocks inside, then change one label to a longer phrase and confirm the container grows instead of overlapping.

Note: A wireframe is the moment to use auto-layout, because nothing is styled yet and every gap can still change. Doing it later means revisiting every screen.

Which components earn a place in a wireframe

The palette holds 58 component kinds, and most of them are a distraction at this stage. The ones that carry structure answer what something is: List item, Divider, Avatar, Image, Input, Button, Heading, Text, Card, Search and Tabs tell you what a region contains and how it behaves. Use those and leave the rest out.

The ones to skip are the data-heavy or specific widgets. A Chart, Sparkline, Donut, Gauge, QR code, Terminal, Log, Code block, Map, Keyboard or Signature implies a product detail that a wireframe has not earned. Place a plain block of the right size instead, and note what it will show.

Two insertable reusable components earn their place more often than the rest: the List row, which gives every repeating item the same shape, and the Form field, which keeps every input on a screen identical. A wireframe where a list looks like a list and a form looks like a form already does most of the work.

• Use: List item, Divider, Avatar, Image, Input, Button, Heading, Text
• Use: Card, Search, Tabs, and the List row and Form field components
• Skip: Chart, Sparkline, Donut, Gauge, Table and Pagination for now
• Skip: Video, Map, Terminal, Log, Code, QR code and Signature

Note: Canvasola gives you seven insertable reusable components, not a library you can extend with your own. You cannot define new reusable components, so plan around the seven that exist.

How low to go before the wireframe stops being useful

There is a floor, and it arrives when the reviewer starts asking what the blocks are. A wireframe is too low when a stranger could not rebuild the screen from it, because at that point you have a diagram and the real design conversation has not started.

A good floor test: could an engineer write the content order from the frame without asking you a question? If yes, you are at the right level. If no, you have stripped out too much, and the missing piece is usually the label.

Watch for the opposite failure too. A wireframe that specifies exact type sizes, corner radii and hex colors has quietly become a design, and it is now much harder to change than the team thinks.

• Too low: blocks with no labels, or labels that mean nothing
• Too high: exact colors, type sizes and shadows in the first pass
• Just right: real labels, real order, blocks sized to their content
• Just right: one note per screen saying what is still undecided

Note: The number of screens in a wireframe set is a choice, not a rule. Three screens that cover the whole flow beat eight that cover one corner of it.

Exporting a wireframe as PNG, JSON or static HTML

Export PNG renders every frame in the project at 2×, the format to attach to a review or drop into a deck. The doubled size keeps text legible once the image is scaled down, and saves a re-export when someone zooms in during a call.

Export JSON produces a file that can be imported back into Canvasola with Import JSON, so a wireframe can go to a colleague and come back as editable structure rather than a flat image. Use it when the review changes the layout rather than the styling.

Export HTML/CSS writes a static page of absolutely positioned divs with inline styles and a small embedded stylesheet. It contains no JavaScript, so it is a visual copy for someone who cannot open Canvasola, not an interactive prototype. The export guide compares all three formats.

• PNG at 2× for slides, attachments and quick review
• JSON for round trips through another person and back
• Static HTML/CSS for viewing outside the app, with no scripting
• Browser print for a paper copy, never a one-click PDF file

Note: There is no direct PDF export in Canvasola. If the deliverable has to be a paper document, plan the browser print action into the schedule.

A checklist you can reuse

• The frame is set to the device the wireframe is for
• Every block carries a real label in real words
• Color is not the only thing carrying meaning anywhere
• Containers use auto-layout rather than dragged positions
• Only structural component kinds are used
• Repeating items all use the same list row shape
• Export PNG at 2× was opened and checked for legibility

Common mistakes to avoid

• Wireframing on a blank artboard. Without a real device frame, nobody notices that a label is too wide. Set the preset before the first block goes in.
• Keeping the labels generic. Labels like Item 1 and Label hide the content decisions a wireframe exists to settle. Use the real names.
• Styling during the structure pass. Once colors appear, the review turns into a taste argument. Keep it neutral until the order is agreed.
• Hand-positioning every block. Positions that were dragged cannot be reviewed as a rule. Use auto-layout so the spacing becomes a number.
• Adding data widgets too early. A chart or a table implies a product decision you have not made. Use a plain block and note what belongs there.

Frequently asked questions

Do I need a wireframe before I make a mockup?

It depends on how settled the layout is. If the order of the blocks is still being argued about, a wireframe settles it in minutes, and a mockup would only make the argument expensive. If the structure already exists, start from a template in the gallery instead.

Can I use Canvasola App Builder to make wireframes?

Yes, and the same frames can grow into a finished mockup later. The palette has 58 component kinds, the frames match real device sizes, and auto-layout keeps the spacing consistent. The app wireframe guide walks the low-fidelity pass end to end, and the mockup tutorial covers the styled version.

What is the difference between a wireframe and a low-fidelity mockup?

The line is drawn at styling. A low-fidelity mockup keeps gray blocks but adds real type sizes, spacing and component shapes, so it looks closer to the product. A wireframe commits to structure and labels only. Both are legitimate, and the honest question is which decision you are asking the reviewer to make.

Does the PNG export of a wireframe stay sharp when scaled?

Export PNG renders every frame at 2×, so a 390-pixel-wide phone frame becomes a 780-pixel image. That survives being shown full screen in a call. For editing rather than viewing, use Export JSON, which can be imported back and edited.

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