Process and Web Development

Allow me to talk about painting for a bit, because that's what I know the best when it comes to creating visual experiences.

One way I start my paintings is with a bit of drawing. Nothing too detailed but more of a rough map showing where the big shapes are located. Oil paint is very forgiving of early mistakes, so it's better to be less accurate and then refine the accuracy as you go. Once my big block drawing is "close enough" I mix the big light and dark colors for each big shape, then I fill in the drawing. As I do this I correct anything that is now obviously off, but I still avoid details. After the initial big blocks of color have filled in the big block lines I can investigate each shape further, refining it with more shapes. It's almost a binary search algorithm for visual experience, and when I'm done, it at least looks like the subject to varying degrees of success.

One of my art teachers started her paintings with a 6 month pencil drawing that laid out every single detail exactly. She would then mix up to 9 or 10 different colors for every part of the painting she worked on. This meant she only ever worked on small sections at a time, going so far as to use a piece of paper with a window to block out everything but the 1" square she worked on that day...or that week...or that month. When she was done her painting looked exactly like a photo. She hated photography. She believed all cameras were wrong and only the human eye could possibly render anything accurately. She had never studied photography, optics, or neurology but she was convinced of this fact.

This process is not for people with ADHD. Trust me.

Yet another process I love is the one used by the Russian Impressionists. They exploit the properties of oil paint by laying out a metric ton of paint on a palette, then using a huge brush to slam it into the canvas with reckless abandon until the whole thing is filled. It seems like a disaster, but then, they take the results and start to work it. They use the mixes of paint on the palette to rework the canvas and move it to their goal. Seemingly like magic the painting emerges from the randomness with unique artistic qualities and surprisingly high accuracy given how it was made.

These are definitely not the only processes for producing a painting. They only represent parts of a spectrum in styles to demonstrate that there's many ways to create a painting, but no matter how someone paints there's almost always some process. Artists, Musicians, and Writers talk endlessly about process. Programmers talk about team processes to the detriment of personal processes. I find the creative activities that can't talk about process also seem to be relatively young. Music, Painting, and Writing are about as old as homo sapiens. Programming and Design are very young by comparison. Talk to a writer about their process and chances are they'll talk about it for hours. Talk to a programmer and they'll talk about Jira and Scrum meetings (which is not a personal creative process).

Creative Processes are for Beginners

Every creative activity uses a process whether we realize it or not, but explicit processes are really meant for beginners. If you can already paint then a new process is mostly a vacation from your current style, or potentially a way to change your result. An established painter has internalized a process to the point that they don't need to think about it. When your process is internalized and in the "background" you are given space to think about the higher level concepts. Once you know how to innately mix a color you can focus on whether your painting is stating what you want it to say.

To paraphrase Charlie Parker, "Learn the process, then forget it and just paint." Looking at Bird's sentiment another way, "If you can already paint, then don't worry about the process."

Actionable Creative Processes

For a creative process to work for a beginner it has to be actionable. If the process requires too many steps or too much marathon work to see results it'll fail the student. If they need to buy tons of equipment, spend weeks mixing colors, months drawing out every little detail, then they'll simply give up. The sad part is they'll think they can't paint, but the truth is they were given a process that wasn't for beginners. Give them an actionable process that gives them space to attempt many paintings and chances are they'll find out they can paint. They might not be professional level, but they could probably do it for fun and enjoy it at least.

My Classical Realism teacher (who did 6 months of drawing before ever mixing any paint) taught a completely inaccessible process that most students could not follow. Most humans can't slog through 6 months of pencil drawing just to spend another month doing a monochrome grisaille underpainting before spending 4 hours a day mixing colors just to paint a 1" square for 2 hours a day. Her process was more of a filter than an education method--and as a filter it worked exceptionally well--but as a way to learn to paint it failed. You could take a single one week JD Hillberry class and learn more about realism than you'd ever with her process.

On the other end of the spectrum is my favorite Russian Impressionist style with its high risk approach, which is also not accessible to most beginners. The only reason this fast risky style works is because these artists went through extensive classic training. They've honed their drawing skills through years of training to the point that they don't have to think about it, and that means they can be haphazard in their painting with the results still being close enough. Most beginners don't have this training so their end result will frustratingly look like garbage, which is discouraging. Just like with the 6 month pencil drawing, they'd have to do years of terrible paintings in this style before they saw results, which is hard for most people.

Still, if I had a choice of working on one painting for a year, and flinging oil paint on a thousand canvases for a year, I'd take the 1000 garbage paitings any day. You learn way more making 1000 piece of trash quickly than you would making 1 very over worked piece of trash in a year.

