Dedicated page
A stable destination for complex, multi-step, saveable, or shareable work.
Definition
Definition
A dedicated page is a full destination with its own URL. The task becomes the main thing the user is doing, not a layer on top of something else.
Problem it solves
Problem it solves
A dedicated page gives a task room to grow: several steps, a save point, a link to share, a place to come back to. Nothing is layered on top of another page. The task earns its own address instead of being squeezed into one.
When to use it
When to use it
- Project creation
- Multi-step checkout
- Detailed settings and onboarding
When not to use it
When not to use it
- The interaction is a tiny local adjustment
- The current page is essential throughout
Example
Example
- Account setup
- Project creation
- Checkout flow
See the technical example
<main>
<nav aria-label="Breadcrumb">…</nav>
<h1>Create a project</h1>
<form>
{/* multi-step or content-heavy workflow */}
</form>
</main>Counter-example
Counter-example
Sending the user to a whole new page just to rename a file is a common overreach. The task takes one field and one click. It belongs inline or in a small popover, not behind a page load and a breadcrumb.
Questions to ask yourself
Questions to ask yourself
- Does this task need more than one step to complete?
- Would the user benefit from a URL they can save, share, or return to?
- Does it need its own space to breathe, away from the page that triggered it?
- Would a smaller pattern make this feel unfinished rather than focused?
Related patterns