Tips for graphic designers getting started with code

[Rss Bot 1]

Designers are required to have more and more skills these days. A varied graphic design portfolio is key, which means as well as being confident creating visual identities and branding work, designers are increasingly dabbling in things like 3D art. And as we explain in this article, it's becoming more and more important that graphic designers have a grasp of coding, too. 

Understanding how code works can greatly improve the conversations you have with developers as well as making your digital designs better. But taking your first steps into the world of coding can be daunting. You can't jump in straight away with complex CSS animation or parallax scrolling effects. Here are six tips to help ease you into the world of code.

01. Do an online course

There are plenty of online coding courses to help you get started, and these are a great place to start. “There are a myriad of platforms to help you learn coding,” says Craig Frost, product designer at Pusher. “Take your learning deeper by building something end-to-end using courses from world-class developers and teachers. It’s here where pieces start to click together; where you understand the broader picture of design on the web and the tools available to augment your design process and provide useful constraints to your design thinking and exploration.” The following are three good options to get you started:

Treehouse offers a seven-day free trial to its library of video-based coding tutorials. If you like it, you can sign up for a  subscription ($26/£20 per month), which allows you to choose from thousands of hours of content covering a wide range of skills and topics, from JavaScript to Python to iOS.

To start coding without spending anything, you could try Codecademy – an interactive platform that offers free coding classes in a range of languages including Python, JavaScript, Ruby, SQL, Sass, HTML and CSS. There’s also a paid pro option ($19.99/£15 per month) that gives you access to a personalised learning plan, quizzes, realistic projects, and live help from advisors.

Finally, Egghead offers a range of video tutorials by industry pros to help you learn the most popular JavaScript tools and frameworks, including React, Angular and Vue.js. Subscriptions cost $29/£22 per month.

02. Use code to break your routine

“As a recent design graduate, I felt like I was hitting a slump after doing four internships in a row,” says Trang Minh Nguyen, a designer working in Berlin, who created the images in this article as part of a coding Instagram project. “Learning to code helped me escape this toxic mindset and open up a new realm of possibilities, especially when it comes to generative design.”

03. Make something

One of Trang Minh Nguyen's daily sketches created while she was learning Processing (p5.js)

“Think of a project you want to do, pick a language, and just start making,” advises Nguyen. “Get in the habit of creating. Have endless curiosity, look things up, read books, watch tutorials, wake up early so you have a fresh mind. Something will fuck up along the way and that’s OK.” 

04. Ask the experts

“Ask lots of questions and if someone who knows what they are talking about offers you their time, snap their hand off,” advises Matt Russell, graphic and web designer at Yorkshire marketing agency Red International. “And keep at it: you are going to hit speed bumps along the way but be patient and work through it.”

05. Don't expect to know it all

“It’s okay to feel lost,” says Jun Taoka of Red Badger. “If your goal is to be a good digital designer and not a full-stack developer, you shouldn’t need to understand every single thing you hear your developers say to each other. If you can communicate to your developers your designs and their interactions then you’re doing enough.”

06. Use metaphors

If new concepts in coding confuse you, try to think of metaphors that will make things clearer. “A developer who helped me start coding once told me to think of the code as if I was building a house,” says Clementine Brown of Red Badger. “The HTML is the frame and bricks, and the CSS is the paint and carpets. That really helped me understand the relationship between the two.”

This article was originally published in Computer Arts, the world's leading design magazine. Buy issue 278 here or subscribe here. 

Read more:

• 8 great graphic design portfolios
• 16 top online coding courses
• 8 ways to automate common design tasks

View the full article