Last week I built the first draft of an app. I used LLMs to write all the grind parts of it. This was the result of a formalisation of methods for coding with LLMs over the past few years brought to bear to smoothly execute a new app from the ground up.

Dependent on the tempo or phase within a project, I feel like I can now defer over 50% of written code to an LLM, leaving me to act as reviewer and giving me more time to think about my intentions and potential iterations.

This is incredible. And it requires revising my approach to coding. Paying attention to the phase and tempo was always important, but now that I can offload most of the coding work, holding the shape of intention and possibility in mind is the thing.

Here are some strategies and tactics for doing this, which I’ll then elaborate on:

Strategies:

• Clarify your thinking with LLM criticism
• Choose between speed vs. thoroughness
• Use reasoning models for architecture
• Use workhorse models for general code
• Manage the context window
• Recognise that you are the bottleneck
• Track your original questions
• Don’t anthropomorphise the LLM
• Make time to keep up with the scene

Tactics:

• Always speak to the computer in applicable contexts
• Use specific tools (Cursor/Windsurf)
• Use Warp as a terminal with LLM integration
• Follow the “be terse” rule for context management
• Write product overviews at project start
• Add feature summaries to project rules
• Maintain a changelog
• Supply the right docs
• They find JavaScript easy but CSS hard
• Take breaks to maintain perspective

Note that most of what I’ll address here is hopefully general for LLM coding but also probably quite specific to a developer who already knows a stack quite intimately (for example, mine is web apps). I didn’t discuss anything related to prototyping UI with v0 or Bolt, nor about working with brownfield projects (I’ve recently done this, post coming), both of which have their own specific methods.

#Strategies

Write down what you’re trying to make. Then ask an LLM to criticise it. Use it to clarify your thinking.

Do I need to be right or fast? Be explicit about your next question in terms of speed vs. thoroughness. This is the essential determinant for every request. Pay attention to the tempo and the phase you are currently within.

Use a reasoning model to think about architecture. This kind of thinking always benefits from immersion and time and sometimes it’s hard to even stop. Reasoning models can give you a leg up in a matter of minutes. o1, Grok 3, etc.

Use a workhorse to write general code. That is, anything from small bugs through to a small feature. Sonnet 3.5 is great. Sonnet 3.7 is currently too conscientious!

The context window is important. If you have a long chat, you’ll have a large context window. The effectiveness of your discussion will decrease. It’s that simple. This indicates you haven’t done the work to think about what you’re doing.

You are the bottleneck. As context windows continuously increase, you are the bottleneck. And you always will be. If you haven’t retained an understanding of the current situation, then you are Mickey Mouse on Bald Mountain, heralding forth an army of broomsticks to flood your codebase and your comprehension.

Record your original question. No matter what, sometimes you’re going to lose track of what’s happening and what you’re trying to do. That’s part of being human. Nothing wrong with it. Feel free to delete the code (you kept your Git clean, right?) and start again.

Don’t anthropomorphise the LLM. It’s awesome auto-complete, not a person. You’re not being judged, and no one’s watching you, so feel free to ask dumb questions. If you get frustrated with the LLM, pay attention to that, take a break and start again.

Keep up with what’s happening. Take note of what other people in your scene are doing and make space to test it out yourself. Sure, there’s a huge amount of noise but small experiments are easy and sometimes they pay off.

#Tactics

Speak to the computer. Typing is too slow. Because this was new for me, I found it hard to bother trying. Then it became a game-changer. I use this app. You’ll find you want to speak to it in every app, everywhere.

Use an LLM-enabled IDE. Cursor, Windsurf, Cody, whatever. It doesn’t matter so long as you find an IDE with built-in LLM support that you like and stick to it long enough to build habits. Personally, I use Cursor with Warp as my LLM terminal so I don’t have to remember grep.

Write your global rule. This one is good for web apps. “Be terse” is most important because, most of all, you have to manage the context window in your own head.

Write a product overview. Write a bare bones project overview at the start. Describe the app and its purpose and list your tech stack. Then don’t worry about it. If you find recurrent problems with your LLM code, update it.

Add feature summaries as project rules. Once you’ve completed a feature, write a summary (or ask your LLM to). Note the flow, the gotchas, what files used and add that to your project rules.

Use a changelog. As you start to compile features and your application grows, it’s useful to have a change log that you can give to the LLM and yourself to help keep on track and not solve problems twice.

Supply the right docs. Yes, you can supply URLs for crawling but sometimes you have to do more than that. Whether that’s for libraries or surrounding code, you may need to provide specific documentation for an LLM. I use Repomix as an IDE plugin or RepoPrompt’s code map feature. Keep it under 32k tokens!

LLMs find JS easy but CSS hard. I find that if I have issues with grid or something like that, an LLM will fail abysmally and repeatedly. Maybe it’s because I really struggle to articulate those visual layouts in words and I’m mostly sticking with chat, not prototyping tools like Bolt, but I find CSS much easier to write myself.

Take a breath. Checking where you are in the process is how you prevent yourself from getting emotional with the AI. If you ask an LLM for text, it goes brrrrrrr. If you’re lazy and unintentional with those asks, you’ll get Mickey’s broomsticks swamping the basement of your mind in no time. You don’t want brrrrrrr, you want understanding and solutions. You are the bottleneck to that.

#Summary

As my strategies and tactics have formalised, and given new models and better interface tooling for their use, I feel more capable and productive. When I consider new ideas, I have more confidence to think bigger about complex UIs that previously I’d have postponed for fear of complexity and scope. I’m also thinking more about the product and less about the code.

Undergirding all of this—much the same as any attempt at excellence—is humility. In order to use these large language models effectively, one has to let go of one’s identity. Brian Eno always called himself a “non-musician” and that allowed him to think freely about generative systems for creativity. The same applies here.

I think the best general metaphor for AI is as a mirror: it reflects back whatever you want. If you’re a hacker who treats their codebase like a toy train set, you may dismiss LLMs instinctively. Likewise, if you’re a designer who knows CSS, you may hit walls with LLMs quickly. In both situations, it pays to understand AI as the mirror on the wall showing you your reality faster than you anticipated.

How will you respond?

Cool description of forward deployed engineers (FDEs) from Nabeel Qureshi’s post on his time at Palantir:

Going onsite to your customers—the startup guru Steve Blank calls this “getting out of the building”—means you capture the tacit knowledge of how they work, not just the flattened ‘list of requirements’ model that enterprise software typically relies on.

It goes like this. Get people who can code web apps, send them to the client’s workplace to sit in with the client’s employees to watch how they work and come up with new ways to build software that the engineer thinks will solve the client’s needs while living onsite.

This is the Palantir solution to “the system is the problem”: parachute engineers into context to create an “end-to-end solution to [their] specific problem, and to hell with generalizability”.

The ability to deduce solutions steps from observation (ie. “design”) is something every thoughtful and driven person can do—even and especially engineers—and it mostly starts with being immersed in the problem space. From there, with a knowhow of standard software patterns and flows at hand, defining the needs and relations between said needs can start to make up a good solution.

“Asana, but for building planes”. You took disparate sources of data—work orders, missing parts, quality issues (“non-conformities”)—and put them in a nice interface, with the ability to check off work and see what other teams are doing, where the parts are, what the schedule is, and so on. … These are all sort of basic software things, but you’ve seen how crappy enterprise software can be—just deploying these ‘best practice’ UIs to the real world is insanely powerful.

“Just deploy best practice UIs to the real world” is a great doormat for those “right under my nose” opportunities we’ve all thought of in the shower.

If Nabeel’s post resonates, you should also read this linked from his footnotes:

If you want to order the wrong wine with the fish, the wait staff will simply tell you no.

A set of dual posters for easy glanceability, strewn across the city of Melbourne, September 2024. Focussing on the core Kalaurie brand message of locally made craftsmanship, these posters extend the brand I designed for the website.

Learn more about the Kalaurie brand.

Rummaging through notes, found Chris Beier’s excellent summation of John Dewey’s ideas about experiencing art.

Dewey claims we should be looking at not the physical work (an urn, a painting) but the experience of engaging with it. … all experiences take place over time, and no experience can be instantaneous. …though (paintings) are physically, static objects, they’re experienced through the exploration of the composition over time.

This means that “the emotional unfolding of an experience is fundamentally ordered”. Furthermore, the ordered unfolding of the recollected experience accounts for how we “explain the orderings that are enjoyable in stories” because the building, plateauing, and unwinding of narrative stuctures mirrors the process of evolutionary fitness.

Fitness is a continuous scale, which we can understand as a growing and shrinking delta between a complete unity with the environment—that is, the ideal state for the creature—and the actual state of the creature. Narratively-satisfying emotion is produced by the rhythm of that delta growing and shrinking over time.

Satisfying experiences mostly follow a “need → effort → fulfillment → satisfaction” cycle because they “come from the process of taking actions that have the effect of improving fitness”.

Fitness moving back towards equilibrium produces narratively-satisfying emotion.

Experiences are driven by and judged on fulfillment rather than mere enjoyment. In the age of mass distraction and mediocre art, this is renewing rhetoric not just for the cornered artist, but also the cornered product manager, the cornered service provider, the cornered designer, the cornered engineer.

Scott Walker from “30th Century Man” (25s, turn the sound on, it’ll loop):

So, there’s spaces in TILT, but more spaces than this, for silence and for language to emerge. And that’s why the words are important, because you have to feel the phenomenon of the words coming out of silence.

Such a fabulously vulnerable invocation. I’m thinking a lot about language, speech and silence as AI gathers pace, and I keep referring back to this little snippet.

Ps. If you don’t yet know his music, you should try it. It’ll take time, and then it’ll change your life.

Bob Dylan on Rimbaud, from “Chronicles: Volume One” (published 20 years):

I came across one of his letters called “Je est un autre,” which translates into “I is someone else.” When I read those words the bells went off. It made perfect sense. I wished someone would have mentioned that to me earlier.

That is, without love and theft, new things can’t happen:

If I hadn’t … heard the ballad ‘Pirate Jenny,’ it might not have dawned on me … that songs like these could be written. In about 1964 and ’65, I probably used about five or six of Robert Johnson’s blues song forms, too, unconsciously, but more on the lyrical imagery side of things. If I hadn’t heard the Robert Johnson record when I did, there probably would have been hundreds of lines of mine that would have been shut down — that I wouldn’t have felt free enough or upraised enough to write.

