Paper Prototype CSS


Introducing Paper Prototype CSS.

When I first started designing the OpenBenches website, I wanted to make it look deliberately crappy. I didn't want the people testing it getting too hung up on what it looked like. I've found that some beta testers can only focus on whether the colours are right, or if things should be placed on the left or right.

So I wanted something which mimicked "Paper Prototyping". A website which looked vaguely hand-drawn. As though it were scraps of paper and Post-It® Notes stuck on a roll of canvas.

Screenshots of a black and white website where the elements look hand-drawn.

That way, people can immediately see that the design is deliberately "scrappy" and temporary.

I've decided to go a little further than my last experiment and create a fairly comprehensive Style Sheet which you can use on any new project - Paper Prototype CSS.

Here's what it looks like:

Some headings and text. They have a hand-written look and are askew on the page.

An image which looks like it has been quickly and inaccurately cut out from paper.

A list of items - all stuck one on top on the other.

An HTML table - every element is askance.

To be clear, this is not designed to look good - quite the opposite. It is a base to build on so you can build something quick and dirty.

Use it to throw together something where you want to concentrate on the content, not the presentation.

Features

The askew elements use nth child selectors to rotate them in different directions:

*:nth-child(odd):not(body):not(html){
   transform: rotate(2deg);
}
*:nth-child(even):not(body):not(html) {
   transform: rotate(-2deg);
}

The weird border radius uses:

border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

With thanks to

Everything is based on something else. I took heavy inspiration from, and made liberal use of:

Download

You can clone the repo to get started. If you find it useful, please let me know. Pull Requests very welcome.


10 thoughts on “Paper Prototype CSS

  1. This is really neat. I remember playing with a Swing (I think) theme that did this for Java apps many years ago - being able to make unfinished prototypes deliberately look unfinished is such a useful capability

  2. Johannes Rexx says:

    You make an excellent point. When the initial website already look polished the "project managers" and likely the customer representatives will get the impression that the work is much further along than it really is. That sets expectations that the website is much closer to completion than it really is. Using rough looking place savers like this CSS goes a long way to avoiding wrong perceptions.

Leave a Reply

Your email address will not be published.

%d bloggers like this: