Every guide in this collection
Guides on the thinking behind a good layout: information hierarchy, spacing, grid, typography, alignment, responsive constraints, design systems and review checklists.
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
- How to Design an Admin Dashboard Layout — Design a dashboard layout with headline numbers on top, comparison views in the middle and detail below, built in a 1280×800 web frame in Canvasola.
- How to choose typography for a UI without guesswork — Choose typography for a UI with one family and three sizes, use contrast instead of variety, and set the type scale inside your Canvasola mockup frames.
- How to Choose a Color Palette for an App — Choose an app color palette in Canvasola: pick one accent, test it in light and dark, give every state a color, and check contrast before the mockup is built.
- Design system components: build a small set that repeats — Design system components work best when they are few and reused. Standardise on seven library components, 58 kinds and light/dark themes in Canvasola.
- How to build an app layout concept in Canvasola — Build an app layout concept in Canvasola: pick the frame, set the hierarchy, space it with auto-layout, add constraints and review the concept early.
- How to review a wireframe before you build it — Learn how to review a wireframe with fixed questions: does the flow read, is the hierarchy clear, are the states drawn, is spacing consistent?
- Information hierarchy in UI design, applied to mockups — Learn information hierarchy in UI design and apply it in Canvasola: rank what matters, group it, size it, and cut whatever competes with the first thing.
- Mobile app layout design: a practical screen structure — Design a mobile app layout in Canvasola: the four zones of a phone screen, content priority, auto-layout spacing and the constraints that keep it usable.
- Responsive design constraints: make one layout work wider — Responsive design constraints decide what survives a resize. Learn left, center, right, stretch and scale in Canvasola, then test on phone, tablet and desktop.
- Spacing in UI design: the 8-point grid in practice — Spacing in UI design gets easier with an 8-point grid. Set a spacing scale in Canvasola using auto-layout gap, padding and the 8 px snap grid.