The Designer’s Guide to Learning CodeThe Designer’s Guide to Code
Mastering a whole new coding language can be a long process. But it is possible to learn just enough to become a better designer.
May 1, 2019
Let’s say you want to learn a new language. As is the case for most people learning a non-native language, you probably start with a specific goal in mind. Maybe you’d like to use Spanish to get around during a South American vacation. Or perhaps you’d like to conduct meetings in Mandarin with your colleagues on the other side of the globe. Now imagine how quickly you’d be able to grasp this new language if you had a curriculum customized toward your specific needs.
This same logic applies to programming. Programming, and language in general, is fundamentally a tool. Whatever you know will only have value if you actively put it to use. There is no universal ‘start’ or ‘end’ point when it comes to the mastery of a new programming language. But setting a goal and following a structured learning path means you will maximize results in the least amount of time.
In order to help you get started, we’ve put together three common programming tracks that cater specifically to designers. For each one, we’ve provided tips on how to design your coursework along with a few recommendations.
The Cross-Functional Communicator
As a Cross-Functional Communicator, your goal is not to actually learn practical code, but rather to understand it from a theoretical perspective. Essentially, just enough understanding to foster better designer-developer relationships. You may be very early in your career, struggling to understand jargon and aiming to write comprehensive lists of technical specifications. Perhaps you’re a mid-level designer adjusting to a new platform, or a senior-level designer looking to break into a product manager role.
When learning to code, you should focus on the following:
- Learning the theory behind programming
- Understanding basic syntax, such as loops, arrays, and functions
- Gaining basic knowledge of the programming language used in your workplace
edX - CS50’s Introduction to Computer Science
Estimated Duration: 3 months
Price: Free • $90 for a certificate
This course is one of the most popular introductory courses for learning programming. After approximately three months, you will gain a basic understanding of computer science and how to approach problems from a developer’s point of view. You will learn about some of the most popular programming languages as well the most useful application of each. There’s also a great community built around this course, so if you ever get stuck, you’ll be able to get help from graduates, or search the database for solutions.View the course ›
Khan Academy – Intro to JS: Drawing & Animation
Processing is a Java-based programming language built to help non-programmers understand the fundamentals of coding. Although the Processing Development Environment is different from the actual development environment, it still provides a great way to learn basic programming syntax (i.e. if/else statements, loops, mouse events, etc.). Processing is also optimized for the creation of drawings and animations, which means you’ll receive visual feedback on everything you create in code.View the course ›
CodeAcademy – Individual Courses
Estimated Duration: 1-2 weeks per course
Price: Free • Requires Pro membership for some courses ($19.99 / Month)
If you already have an understanding of computer science and are looking for courses on a specific language, CodeAcademy is your answer. Navigate to the bottom of the catalog page to find individual courses on the language of your choice. These courses are not meant to provide you with industry-level depth of knowledge, but they will help you grasp how each language works through lectures and hands-on exercises.View the course ›
Get Framer X
Communicate visually and blend design with code.Try it for free
If you fall into this category, you’re likely interested in using code-based prototyping tools, or wanting to create quick web-based prototypes. By the mid-level stage of your career, you may want to start building real, interactive prototypes to collect feedback from your users. Or perhaps you’re a senior-level designer who’s hit a wall while trying to design more unique micro-interactions using low-fidelity prototyping tools. As a Prototyper, you should focus on the following:
- Understanding basic HTML and CSS in order to style components and add flows
- Possessing an intensive understanding of the platform or tool you wish to use
- Learning to share your prototypes on the web or as a mobile app
After the initial coursework, you’ll need to continually expand your knowledge by recreating existing examples. This can be done through the aid of Codepen, an open source platform that provides you with plenty of examples to work through.
Khan Academy – Intro to HTML / CSS
If you’re looking to build prototypes based on the web, you’ll be amazed with what you can do with just HTML and CSS. There are a lot of HTML / CSS introductory courses out there, but Khan Academy is one of the few that provides a section on hosting your website on the web. This teaches you how to generate and share the URL of your prototype with others.View the course ›
Design+Code – React Native for Designers
Price: $15 / Month
Design+Code is a platform that teaches designers how to code. This course teaches you how to create iOS and Android apps from scratch. It is recommended that you take some basic HTML and CSS courses before jumping in, as the course builds upon that knowledge. Because the course is targeted towards designers, it includes sections on design-friendly topics, such as animating components and rescaling for different devices.View the course ›
Interested in React resources for designers?
Get on the list to be notified when we launch full courses, tutorials, and articles related to React and Framer X
As a Unicorn, you might be willing to spend more time on courses that dive into web-based projects with full functionality. You could be anywhere in your career: looking to create fun side projects, or a designer at a startup that must occasionally dabble in development. You may also be a Cross-Functional Communicator or a Prototyper looking to advance to the next step, or trying to piece together the bits and pieces of programming knowledge that you already have.
Learning front-end development takes a lot of effort, so it is recommended that you choose a course that gives you a certification, for that extra bit of motivation.
As a Unicorn, you should focus on the following:
- Understanding the basics of using the Shell, using Git and hosting websites
Udacity – Front End Developer Nanodegree
Estimated Duration: 4 months
Treehouse – Front End Web Development
Estimated Duration: 2 months
Price: Starts from $25 / Month
Treehouse is a cheaper and faster option for those looking to master front-end development. Although it doesn’t provide real world projects like Udacity, it covers all of the essentials you need in order to publish your first web project. Treehouse also provides plenty of other courses that build upon this course, so you can dive in deeper when you feel ready.View full course ›
Estimated Duration: 6 months per certification
Finally, if you’re looking for a free option, or one you can work through at your own pace, there’s always freeCodeCamp. This course focuses on learning by doing. Although they do provide brief explanations of the concepts, you’ll find that most of the coursework is structured around problem sets that require you to do your own digging for answers. If you find the explanations insufficient, you can always head over to CodeAcademy to supplement your knowledge.View the course ›
Well begun is half done. Remember that defining a clear goal from the beginning will be your biggest motivator throughout the journey, and choosing the right curriculum will help you achieve that goal. It’s natural to get stuck or frustrated at some point in your coursework, which is something virtually every developers runs into. To get beyond those blockers, try to actively use communities like Stack Overflow. Or sign up for developer mentorship programs to provide even more tailored support, so you don’t get too discouraged along the way.
Want more design articles?
Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.