Jens Oliver Meiert

Requirements for Website Prototypes (and Design Systems)

Post from June 9, 2007 (↻ June 12, 2021), filed under and .

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

The following article is derivative of the speech I intended to hold on the webinale 07 in Ludwigsburg. It covers best practices for website prototypes based on HTML, CSS, and DOM scripting.


  1. Definitions
  2. Problem
  3. Requirements
    1. Universality
    2. Actuality
    3. Realism
    4. Focus
    5. Accessibility
    6. Availability
    7. Commitment
    8. Continuity
    9. Communication
    10. Documentation
  4. Disadvantages
  5. Advantages
  6. Checklist



A project-related collection of static or dynamic templates made of HTML, CSS, and DOM scripting.

A microcosm of your online investment.

Consequently, factors like technical basis, information architecture, or quality assurance—by e.g. automated tests—are not covered here since the principles below have to be seen independently.


Bad (or even nonexistent) prototypes cost money.



Include everything that is used live.

The “What,” related to page types and elements.


Include everything that is used live.

The “How,” related to possible nova on the live website.


But: Dummy text is okay.

The use of realistic microcontent more likely means consideration of conceptual aspects as well as less risk of “implementation losses.” “Different use cases” serve “visual integrity”—do certain teaser constellations work, does the leading of long list entries fit, and so on.


Keep it simple, avoid redundancies.

The goal: A prototype must never become the live website.


Take into account a broad audience:

While frontend and software developers always belong to the audience of prototypes, other groups are often ignored. This equals wasted potential—and wasted money. Please also note that the “users” group means a change in requirements since it generally requires more realism and less focus.


Offer a stable URL in order to:

…as opposed to “local” prototypes.


You will usually observe a “shift” as soon as a prototype-based website goes online—at first, the prototype is authoritative, but changes after the launch might rather induce changes of the prototype.


Continuous maintenance, even after project finish.

Potential jackpot: The next relaunch is just a redesign.


Communicate changes, no matter if related to prototype or implementation.

…understandably, implied by former requirements.


Document design principles and characteristics (modules, constraints, snares).

This should be mandatory even though good, working prototypes have never died of missing documentation.


A good prototype requires:


A good prototype means:

…and thus:

“More fun” through less frustration by fixing errors and bugs that have been caused by differing browser implementations. How many untested “sleeper” elements are there on your website?


Is the prototype:

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Comments (Closed)

  1. On June 12, 2007, 13:51 CEST, Mike Padilla said:

    To further enhance your hi-fidelity prototypes as a requirements collaboration tool, consider using Protonotes -

    Protonotes are notes that you add to your prototype that allow project team members to discuss system functionality , design, and requirements directly on the prototype. You can think of it like a discussion board/wiki in direct context of your prototype. Once you have signed up with Protonotes, all you have to do is share your unique Protonotes url with your project team members and they can begin adding notes to the prototype - they do not have to sign up.

Read More

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Found a mistake? Email me,

You are here: HomeArchive2007 → Requirements for Website Prototypes (and Design Systems)

Last update: June 12, 2021

Professional frontend developers produce valid HTML and CSS.