How to design an app mockup in Canvasola

App mockups are often either too vague to review or too polished to change. The goal is not to make a fake screenshot. It is to make the important decisions visible: what appears on the screen, what the primary action is, how the flow moves, and what happens when the content is real.

Canvasola’s App Builder is designed for that middle ground. It is fast enough for a rough wireframe and structured enough for a consistent multi-screen prototype. You can work from a blank frame, start with a template, or combine both.

What App Builder is — and what it is not

App Builder is a mockup and wireframe workspace for mobile and web screens. It includes frames, a component palette, a layer panel, a properties inspector, auto-layout, prototype links, presentation mode and export.

It is not a production app generator. The HTML/CSS export produces a static representation of the mockup, which is useful for review or documentation, but it does not create application logic, a database, authentication or deployable product code. Treat it as a thinking and communication tool, not a shortcut past engineering.

Set up the file before drawing

Open Canvasola and select Builder from the left toolbar. The first time you enter, the empty state offers three starts: Mobile frame, Web frame, and Browse templates.

• Mobile frame: a 390 × 844 artboard, suited to a modern phone layout.
• Web frame: a 1280 × 800 artboard for a desktop screen.
• Templates: more than 50 screen templates across authentication, social, commerce, productivity, utility, content, education and web categories. Search by name or filter by mobile and web.

For a first project, choose one frame size and stay with it. Mixing mobile and desktop screens before the core flow works creates two half-finished products. If the same feature needs both, finish the mobile flow first and treat the desktop version as a separate adaptation.

Name the frame early. A frame called “Home” is easier to link, present and discuss than “Mobile 4”. Use the frame context menu or inspector to rename it. Clear names are part of the deliverable, not housekeeping.

Build the first screen from the palette

The left palette contains the building blocks: headings, text, buttons, inputs, images, avatars, cards, navigation bars, tab bars, list items, search fields, checkboxes, toggles, badges, charts, tables, maps, dialogs, bottom sheets and more. Drag a component onto the frame, or click it to insert it into the selected screen.

Work in this order. It keeps the screen from becoming a pile of unrelated pieces.

1. Place the navigation and page title

   Add a nav bar if the screen needs one, then a heading that states the screen’s job. “Today”, “Add habit” and “Your progress” are better than generic labels such as “Screen 1”.

2. Add the primary content block

   Use a card, list, chart or form container. This is the part a reviewer should look at first. Give it real sample copy so spacing and line length are realistic.

3. Add one primary action

   A screen can have secondary actions, but it should have an obvious next step. Use a button or a floating action button. If everything on the screen is equally prominent, nothing is.

4. Add supporting states

   Include an empty state, loading state or confirmation only when it answers a real product question. A mockup that shows the happy path and one failure state is more useful than five variations of the same card.

Double-click text components to edit them in place. The inspector handles position, size, typography, fill, opacity, corner radius, constraints and other properties. If you need to repeat a component, Ctrl+D duplicates the selection. Arrow keys nudge by 4 pixels; hold Shift for a 16-pixel step.

Use auto-layout, constraints and grids

Three tools separate a tidy screen from a collection of rectangles.

Auto-layout

Select a container and turn on Auto-layout in the inspector. Children can stack vertically or horizontally, with controls for alignment, distribution, gap and padding. Use auto-layout for lists, forms, card contents and any group that should remain tidy when the content changes.

A practical pattern is a vertical card containing a horizontal row: the card owns the spacing around its contents, while the row aligns an avatar, two lines of text and a trailing icon. Build that pattern once, duplicate it, and replace the content instead of rebuilding the alignment each time.

Constraints

Constraints decide how a component behaves when its parent resizes. A top-left element might stay near the top-left; a bottom action bar may stretch across the width; a centered logo might stay centered. Set these deliberately, especially for web frames, or the layout will fall apart the moment someone changes the artboard size.

Layout grid and alignment

The toolbar’s layout-grid toggle shows a four-column mobile grid with margins and gutters. Use it to check that content has a consistent left and right edge. As you drag components, Canvasola shows alignment guides and snaps to frame edges, centers and nearby elements. Group related components with Ctrl+G and ungroup with Ctrl+Shift+G.

Add screens and connect a prototype

Use the toolbar’s add-frame buttons to create additional mobile or web screens. Give each frame a name that describes its role, then position the frames from left to right in the rough order a person would move through the product. The frame list keeps creation order, which is also the fallback order used by Present mode when a frame has no prototype link.

To connect screens, select the frame that owns the primary action. Find On tap go to in the frame inspector and choose the destination frame. The link belongs to the frame, not to an individual button or row; Present mode follows it when you press the forward arrow or Space. Turn on Show prototype links in the toolbar to see the connections drawn between frames. Because each frame has one destination, link the main action and use extra frames for alternate branches.

Keep the flow focused. A prototype should answer one question: can someone complete the main task without confusion? If a user has to choose between five paths on the first screen, the mockup is exposing a product problem, not a visual one.

