10 Principles of Sustainable Web Design Part IV – Prototype

Principle #5 Prototype (almost) everything in Code

warning sign
warning sign

It’s Green because: Your earliest design will be influenced by downstream WPO.

Your Competitive Edge: You can apply your benchmarks from the beginning.

To make it easier for downstream development to feed back on upstream design, we need to make design and development match. “Prototype in code” strategies are useful for preventing bottlenecks between design and development, but there’s nothing preventing us from making our early deliverables in HTML and CSS. I’ve listed some possibilities below:

  • Instead of making static image gradients and patterns as in Photoshop or Illustrator, create them in CSS3.
  • Instead creating mood boards, palettes, or swatches in a non-web tool, create web-based style tiles.
  • Instead of a static wireframe in a non-web tool, burn the wireframe to HTML from a UX tool.

Prototyping in code is not meant to make make designers into front-end developers, and it is a bit much to expect visual designers to fully master the complexities of CSS3 and HTML5. We can compromise by avoiding monolithic design tools like Dreamweaver and substituting a suite of online, web-based tools. These tools write directly HTML and CSS, so we don’t need to translate a graphic image with clumsy “image slices” or similar methods.

As an example, Stripe Generator can create CSS3 backgrounds equal to any you would make in Photoshop.


Even more complex patterns can be created using Patternizr, which translates the visual display to JavaScript plus HTML5 canvas.


If designers and developers use HTML and CSS from the start, it will be that much easier to roll back to improve a sustainability benchmark. Using web-based deliverables also provides a perfect visual match between early design and the final web page. You client is less likely to be surprised when you jump from discovery to production.

More on prototyping in code:

Principle #6 Prototype the rest in Paper

warning sign
warning sign

It’s Green because: A pencil and paper use less power than a workstation.

Your Competitive Edge: Your identity could become more creative.

Every second you use a high-end workstation, you increase the embodied energy of your website. Check a techie site like Tom’s Hardware, and you’ll see that, excepting games, graphic design tools running on big-screen workstations are just about the most energy-hungry software there is. Is this really necessary? Wouldn’t it be better to replace the hundreds of watts a big workstation may draw with the ~20 watts used by the human brain?

One solution is to move early discovery phase of your design off your workstations, and implement a strategy of paper prototyping. A couple sheets of paper and pencil produce far less carbon than several hours sitting in front of a big, energy-hungry graphic computer. Read 9 good reasons to paper-prototype identity and UX, then get away from your screen and back to your pencil. Computer graphics tools should be used for the things they’re best at, like selecting color palettes or smoothing out a rough drawing.

More on Paper Prototyping:

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.