The Rolling Stones—like Bob Dylan, also named from love, in their case, Muddy Waters—same thing:

They wanted the Chess sound … to be exactly like the originals. But it came out like the Rolling Stones. Marshall Chess

Zadie Smith says the same thing:

I am fascinated to presume, as a reader, that many types of people, strange to me in life, might be revealed, through the intimate space of fiction, to have griefs not unlike my own. And so I read. Fascinated To Presume

Lewis Hyde summarises:

Dylan seems to me to be saying, “If I am anything, it is because I have allowed others to inhabit me.”

Via Oliver Gilan’s The Cloud Hasn’t Been Won, the context is PaaS cloud companies:

Beating the hyperscalers on convenience and developer experience is a good idea because when it comes to those things the hyperscalers tend to be dogshit. The hyperscalers are basically APIs over physical infrastructure but most companies care more about building their product and solving customer problems than they do about infrastructure so it’s an attractive proposition if you can simplify that for them.

But this strategy is a trap for a number of reasons. Being more convenient and easy to use usually means being simple. … But the moment you want to do something outside the beaten path then the simple platform makes it extremely difficult or impossible and as a company grows bigger the likelihood that they need to do something outside the beaten path grows.

Between the backwards pricing model and the lack of functionality, platforms that focus on simplicity end up directly incentivizing their most successful customers to churn.

Also applies to any infrastructure pace layer within a tech stack: your UI library, your database, your CI/CD pipeline, how you write UI styles, etc.

Defaults kick-start momentum. As the project progresses, it’s easy to find that convenience means you’re locked the system that enabled you in the first instance. It can be hard to affect change within that system without extracting yourself from it entirely, which is costly. Easy start now, pay later.

Been thinking about this in relation to the Convention over Configuration mantra and how Tailwind’s success was built on it (sure, not as complex as PaaS but it applies). Defaults/convention/convenience is a good thing until it isn’t.

See also this post.

#Design systems live by consistency and comprehension

For design systems, consistency and comprehension are everything. A good design system ensures consistency of implementation through the configuration of code that implements it. It needs to be:

• easy to comprehend without foregoing the nuance that good design requires;
• scalable and maintainable without compromising consistency.

Using my default stack of React with Tailwind, I’ll show you how setting your own defaults for typography, colour and spacing is not just the starting point for differentiating your app’s look and feel. More importantly, it drastically cuts down the code we have to write and maintain, which reduces the mental load of implementing styles in a systematic, consistent and error-free way.

I’ll start with a major criticism that I see all the time, and then breakdown a series of configuration steps that I use to solve it.

#Ease of use does not equate to ease of knowledge

Tailwind makes it easy for developers to write styles, which is great for rapid prototyping. But that ease doesn’t guarantee good design or a scalable, maintainable design system.

Defaults and zero-config tools like Tailwind are the infrastructure pace layer that create more time for building. But if you’re scaling an app that uses a design system to differentiate itself, you can’t rely solely on “free as in lunch” out-of-the-box configs.

If you run with the default Tailwind config and push style management to the application of classes on components, the result is often a mess of hard-to-reason-about classes spread across components, masquerading as a design system.

Above is a prime example. It is almost illegible and takes signficant time to understand, let alone manipulate. Attempts to do so are highly likely to lead to duplication and error, spiralling away from design consistency throughout the app.

It is easy to smush your design classes into a single className. But there is no ease of knowledge in doing so.

#Configure your system for ease of knowledge

Ease of use comes with trade-offs. Using someone else’s standard means relying on their knowhow. This can be beneficial, but it can also be a trap. Let’s take a step back and think about what the basics of a design system consist of:

• typography
• colour
• spacing
• responsiveness (which includes color mode)

In the context of React with Tailwind, these and many other design system elements are set in the Tailwind config, which we can customise.

const config = {
  theme: {
    fontSize: { /* ... */ },
    colors: { /* ... */ },
    spacing: { /* ... */ },
  },
};

#Typographic defaults

Have you ever struggled to remember the correct letter-spacing for your small text? What if you could set it once and forget about it?

We can set leading (line-height) and tracking (letter-spacing) as parameters for each font-size tuple directly in tailwind.config. This means we don’t need to set leading or tracking every time we use a font-size class. Set it once here, then forget it.

fontSize: {
  small: [
    "13px",
    { lineHeight: 1.5, letterSpacing: "0.015em" },
  ],
  body: [
    "16px",
    { lineHeight: 1.5, letterSpacing: 0 },
  ],
}

Using text-small now sets the tuple of font-size, line-height and letter-spacing in one class. Enclosing the core typographic settings centralises their implementation in the config instead of across a codebase. A huge win for maintainability.

/* 13px/1.5 with 0.015em letter-spacing */
<div className="text-small" />

#Color defaults

We can use CSS variables to set responsive colours under :root and html.dark scopes. This means we write and manage one class, such as bg-canvas, instead of two, such as bg-gray-100 dark:bg-gray-800.

@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/gray-dark.css";

:root {
  --color-gray-base: var(--gray-1);
  --color-gray-bg: var(--gray-3);
  --color-gray-line: var(--gray-4);
  --color-gray-border: var(--gray-5);
  --color-gray-solid: var(--gray-10);
  --color-gray-fill: var(--gray-12);
}

Because I’m using Radix Colors here, I don’t need to set the .dark scope as that’s already done for me. Another reason I like Radix Colors is that they’re easy to customise.

Then set the CSS variables in the Tailwind config.

colors: {
  canvas: "var(--color-gray-base)",
  background: "var(--color-gray-bg)",
  line: "var(--color-gray-line)",
  border: "var(--color-gray-border)",
  solid: "var(--color-gray-solid)",
  fill: "var(--color-gray-fill-contrast)",
}

Using bg-canvas now sets the appropriate color in light or dark mode. Removing this duplication across a codebase centralises color management to our config instead of spreading it across the implementation of classes on components. A huge win for cognitiion and maintainability.

/* sets --gray-1 as #fcfcfc on :root or #111111 on html.dark */
<div className="bg-canvas" />

#Semantic naming

I advocate semantic names for colours and font-sizes because semantic naming is a forcing function that ties meaning to use. Doing so removes implementation guess work and reduces error.

I’ve seen countless projects where inconsistent gray-50, gray-100 or gray-200 are all used for backgrounds. This is easily solved by defining a color called background.

In the same way, it is easier to remember the names for dark and light text colors when they are called fill and solid. It’s harder and more error-prone when they’re called gray-900 and gray-600 because then you have to remember specifically that it wasn’t gray-950 and gray-500, or gray-800 and gray-700.

But naming things—and agreeing on naming—is hard. In the spirit of zero-config, I suggest taking Radix Color’s backgrounds, borders, solids & fills paradigm. Or this palette semantics.

And once you’ve set this in tailwind.config, Typescript will jog your memory at your fingertips with autocomplete.

#Avoid namespace clashes

If you’re extending a Tailwind theme and not writing your own, don’t use a scale key that’s already been used. You may inadvertently overwrite a class that you need to use.

You’ll note in the previous colour config example that I set the --color-gray-base var to canvas, not base. If I used base then using this color scale as a text colour (text-base) would clash with the default font-size base value, which is also text-base.

This isn’t a downfall of customising the Tailwind config, it’s a legacy of its theme naming: setting font-size or color classes in Tailwind both use text-*.¹

#Spacing defaults

We can also use CSS variables to set spacings.

:root {
  --height-nav: 80px;
  --height-tab: 54px;
  --space-inset: 20px;
  --container-text-px: 660px;
  --container-hero-px: 1000px;
}

spacing: {
  em: "1em", /* relate icon size to parent font-size */
  nav: "var(--height-nav)",
  inset: "var(--space-inset)",
  text: "var(--container-text)",
  hero: "var(--container-hero)",
}

One could argue this is over-engineering. Except that when it comes time to compute complex interactive layouts like sticky headers, scroll margins and so on, this upfront configuration work makes it straight forward and error-free, to the pixel.

<div className="top-[calc(theme(spacing.nav)+theme(spacing.tab))]">
  <div className="scroll-mt-[calc(theme(spacing.nav)+theme(spacing.tab))]">
    /* ... */
  </div>
</div>

Note again the use of semantic naming makes it easy to remember and use.

#Augmenting your Tailwind config

We have now configured typography, colour and spacing tokens in a manner that is easy to understand and maintain in a single, centralised place. And we don’t need to wrire as many classes to implement the system. Winning. And there’s further steps we can take to reduce this implementation overhead.

#Clamp your classes

What if I told you there’s a way to completely avoid writing text-lg lg:text-xl xl:text-2xl p-2 md:p-4 lg:p-8 everywhere?

We can avoid setting responsive font-size classes by using clamp as a a font-size value in tailwind.config. Here’s the simple clamp function I use.

fontSize: {
  title: [
    /* clamp(17px, 14.1429px + 0.5714vw, 21px) */
    generateClampSize(500, 1200, 17, 21),
    { lineHeight: 1.5, letterSpacing: "-0.015em" },
  ];
}

So instead of writing text-lg lg:text-xl xl:text-2xl we can just write text-title. Once again, by hoisting font-size responsiveness into a clamp value, we avoid the “implement classes” pitfall again, saving mental effort, errors and debugging time.

Keep in mind, this means we’ve moved from text-lg lg:text-xl xl:text-2xl leading-none tracking-wide to text-title by properly configuring Tailwind. Winning!

/* 17px at 500px, 21px at 1200, fluidly calculated inbetween */
/* …with default line-height and letter-spacing also specified */
<h2 className="text-title">
  Heading copy
</h2>

We can also do this for spacing. When extending a theme, I prefix these keys with d for “dynamic” to differentiate it from the default spacing scale.

spacing: {
  /* lower value is 2/3 of upper value */
  d4: generateClampSize(500, 1200, 10.5, 16),
  d8: generateClampSize(500, 1200, 21, 32),
  d16: generateClampSize(500, 1200, 43, 64),
  d24: generateClampSize(500, 1200, 64, 96),
  d64: generateClampSize(500, 1200, 171, 256),
}

This allows us to write py-d24 instead of py-16 md:py-20 lg:py-24. This alleviates the weight of holding a range of website versions for each media-query in our minds. Instead it encourages us to picture fluidly responsive layouts where measurements don’t matter as much as consistent relationships.

<main className="pt-d24 pb-d64 space-y-w8">
  <header className="container max-w-hero space-y-1">
    /* ... */
  </header>
  <article className="container space-y-2">
    /* ... */
  </article>
</main>

#Summary

Well-crafted UI is your last defense against the coming slopwave of careless AI apps. Don’t spread you design system into classes all across your app. Configure it.

Yes, there’s an upfront time cost. But it pays off in spades: less code, fewer errors, greater design consistency, and a team that actually understands the system.

Here’s how customizing Tailwind can save you time and headaches so you can focus on the irrational amount of care it takes to build UI that works in the blink of an eye:

• Use tailwind.config to its full potential. Take the time to centralise and group your design tokens and avoid the “implement classes everywhere” trap.
• Use clamp() for fluid typography and spacing.
• Set color variables on :root and .dark for effortless dark mode.
• Name colors and spacing semantically: background beats gray-100 any day.
• Relate icons to text size with size-em.

At 51 stories high, split second decisions count. This is the situation for Bungy guides at the Auckland Skywalk. And at any moment in this situation, there’s a potential once-in-a-lifetime photo opportunity which guides nor customers wouldn’t want to miss. To make it easy for them to not only manage the tour but get that shot, I worked with DWSto design an iOS app that made it quick and easy to do just that.

#The Problem

Guides had to know how to use and navigate around the app at a glance. Not only are guides tasked with photographing the golden moments of each customer, they also have to handle tour logistics. So the app had to allow them to plan around the schedule and update tours on-the-fly, without the guide losing their capacity to act in the moment.

#Solution

#Design from priorities

Given the constrained situation for the guides, the app needed to prioritise for their usability: it had to show guides how to use it without them having to think in the moment.

We spent time researching requirements with the guides and came up with a list. As with any good research, the list was long. And the problem with long lists of requirements is they are never good user experiences: the guide’s capacity to act in the moment is lost if the app’s UI allows every possible function.

Like all good design work, many of the workflows required multiple design iterations. The app’s workflows are straightforward and simple now, but the surprising factor in all good design work is that the simple often looked terribly complex to begin with!

#Balancing design decisions

As you can imagine, the worst thing we could do for the guide’s situation is force them through superfluous steps in a given workflow—that could cost them the shot of the day. The key to striking a balance between functional requirements and guide usability was creating a team of three—designer, project manager and guide expert—who were empowered with all design decisions.

Good design is never the result of one person but rather a small group who can—and are empowered to—make the best decision together in the context of the app’s priorities.

#Leverage HIG standards

Unexpected and surprising user interfaces cost users in ways that is hard to measure. A minute lost in a maze of steps means frustration, and with frustration comes loss of task focus, and if it continues any longer, loss of brand trust—if this seemingly simple workflow doesn’t work, what else doesn’t work?

Sticking to Apple’s HIG standards to implement workflows within the bounds of common user interface paradigms means users will already be familiar with how things are supposed to work.

The design’s job was to put that common knowledge to best use, and—wherever possible given the app’s custom requirements—give guides the interface they expected. No surprises, no frustration and no loss of focus.

#Outcomes

After a rigorous testing period, the app is now in use. With the coinciding release of the Epic Platform, the app has garenered generouse reviews from New Zealand tech and adverture media alike.

AJ Hackett Bungy NZ takes iPhone leap, looks to sell new social media-friendly system to other adventure tourism operators” Chris Keall, The New Zealand Herald, April 18 2024

What once required multiple photographers and a director in a production process akin to a live broadcast, now – from the moment the bungee cord is attached to your ankles through to the jump itself – it can be captured using 13 specifically placed iPhone 14 Pro devices. John Hannan, Escape, September 8 2023

The system uses custom iOS apps EpicShot Experience Capture and EpicShot Guide App to take and edit content for customers in real time and AJHBNZ worked with development partners DWS to design to build the software. Paul Yandall, Tourism Ticker, April 18 2024

Three, two, one, snap: AJ Hackett teams with Apple to capture action Australian Geographic Adventure, October 20 2023

Definitely not. Too hard to have full consensus across everything, and that blocks flow if every idea has to be authorised. Disagree and commit, as they say. Allow players to bring what they’re good at to the table. It just needs to be acknowledged that the big thing in creative work is: just because you fall in love with an idea, doesn’t mean it’s the right idea right now. One can always keep ideas in one’s trick bag for later. “Kill your darlings” as writers say.

How this extends across the group’s awareness probably determines the success of a band. It allows players to say “cool!” in unison (or indeed say “huh I don’t get it?”) and then be able to sleep on it, work through the intuitions and reasons together. It can be less a decision process than a generative process! Give it 5 minutes, riff on it, see what happens with the mutation that occurs… Are the players able to be open to this? Can the initiator be humble enough to understand that this process of prototyping makes an idea real, even if it wasn’t what she was exactly thinking of? Can they stick at it together when all roads seem to hit deadends? Who can gesture, kindly, as to what’s missing?

Being humble together with ideas is underrated. Further points if the team can keep ideas as secrets for later use — not for competitive reasons, but because the group understands that ideas must have a right time, and a right people, and they can meanwhile retain them as in-jokes — that’s the group for me. I’d bank on Ad Roc still having old loops ready to use but he won’t until he jams with the right friend…

Group roles have to find their rhythms. A ringleader is important. But they may not be the decision-maker, or they may only be ring-leader for in-jokes, but not about harmonics. And who is the glue across the personalities? Who freely gives away the energy that allows the band as a whole to get shit done? Who is decisive? Who is always reticent to decide, but is able to leave open options until the idea mutate to their best forms? Who has a track record of being just-in-time? If everyone is moving the needle across their mandate and there is mutual admiration, then the aggregation of personalities will start to become more than the individual contributions. Learning how to bend like a palm tree on disagreements means knowing oneself: agree to disagree — yet keep the possibility open of being wrong or patiently articulate the missed angle with tough respect — and then commit to forward motion. I can attest to that after 12 years of marriage.

If you wish to know more of what this kind of scenius behaviour is like, I highly recommend all 9 hours of The Beatles: Get Back documentary. They’re incredibly funny, affectionate and evidently had so much fun in their camaraderie together, playing each-other off for laughs, being ridiculous, twisting not-good-enough with a turn of phrase back at themselves, halting mid-song in self-depreciation for another to say “t’weren’t really bad, George”. Never once a terse word.

The wise crack, the dance, the riff, the joke, the funny face; all tools for scenius. How often do you see them in action in your place of work?

When building software products, we often hear two separate phrases with different meanings used interchangeably: iteration and prototyping. They’re not the same thing, but they’re related over time during a build process. The easiest way to see the difference is to map them on a Hill Chart.

Prototyping comes first, at the start of the hill. We’re trying to find the best method of solving for a particular intention within the project and use that as a tool to make better decisions. For example, do we show an onboarding flow as multiple choice radio buttons or do we rephrase the questions as yes/no and use a swipe left/right flow? If it’s the later, how responsive to touch will it be on a smartphone?

Iteration happens after the apex, when we’ve “walked up hill” to discover all the interrelated dependencies so that we’re able to decide exactly how we’re building the thing. Iteration is the descent along a singular path towards a release. No new requirements should be introduced. Instead, like any editing process, we’re probably shedding them as we nail down the existing details and make them work.*

During a build process, we always hope not to discover anything that puts the project at risk. And that is the job of prototyping: discover technical or design possibilities and determine if they’re opportunities or trade-offs. If there is some essential discovery that puts the project at risk, we want it to occur during protoyping, if at all. But we would not want nor expect that during any iteration work. That would be a sign of not enough initial prototyping or even insufficient research prior to signing-off the build process.

It’s important to note that any project build phase should be aiming to release as soon as possible. Deferring features for later releases is the easiest way to stick to the timeline. This means we can also think of iteration via projects, not just within a project.

We can now generalise these methods together as specific tempo-based jobs: Prototype to discover. Iterate to release.

#Prototyping does not mean “design tools”

Don’t make the mistake of thinking that because Figma has a “prototyping” mode that its your prototyping tool. You may want figure out how far you can get with the Google Sheet API before you add a database, and you can’t do that with any design tool.

And if it is a design hypothesis (of the visual, flow or interaction kind) that you want to test, then designing in code is as close as possible to “the nitty-gritty material of the medium” you can possibly get. As I’ve said before, what often looks perfect in Figma can look not at all perfect in the reality of the browser. Inspect your assumptions in the DOM.

#Developing a spidey sense for discover-or-release

While these two concepts are not the only two things that occur during a build phase, discover-or-release is a useful abstraction to distinguish between attitudes in decision making at different times during the process. Here’s a few ways to think of them:

• Prototyping is uphill. Iteration is downhill.

• Prototyping discovers requirements. Iteration binds requirements.

• Prototyping creates a flow of investment. Iteration creates durable stock.

• Prototyping pulls towards complexity. Iteration pushes towards simplicity.

• Prototyping diverges the possible. Iteration rounds the probable.

Which ever way you say it, the key question is: are we trying to discover ways to solve a problem or are we trying to release a solution?

This helps us—as a team—stay focused on doing the right thing at the right time to prevent unnecessary loss of momentum.

#Simplicity on the far side of complexity

Simplicity is interrelationships that make it feel more like one thing. Complexity is interrelationships that make it feel like many different things. Ryan Singer

Alfred North Whitehead said “the only simplicity to be trusted is the simplicity on the far side of complexity.” Simplicity is always the desired outcome for a software product because it represents a user experience that wins hearts (“delight”) and minds (“don’t make me think”). To get there—to make the thing whole for a person using it—the build process must traverse upwards through discovery to the fog of decisions before we can slash-and-burn, edit-and-cut, spit-and-polish downwards through the thicket of details.

I worked at Vana as designer and frontend engineer for a few years, helping them explore various product ideas in the crypto and AI space. In that time we built almost a dozen product prototypes as we navigated the idea maze of what secured, personalised data might look like in the age of AI.

