Thoughts & Articles
Graphic Design and CSS: Where WYSIWYG went wrong.
Way back in the 1980s, some very nerdy graphic designers began to write their designs in code. John Warnock, one of the founders of Adobe Systems had developed a computer-generated, vector-based programming language called PostScript that became the underlying code of much of the design and typographic tools we take for granted today. This very interface still relies heavily on it. Almost every letter in every word you read uses it. Before there was any such thing as Illustrator or PageMaker or InDesign or web pages, there were designers writing code to make a mark on a page. To draw an arc on a page, a PostScript designer would write in a text document: “300 600 20 270 arc stroke” and then adjust the numbers to get the right result in the compiled output. Crazy, right?
I remember reading about this and thinking,
“That is way too much effort. I could never think about my design in code. Give me a pen or a brush and some paper. That form of design is going nowhere.”
Then, along came the graphic user interface. Now everyone who designs writes about arcs and strokes and fills and vector positions on a virtual canvas, only we use a mouse and a computer screen and let the robots do the calculations for us.
So, what is wrong with that? Courses in Design are taught specifically in branded programs like Adobe Illustrator or Photoshop with little to no reference to the underlying code that enabled the process. These programs have enabled us to create increasingly complex designs quicker than we could possibly achieve by hand-coding positions and shapes, and that is, by-in-large a good thing.
CSS stands for Cascading Style Sheets, and was developed by Håkon Wium Lie in 1994. Lie was also working at CERN with Berners-Lee. His idea was to take the structure of the HTML page; the underlying elements like body, h1 (for a headline), p (for a paragraph), img (for image reference), and div (for block elements) and give them design specifications like background-color, width, height, padding, margins, font-family, and more. Early web designers began to code or “script” these modifications to their dull looking, gray pages and things on the web got interesting.
The trouble with web design today, is that each choice or fork in the process has exponential consequences. Modern web design is often reliant on templates and programs that make it easy to get started and generate a design that is balanced and pleasing. Content editors have drag and drop interfaces that allow for placement of elements with a gesture of a hand. The trouble arrives when a designer begins to think outside the parameters of the pre-defined GUI interface and discovers that they are blocked from making creative decisions by the template or program underlying the layout on the page.
When faced with the limitations of the interface, a non-coding designer has a choice:
- Start again with another template or platform that seems to better align with their vision
- Give up and let the client know that what they want simply cannot be done with the tools at hand
- Team up with a programmer that can shoehorn the elements into place with modifications to the constraining template or platform, adding cost to the project and complexity to changes down the road
None of these are good options.
What is needed to do this right is a designer who thinks in code. What kind of designer thinks in code?
Prior to the term being co-opted by the startup community, a Unicorn used to refer to a designer who was also a programmer. The belief was and is today, that the ability to design precludes the ability to write code and those who did both are as impossible to find as a mythical beast with a horn growing out of its forehead. People who have these talents are now sometimes referred to as hybrid designers for disambiguation.
For too long, the design curriculum has ignored code as an essential interface for creating graphic layouts. The focus has been on the WYSIWYG interface, rather than what it generates. All GUI interfaces for design have limitations in application. A page created in photoshop is, by its nature non-responsive to screen size. It lacks any accessibility elements. It ignores user-input. A website built with templates will always be limited to the parameters of that template, no matter how flexible it claims to be. A designer who wants to rise to the challenges of how layouts are presented on the web must have some understanding of the underlying elements of HTML and how to modify their appearance and behavior to create durable, compelling work.
I can sometimes find examples of educational courses that teach design with code. I hope this is a trend. It is not, as has been asserted, the job of two very different brains to write code and create beauty. One brain will do, so long as we begin thinking of design from the perspective of rules and behavior, rather than fixed elements on a page. The interface is radically different from those based on the ancient modes of paint, brush, line, and type. The interface is the code itself.
Designers still need to understand color, form, and typography, but the tool to create their work is the script they write, not the compiled output of a program created to mimic the methods of the past.
Great web designs are built from the ground up without compromise. Web designers paint on an ever-changing canvas governed by an evolving set of rules. Without a deep understanding of these rules and materials, work created with easy to use but constraining tools will always come up short.
Are you a coding designer? Drop me a line.