Every guide in this collection
Step-by-step guides for designing mobile and web screens in Canvasola App Builder: layout concepts, wireframes, flows, components, auto-layout, constraints and handoff.
How to use this collection
Each guide stands on its own, but the order below is the order that works. Start with the guide that matches the task in front of you, then use the checklist at the end of it to review the result. When a guide mentions a shortcut, the keyboard cheat sheet has the full list, and the complete guide explains where each tool lives.
Every guide here is written against the current version of the app, and each one names the specific capability it depends on, so you can check the claim in the product instead of trusting the page.
Start here
- App Mockup Tool: What to Look for and When to Use One — Compare what an app mockup tool has to do, then see how Canvasola covers device frames, a component palette, present mode and PNG export in a browser tab.
- How to Create a User Flow Diagram From Real Screens — Create a user flow diagram from real app frames: map the screens and decisions, link them with On tap go to, and check that no path dead-ends.
- How to Design a Bottom Navigation Bar That Stays Simple — Design a bottom navigation bar that stays consistent: a fixed height, three to five destinations, matching labels and the same bar on every screen you make.
- How to Design a Dashboard Layout That People Read — Design a dashboard layout driven by the data: one headline metric, a fixed grid, a KPI row, the chart that answers the next question and a table for detail.
- How to Design a Data Table in a Mockup People Can Read — Design a data table in a mockup people can scan: fewer columns, a clear header row, a fixed row rhythm, obvious row actions and the loading state as well.
- How to Make a Login Screen Design That Actually Works — Make a login screen design that holds up: one vertical form, fields in the order they are asked for, a single primary button and room for error messages.
- How to Design a Mobile App Form That People Finish — Design a mobile form in Canvasola App Builder: one field per row, real labels, validation states, a clear primary action and a review-ready screen.
- How to Design a Mobile App Screen in Canvasola — Design a mobile app screen that reads at a glance: set the type scale, use the 8 px grid, decide what earns full width and leave the screen room to breathe.
- How to Design a Responsive Web Layout That Reflows — Design a responsive web layout once: build at 390 pixels wide, let auto-layout reflow the columns, pin fixed pieces with constraints, check 390 to 1440.
- How to Design a Settings Screen People Can Follow — Design a settings screen by frequency and risk: one consistent list row, the right control for each setting, grouped sections and a check for accidental taps.
- How to Design an Empty State That Guides the User — Design an empty state that acts as the first impression of a feature: say what will appear there, offer one action and match the weight of the loaded screen.
- How to Design an Onboarding Flow That Earns Trust — Design an onboarding flow that earns the first ten seconds: three screens, one decision each, and the product shown before the signup ask arrives.
- How to Create a Design System for Mockups in Canvasola — Build a design system for mockups you can actually keep: one spacing scale, the insertable component library, light and dark themes and a written list.
- How to Make a Wireframe for a Web App — Sketch a web app wireframe in Canvasola: pick a 1280×800 frame, block the regions, place real labels, then review the structure before it becomes a design.
- How to Make an App Wireframe Without Wasting Time — Make an app wireframe the fast way: pick a device frame, build from blocks instead of drawings, label everything honestly and check the structure.
- How to Show a Multi Screen App Flow to Stakeholders — Show a multi screen app flow to stakeholders: order the frames, do a dry run of the path, export images to leave behind and ask one question per screen.
- How to Prototype an App Idea Before You Build It — Prototype an app idea to answer one question: build only the screens that test it, put the risky part first and write down what changes after.
- How to Build an App Prototype Without Code in Your Browser — Build an app prototype without code: link frames, walk the flow in Present mode, export HTML, JSON or PNG, and see what a no-code prototype cannot do.
- Wireframe Tool: How to Choose One That Fits the Job — Pick a wireframe tool by what it leaves out: grayscale blocks, real device frames, consistent spacing from auto-layout and a PNG export, all in one browser tab.