One of those prototypes was Portrait: a web app that provides text-to-image generations using a GPT large language modelbased on personal likeness. The original version of Portrait was released in September 2022 after 7 days of development. It took off and we’ve been iterating on it ever since.

Late 2022, we also explored personal “daemon” chatbots based on the same personalisation data we had collected from Portrait. GPT-me was one such app from these experiments.

Working at Vana was fascinating for two primary reasons.

• The first is that we’re building products with a technology that is very new to consumer-level applications: AI. The two-fold conundrum, which Portrait has so far navigated, is figuring out how AI can be used within software products successfully, as well as how AI products may impact typical users unaware of the power AI has right now, let alone the near future.

• The second reason is that after spending my prior career in Australian and English cultures, joining the highly skilled and ambitious Vana engineering team was incredibly energising. Being San Francisco based, Vana’s company culture always included a willingness to challenge the status quo and take on hard problems with unusual speed.

Visit Vana Portrait.

The Library of Economic Possibility connects economic knowledge across society’s concerns. Their mission is to provide the website as a knowledge tool to improve the quality of discourse in order to foster the next economy.

I designed and built the site and developed a graphic brand system in collaboration with founders Kasey Klimes and Oshan Jarrow over an 18 month period starting 2021.

At the time, I was very interested in ways of enhancing bodies of text with “at hand” pathways to enhance citations, hyperlinks and other appropriate metadata. The marginalia card I designed and built here is a solid example of this.

The knowledge system itself was made up of a five building blocks: reports, insights, sources, authors and tags—all bi-directionally linked to create pathways between them.

The design system range of typography, colors and iconography all grew from a classic logotype using Klim’s Heldane serif.

Visit the Library of Economic Possibility.

Last year, Facebook accidentally overwrote its own DNS records leading to a “cascade of errors” and worldwide outage for all its platforms. The outage was likely caused by Facebook network engineers accidentally locking themselves out of the larger configuration system during an update. This quote, purportedly from a member of the recovery team, is particularly insightful:

…the people with physical access is separate from the people with knowledge of how to actually authenticate to the systems and people who know what to actually do, so there is now a logistical challenge with getting all that knowledge unified.

In the last fortnight, Atlassian had the longest outage they’ve ever had. What started out as “downtime” on April 4, turned into 10 days of complete shutdown. And they took until day 9 to formally communicate with their customers. We can only guess at the chaos behind the scenes.

Of course, we can say that’s Big Tech, they should have the resources and bright people to figure this out and stop this happening. Shame on them. Or we can say that that’s Big Tech, that’s different to the scale of what we do. It would never happen to us. And yet if we pause for a minute and consider all the mundane moments that occurred in the prior days, months and perhaps years that lead to these incidents, we may gain a unitary insight into how organisations of people work with code.

#The world of code

A piece of code takes an input to produce an output and if you add the wrong input, that code itself is none the wiser. But just above that piece of code, we have a world in which the human organisation and the people involved provide the wherewithal for the code to be written into a codebase: what it’s for, how it works, its dependent inputs, the chain of its related outputs and so on.

Now picture in your mind how that codebase relates to the larger system at play: the intent of the people in the organisation, their multiple, mixed and shared drivers for what they do, how they co-operate and the end customers they’re beholden to.

If we consider the world of code in which the Atlassian Incident took place, we might ask ourselves a few simple questions: did they safeguard the kind of input for this piece of code? Were the people doing the work tired and simply made a mistake? Were there pre-existing issues that had been acknowledged among the group? Was this communicated and with which group?

Once we consider questions like these, it is easy to see that the code itself is but one small piece in a larger puzzle that is mostly about human agency and co-operation.

Because it is so malleable, we can do all kinds of new things with code, some of which have been surprisingly valuable for the communications and business spheres in the past three decades. And precisely because it is so malleable, code always contains the possibility of surprising us towards the other side of the reward spectrum: risk.

#The human code

Beyond a certain point—as Atlassian and Facebook will attest to—what is complicated can turn into unbounded complexity. It is easy to gawk at the runaway train of incidents resulting from such complexity until you too wish to make use of what code might do for you. Then you will engage in your own “world of code”: a place where code does exactly what you and your organisation tell it to, in order to reap the returns across the risk/reward spectrum.

How then do we mitigate risk in the world of code? Our best advice is to understand that behind the code is always a fallible human who understands how the code works. And that human has to co-ordinate and communicate with other fallible humans around their ideas of what that code should do.

In such scenarios, we should be humble not just about our ability to programme complicated systems, but also about our ability to mutually understand, trust and co-ordinate with each-other.

A unitary insight into working with code is that it’s not about code, it’s about people.

A website for Anchor Ceramics, a Melbourne-based ceramics studio.

My favourite part of this project was taking the time to properly render the background gradients to transparent over all the content, avoiding browser artefacting.

Visit Anchor Ceramics.

No content…

Brand and website design and build for Aquiba, who designed and built smart water meters in Australia for Australian conditions. The crossover of long-lasting IOT hardware with consumer and administration systems was fascinating to learn about, and design for. Much needed local technology knowhow in the age of climate change.

Unfortunately, Aquiba was a victim of the Covid economic downturn, closing down shortly before the brand and website work went live.

Visit the Aquiba staging site.

Replier is a web app that lets you quickly respond to questions buried in long messages by choosing what’s important and removing the rest. It helps one to avoid losing important info in the vortex of chat messages and email chains.

I designed and built Replier in collaboration with Jeremy Wortsman at Jacky Winter in 2019. It was Jeremy’s idea and to this day we still love geeking on tiny utility ideas like this (ideas gestating, watch this space).

It didn’t take over the world but it did get some kudos across the tech community on launch. And Superhuman, the email app, incorporated our idea into their product a few months after we launched.

Check out Replier.

Ps. I still like symbol and typography interrelation in the logotype. The spacing between the keyboard shortcut “r” works both in the logotype and as a logo, large or small.

No content…

Website rebuild, CMS and performance strategy, and website management over a three year period 2019-2022.

Details, details, details. Check out the animated dot moving between the menu labels on page load.

Visit Studio Round.

I am drawn to art in all it’s forms: from painting to poetry to film and music. What I did not really feel any affinity to, before working with Kalaurie, was fashion. But as you can see from her works, designing and building her website became an easy exercise is learning how to appreciate it.

I originally built the site in 2018, before Shopify had any robust API for Javascript web apps. This year (2024), I rebuilt it using Shopify’s new Hydrogen system and Remix web framework, which was a pleasure to work with. The result is a much more performant experience.

On the Collections page, I simply allowed Vlad Savin’s excellent photography to take centre stage.

My favourite part of the site is the contact page. Sometimes forms can be quite boring, so I choose to extend the faux artisinal copy language—as though the website had a speaking part in “The Age of Innocence”—to create a contact page with attitude. The bold typography does the rest.

Not every page stuck to the “hero then cards” formula. That would quickly become habitual, and may lead to losing user attention. So I used alternative graphic layouts on the quieter, information-driven pages.

Visit Kalaurie.

A website for The First Principle, a Sydney-based a B2B marketing and corporate communications consulting firm.

Visit The First Principle.

Note well. While this post details a major feature release for Cleared, it also serves as an overview of my contribution to Cleared. I built the Cleared website and product from it’s initial commit through to its sale, working with the 3 co-founders as tech lead, designer and frontend engineer, orchestrating a team of 5.

Cleared is a digital health startup, recently acquired by LifeMD, that delivers allergy medications directly to your door. Our users visit the Cleared website, complete an allergy quiz, get custom recommendations, and then order treatments for delivery directly to their home address.

The Cleared Dev Team started Q3 2021 with a big scalability problem: each Cleared Quiz was a standalone piece of code, so it took forever to create a new one even though our product team wanted to spin up new quizzes quickly. Enter the quiz machine: a scalable, on-demand quiz system that allows the Cleared product team to quickly create quizzes with minimal developer involvement.

What follows is an overview of the Quiz Machine build process. If you don’t wish to read further, please watch the demo above or check out the Quiz Machine in action.

#Our Stack

There are three parts to our stack: the frontend, the backend, and Services. We use a NextJS application with Chakra and Formik on the fronted end. On the backend, we use ExpressJS with the Bulletproof Architecture and Postgres. We host both the NextJS and ExpressJS apps on Render.

There are a large number of 3rd-party services needed to make a digital health company like Cleared work properly. Here are some of the most important ones:

• Stripe for payments
• Capable Health as our quiz CMS
• MDIntegrations as our Medical DB/EHR

Both Capable Health and MDIntegrations are new services to the Cleared stack that are needed to make the Quiz Machine work.

#The Frontend

The Quiz Machine has 5 phases on the frontend:

• an initial eligibility page to save the user spending time if they were not above a certain age or lived in a US state that was not eligible for our service
• the quiz form itself
• a product recommendations page, generated from the quiz answers
• a sign-up or login phase where we also collected a person’s proof of personal identity and pharmacy choice
• a checkout where a use can understand their order and manage their cart prior to purchase

We also incorporated bookmarking so that a signed-in user can leave the application, come back to their account, and receive a “todo” notice which will take them back to their bookmark within the specific Quiz Machine step.

Finally, the checkout is the cornerstone of the Cleared ecommerce system: having gone through the previous 4 Quiz Machine phases, we want to “tie the bow” on the Quiz Machine experience. We support many types of purchases:

• One-off purchases
• Subscription purchases (30 day and 90 day renewals)
• Over the counter treatments
• Doctor prescriptions

The checkout interface is multi-faceted: it has to group and clarify each product and clearly associate it with the listed totals to make it easy for a user to understand what they’re buying.

And because we require a Doctor’s prescription (via the MDIntegrations EHR), we don’t charge these payments immediately. Instead we accept the payment details (via Stripe) and await the Doctor’s prescription before triggering a Stripe charge.

#The Quiz CMS: Capable Health

Cleared quizzes have many features: HIPPA compliance, conditional flows, product recommendations, analytics and more. We wanted a CMS that would support such rich quizzes and allow our product team to easily create ones: enter Capable Health.

Capable Health offers a survey product that allows our product team to log-in and create new quizzes on-demand. Our frontend then takes the quizzes created in Capable Health and renders them using the Cleared design language.

Two great benefits of Capable Health are product recommendations based on quiz responses (ie. If a user answer Yes to question 2, recommend treatment X) and quiz analytics. Both of these features are not provided in a typical CMS, especially quiz analytics. Setting up an easy-to-use dashboard of quiz stats and metrics was easy. This information is great for our marketing team to investigate things like the drop-off on each quiz.

Extending Capable Health, we were able to implement condition flows that allow quizzes to be dynamic based on users answers.

#The EHR: MDIntegrations

In the world of digital health, physicians need an Electronic Health Record (EHR) to manage sensitive patient data, handle patient cases and prescribe medications in a HIPAA compliant manner. We chose MDIntegrations as our new EHR replacing a legacy system.

One of the key benefits of MDIntegrations is webhooks. With webhooks, we no longer have to maintain our own system of cron jobs to periodically query the API. This is very useful for keeping synchronization between our server and our EHR system, saving the time of our doctors. When events reach our server in real time we can process cases without delay, meaning our doctors can approve medications, wait for payment and transmit the prescriptions all in one sitting. We also built a queue system to make the webhooks even more reliable. This adds the extra reliability of an events endpoint over webhooks.

MDIntegrations is an API based EHR. Being able to tightly integrate lets us reflect actions taken by doctors within the EHR in the Cleared portal. Doctors can recommend medications to a patient at any time without leaving MDIntegrations and a cart will automatically be created on the Cleared portal ready for the patient to checkout.

#Putting it all together

Our ExpressJS server coordinates between the frontend and all our services like MDIntegrations, Capable Health, and Stripe. Users interact directly with the Cleared frontend, while doctors can work within the tools they’re familiar with and handle cases entirely through MDIntegrations and the product team can create and modify quizzes in Capable Health.

#The biggest obstacles

Picking and then integrating with the right services for the quiz machine (ie. MDintegrations, Capable Health, and Stripe) was a large obstacle. In hindsight, we know exactly what is required to get the Quiz Machine working but making the right decisions among many different service options was a big challenge. One of the most important things we did during this period was developing close working relationships with the dev teams of MDIntegrations and Capable Health. Inevitably, things broke. And then we worked together to fix them. In using their product, we helped them scale their offering, and we got something that better suited our needs.

Here are some additional obstacles:

• managing scope creep as we discovered the service requirements;
• orchestrating external services together as a coherent user experience;
• HIPAA compliance across our services to ensure the security of our patient health information;
• allowing quizzes to be created and managed at scale by a non-technical product team;

#Future Directions

The Quiz Machine has been a great improvement to the Cleared Stack but it isn’t finished yet. There are improvements to make and features to add. Here are some of the projects are team plans to work on in the future:

• Checkpointing + To-Dos. We want to make it easy for a user to pick back up where they left off on a quiz. If they only got halfway through a quiz, we want to send them an email reminder to finish. If they completed the quiz, we want to show them a to-do in their home screen to finish checkout on the quiz.
• Landing Pages. Each quiz needs a beautiful landing page that is easy to spin up. Right now, we can create landing pages but it takes a lot of time for both our designers and dev team. We need a more scalable solution.

While invention is fun, it only continues to exist if it’s maintainable. We did a good job of planning ahead for feature additions and maintenance in future by choosing to build base-level primitives (such as standardized query parameters). Whatever design decisions we made, we made with the intention of writing code that was as easy to understand—and extend or delete—as possible.

I’ve always enjoyed the poetics of ancient Chinese philosophy and by extension Zen Buddhism. Whereas friends just didn’t get The Art of War or Tao Te Ching, I found them obvious and favourable within the first page. Yet even though I’ve read these books repeatedly over two decades, I’ve never lived within these cultures, let alone even visited their countries. So my appreciation has been mostly for their poetics.

I’ve been doing a reading club on strategy for the past few months. We read books and pool notes on them. One book that has particularly stood out for me was Deciphering Sun Tzu: How To Read ‘The Art Of War’, which Ben Mosior gladly shared. “Deciphering Sun Tzu” helped me understand the poetic paradoxes of ancient Chinese Philosophy as an alternative and coherent strategy to how we’ve been raised to think in Western society. Here’s a mutated summary of Ben’s notes, mostly for my own understanding.

#From goals to consequences

The Western tradition of strategy is a means-end rational framework: it implies the use of certain means to achieve desired ends. Western thought assumes strategy to be causal, not consequential.

In contrast to Western strategic thought, the aphorisms of Chinese strategic thought may appear contradictory, even paradoxical. Our initial readings of Sun Tzu, et al. are more akin to reading poetry, which naturally lends itself to pondering metaphors, not checklists of action.

Indeed, pondering metaphor is the intent. Aphorisms of dual meaning are meant to help one understand the unforseeable nature of reality. By starting with “not knowing”, Chinese strategic thought begins at “the inherent potential of the situation (Shih)” and is “carried along by it as it evolves.”

In Chinese thought, the end is impossible to predetermine (which is, strangley, the ultimate rational means-end insight). This means no plan can be worked out in advance. Instead, one can only understand consequences arising from conditions. Opposed to the Western mode of the rational means-end efficacy, the Chinese mode can be described as paradoxical condition-consequence. The condition-consequence mode teaches one not to aim directly, as a first-order goal, but to allow an effect to happen, as a second-order effect.

#Conditions and effects

Condition-consequence is a process which transforms the situation by effects. This is markedly different from the means-end mode where a goal leads to direct action in order to achieve a result. There are subtle implications:

• Conditions occur “upstream”. Like a fisherman paying attention to the weather, or a surfer to the waves, she won’t act without favourable conditions. Attention, patience and non-action become virtuous.

• There are as many consequences as there are conditions. No two consequences will be alike. Outcomes are expected to be interchangeable.

Now we can understand how condition-consequence is manifested in “yin-yang” as a continuum of complementary opposites: Heaven-Earth, strong-weak, fast-slow, many-few. The yin-yang dialectic embraces ever-changing reality: whatever is opposite is a complementary condition to be respected. Externalities are always included in Chinese Strategy. The certainty of a result is taken far more lightly because “plans are easily disrupted. Increased certainty actually exacerbates this effect.”

Far from being two irreducible or even mutually exclusive states, yin and yang (or A and not-A) are two consecutive stages that are produced by the deployment of reality.

#How to act

Given this understanding of condition-consequence as the mysterious unfolding reality of yin-yang, how then should one act?

A yin and a yang is what is called the Tao

The Tao is the uninterrupted interplay of yin and yang. Unifying their duality must happen before proceeding in The Way (Tao). This unification should be like water:

Assisting the natural tendency is always preferable to opposing it as everything carries within itself its own seeds of destruction when it over extends.

The fundamental principle of Tao is Returning: “return is the movement of Tao”. And the fundamental function of Tao is Yielding: “yielding is the practical application that effects the manifestation of return.” Now we can understand the paradoxical poetry of Chinese strategic thought as a system that tries to keep inside the tempo of unfolding mysterious reality, and as a method of playing with the polarity of situations in order to deceive an opponent.

Thus, Chinese strategy is less a plan designed to achieve a predefined aim than a plan intended to outwit an opponent. By understanding and creating conditions, one allows reality to unfold in their favour. Conditions which predominantly draw on human factors or irrationalities can be created for the defeat of an opponent. The Chinese strategem is to discover potential or propensity, encourage its impetus, pushing it to the extreme, and finally exploiting it when it reaches the tipping point.

In this way, “yielding” is essential because it prevents one from reaching the extreme prematurely. It also greatly enhances one’s chance to “out-flex” his opponent. As in the Chinese and Japanese martial arts, technique overcomes force. When you rush without technique, your force can be returned with ease.

We can now understand the paradoxes at play in ancient Chinese philosophy are in fact a method of penetrating the enormity of experiential understanding about the tempo of action:

Plot against the difficult while it remains easy, Act against the great while it is still minute. Difficult affairs throughout the realm invariably commence with the easy, Great affairs throughout the realm inevitably commence with the small. For this reason the Sage never acts against the great and is thus able to complete greatness. What is tranquil remains easily grasped, What has not yet betrayed signs is easy to plot against. Lao Tzu, Tao Te Ching

#How to think

For learning, you gain daily; for the Way, you lose daily.

Within ancient Chinese strategy, learning concretises mental models, which are always simplified models of reality “thereby preventing reality from being grasped as it actually is.” Thus, Tao stresses unlearning and not knowing, so as to see clearly. In this way, Tao resembles the Zen idea of “no mind” (Zen Buddhism was originally influenced by Taoism but they are two different philosophies). Because “the essence of warfare is to betray its model”, when one has unlearned and keeps “no mind”, it becomes particularly difficult to anticipate one’s moves. This is the Tao as strategy.

Again, the water metaphor helps to summarise the Tao philosophy: by being formless, one is endlessly adaptable, always open to potential. Your Shih is constantly replenished. And because potential always preceeds impetus, you can naturally find for yourself the right action under the right conditions.

One must find the leverage point and the timing before acting. By shedding dogma, by killing all your darlings, your mind can see clearly the opportunities right in front of you. You are not bothered by finding problems you could never have foreseen because you know that is the natural order. You find the difference between your plans and what actually happens causes you no friction. This is how “the weak defeats the strong” and how “striking second” are “the products of the organic structure of Chinese strategic thought.”

#Propensity and impetus

Victories are won through propensity rather than force or actions.

Your strategy should recognise and assist natural propensity by encouraging its impetus. Just as a surfer waits for the right wave.

Never interfere with an enemy that is in the process of committing suicide. Napoleon Bonaparte

In Chinese Strategy, the end is pre-determined. Like Kurtz in Apocalypse Now, Verbal Kint in The Usual Suspects or Macbeth’s witches, great strategists know the future before it happens. More than simply “wait-and-see,” a great Chinese Strategist “foresees-and-waits.”

“Double, double toil and trouble,” the witches chant, casting their spell on their Macbeth’s propensity. To foresee the future, set the conditions for other actors to make their natural plays, avoid being meddlesome and instead wait for the tide of action to arise. And when conditions have given way to consequences, and when it is obvious to everyone that a sacrifice must be made, act decisively once and for all.

