In “A City Is Not A Tree”, Christopher Alexander describes a living, natural city as a semilattice of interconnected, overlapping elements. In opposition, he proposes that artificial cities lack richness because they design away suppossedly unneccessary interconnections, reducing them to tree structures.

As an example, let’s imagine Melbourne’s laneways. Over a long period of time they have become naturally complex nooks and crannies such that when you walk them you discover hidden surprises at almost every corner. The essential character of Melbourne’s laneways is the accumulation of many overlapping details that each feedback and influence each-other over time. Put it this way: if you tried to recreate Melbourne’s laneways from scratch, all “Melbourne-ness” would be lost.

By contrast, let’s imagine Canberra. If you tried to recreate Australia’s capital city, you’d do a better job. Canberra is high-modernist urban architecture devoid of rich surprise because “no piece of any unit is ever connected to other units, except through the medium of the unit as a whole”.

Natural semilattices and User Interface design

The “natural semi-lattice” metaphor is a good way to understand how complex processes can’t be reduced to simple templates. Delineating the skillsets involved into distinct, separate domains cuts their interconnections and creates artificial order. The result lacks character.

The same holds true for the complexities of User Interface design. Why, for example, do most websites look the same these days? It probably has something to do with the rise of “magic bullet” UI frameworks such as Bootstrap. Reduction of complexity accidently eliminates richness.

Self-sufficient UI creators

Hi! I’m a designer who really enjoys coding. I’m self-taught, and I started more than a decade into a graphic design career. Here’s a few reasons why I think designers should code:

  • If you work with others, learning to code will help you understand the systems you’re working with, and the skills and people that will overlap your domain.
  • If you work by yourself, learning to code gives you agency and self-sufficiency. This gives you more options in the current work climate, for more reasons than just getting paid.

How, might you ask? Working self-sufficiently as a web creator, I can execute what I’ve designed without asking or paying another person.

Not asking someone is more important than not paying. As soon as more than one person is involved in a project, I have to communicate to them a tangible vision of what my design is. This can be difficult. In this way, asking is more expensive than paying. Nor does paying prevent asking. (This doesn’t apply if you’re in a shit-hot “pizza team” who finishes each-other’s sentences. But most of us aren’t.)

If I can code the design myself, I don’t have to communicate the nuance of aesthetic or interaction choices. Nor do I have to roll out every instance of those choices as approximate “design” mockups to use to communicate with. It saves time and energy not having to communicate with another person.

Designing with code is the most immediate connection

A cook sips the broth. A pilot turning feels G-forces pulling below. A painter paints, and sees mistakes become new ideas. As Bret Victor says:

Creators need an immediate connection to what they’re creating.

Code is far more immediate than “design” tools. If you’re a designer who codes, your design is the code.

(I’ve got opinions on tools and frameworks within both design and development domains which I’ll leave for another time, but let me note that Storybook is the perfect UI design system tool.)

But wait, it’s pretty hard

There’s no doubt that doing both UI design and development is hard. Progress in design tools and modern frontend development is rapid and ceaseless, which is both a help and a hindrance. So when you’re simulating a computer in your minds—as developers do—it’s taxing to take a client call about strategy.

But if it’s an all-you-can eat buffet, do you dig in all night? You can’t master everything, and you shouldn’t try to. You can, however, embrace the VUCA, go taste-testing and make informed decisions about what interests you. In this situation, I’d prefer the problem of abundance over that of scarcity. The trick is to reframe the problem as not one of input, but of throughput. Jump in. See what sticks.

The trick, William Potter, is not minding that it hurts. — Peter O’Toole as Lawrence of Arabia

If you can let go of your identity, expose yourself to strange, new ways and give yourself “the freedom to search in the darkness where the problems lie”, you’ll come out the other side with some mutant pollen stuck to your skin. Those mutant pollen are “one-percenters” waiting to compound. And that’s why designers should code.

When designers code

When designers code they understand surprising and contradictory insights are part of the trials of writing software. This is crucial knowledge that will increase a designer’s agency and makes better outcomes.

If you work in a team, you’ll have higher-resolution information you can use to communicate with, and make better decisions.

If you work by yourself, you will have greatly enhanced your ability to implement your vision, which is, as David Cole says, the “hallmark of great craftsmanship. It teaches you both the limits and the possibilities of your medium.”

Code chops help designers to see and understand the “necessary overlaps” that allow characteristically rich experiences to happen.

icon-camp-fire icon

Ps. I write a bi-monthly email letter about visual design, user experience and website development through the lens of people and attention. You should sign up: