This post is intended to be a rabbit hole for designers to find useful resources, jump into tutorials, and return to find other steps or guides on how to use code as a supplement to their design career.
It is not intended to be the “Be all and End all” to guides, so if you feel like there’s better alternatives to any of the sections, feel free to reach out or post below and I can consider adding it to the guide here.
More than likely, this list will continue to grow throughout 2019 and onward as technology continues to improve and the realm of “what’s possible” and “what’s realistic” start to get closer together.
Deciding what your focus is
Here’s a list of the sections to help you navigate through the guides.
Intro (Keep Reading) Where do I Start? Common Requirements Websites and Web Applications Mobile Apps Video Games Augmented and Virtual Reality Final thoughts
So you want to jump into learning code as a designer?
Maybe it’s time.
With how quickly and often people are releasing apps and websites nowadays, one thing that tends to get left behind on the office floor is UX Design, UI Design, and branding.
Learning to code anything efficiently takes a lot of practice. That’s why I have never been much of an advocate of designers learning to code before becoming comfortable and proficient with design principles, familiarity with the design tool of choice, and having focused on building a body of work to display.
Code just isn’t something you can “learn” to be effective with without investing your time into it. But these skills will help you understand what’s possible, what isn’t possible, and all the beauty of being able to build your own things in-between.
Learning the lingo
Learning to code is like learning a Latin based language. A lot of languages are built off the same principles, conventions, and ideas of Latin. With each codebase, the idea is fairly similar, you only need to learn a little bit to be able to do a lot.
Regardless if you think you don’t want to learn code, these skills are exceptionally marketable and really good to have in the field of UI, UX, Web Design, Front-end Design, Mobile App Design, Game Design, Augmented Reality (AR) and Virtual Reality (VR), and Video Game Design.
Coding is a special skill that allows you to build and launch apps, websites, products, or even be more useful to the businesses you work for…
Someone who is focused on growing in these areas (or if you want to learn to build and launch your own things to promote your own work) should consider learning to code.
When I started out in 2015, I had decided that I would make the switch from being a boring bank teller to someone who would code websites.
Because of that, my journey started with learning how to code, before I ever found out about UX Design, UI Design, and then changed my focus and career of choice in 2017 to being a brand identity designer at So Magnetic, (my design studio).
At the beginning though, my skills weren’t much to write home about.
This is how I started though, and more than likely where a lot of you started with your design skills. It isn’t fair to judge where you are right now to where you will be if you’re actively working on improving your skills.
I’ve actually built the Compass of Design website myself from the ground up with code and am working on some higher level programming in the background of the site for members of our community there.
I want to also reiterate that I don’t want you spending time learning to code if it’s not a tool that you need to use, or plan to use, in order to create your designs.
Otherwise, your time would be better served becoming a master of your craft rather than a “Jack of all trades.”
So if you think it’s something you’ll be able to use, let’s figure out where to start.
Where do I start?
Well that depends on the field.
Every type of design field that involves coding at some point uses different code bases and code libraries of code languages to do what they do. Each one has a specific path to get started depending on the level of involvement that code language has in the activity or goal you’re trying to achieve.
More importantly, there’s no “wrong way” to make something, and there’s not any “one way” to make something.
Two people can use completely different code bases to achieve a similar goal. So learning code is more about how you think over how you do it.
This non exhaustive list and what they include
Websites and Web Applications • Front End Design • Front End Development • Back End Development — Scripting Languages — Databases — Web Security• The WordPress Question • Opportunities as a Code Newbie
Mobile Apps, Games, etc • iPhone Development — iOS Developer Accounts — Xcode — Swift• Android Development — Android Developer Kit
Video Games • Game Development • Corporate Game Design • Indie Game Design
Augmented and Virtual Reality
Though I don’t consider myself a developer by any means, I have found the easiest entrance to code for me has been building websites. Not everyone will start here, but I do think building websites was the easiest for getting into the mindset of learning to code.
Honestly, you can learn anything if you’re willing to.
If you’re looking to get your feet wet with code, this may be the quickest and easiest way of doing so.
If your reason for getting code is to better understand the medium that you are designing for, you can just learn basics of each.
If your intention is to be able to edit your own portfolios, launch your own products, or pursue this as a skill you can use as a designer (freelance or employment) the rest of the document will be very helpful.
Don’t take my word as the divine path. Do your research, look up videos, look up tutorials, read blog posts. If you’re hungry for it you will find it.
So what do I need?
A good computer (maybe preferably a laptop so you can practice this stuff anywhere you go).
An internet connection.
A set amount of time each day or week that you can set aside to learn. I recommend no less than 15/30 minutes of focus on it if you can.
Patience.
Somewhere you can look up answers and ask questions. (Google will be your best friend through this) — Stack overflow for asking and looking up common/less common questions. — Stack Exchange as an alternative to stack overflow — Quora (sometimes good to look up answers and ask questions) — Reddit if you can stomach some people being royal jerks sometimes.
Starting your choice
No matter what you choose, you need to get comfortable with these.
You need a text editor to start with.
If you are starting to get in the water with any of the below resources, it might be good to set up an account with Github (or Gitlab) for backing up the thousands of lines of code you write, and CodePen which will allow you to test out some of the front end web code you are building. There are numerous people who, if you ask a question, will ask you to set up a codepen or online editor where they can see your code. It’s an easy way to show others what you’ve made in a way that they can understand and help with what your’e trying to achieve.
If you think you’re ready to start doing things using your computer, I recommend these first two text editors to start with, and some alternatives.
Atom and their quick start guide
Text editors allow you to change practically every computer file imaginable. But they’re not always in the friendliest of formats for beginners if you open them and peek your head in there.
Almost everything you do with code will require you to edit files with a code editor. The farther you go down this path, the more you’ll realize you’ll never learn all of it. That’s the fun part.
Learn to use the Command Line or Terminal
This one seems scary because there’s no handy visuals, guides, or menu options, and there’s a lot of things you could mess up.
But using the command line is super helpful when you start doing local development of your own sites or apps like with Jekyll (easy) or full back end languages like Ruby, node.js, or other development (hard).
I’d just recommend two handy guides here.
Learn how to use Git (preferably with GitHub)
Git is a version manager for your code projects. It helps you keep track of changes, and revert something completely if you messed up. GitHub is a online platform where you can save all of these and access the projects from anywhere. They even have a visual interface that you don’t have to use the command line for (but learn how to use git from the command line).
Oh Shit Git (just in case you messed up something)
So once you get the hang of some of these tutorials, you might start thinking about moving into different programming languages.
The biggest point of failure for beginners is giving up before they pass “the hump”
This point may be different for many people, but that “hump” means that point between “This is so freakin difficult” to “I think things are starting to click” (not the I can go build the next Facebook”
Websites
“Web Design, Front end design, UI Design”
Welcome to the world of learning how to code for websites!
HTML and CSS
Let’s assume you’re an absolute beginner who hasn’t seen much about the web and it’s code before. You should find resources on how to get started with these two types of code languages.
This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just files full of text.
As literal as that got, you might have felt that was too easy. Well, there’s more to HTML and CSS than just that, but you have other places to learn it.
These YouTube videos by LearnCodeAcademy
You’re more than welcome to stop learning code after HTML and CSS if your sole reason to learn was to better understand designing what you see in a web browser.
Here are some more of the resources I have to help you get further along the path of learning to code.
Maybe watch this video on LearnCodeAcademy’s paths for different choices with his mind-map for the codes to learn
Learn the basics of JavaScript
You might think you have something figured out, but then some part of the syntax throws off the entire function you are building. (These terms may be foreign to you right now, but you’ll learn about them)
JavaScript is best learned by practicing with it.
freeCodeCamp is still one of the best ones to start with.
Pair that with Eloquent JavaScript
CodeCademy has a good JavaScript course too if you liked the style
There’s tons of youtube vids going over it too. Like this one
Learn the basics of jQuery
jQuery is a super powerful tool to use for JavaScript because it allows you to do more with less written code.
Though that’s an oversimplification, jQuery’s power comes in the form of cross-browser support, including legacy browsers (old versions that hardly anyone uses)
Diving into Web Development
Backend Development, Web/Info Security, Databases,
Mobile app design
iOS
In order for you to be able to send things to the iTunes store, you have to have a developer account with Apple.
https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/ https://lifehacker.com/i-want-to-write-ios-apps-where-do-i-start-1644802175
Swift Xcode
Android
https://developer.android.com/design/index.html https://developer.android.com/guide/index.html http://blog.teamtreehouse.com/the-beginners-guide-to-android https://www.androidauthority.com/android-app-development-complete-beginners-658469/
Android Package kit (APK) Software Development Kit (SDK) Android studio XML Java
Game Development
This guide by Unity on how to start with game development
https://www.quora.com/Where-should-I-start-to-learn-game-development https://www.reddit.com/r/gamedev/wiki/getting_started https://kotaku.com/5979539/a-beginners-guide-to-making-your-first-video-game http://www.gamefromscratch.com/post/2011/08/04/I-want-to-be-a-game-developer.aspx