In the words of the ancients, one should make his decisions within the space of seven breathes. Lord Takanobu said “If discrimination is long, it will spoil.” Yamamoto Tsunetomo, Hagakure

What most of us lack in order to be artists, is not the inceptive emotion, nor yet merely technical skill in execution. It is capacity to work a vague idea and emotion over into terms of some definite medium. John Dewey, Art as Experience

Rather than understanding taste as the particular way a person does a thing, I will argue that taste is a measurement of how well a person is able to see and act within a problem space. That it is the ability to skip ahead over previously assimilated decisions to get to the heart of a matter. And that the process of doing this over and over within a domain turns the many small insights made into a muscle memory of shortcuts that are stored as aesthetic feelings, away from the cognitive expense of language and reason. Much more than just a style of doing, good taste is a measure of a person’s intuitive understanding of a problem space.

#Taste matters because it creates differentiation

A differentiated product is “better” in some way, but all too often putting your finger on exactly what is better is a frustrating exercise. Ben Thompson, Selling Feelings

Given our revised definition of taste as a unit of creative problem-solving ability, the question is, so what? Why does taste matter? As software destroys, transmutes and unbundles markets into recursively smaller niches, the user experience of these products becomes a major battleground for competitive differentiation. When all is said and done, a successful product will be decided by how well the product’s interfaces make people feel. A frustrating interface will be dismissed, and a satisfying interface will create a customer.

But what makes an interface successful? Beyond speed of performance, cohesive information sequences and anticipation of the human context and need, designing an experience that hopes to create feeling can only be done with feeling. The difference between good and bad becomes a matter of who can bring to bear greater focus and knowhow within the problem space. It becomes a matter of who can build with better taste.

#Taste is a measure of cultivated attention

Because information grows through human use, problem spaces have infinite depth. After deliberate practice within a problem space over long periods of time, what we have learned is assimilated into aesthetic intuitions. If intuitions are made of knowhow¹ that don’t need to be encoded into language, then taste is made of libraries of intuition.

Intuition is a suspension of logic due to impatience. Rita Mae Brown

These libraries help us shortcut logic and leap over the decisions we’ve already converted into taste so we can immerse ourselves deeper into the problem and see evermore clearly what matters. In this way, taste is a process of compression and acceleration through cultivated attention.

#Taste creates the competitive advantage of perspective

I think this place is beautiful, if you look at it right. David Lynch

Taste is stored at a pre-linguistic, pre-logical stage, and is understood as an emotional feeling before we can talk about it. Beauty is also understood in this manner. In fact, the two are often confused because good taste is more often than not beautiful. But beauty is not taste. Beauty signals rich information that is worth paying attention to. Whereas taste informs the creation of new information based on a history of previous attention.

Taste, like beauty, is misunderstood. And I think that’s because it’s difficult to rationalise. Even though we aren’t rational at all, we like to think we are. As a result, anything that’s hard to describe in words, we don’t trust. And taste is difficult to describe in words. We only get things like taste and beauty when we’re receptive to our intuition and curiosity.

PayPal was a very friendly name. It was the friend that helps you pay. Napster was a bad name. It was the music sharing site. You nap some music, you nap a kid. That sounds like a bad thing to be doing. Peter Thiel

The simplicity of understanding in Thiel’s quote hides a receptivity to aesthetics, which we’re used to rationalising away. We make them all the more powerful when we fail to notice them as rich information in plain sight. As we increasingly live our lives reacting to an attention deficit, we tend to fill the empty moments where previously feeling emerged. But that does not prevent most of our decisions being post-rationalised based on barely conscious gut feelings. We are parsing aesthetics and heeding them as emotions as automatically as we digest food. We may not be able to describe in words what we want, yet we know it when we see it. And I venture, in broader terms, we know it when we feel it.

When you have a cultivated your attention for a problem space so deeply that you’ve turned your knowhow into feeling—what German speakers call fingerspitzengefühl, translated literally as finger-tip-feeling—then you have created for yourself the competitive advantage of perspective. As Alan Kay says, “A change of perspective is worth 80 IQ points.” Thus, we can say that taste is a measure of imagination growth.

#You can’t buy taste

If we are drawn to beauty through curiosity,² then a continued personal interest within this beautiful domain may lead us to begin developing taste within it. As we move from interested to fascinated, our learning within the space over time allows us to form a deliberate practice for working with it. The level of effort is driven not by willpower but fascination. The work is self-sustaining because it is constantly rewarding, even when it is difficult. We are cultivating taste for a given domain when we choose to do a thing and do it well. As such, taste can’t be bought.

There are many alter-egos for the process of acquiring taste that I’ve just described. It has elements of Joseph Campbell’s Hero’s Journey myth. Steven Pressfield called the hard parts of this process The Resistance. The Greeks called it Daemon, which translates as a person’s “inspiring force” or genius. And the Latin meaning for genius was “innate talent”, or “the guardian spirit which watches over each person from birth”.

In Lewis Hyde’s “The Gift” he tells the story of the original Latin concept of genius, which our modern meaning is now diametrically opposed to.³ Instead of being a post-hoc title to canonise great work—as we currently understand it—genius was understood as an innate talent given to every person at birth. The gotcha was that we couldn’t fully, potently receive the fullness of our gift until we could meet it as an equal by labouring with it in gratitude. This practice can only be done without obligation, at its own pace, and when we finish, we will barely remember producing the results. In other words, refined taste—the fulfilment of one’s genius—can only be ground out in what Csíkszentmihályi called “flow” states over a long time. It’s expensive stuff.

Taste, like ethics, can’t be simply transferred between people as information. It is too complex. Instead, it has to be cultivated within each person according to the whims of that person. And each person’s knowhow is locked up within them unless that person manages to convince other people of the worth of their perspectives.

#Sharing taste across the firmbyte

Our society’s ability to accumulate information requires flows of energy, the physical storage of information in solid objects, and of course our collective ability to compute. César Hidalgo, Why Information Grows

The greatest bottleneck to the economy is not helping first home buyers to get on the property ladder but transferring the encoded knowhow trapped within an individual to a network of people that can, as César Hidalgo says, “crystallise imagination” into the solid matter of a scalable product.

Our collective ability to compute suffers from the high cost of transacting information between our selves. Each of us live completely individual experiences, which means we all know things nobody else knows. It is impossible to encode your experience for another so they feel it as you did, yet with mutually understood interests and stories, and an eagerness to socially engage, communication is made. So while taste can’t be bought, some form of it can be shared.

Scenius stands for the intelligence and the intuition of a whole cultural scene. It is the communal form of the concept of the genius. Brian Eno

Scenius is a compound of the words “genius” and “scene”, and was coined by Brian Eno to represent the creative intelligence of a community. Given Lewis Hyde’s revised concept of genius as a cultivated gift, then scenius is the cultivated attunement of each team member’s genius within a focus of mutual interest.

How an individual’s taste is shared depends on the prior embedded knowhow within each person and how each person relates to everyone else on the team. Are you able to express and connect your ideas? Are others receptive to theses ideas? Does this generate interesting new conversations? Can you listen in return? Do you feel energised?

Sure, there’s work to be done. But unless the work is orchestrated as a combined effort with an awareness of who’s playing what note, and why, the product produced is far less likely to make people feel good enough about using it. And if you can’t get people to feel good enough about using it in the first place, they’re not going to use it at all.

#Good taste makes good things

Economic development is not the ability to buy but the ability to make. César Hidalgo, Why Information Grows

Just as you cannot not communicate, you cannot not have taste. Rather than being a throwaway complement, taste describes a person or a team’s intuited ability to comprehend and create within a problem space.

Taste is cultivated by a natural curiousity for a problem space. Because one find it fun, it becomes easy to spend deep focus honing one’s attention and skills within the space, squishing knowhow into smaller and smaller bundles in order to discover more and more interesting things within it.

Good taste is the embodied ability to work a vague idea and emotion over into terms of the medium. It is the invisible dark matter that makes one product a superior user experience over another. Indeed, you will know you’re successful people call your product “beautiful”. Good taste makes good things.

No content…

A shadow passes just outside our field of vision. But somehow we know it happened because we feel tense. Some sense has triggered our awareness, a sense that isn’t logical, a sense that we instead feel.

We sense the world before we are consciously aware of it through instinctive reactions to the aesthetics of our environment. We understand these reactions in ourselves emotionally. We do this well before we have time to use our linguistic system to think and create meaning. And we do this sensing unconsciously, like breathing, every second of our waking lives.

These processes happen quickly. At a glance, we notice and assess the multitude of patterns before us. When a pattern signals danger, we feel immediately that “something isn’t quite right” even though we can’t “put our finger on it”.

And when a pattern draws us in, we feel it’s beauty, and our curiosity. Like a shadow felt but not consciously seen, we’re hardly aware that the language of aesthetics is our first mode of understanding the world.

#Danger and beauty

When we use language, we have to think. We have to choose words, connect ideas, assemble metaphors, and then speak them. Thinking is expensive. We use aesthetic-based pattern-matching to give us answers before we consciously start thinking. We rely on aesthetics to make very fast decisions based on a library of intuitons built over a lifetime. The language of aesthetics is pre-verbal by necessity.

When we find a pattern in a scene to be dangerous, like the snake above, then we are electrified, instantly ready to react and avoid danger. All consciousness is focussed on the danger.

When we find symmetry in a scene to be pleasing, then we are calm, ready to begin investigating the scene. We may describe the scene as “interesting” or “beautiful” and begin consciously understanding it. We are drawn to beauty and repelled by danger.

Danger and beauty are the two extremes on the spectrum of the language of aesthetics. When we sense danger, we do not think. Instead we react to avoid the situation. Beauty, however, invites us to pause, pay attention, and then think. To find something beautiful is to find information we can use in our favour.

#Beauty invites participation

We understand danger overtly. Our body reacts like an electricity switch, automatically overriding the need for conceptual thought. Beauty, however, is far more subtle. Beauty invites. Beauty is a lure.

Predators often use beauty to their advantage. The Siphonophone (above) is an exotic creature, even to it’s prey. Spiralling itself across a large area to attract whatever may pass, it invites curiosity and investigation. Each tentacle can sting, sedate and consume. There is no warning here, only beauty.

