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

The following is a guest post by Anne Lee, Product Designer at Naver. Anne recently set out to design 30 prototypes in 30 days with Framer X. Here she shares her journey with learning code in the hopes of inspiring other designers.

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

Price: Free

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

The Prototyper

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

Price: Free

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

The Unicorn

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:

  • Learning the full stack of front end development (HTML, CSS, Javascript, and Ajax)
  • Understanding the basics of using the Shell, using Git and hosting websites

Udacity – Front End Developer Nanodegree

Estimated Duration: 4 months

Price: $999

This course is a bootcamp for people who wish to become front-end developers – which means that you will walk out of this course with a professional level of understanding regarding HTML, CSS, and Javascript. It’s a higher price tag, but in exchange, you’re provided with tons of support, real-world projects, and top-notch code reviews. Once you finish the program, you’re also rewarded with a widely-recognized certification that you can add to your CV.

View the course ›

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 ›

freeCodeCamp

Estimated Duration: 6 months per certification

Price: Free

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.

Hopefully this guide has provided you with a good idea of how to begin learning code. If you’re interested in diving into React, read this blogpost that explains the basics of this popular JavaScript library in easily digestible terms.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.