Learning Path For Artists and Designers Learning to Code

Are you an artist and designer who wants to learn how to code? At Squirrel Logic, we’ve taken that journey and made it out alive. Here’s our advice.

By on Sep 02, 2020

So, you’re an artist or graphic designer who wants to learn how to code. That pretty much sums up our lives at Squirrel Logic, and why we focus so much on artists. Personally, I’ve gone through several coding courses, books, premium video tutorial series, countless blog posts, and YouTube videos. And I survived.

This is my guidance for every artist and designer who wants to learn how to code.

Before we begin, there’s a few reasons why you may want to learn programming:

  • Reinvent yourself and do something completely different. 😢
  • Learn how programmers build software to better collaborate with your team.
  • Learn a new skill to create more valuable work and increase your income.
  • Learn a new hobby that will be challenging and fun.

In addition, there may be some fields or interests you’ll want to get into.

  • Someone who has no idea what to code, but just wants a change. 😢
  • An artist wanting to create a game.
  • A fine artist wanting to create generative art.
  • A graphic designer wanting to create a website or web app.
  • A graphic designer wanting to create data visualizations.

We are going to go cover the “why” and “how” for artists and designers who want to begin this path down software development, and what you need to consider before starting.

Be Honest With Yourself On Why You Want to Learn Programming

I mentioned three common reasons why visual artists want to get into coding: learning for the sake of understanding the jobs of their teammates, learning to pivot into a new career, and learning to completely reinvent themselves. I’m going to cover the “reinventing yourself” reason first, because I think that last one is the most common and heartrending.

Completely Reinventing Yourself

You may be the type of person who has given up on your career of becoming an artist or designer. You may have been doing it for a few years and have not made the income you wanted to. You may have seen the industry go in a route that you don’t want to follow. Or maybe you feel like you just can’t cut it, that you are not good enough, or that you are not the creative type. (Hint: programmers are just as creative as designers.)

I have a few things to say to people who want to completely reinvent themselves.

First off, I don’t recommend that anyone should reinvent themselves completely. Clearly you went down the path of being an artist or graphic designer for a reason. I recommend that you write down why you found your current career path so appealing to begin with. I’m certain it wasn’t the money. Was it the type work, the idea of working on a variety of projects, or the artistic freedom? What was it that you thought you would receive, but didn’t?

Whatever it was, write down what originally drew you to that career path. You may be able to gain some insight as to why you are unhappy with your current career. Maybe you’ll find that there’s an easier solution to your unhappiness that doesn’t involve starting over from scratch.

It’s also possible that you haven’t had your big break yet, or maybe you need to level up just a little bit more to be employable or get a better paying position. Be honest with yourself, and most importantly, talk to other people about it. Find professionals in your current field and get some career direction. They can help point you to solving the predicament you are in.

Twice in my life I felt like I was a failure as a graphic designer/illustrator, and as a front end developer, only to get my dream job a few months later. Sometimes you are doing all the right things and it just hasn’t paid off yet. Patience is important. It takes years for things to finally happen. Don’t give up so easily.

It is absolutely okay to pivot and take slight career adjustments, adding extra skills here and there, and changing your strategy just a little bit. But be sure you understand why you are doing it. Don’t change careers because you are panicking. Do it because it is part of a thoughtful plan. Do it because it’s part of a grand strategy that lines up with what you want and not because you are reacting to failures in your current career. It is far easier to leverage things you already have than to drop it all and start over from zero.

The best programmers are the ones that solve problems first, and then program only when they need to in order to solve the problem. Follow their example. Only learn how to program if it’s the only solution to solve your career problems.

If you want to read more about choosing the right career path as an artist, I wrote up an article about it here.

Learning How To Program to Better Collaborate with Programmers

I like this reason for learning how to code a lot because it helps you become more T-shaped (although I prefer being π-shaped, where you have two deep strengths). The more overlap of knowledge you have with your teammates by learning how the sausage gets made, the easier it is to communicate with you team and be more empathetic.

You can use the same domain-specific language when talking with programmers, you can provide mockups that are more realistic and are easier for programmers to implement, and you’ll also have a better understanding about why seemingly simple additions taking a long time to get done.

First: Listen to Podcasts

If your goals is to better understand programmers, a good passive way to start doing this is to listening to podcasts. My favorite recommendation right now for artists and designers is Coding Blocks. They cover a lot more of the higher-level topics like architecture, strategies, what is actually important for a business, and so on. And the hosts have great chemistry. Scroll through the episode list and find topics you are interested in.

