How to Become a Unicorn Designer: Learning to Code
Coding isn’t just for engineers anymore. Now more than ever, coding is critical knowledge for designers, even when they aren’t the main coders on a job. There is even a growing appreciation for unicorns, designers who also write code. While becoming one might not be your career goal, “having an understanding of code allows designers to see what’s possible,” explains Abby Larner, an Adobe associate product manager and a former coding boot camp instructor.
Abby recognizes that for some designers, the thought of coding might seem overwhelming, or too far outside their comfort zone. “A lot of my students have anxieties about code. Designers think of themselves as having creative brains and coding feels more like math. But designers shouldn’t be afraid of code. It’s about pattern recognition, and that’s something designers are very good at.”
To help ease newcomers in, Abby recommends learning coding fundamentals with an emphasis on the designer’s perspective. Understanding basic concepts, such as setting up the structure of an HTML page, writing semantic code, and including comments, should be mixed with learning design elements such as typography and principles like responsive design.
Finding a Great Place to Start
Like an artist who approaches a blank canvas with brushes and paint, a designer needs the right tools to craft a web page. With all of the editors, coding resources, and other plugins available, setting up your workspace can be challenging, and it can be especially frustrating for beginners. For those with access to Adobe Creative Cloud, Abby recommends starting with Dreamweaver “because there’s not a whole lot of setup involved for beginners and because Live View lets you see what’s happening as you make changes in your code. You can see an issue or a bug develop, and that makes Dreamweaver an extremely powerful learning tool.”
There are additional reasons why Dreamweaver is great for beginning coders: The new Developer Workspace gives users a feel for coding environments, while also offering hints along the way — if you start typing something, like the name of an image, Dreamweaver will offer suggestions to fill in the rest. And, when you’re typing CSS properties and you’re not sure what value to use, or what a property does, you can go right to Dreamweaver’s built-in dictionary. You don’t have to constantly switch between Googling a term and working on your code.
Getting into Your First Project
Even with the best setup and resources, many new coders need more help to get going. This is why Abby has been reaching out to beginning coders, especially designers, to give them a solid start in the coding world. She recently created a four-part learn-to-code series on Facebook Live to walk designers through coding a blog page using Dreamweaver.
For designers who are ready to strike out on their own, Abby recommends beginning small. It’s just like learning to design for print—it takes time to experiment and to master the tools, so, at first, a huge project can feel overwhelming. A single page, like an about me, personal resume, or hobby page, is ideal.
Top Tips for Getting Unstuck
If you’re just getting started, you’ll hit roadblocks, but don’t get discouraged! Here are Abby’s top-four tips to get you unstuck:
- Inspect elements. Browsers have a feature — the inspector — for developers and it’s your new best friend. In Google Chrome you can right click on anything to inspect any HTML element or CSS property on your page. A lot of times, beginning coders open up the inspector, check the element that is giving them problems and see the solution immediately.
- Check the details. Coding errors are often syntax-related. If you forget a semicolon, or forget to close one of your HTML tags, that can cause a lot of problems, so always look back at the details. Dreamweaver will also mark any errors in your code, so you can identify them more easily.
- Go slowly, and delete to see what went wrong. You don’t want to write all of your code and then go into the browser just to see that everything is broken. It’s very hard to tell what the problem is when it could be literally anywhere in your code. Instead, make incremental changes so you can catch a problem when it develops. If the problem’s already there, try deleting small sections of code and see what affects the problem spot — that way you’ll know where you need to look to find your issue.
- Set a limit on how long you bang your head against the wall. If you feel like you’ve been sitting and staring at a problem forever, think of Plan B. Ask a coder friend to take a look, or start searching for answers online. If you’ve been puzzling over something for an hour, it’s probably time to get out, walk around, and embrace a 10-minute break. Once your brain gets a little rest, it will be easier to figure out how to fix your problem.