Plotting the Course

Here we are at the beginning of the journey. There are two things you need to understand from here on out:

1. What you think of as “design tools” like Figma, Sketch, or anything from Adobe Creative Cloud, I’ll be refer to as “drawing tools.” Even when you design with code, you’ll still need to draw stuff.

2. What you probably think of as “developer tools” like code editors, web browsers, and terminals – I’ll be referring to as “design tools.” Seeing as you’re designing and they are tools, ✨poof✨ now they are design tools.

I won’t be talking about drawing tools much because they should only be your digital sketch pad or a way to make assets you use in your designs. In my experience, investing in drawing tools will only lead to painful migrations and the heartache of Adobe buying and then putting your favorite tool out to pasture.

Miss you, Macromedia Fireworks 😢

Feedback Loops

Fundamentally, what we’re trying to build is a practice of experimenting, observing, and refining. A good feedback loop is fast and informative. Some might describe the feeling as thrilling. Well, at least I do.

Everything starts as an idea. After that, the process should look like this:

1. Sketch
   This can happen in a notebook or a drawing tool. It's the fastest and lowest fidelity way to get your thoughts down.

2. Code

   Get your initial sketch into the browser.

3. Observe

   Now that you have something tangible in front of you, notice how it feels.

4. Refine

   Not happy? Don’t worry. No one gets it right on the first try. Go back to step 2.
   Nailed it? On to the next step!

5. Evaluate

   You’ll go through steps 2-4 hundreds, if not thousands, of times while working on a project. When you're done, put it where people can see it and listen for feedback.

We want to see a result as quickly as possible so we can make a response. Drawings are not enough, though. The screen is an interactive medium. Seeing your work isn't good enough – you need to feel it.

The Tools

I’m going to assume you’re using a Mac. Aside from that, you’ll need three things – two of which you have already:

1. Your favorite web browser.

2. Terminal.app – You can find it in Applications/Utilities.

3. A code editor – I highly recommend Visual Studio Code. It's free and truly amazing.

Not using a Mac? You can follow along on other platforms, but if you do – you're on your own. If you can’t figure out the Windows version of the tools I’ll cover, you can try using something like CodeSandbox, which will get you most of the way there.

Sort of a Syllabus

The goal here is to start expressing ourselves in code and bringing our ideas to life!  That means we’re not going to get caught up in topics like performance, accessibility, and things like that. We want to learn just enough to move forward and build momentum!

Here’s what we’ll learn together over the next couple of months:

• just enough Terminal

• just enough HTML

• just enough CSS

• just enough Git

• deploying your first website

• designing in the browser with Tailwind CSS

• just enough JavaScript

• JavaScript frameworks: an overview

• components and state

We’ll see how it goes from there. By the way, did you see the first thing we learn is the Terminal?!

You might be thinking, “whoa, dude, I’m here to design.” Dear reader, you’re going to have to trust me here. The “hard stuff” unlocks magical superpowers for us and the payoff is gigantic. Just to refocus us on why we're doing this in the first place, let me introduce you to an important concept… feedback loops.

Next week, we’ll set up our system and learn Just Enough Terminal.

A Quick Favor

If you’re a total newb and are interested in getting DWC a few days early, I’m looking for a technical proofreader to make sure everything I’ve written, you know, works. You’ll be doing a service to your fellow designers and me. Just email me with the subject line “Guinea Pig,” and I'll be in touch.