Present the screens and test the flow

Select Present screens in the toolbar. Canvasola shows one frame at a time. Use the right arrow or space to advance, the left arrow to go back, and Esc to exit. If the current frame has an On tap go to link, the forward action follows that link; otherwise it advances to the next frame.

Present mode is the quickest way to catch problems that are invisible in the editor. Read the screen as a user would. Is the primary action obvious? Is the amount of text realistic? Does the destination match the promise of the button? Do not explain the flow while presenting; if it needs narration, the mockup is not doing its job yet.

Before a review, duplicate the project or save a `.canv` version. Then you can test a more ambitious change without risking the version you already agreed on.

Save and export the right artifacts

App Builder has two kinds of output: the editable project and the review artifacts.

Importing a JSON mockup replaces the current App Builder project. Canvasola asks for confirmation when frames already exist, and Undo can restore the previous state, but saving the current project first is still the safer habit.

The theme toggle changes the mockup and HTML export between light and dark styling. Decide which theme you are delivering before the review; a dark screenshot in a light design deck is a distracting inconsistency.

A complete example: habit tracker in three screens

Here is a small flow that uses the builder’s strengths without turning into a full design system. The goal is to let someone view today’s habits, add one, and see progress.

1. Screen 1: Today

   Add a mobile frame and name it “Today”. Add a nav bar or heading, a progress indicator, a short label such as “3 of 5 complete”, and three list rows for habits. Add a floating action button for “Add habit”. Use realistic habit names and one completed state so the screen shows contrast.

2. Screen 2: Add habit

   Duplicate the frame or add another mobile frame. Name it “Add habit”. Add a heading, a text input for the habit name, a chip row for frequency, a toggle for reminders, and a primary “Save habit” button. Remove the FAB from this screen; the action is already the form.

3. Screen 3: Progress

   Add a third frame named “Progress”. Include a heading, a summary stat, a chart, and two or three rows showing completion history. Keep the back action and the bottom navigation consistent with the first screen.

4. Link the flow

   Select the “Today” frame and set its On tap go to destination to “Add habit”. Select “Add habit” and point it to “Progress”; select “Progress” and point it back to “Today”. That creates a three-screen loop around the main task. If a habit row should open a second branch, duplicate the relevant frame rather than trying to attach two destinations to one frame. Turn on prototype links and check that the arrows match the intended journey.

5. Test and refine

   Present the flow. Try to add a habit using only the visible controls. Check that the form has a clear label, that the button says what happens next, and that the return path is obvious. Fix the flow before adding more visual detail.

Three screens, one clear task and one connected path are enough for a first review. If the feedback is positive, add the empty state, the reminder settings and the weekly view as a second iteration.

A handoff checklist that prevents rework

• The `.canv` project is saved with a descriptive filename.
• Every frame has a name that describes its role, not its number.
• The primary action on each screen is visually obvious.
• Prototype links match the flow you demonstrated in Present mode.
• Sample content is realistic enough to test line length and hierarchy.
• Spacing follows a small, consistent set of values.
• Mobile and web screens are clearly separated.
• PNG or JPG exports exist for reviewers who will not open Canvasola.
• JSON is included if the mockup must be reopened and edited.
• Open questions and deliberately unfinished states are written down.

Common App Builder mistakes

• Building too many screens too early. A confusing flow repeated across eight screens is still a confusing flow. Prove the core path first.
• Using pixel-perfect detail as a substitute for decisions. Corners, shadows and colors cannot rescue a screen with no clear action.
• Ignoring constraints. A layout that only works at one exact frame size is brittle. Set constraints before presenting a resized frame.
• Trying to encode every possible branch. A three-screen loop that proves the main path is more useful than a sprawling map of edge cases. Add alternate frames only when a decision needs testing.
• Exporting only an image. A PNG is a snapshot, not an editable project. Keep the `.canv` and JSON when future changes are likely.
• Forgetting the mobile status bar context. Mobile frames include phone chrome for a reason. Check that your content does not collide with it.

Frequently asked questions

Can I start from a template and still customize it?

Yes. Templates are starting points, not locked layouts. Choose one, rename the frame, replace the content, and adjust components using the inspector. Starting from a template is often faster than recreating a standard navigation bar or form.

Can I make a desktop and mobile version of the same flow?

Yes, but treat them as separate responsive interpretations rather than stretching one artboard. Add a web frame for the desktop layout and use constraints to define what stays fixed and what grows.

Does Present mode follow the frame link?

Yes. When the current frame has an On tap go to destination, the forward action follows that link. Without a link, it advances to the next frame in the project.

Can I reopen an exported mockup?

Use Export JSON and Import JSON. JSON is the editable interchange format. PNG and JPG are flat images, and the HTML/CSS export is a static preview rather than a round-trippable project file.

Keep reading: plan an app layout concept before you build screens · design a single mobile app screen carefully · map a user flow across screens · present a multi-screen flow to stakeholders