The Process Sweet Spot

For a process to be accessible it ideally needs to sit somewhere between these two ends of the spectrum. Not so much process and rigidity that it's difficult to follow, and not so loose and low success that it teaches nothing. The ideal process is one that:

1. Is simple enough that someone can remember it and follow it. That means about 5-7 steps max.
2. Uses a structure that focuses on one or two concepts at each stage that build on previous stages and concepts.
3. Isn't so rigid it kills all risk and experimentation, while still teaching people to "trust the process."
4. Allows for frequent repetition while also being methodical enough to allow for study and contemplation.

These aren't some official criteria, but more what I would like out of a process if I were learning something new. Based on my experience learning painting, music, programming, and writing I've found the processes that fit these criteria were the most helpful. The processes that were too involved or not specified enough weren't helpful, or were even detrimental to my education.

A Process for Web Development

I've talked mostly about painting since that's where I learned the most about creative processes. Using these ideas, can I develop a similar process for designing a web page? Actually, why do I need this process anyway? Can't I just tell people to copy a bunch of websites and "git gud?"

In the current version of the course this is exactly what I do, and it does work, but only for the students with endurance. Copying other works is a solid way to practice, but I'm finding it's not good enough on its own to learn how to create a web page, and there's a lot of flailing around while you try to figure out what to do next. There needs to be something between "here's all of CSS" and "now go copy Twitter!"

What I think the course needs is a simple process students can follow while they do copies of websites, and then use later when creating their own sites. The goal isn't a universal process they follow religiously, but a starter process to get them going until they come up with their own naturally.

A first idea is to copy the process I use when painting:

1. Create a general monochrome block layout with little to no detail.
2. Divide these simple layout blocks with smaller elements.
3. Refine these smaller elements with fake (or real) content, and refine the smaller elements based on the content.
4. Finalize the design with further details and make everything fit together as a whole (the gestalt).

In painting there's a concept of a "statement", where each stage isn't the final painting, but a statement you want to make at that stage. We can use this to describe the state of the design at that step:

1. Layout -- Large blocks divide the page, most likely 1-4 blocks per page "component."
2. First statement -- Contents of each layout block placed as small blocks and visual elements, most likely the layout blocks are invisible now.
3. Second statement -- Fake (or real) content such as media, lorem ipsum, real copy, text, icons, fonts, and possibly colors.
4. Third statement -- More small details worked out, but more importantly everything works as a whole, which is called the "gestalt."

Where This Fails

This process seems reasonable, but when I tried using it the first time I ran into problems with how CSS, HTML, and nearly all technology thwarts "start simple." Let's say you want to "layout large blocks" in an HTML page, so you do this:

<div>
  <div>
    <h1>Left</h1>
  </div>
  <div>
    <h1>Right</h1>
  </div>
</div>

Your goal is to create a simple two column layout with a left and right. This will go vertically so you have to then go style it with CSS. You can't just...put down a block and have it work:

<style>
  div {
    display: flex;
  }
</style>

<div>
  <div>
    <h1>Left</h1>
  </div>
  <div>
    <h1>Right</h1>
  </div>
</div>

Simple enough, the default for display: flex is horizontal, but now you need to add a class to each div:

<style>
  div.main {
    display: flex;
  }

  div.left {
    display: flex;
  }

  div.right {
    display: flex;
  }
</style>

<div class="main">
  <div class="left">
  <h1>Left</h1>
  </div>
  <div class="right">
  <h1>Right</h1>
  </div>
</div>

This continues to wear you down. You write HTML, but that's not enough, you then have to go fiddle with CSS just to get simple things to work. Need it to center? So you use justify-content, align-content, or align-items? Something else? Need more elements inside these? Welp, gotta add more dispay: flex all over. The technical process of using CSS is so indirect that it thwarts any attempt to create a simple first layout.

What do I mean by "CSS is indirect?" When I paint I take a brush, and put the paint on the canvas. Maybe I have to mix the color a little first, but the act of putting paint on is direct. CSS is like painting with two devices, one that puts the paint on and another that moves the paint around until it's in the right place. Not only that but the "paint layout tool" uses a totally different motion, different terminology, and one little mistake makes everything disappear with no explanation as to why.

<block class="horizontal">
  <block>
  <h1>Left</h1>
  </block>

  <block>
  <h1>Right</h1>
  </block>
</block>

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">...</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<block>
<img src="..." alt="...">
<bottom>
    <h5>Card title</h5>
    <p>...</p>
    <button>Go somewhere</button>
</bottom>
</block>