DesignTech · EXP #06

SiteNest

An infinite-canvas sitemap builder combining page structure, navigation connections and pre-built wireframe blocks in one tool, exportable as PNG or JSON.

All experiments
01

Problems solved

  • I have to use too many different tools just to plan a website
02

Context

Planning a site's structure usually ends up split across two disconnected tools — a diagramming tool for the sitemap and a slide deck or whiteboard for rough page layouts. Both go stale the moment scope changes. SiteNest set out to put structure and layout on the same canvas.

03

The challenge

The product needed to feel as fast and unstructured as a whiteboard while still producing something structured enough to export and hand off. It also had to work for both the big-picture view of the whole site and the detail view of one page's layout, without forcing a mode switch.

04

Research

Looked at how sitemaps actually get made in practice — usually starting from a blank page and growing organically — and audited existing diagramming tools to see where generic canvas tools broke down for this specific job.

05

Insights

The key findings that shaped the direction.

01

A blank canvas beats a template

Templates assume a site structure before you know what you're planning — starting from nothing and letting structure emerge matched how sitemaps actually get built.

02

Zoom is the real navigation model

The same canvas needed to answer 'what does the whole site look like' and 'what does this one page look like' — infinite zoom did that better than switching views.

03

Export has to match how the output gets used

PNG for a deck, JSON for a handoff — the two people who ask for a sitemap almost always want it in a different format.

06

How decisions were made

  1. 01

    Start from nothing. Built an infinite canvas with no forced starting template, so a project begins exactly as empty as a new sitemap actually is.

  2. 02

    Merge structure and layout. Let pages carry both their position in the site structure and a rough wireframe of their layout, on the same canvas, instead of splitting them into separate tools.

  3. 03

    Design for two zoom levels. Made the canvas work equally well zoomed out for the full site structure and zoomed in for one page's wireframe blocks.

  4. 04

    Export for the request, not the tool. Shipped both PNG and JSON export from day one, covering the two most common reasons someone asks to see a sitemap.

07

Solution

An infinite-canvas sitemap builder combining page structure, navigation connections and pre-built wireframe blocks in one tool, exportable as PNG or JSON.

  • An infinite canvas for both site-wide structure and single-page layout
  • 19+ pre-built wireframe blocks for fast page sketches
  • A properties panel for editing titles, URLs, notes and colours in place
  • Light and dark themes that remember the user's preference

Keep exploring

More experiments worth trying.

More time for what really matters.