It’s okay if you don’t know all the terminology. Google a few terms here and there if you think it’s interesting or relevant. But just hearing programmers talk about their job and the stories they have will help you better understand how they work, and what type of tasks are more difficult for programmers and why. You’ll learn quite a bit through osmosis.

Second: Learning How to Code

The nuclear option for understanding how programmers do their work is to actually learn how to do it. I’ll get into this part in more detail in the “Learning Path” section of this article, because the next steps depend greatly on what you want to learn.

You may have done this already, but if you haven’t, I recommend telling the developers on your team that you are interested in learning more about software development. Ask what learning resources they would recommend as a beginner. Asking them about your interest in their profession is a great way to increase comradery within the team. They may end up asking you about learning your artistic skills later on!

Learning a New Skill to Create More Valuable Work and Increase Your Income

You may be content with your career, but you feel like it’s time to grow, be challenged, and do something new. Maybe you’ve gotten a little older, you have a family now, and you want to enter a profession that is in higher demand. These are good reasons to learn how to code.

If you are doing it to pivot into a new career then you are probably going to take it pretty seriously, more than just “dabbling” in it. In that case, the most important thing you can do is to schedule regular times to do it, and have a bias towards books, premium videos series, online courses, and any educational content that has structure to it and took a long time to create, as opposed to someone recording a video and posting it on YouTube.

Learning a New Hobby That Will Be Challenging and Fun

Another great reason to learn how to code. Who needs any other reason besides, “Why not?”

If you are doing this as a hobby with no goal in mind, I recommend learning either Processing or p5.js. See that section below.

Learning Paths

A Serious But Good First Step

If you want to start out on the right foot and have a high-quality, general introductory course to computer science, there’s Harvard University’s free CS50 course. It covers a lot of different fields of computer programming, and gives you a good bird’s eye view of the field so you can narrow your focus later.

It is a pretty big commitment though. It’s a college course: 11 weeks, 10-20 hours per week. It’s hard to recommend to anyone—especially artists—who only want to dabble in computer programming. I do recommend it for people who want to take software development very seriously.

If you only want to watch the lectures and not do the homework or reading materials, the CS50 Lecture videos are available here.

Someone Who Has No Idea What They Want to Learn

If you are very serious about learning how to program but you don’t know what field you want to get into, Harvard University’s free CS50 course is my recommendation. Again, it’s a college-level course so it’s a big time commitment, but it’s the best and most thorough general introduction to computer programming out there.

Otherwise, if you just want to dabble and if you are a visual person, I recommend either Processing (desktop-only) or p5.js (browser-based). The setup for both is minimal. With p5.js you can visit the p5.js Web Editor and start programming without installing any software.

I’m a big fan of recommending Processing and p5.js because of the quick feedback you get from seeing your code run. I’m an illustrator and graphic designer first, so writing code that created designs was a lot more fun than typing in text strings and numbers into a Python console.

Now, you probably won’t stick with Processing or p5.js for very long, but it’s enough to get your feet wet and decide where you want to take your journey in software development. The principles you learn using one programming language transfer across all programming languages. So don’t worry about learning “the wrong language” first. It all applies.

See the links below for Processing and p5.js learning resources.

An Artist Learning Game Development

If you want to dabble in how video games are made, I think Processing or p5.js are good starts.

If you want to get more serious about it, I would recommend either Unity (if you are doing 3D games) or Godot (if you are doing 2D games).

The Unity game engine is kind of the industry standard for indie developers, and there’s a lot of learning resources for it. Unity has a free version too.

Godot is the better alternative if you use Linux, have a lower-end system, or slow/metered internet access. It is also a lot less frustrating to work with if you want to create 2D games. I think Godot is a better engine for learning purposes than Unity, but the amount of learning material available for Godot is not nearly as good as it is for Unity.

There’s still a lot of work that needs to be done on training materials for Godot if you are self-taught, but once the training material has caught up, I’ll be recommending Godot for 3D games as well.

See the Processing, p5.js, Unity or Godot links below for learning resources.

A Fine Artist Wanting to Create Generative Art

I strongly recommend Processing for this. Processing is much faster than it’s cousin project p5.js. You can also export PDF and SVG files of the artwork for printing.

See the links for learning Processing below.

