As a product designer I’m obsessed with solving problems, and lately I’ve been designing with a niche programming language.

Clojure carries a stark notoriety among developers, despite being a tremendous feat of design. David Jarvis, a former teammate of mine, encountered that reputation during an interview last year.

[David] … so long as it’s not Lisp I’m sure we’ll be fine!

[Them] … it’s Clojure.

[David] (not knowing what Clojure is) *strange gurgling sound*

Later that year I experienced Clojure’s reputation for myself when I was invited to give a talk about ClojureScript—a variant of Clojure that compiles to JavaScript.

After the talk, one developer told me that he had never met another designer that used Clojure.
At first I was surprised, and then concerned.

“Maybe there’s a reason no other designers do this”, I thought.
Then I remembered how I answered the first question I was asked that night—whether or not I enjoy writing ClojureScript.
My answer was “No.”

I didn’t get it initially.

At that time I was still working at CircleCI, and my answer reflected my experiences with a recent rewrite of our front end web app to Om—a React wrapper for building interfaces.The ordeal taught me discipline but it also made my job harder.

The Clojure syntax is completely chaotic, with parentheses everywhere—at least that’s what I thought last year.

Since then I’ve since left CircleCI to work full-time on Precursor, a collaborative prototyping tool that also has a ClojureScript front end.

As opposed to last year, not only would I say I enjoy writing ClojureScript now but—along with Om—it has ruined traditional HTML and JavaScript for me.
I have a newfound sense of freedom, and that’s why I started learning code in the first place.

Now it all makes sense.

I wasn’t a designer for very long before I realized that I wanted to write my own code.
High-fidelity mockups make terrible deliverables when it comes to product design.
They waste huge amounts of time during development and never even see the light of day.

Learning HTML and CSS was the first step in taking ownership over my work.
They kept me involved in most of development but I felt like a co-pilot, rather than the captain.

Preprocessors like Less, Sass, and Haml made things a little better.
They taught me about fundamental programming concepts such as variables, functions, and loops.

It was JavaScript frameworks that led me to my goal.
Learning to use ClojureScript, Om, and React finally made me feel like I was taking ownership of my design work from beginning to end.

ClojureScript saves me from other development tools.

Before ClojureScript, I mostly used Haml for templating.
It helped me avoid some defects in HTML like repetitive tagging.

However, Haml is more like a compromise than a solution.
Its initial beauty fades with the first link-punctuation ritual.

%p
Sentence with period after
= succeed "." do
%a{href: "#"} a link

ClojureScript lets me avoid repetition and remains utterly simple while doing so.
There’s no song and dance; just solutions.

[:p "Sentence with period after " [:a {:href "#"} "a link"] "."]

My favorite part about ClojureScript, is that it shares its syntax with Clojure itself.
I improve my understanding of Clojure as a side effect of my normal workflow.
I can’t think of a better way to learn.
That’s great design, by any standard.

And it protects me from complex design workflows.

The icon system I made for Precursor is a good example of the inherent elegance within ClojureScript.

Using Illustrator, I constrain every icon to a single area.
This helps me prevent inconsistent proportions.

I relate this process to ClojureScript with a map that defines all of my icon paths.

...
:stroke-menu-top "M5,25h90"
:stroke-menu-mid "M5,50h90"
:stroke-menu-btm "M5,75h90"
:stroke-lock-top "M75,45V30C75,16.2,63.8,5,50,5S25,16.2,25,30v15"
:filled-lock-btm "M87.5,95h-75V45h75V95z"
...

Then I specify which path goes where.

...
:menu {:paths [:stroke-menu-top
:stroke-menu-mid
:stroke-menu-btm]}
:lock {:paths [:stroke-lock-top
:filled-lock-btm]}
...

This type of structure makes styling a breeze.

[class|="stroke"] {
fill: none;
stroke: @color;
}
[class|="filled"] {
fill: @color;
stroke: none;
}

To call this function I just specify the icon I want.

[:div (common/icon :menu)]

The paths associated with that icon get piled up and styled together.
This lets me go from ideating to shipping in under 30 minutes.

Every product designer should know about ClojureScript.

I challenged myself to work outside my expertise, because I knew designing the same way everyday would dilute my passion.

My optimizations are individually subtle but they save me hours every week.
I spend that time on more important things, like polish.
And therein lies the point; Clojure makes me more efficient and extends my reach as a designer.

Don’t let fear prevent growth.
You don’t have to learn Clojure—even though it’d be nice knowing I’m not alone—you just need to learn something.
There’s something you can learn right now that will help you a build better products.
Find it and make something.

Written by Danny King.

Read More