As an adrenalised response is the defense for a target animal, a beautiful invitation is a weapon for those seeking targets. The Siphonophone uses beauty to prey, eat and survive.

While predation is a zero-sum game, other games are not. When a flower uses beauty to attract partners in its gene dispersion scheme, every participant wins. Beauty invites participation and attention.

#Beauty is opportunity

As pattern-matchers, we seek beauty because beautiful things signify opportunity. Like all animals, we intuitively know that beauty says “this thing has potential, it’s worth investigating”. From pain to pleasure, beauty is the subtle, calm opposite that invites us to think and act.

When found ripe by pre-agricultural humans, the bulging blackberries (above) would have been gorged before another animal could have taken the opportunity. The first glimpse of the berries on the tree would have elicited hushed enthusiasm, then quick maneuvering to capitalise on the scene.

Creativity is often misunderstood. We think it requires some form of talent or genius when, in fact, every human is innately predisposed to creatively find and exploit beauty. We just get hung up on concepts like “creative genius” because, as social animals, we hunger for status. But before beauty is given over to the subjective interpretation of taste, it has already triggered a calm and curious feeling that leads us to believe “this is interesting and worth my attention”.

In this way, a spreadsheet can absolutely contain beauty. Humans naturally seek beauty in order to make use of it.

#Arrational beauty matters more than we dare admit

Our arational response to beauty is the reason why advertising sells not to our intellect but to our emotional feelings: “you’ll feel better when you have this”. It’s why people will say “I’ll know it when I see it” even though they can’t explain what they’re looking for. It’s why a picture is worth a thousand words. It’s what Buckminster Fuller meant when he said “if the solution is not beautiful, I know it is wrong.”

Arrational beauty initiates thinking. I can tell you to think of the brilliantly patterned sea slug that introduced this post, and then describe the above picture of Reebok Instapumps as “venomous”, and I know you’ll understand me.

Faced with a decision between two objects, we’ll choose the one we developed an unaware bias for moments ago. By accessing the language of aesthetics, we know good from bad in an instant. Our innate sense for beauty draws us towards opportune information, with which we find ways to leverage our environment. But we only begin inspecting, interpreting, connecting and collecting information when beauty tells us it feels right.

#Beauty and Peak Attention

Every one of us post-rationalises our decisions as it suits us. The reasons for our choices are deeper than we think. While they won’t tell you, people will sense incongruence and walk away. Or they will notice seamless and cohesive symmetry in a fraction of a second, and begin inspecting.

As we move toward “peak attention”, it pays not to underestimate how powerful, calming and attentive the feeling of beauty can be.

Today I want to describe how to wander, which is the first step in my “3 Ws” maxim for generating new insights. It may be a very small idea, but nothing generative happens without it. And as an example of how easy it is to forget this crucial step, I’ve not mentioned it once in any previous post so far. Such is the way fathoming where and how beginnings begin.

I’ve introduced a number of conceptual aphorisms in the past month of this blog that I’m refering to in this post. In a previous post, I described two basic prerequisites that kickstart any creative process: love and theft. I also previously described how one might go about loving and thieving their way towards creativity, which I call the “3 Ws”:

Wander > Wonder > Wunder

So then. To wander, just practise boredom.

Practice boredom

There you go. That’s it. Entirely. It reminds me of Jon Kabat-Zinn saying “where ever you go, there you are” or “simply return to the breathe”. It’s stupid simple. It’s obvious. And yet it’s difficult to remember and it’s difficult to put into practice.

As an aphorism, it’s quite beautiful. It’s a poster. It’s a door mat. Beauty helps make things easier to remember (I’m going to argue soon for aesthetics as the primary mode of human comprehension).

#To practise boredom, do nothing.

So, how does one practice boredom? Simply, one does nothing. That is, avoid doing things. Avoid the low-hanging fruit, like daily routines, todo lists, being productive, coveting goals, having a TV show to watch, or making dinner. Don’t be productive. Get some rest. Stare out the window. Stop talking.

When you do this, you can suddenly find yourself remembering things past, and connecting them to things seen today. Or suddenly discovering the logic of ants. That’s wonder; fascinating interlinked connections will appear like invisible hyenas laughing at you from their hiding place.

I’ll caution you to please not expect that your boring ideas will be amazing. Stop expecting things to happen. Stop. Just enjoy some boredom. Laugh back at the hyenas. A daemon will arise if it wishes.

When I was a buying records like a maniac, I would go through the entire eBay soul 45s listings posted on that day, most days of the week. Although it was a ridiculous and time consuming habit, I never found it at all tedious because discovery was always, possibly, at hand.

I would tell myself that I had to follow the tangents, to see where they lead, and that was all I needed to do to keep discovering wonders. “Don’t buy what the others are buying”, I’d tell myself, referring to the record collector scenius I’d eventually share my finds with, “because that’s boring and it’ll cost too much. I’ll only get one new record instead of seven.”

As I seem to do here, I’m extending my thoughts on the previous post, Rules for Record Collecting, which can be summarised as simply optimise for interesting. This little aphorism seems to subsume most of what I’m naturally drawn to do. But why? And how come it appears to be an update of follow the tangents?

To think through the second question, I thought I’d list a few similar “wunderkammer engine” aphorisms, those in the long line of similar substitutes for the optimise for interesting maxim.

#Other ways of phrasing optimise for interesting

Follow the tangents

As discussed above, I think this one’s mine. Sounds like a Stereolab song title. I can attest that it’s a very high pay-off method for finding curious records.

Stay hungry, stay foolish

Big old favourite. This one’s from the back cover of Stewart Brand’s final Whole Earth Catalogue (check out that awesome use of the Windsor typeface). Steve Jobs quoted it. It’s good.

Do what you love

Halt! Let’s quickly talk about context. Meaning can’t happen when an idea, like this maxim, becomes too diluted across a culture. This phrase can still work for you, but only if you can make your way through the entanglement of popular misinterpretation that it sufffers from. And if you get through that thicket, don’t expect to get paid for it for 10,000 hours (the creative process has to start from an urge well before it turns into something society will pay for, so that’s just not what we’re talking about here). This is a flakey aphorism. Stand clear.

Escape competition through authenticity

A reborn version of do what you love, but as Silicon Valley Venture Capitalists like Peter Thiel or Naval Ravikant would phrase it. This also means it can be a potentially overwrought and misunderstood maxim—and it’s dismally banal wording helps—but for now the word “competition” cloaks it, unless you’re familiar with Thiel’s primary idea in Zero To One. So at this time, I’d say it hides in plain sight. The addendum clarifying phrase would be something like “nobody is as good as you at being you”.

Note well: this is what all product brands aspire to. Most fall short because they mistake this aphorism as a just a message to convey inspiration with to their customers, yet the real power would be in the brand company itself becoming authentic. That is, to live as it speaks, to have skin in the game. To see this in action, visit an Aesop store.

Follow your bliss

This is pretty much Joseph Campbell’s philosophy on life, which rose from his criticism that our passivity can be “the sin of inadvertence, of not being alert, not quite awake.” It’s very similar to do what you love, but here’s where words and context matter: the idea of the sacred is somehow omnipresent in this phrasing because it’s a Campbell quote.

To each his own zeal

I swear this was a phrase in my Mum’s edition of a Rumi book. But I can’t googlefoo it. It’s basically a revision of Campbell’s great line. I’ve remembered it for a long time, probably because it’s quite poetic.

Chance favors the prepared mind

“In the fields of observation, chance favours only the prepared mind” was Louis Pasteur’s originally translated quote. This one hints at the fuller dimensions of “obliquity”—rather than rushing towards what you think are perfect opportunities, instead practise your ability to see by travelling at a tempo that allows one to look, look, look and fully digest observation. And thus prepared, the opportunities will present themselves to you, because you learned how to see.

Wander, wonder, wunder

This one roughly maps to boredom begets curiosity begets discovery, but as memorable onomatopoeia. Wunder is my shorthand for wunderkammer, which translates from German as a “cabinet of curiosities”. See a post I wrote last month for a full description.

I’ll leave it there for now. Maybe I’ll add more later if they come to mind. Please email me if have another.

#Remembering how to see

Just like the ridiculous human eBay crawler I was, following every tangential hyperlink I could find, these aphorisms are bound by a practice of seeing. That is, of developing one’s unique abilities by first paying attention to the fact that one was inordinate attention to a particular thing, and then, if it’s feeding you beyond what you can express in words, spend “flow state” time cultivating your “finger tip feelings” for that which you are attending to.

Yesterday I described John Boyd’s bloody-mindedness as the perfect example of extreme disagreement as a type of creative fuel, where bloody-mindedness is a finer grained name for love, the first prerequisite of the creative process. The second prerequisite is theft, because a blank canvas has too many possibilities. These things need to happen before you can create anything new:

Love > Theft > Art

Today I wanted to very briefly describe a framework for finding what you “love”. That is, how can you find things that utterly fascinate and completely capture your attention, where they naturally draw you into a flow state such that you have no sense of time passing? And how can one then proceed to cultivate this enjoyable state?

Here’s my take for a compressed framework to maximise for interesting:

Wander > Wonder > Wunder

I use “wunder” as shorthand for wunderkammer, which translates from German as a “cabinet of curiosities”. I previously used the garden metaphor to describe wunderkammer: it’s a place where one keeps their discoveries as a collection and allows them to bloom.

It’s worth translating my lingo here. These “3 Ws” roughly map to:

Boredom > Curiosity > Discovery

…but I think the “3 Ws” step flow is far more interesting.

In summary: to find what you love, maximise for interesting. Go wander. Stop and wonder. Collect what you discover in a wunderkammer place.

My friend just texted to tell me enthusiastically he’s just finished reading the Robert Coram biography of John Boyd. This reminded me that when I read the book, my biggest takeaway wasn’t learning about the events that lead to Boyd’s genius theories, it was instead his sheer bloody-mindedness.

Boyd was extremely confrontational, and despite his self-professed “low IQ”, he followed his fascinations into independent study to produce a number of revolutionary new combat theories. He never gave an inch, and so spent his entire career ostracised by most colleagues. He died forlorn, unsatisfied that he’d achieved his life’s work.

