Guides to prototyping and design

All guides

• What is a clickable prototype?

  A clickable prototype is a navigable model of a product where screens link and states respond, so you can experience the flow before any app code is written.

• Wireframe vs mockup vs prototype: what each one is

  A wireframe is the structure, a mockup is the look, and a prototype is the feel. Here is what separates the three and when to use each in product design.

• AI prototype generators, explained

  An AI prototype generator turns a text description into a working prototype of a product. Here is how they work, what to look for, and where they fit in design.

• AI mockup generators, explained

  An AI mockup generator turns a prompt into a high-fidelity UI mockup. Here is how they work, how a mockup differs from a prototype, and when each fits.

• How to prototype an app before you build it

  Prototype an app before building by deciding every screen and state up front. Here is a practical sequence and how to get a complete clickable prototype fast.

• Using a prototype in an investor pitch

  A clickable prototype makes an investor pitch concrete: investors click through the real product instead of imagining it from slides. Here is how to use one well.

• What is a design handoff, and why does it matter?

  A design handoff is the moment design becomes engineering’s input. Clear, stack-agnostic handoff specs are what let a team build from a decided design.

• High-fidelity vs low-fidelity prototypes

  Low-fidelity prototypes test structure fast; high-fidelity prototypes test the real experience. Here is the difference and when to use each.

• What is a design system?

  A design system is the single set of rules — tokens, components, patterns, and guidelines — that keeps a product consistent. Here is what one contains and why it matters.

• Design tokens explained

  Design tokens are named values — colour, spacing, type — that turn design decisions into a single source of truth a whole product and both its themes can share.

• Empty-state design, explained

  An empty state is often the first thing a new user sees. Good empty-state design turns a blank screen into a guide toward first value. Here is how to design one.

• Error-state design, explained

  Error-state design is how a product behaves when something goes wrong. Clear, recoverable error states separate a trustworthy product from a frustrating one.

• Loading-state design, explained

  Loading-state design is how a product feels while it waits. Skeletons, spinners, and optimistic UI shape perceived speed as much as real speed does.

• Dark mode design, explained

  Dark mode is not just an inverted palette. Good dark mode design rethinks contrast, elevation, and colour so a product reads well in both themes.

• Responsive design basics

  Responsive design is how a product adapts across screen sizes. Here are the basics — breakpoints, fluid layouts, and mobile-first thinking — explained simply.

• Prototype vs MVP: what each one is for

  A prototype tests the design; an MVP tests the market with a real product. Confusing the two wastes time. Here is the difference and when to use each.

• No-code vs prototype: which do you need?

  No-code tools build a working app without engineers; a prototype designs the product first. They solve different problems. Here is how to choose between them.

• How to write a good prompt for a prototype

  A good prototype prompt names the product, its users, the core flows, and the tone. Here is how to write one that generates a complete, non-generic prototype.

• User testing a prototype, explained

  User testing a prototype means watching real people use it before you build. Here is how to run a session, what to ask, and why a clickable prototype is ideal.

• Component library vs design system

  A component library is the built UI pieces; a design system is the whole framework of rules around them. Here is the difference and why it matters.

• Accessibility in prototypes, explained

  Deciding accessibility in the prototype — contrast, focus, labels, and structure — is far cheaper than retrofitting it after a product has been built.

• Style guide vs design system

  A style guide documents how a brand and UI should look; a design system makes those rules reusable across a product. Here is how they differ and overlap.