In the Beginning…

Since the dawn of the internet, developers have struggled to make the web not look like radioactive garbage. To this end the awkward relationship between the designer and developer began. The journey to create a better web would be a tumultuous one, with a history shrouded in mystery, and stack overflow answers.

Our tools to style the web to our liking have never been more advanced, yet the risk of radioactive garbage still remains. This is the story of style on the web, how far we’ve come, and where we’re going.

The Classical Era

In the beginning designers and developers stared across the room at each other in slack jawed wonder. Their separate customs and traditions were too foreign for much more than the most simple of pictorial representations to be shared. The designers created documents that captured the pure visual intention of the design, with none of the trifling details. The developers picked out of these what they could and largely made up the rest with a shrug.

This incomplete transfer of information would be what we call today a ‘Classic Style Guide’. In time the designers learned to speak to the developers through the crude language of pixels and hexedecimal notations. This pleased the developers, as it translated the lofty high speech of the designers to concrete and actionable information. But still, many times details were forgotten or mistaken as smudges of paint. And so the cycle of frustration continued.

My helpful screenshot

The Enlightenment

For reasons internet historians are still not clear on, the cultural exchange between designer and developer accelerated rapidly. A new class of hybrid designers arose from this intermingling. They were called web designers, those who could wield the mysterious incantations of power known to the developers as HTML & CSS. With a common language, the designers could compel the web to look as they saw it could be, and finally deliver on the promise of a ‘Live Style Guide’.

Many developers were happy for this opportunity to abandon the dark arts of CSS, consigning them forever to the web designers. For many websites, this tradition continues to thrive as the predominant way design and development communicate. For a select few designers & developers however, doubt grew about its sustainability. The web designers were the future, but they had not yet tasted the sour lessons of scalability, modularity and maintainability…

My helpful screenshot

Design System Singularity

The ancient craft of JavaScript has changed much from its humble origins as a pure developer art. Increasingly the web designers were tinkering with its powers, finding ways to make the internet do new and exciting things. But the harmony between design and technology was still a tenuous one, and even with a live style guide human error had a habit of finding its way into the design.

It was at this point that the web designers turned inward to ponder how to design better web designers. What if there was a way to abstract the design from the system? What if we could isolate intention and implementation? The developers smiled and winked knowingly in unison. This solution would transcend a style guide and become a ‘Design System’ of relationships between raw design intention and actual working technology.

My helpful screenshot

Wombat’s design system

Welcome to the present! I hope you’ve enjoyed this adventure through the history of style on the web. Design systems are an emerging concept in the world of web design. To help prevent Wombat’s designs from becoming radioactive garbage we are actively developing our own design system, called the ‘Wombat Style Guide’. While not nearly as awkward as the history above might suggest, it is a very sophisticated solution and I look forward to describing more of how it works in future blog posts.