His theories—Energy-Maneuverability theory, Destruction and Creation, and the OODA loop—are all now highly reputed across many domains, not just the military. But none would exist without Boyd’s extreme dedication to his own thoughts. He spent half a century standing his ground against the United States Military, perhaps the most rigid and demanding organisation in history. Sheer bloody-mindedness was the prerequisite to all his theories. As Coram phrased it: “Without a skunk fight, life was boring.”

#Bloody-mindedness as creative fuel

Reflecting back on my thoughts about the prerequisites for creation—Creativity starts with love and theft—where I postulate that being interested starts the whole thing off (that is, love) and theft lights the creative act (blank canvases are hard, just steal something)—I ended by surmising that when the creative process becomes thick and difficult, your initial interest is what will keep you going (gotta love what you do, so to speak).

I realised that within Boyd’s story there was also another type of fuel I’ve missed: he believed other people had it wrong. When reading current theories of the time, he listened to his feelings, determined what he read didn’t feel right (even though he did not know how it wasn’t right), and then he plainly did not agree to agree with the common understanding of the time. He didn’t let it slide. Extreme disagreement was The Mad Major’s creative spark.

The genesis of any idea is not being satisfied with what already exists Rei Kawakubo

At this point, I’ll mention the idea of contrarianism that startup culture celebrates. Contrarianism is a very fine idea, but as with any term that becomes incorporated into a cultural lingo that by definition is a shorthand reduction of terms (that is, by memeification), its meaning becomes diluted, aggregated across the network. So, sure, peg this post as about contrariansim, but then you may not take the time to read about Body’s magnificent example of bloody-mindedness and you’ll only know contrarianism as a theory rather than a practice. So I implore you to read his story to truly understand what bloody-minded creativity is.

#Creativity is tough

In my last post, I used this step flow to illustrate what precedes and ignites the creativity:

Fan > Collector > Scene > Imitation > Creation

Which I argued can be shortened to just:

Love > Theft > Art

In light of The Mad Major’s life and works, we know that bloody-mindedness is an important part for fueling the process when things don’t feel right but you don’t yet know why or how. When the creative process becomes thick and difficult, then love has to transmute into a finer-grain rendering known as bloody-mindedness:

Love > Bloody-mindedness > Art

There are many other words that could be used to describe this fascination-fueling state, such as “stick-to-it-ive-ness”. Find and use your favourite. After all, the creative process is strictly personal.

Love > Stick-to-it-ive-ness > Art

In the end, however, it doesn’t matter what the flow steps are that lead to creation. As Boyd said so precisely, the defining soliloquy for action is to “do something or be somebody”.

I used to collect American soul records like a maniac, and I always assumed my collector journey would encompass making a record myself. This isn’t a unique process. Many of my record nerd friends are artists who’ve released their own music.

Reflecting back of late, I think I can see a series of steps that are prerequisites for creative work. (I haven’t read or researched anything about this, I’m just thinking out loud and joining some dots).

The prerequisite steps begin with an individual’s interest, are extended by sharing interests with others, and end with crucial bridge into the creative process itself:

Fan > Collector > Scene > Imitation > Creation

We can further reduce these steps down to just love (fan, collector, scene) and theft (imitation). Let me explain this process as I see it.

#Love, from fan to collector

First of all, you have to be a fan. That is, you have to be interested, you have to like it. Stadiums are full of fans. You can’t spend time in a stadium without having some kind of fun, without being slightly fanatical about the event taking place.

There are spectrums of fanaticism. Each fan attends to their level of zeal, from casual Sunday time-passer to those whose attention has reached the point of fascination. Fans who become fascinated are in love with it. Their obession may give them hard times, but they hang in their doggedly with an unrequited love.

That’s how I’ve felt about collecting American soul 45s. I’m awestruck by them. They are mythical to me. And yet I know of even higher levels of the obsessed record collector type who love their records more than any other part of their life, such that their social appearance and behaviour reinforce this self-identity.

I think a collector is the highest form of being a fan. When you are an obsessed fan, it’s natural to start collecting examples of your fascination. A fan becomes a collector. Over time, the practise of collecting feeds and hones the collector’s ability to find further examples of their fascination, and all the while, they are growing, pruning and cultivating to their own garden of fascination. It’s a fingerspitzengefühl relationship between the collector and their collection garden. In this way, collecting is a form of seeing.

I’ll argue that when the time comes to start creating, this collecting process has become the artist’s garden to pluck from:

I was just gathering images and names, and ideas and rhythms, and I was storing all of these things … in my mind somewhere. And when it was time to sit down and write songs, when I reached into the attic to see what I was gonna write about, that’s what was there. I just felt a strong passion toward the discovery of going there, and it opened my eyes, and all my senses were overwhelmed by the feeling of that place. When I sat down to write songs, that’s all I could think of… Robbie Robertson, The Band

#Scenius

As a collector, you’ll probably have an urgent need to share your fascination with others who get it. That is, you will seek out a scene of fellow collectors who share your enthusiasm. I used to frequent online record forums and many of the folks I’ve spoken to on those forums are still firm friends 15 years later. They send me soundfiles of rust-raw soul ballads, so I’m always in the know. That would be scenius in action if I still made my mix tapes.

Scenes are funny things. They involve highly concentrated status displays of love objects, and subsequent disagreements on taste (that is often thinly-veiled jealousy, such is the human condition). But just because you’re a serious collector and in the scene, doesn’t mean you become a creator. There’s a very subtle daemon at play where a scene becomes a scenius. As Kevin Kelley says:

The serendipitous ingredients for scenius are hard to control. They depend on the presence of the right early pioneers. And some flash of excitement to kick off the virtuous circle. You just can’t order this.

Whatever the magic is, it sure feels to me like scenius is the bridge between collector and artist. I love this story of how The Rolling Stones began when the teenage Keith Richards spotted the Chess records that Mick Jagger was carrying under his arm.

This cat’s together and he’s got the best of Muddy Waters and ‘Rocking at The Hop’ by Chuck Berry under his arm. “Hey man, nice to see you, but where did you get the records?” Keith Richards

I’d need to write more to convice you of the pervasive nature of scenius, but I want to move on to how theft plays it’s part as prerequisite for the creative process. Suffice to say, for every Kraftwerk, there was a Krautrock.

Scenes are alchemic. But what exactly lights the creative fires?

#Theft

Here’s where fascination can take a leap. If you’ve got it bad, you may start extending your fascination through imitation. You’ll attempt to recreate what you’ve been collecting by yourself. Or possibly with others from your scenius, as happens when getting a band together.

The Rolling Stones were obsessed with Chess Records. As we saw before, Mick and Keith started the band from a mutual love of Chess Records. And they stole their name from a song by Muddy Waters, the artist who put Chess Records on the map. But more than that, they wanted to sound exactly the same as Chess Records. Here’s Marshall Chess describing the band’s brief for their first and only Chess studio session in 1964, the same year as their debut release:

They wanted the Chess sound … to be exactly like the originals. But it came out like the Rolling Stones.

We’re taught very early that copying is wrong, that being original should be our goal. Yet seeing my children grow, it is very obvious to me that imitation is due process: it’s how humans learn. My daughter draws from books all and every day. In this way she has learned to draw a fox. Here’s the clincher: her copied fox barely looks like the original. It is, somehow, all of the originals at once. Something happened in the process that made it definitely her fox. Just like The Rolling Stones sure sound like The Rolling Stones, not Buddy Guy.

#Gotta love what you steal

Creativity is a process of transferring energy. New things comes from old things. And stealing is the spark that lights the creative process. Stealing ideas often enough evolves in time to become something distinctly new. But to be bothered doing anything at all, you need an itch—the same itch that will keep you going when you’re knee deep in the creative work—and that itch is to be fanatically in love with an idea.

As Bob Dylan almost said, all art is love and theft.

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. The diagram below shows this relationship.

As an example, let’s imagine Melbourne’s laneways. Over a long period of time they have become naturally rich 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, if you tried to recreate Canberra, Australia’s capital city, you’d do a better job. Canberra is high-modernist urban architecture devoid of rich experience because, as Christopher Alexander says:

…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. The reduction of complexity accidentally 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 web as the medium you’re working within, as well as helping you understand the other skillsets required within the web domain and how they overlap your design work.
• 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. Productivity and quality is increased when a craftsperson is self-sufficient enough to understand something of all the medium’s necessary overlaps and gotchas that make up rich web experiences.

#Designing with code is the most immediate connection

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

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

Not only is designing with code far more immediate than using design tools, if you’re a designer who codes, your design is the code. The degree of separation between your design work and the programmed interface is zero.

#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 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’re a designer who codes within in a team, you’ll have higher-resolution information you can use to communicate with, and make better decisions. If you’re a designer who codes by yourself, you will have greatly enhanced your ability to implement your vision.

The hallmark of craftsmanship is to understand both the limits and the possibilities of your medium. Within the craftsmanship of web experiences, learning to code helps designers to see and understand the necessary overlaps that create characteristically rich web experiences.

My first professional gig out of art college was with George Patterson Bates, Brisbane. I used to spend many afternoons hanging out in the best book shop in the city, getting all the best tips from Peter B (RIP) who ran the shop. Being the quintessential salesman-who-never-sold, Peter was well connected with his clientele, and passed on my name to the CD at GBP, Ron Weidemann. This was in 2000.

One of my initial projects for Ron was to redesign the Breaka Milk brand. I remember sitting in the presentation meeting to present my work feeling quite out-of-place in my skateboarding sneakers amongst the suits. The graphics were a hit and I was given the green light to redesign the brand and packaging.

I redrew the logotype by hand, adding wave devices. It was also a big deal to place the brandmark vertically down the packaging to maximise the brandmark.

You can still find Breaka in Australian supermarkets today, albeit they’ve lost a little of the surfer edge I had originally christened it with.

While at GPB, I also did 3 consecutive outdoor campaigns for Pauls Milk featuring Pat Rafter, right at his peak. While I thought it a little too easy to rip off Reid Miles, getting away with this kind of white space in Australian advertising at the turn of the century was an achievement in itself.

I’m also still fond of this campaign for Brisbane Arcade. Aggressively lean and simple, it was a great example of how to make a little go a long way. The posters used a reflective paper to reflect the white space at night, and came in both white and reversed-out versions, much like dark mode on this website.