It’s worth noting that Adobe Illustrator does have a scripting language, but I’ve found it to be too cumbersome for beginners. So if you are a graphic designer who wants to learn some code, avoid that for now and come back to it once you are comfortable with programming basics.

A Graphic Designer Wanting to Learn Web Development

Oh boy, are you in for a journey.

The problem with web development as a field of study is that it’s an umbrella term that includes a lot of programming languages, technologies, and subdisciplines. It’s usually split up between back end (servers with no graphics, just data) and front end (displaying information and user interfaces in a web browser). But then inside of that you have a ton of other technologies. Front end alone is split up into HTML, CSS, JavaScript (three different markup/programming languages) and then a bunch of other supporting libraries, APIs, technologies, and standards. And on top of all of that you have your tooling (the tools you use to write code quickly), DevOps (the act of combining software development with IT operations, such as deploying your projects to a server), source code versioning, and so on.

I’m just giving you a heads up that it’s a huge topic of study and it may feel like you’ll have to learn a lot of fundamental technologies before you can even create something useful. Just stick with it. The good news is that there’s a good resource that covers all the bases.

I have to recommend The Odin Project. It covers all the technologies and skills you need to learn, and it’s free. Inside of The Odin Project’s curriculum is freeCodeCamp, which is a way for you to learn and practice coding on their website without having to install any tools. I enjoyed freeCodeCamp more and retained more information than any video series I purchased on programming.

The Odin Project has 3 tracks: “Ruby” (which is a programming language used to write web apps, often touted for how beginner friendly it is), “Full Stack JavaScript” (a combination of front end and back end development), and Front End Only.

If you are a graphic designer who wants to pivot their career and utilize design skills you already have while working with back end developers, I recommend the “Front End Only” track. If you want to create web-based projects from the ground up, including all of the server-side logic and data storage, you’ll want to go through the “Full Stack JavaScript” track.

Either way, you are in for a pretty big time commitment including hundreds of hours of learning.

A Graphic Designer Wanting to Learn Data Visualization

I recommend Processing for this. You can export PDF and SVG files from Processing, so it is especially good for graphic designers who are working with print or static images. Processing is also great for installations.

See the links below for Processing learning resources.

When it comes to artists and designers learning how to code, I have a strong preference towards either Processing or p5.js. The mission of both projects is to teach artists and designers how to code. But it doesn’t dumb it down. The code looks just like regular code. They’ve just added some default functions that you can use to easily draw shapes and pixels to the screen.

The Coding Train YouTube Channel teaches both, and it is my favorite YouTube channel on programming. You’ll learn a lot just watching his videos where he breaks down a problem on a white board and converts it into code.

I also strongly recommending reading any book written by Robert C. Martin, affectionately known in the development community as “Uncle Bob.” His books Clean Code and Clean Agile are especially good. As an artist and designer, if you want to learn how to do project management when the final product is not fully decided upon or will be a moving target (as in the case with any project), software developers have a pretty good idea on how to do that. Learn agile development practices and how it can be applied to the world of visual arts.

Processing

Processing is a programming language that allows you to quickly create art and graphics using code. I found it to be a great way to get artists and designers into programming because it removes most of the barriers that prevent people from starting (tooling, confusing documentation, etc.). Just install the program and you can edit and run Processing programs (called sketches) on your computer.

Processing is designed for artists. Once you learn it, the programming concepts and syntax will be very familiar everywhere else you go.

p5.js

p5.js can best be described as the younger sibling of Processing. It has the same mission: to make programming for artists and designers easy. Instead of it being a Java-based program that you install to edit and run code, and it’s a JavaScript library. This means you can embed it into websites and run it anywhere.

I find it easier to do larger projects in p5.js because I can use any IDE. The code editor that Processing comes with is limited, but it’s good enough for learning.

If you have future plans on doing web development, but you want to start dabbling in creating art through code, p5.js is my recommendation.

Unity

Godot

  • Godot Official Website
  • Godot Documentation and Tutorials: I have to add that the documentation does assume you know a little bit of experience creating software. It’s not a complete beginner guide. This is why I recommend learning Processing or p5.js first so you can learn some fundamentals. (Note that you can still make games in both Processing and p5.js.)
  • GDQuest: Make Games with Godot: Beginner Edition: This article provides a good learning path for people who want to go from zero to Godot. The article also links to another article Learn to Code which recommends learning Python first and links to learning resources.

Share:

Categories

Latest Article

Tags