The Clickable DemoSite is a shallow representation of the UI Design.


  • It is a general image of how the site might look, feel and behave.
  • It provides a model so that we can get a sense of the total picture.
  • It is the design infrastructure environment in which we can solve design issues.

The Demosite is – by definition – a work in progress.

Immersive experience

The DemoSite is an actively “clickable” live HTML model that demonstrates both the organization of information and the experience of interaction. Because the pages are already stored in usable code, this Rapid Application Development wireframe technique provides a fast path to delivery.

SiteMap displays navigation & organization.

Wireframes explain how the pages work.

The StartHere Popup guides stakeholders through features and updates.

I’ve implemented the Demosite as part of my solution deliverables in most engagements.

What is a Demosite?

Model Navigation & Flow

Just about every “clickable” link in the DemoSite does something. You should get a pretty good sense of the workflow within and among services.

Demonstrate Data Integrity

Most fields and objects in the DemoSite pages have some elevant data in them. The data itself is static “dummy data” that has been entered by hand. It is generally representative, but it is also often incomplete, inconsistent, and sometimes inaccurate. Right now that’s the weakest aspect of the DemoSite. Stakeholders always want to see “real” data.

Present Assumptions

The DemoSite model presumes that you’re already signed on, and that you can navigate anywhere among the services without additional logins. We also assume that you have access to everything. Conditional “permission” issues are occasionally noted in passing, but the navigation structure is wide open.

How do we use the DemoSite?

The DemoSite can be viewed as:

Visualization tool

  • Captures navigation & sitemap
  • “Big picture”, integration of services

Management & all team members: a “working model” of where we’re going

Structural Guide

  • The pages are valid HTML
  • The dynamic fields are tagged
  • Most behaviors are identified and demonstrated

Coders: HTML templates

Data Architects: data tags

QA: behavioral guidelines

Marketing Outreach

  • Look/Feel, branding
  • Workflow “reality test”

Corporate Stakeholders: consensus building

Clients: signoff on workflow, acceptance

Customers: usability testing

The Demosite as a solution

This section is based on my answer to a question on Quora:  “How do I create a sample website and get it approved before launching it?”

Do you maintain your own website?

  1. Create your sample website
  2. Mount it as a tree within your own site.
  3. Send the link (i.e. to your client

Granted, it’s not highly secure, but – Is that really at issue here?

Variations on a theme

  • These are work-product websites from real client engagements which are ‘nested’ within my own site.
  • Each ‘clickable demosite’ can be explored as a live entity. The mini-site is a clickable model prototype.
  • There’s also a link to more detailed information – context, business case, challenges & solutions, etc. – in the case study in my Portfolio.

As a professional UX guy, I also host websites that I’ve created for my clients through my own service provider.  This solution offers even greater security, while also providing greater end-to-end service.

The clickable demosite is often a prime deliverable, imo.

Here’s my Demosite Disclaimer:

These are demosites. They are design guidelines – Not finished products.

The wireframes may be styled or “raw” (skeletal). Sometimes clients are looking for usability, navigation, IA, and structure – rather than brand styling.

Clickability is mostly for navigation and flow .

Behavior is expressed, but it may be limited or simply described.

Content is mostly dummy data or placeholders.

Styling, complexity, size, and depth of the demosites vary as per client needs.

The sites in this section do not scale gracefully if you are viewing on a mobile device (But you can scroll).”




Quora is a terrific resource.



© The Communication Studio LLC