For years, we have been debating whether designers should know how to code. We seem to always come to the same conclusion: Yes! But why then aren't designers heading in droves to learn the development side of things. Designers who can code are invaluable to an organization, especially if you prefer smaller companies and startups. So why aren't there more? Brian Lovin, proposed the question on twitter this past week, which lead to a pretty lively discussion around what is keeping most designers from learning to code.
Designers: What's the biggest barrier to you learning to code right now?— Brian Lovin (@brian_lovin) February 20, 2015
The most frequent, response was “time”. When you dig deeper though, there is more to it than just simply finding time in the day. Instead, it is a symptom of the increasing demand on both designers and developers to grasp an ever-expanding toolset. It seems that the basics of either profession, aren't quite so…basic…anymore.
The Times, They Are Changing
Three Years ago there was not much required to start coding. All we needed was a text editor and a FTP client. Text editors are no longer enough as we also have to spend time in the incredibly intimidating world of the command line. GitHub and SSH are basically requirements at any company worth their salt, leaving FTP clients in their dust. Furhtermore we have added an endless sea of dependency management, package managers, and task runners to the equation. That leaves a lot of things to learn before even writing a single line of code.
There is also a matter of what languages we are going to tackle. HTML, CSS, and jQuery were once all you needed. Fast forward a few years, and that list has become practically endless. Even more frustarting is that the proper choice is not always clear, being often a matter of preference. Should I write my CSS in SASS or LESS? Should I continue to use jQuery or can I get away with good ol' ‘Vanilla’ JS? What about Bootstrap, Foundation, Angular, Backbone, Grunt, Gulp…it is enough to make anyone's head spin. Our workflows have never been more advanced, nor more bloated.
@b_hough yeah, everyone else seems to be saying "time" right now. Perhaps some part of it is if there are specific things a designer...— Brian Lovin (@brian_lovin) February 20, 2015
@b_hough ...wants to focus on. I.e. learning prototyping vs. html/css vs. jquery vs. ...— Brian Lovin (@brian_lovin) February 20, 2015
The Grass Is Not Always Greener
Given the often convoluted workflow on the development side of things, we'd be forgiven for not wanting to dive in. It is not just the engineering side of things where the workflow has gotten complicated. Up until recently, we just did our thing in Photoshop (or Fireworks if that was your thing), sliced things up, and called it good. Design, however, has not been immune to the rapid maturation of the web.
High resolution displays brought the need for us to start providing vector based assets, bringing Illustrator, and eventually Sketch into our lives. Then we realized that static prototypes for dynamic apps was not going to scale. This ushered in apps like InVision and Pixate to improve that process. Tools once non-existant or nice-to-haves became practically required overnight.
With all these new workflow elements on the design side, and the increasingly higher barrier to entry into coding, it is no wonder that everyone blames time for why they aren't coding yet.
@brian_lovin Exactly, 3 years ago I could do everything I needed with a text editor and a ftp client. Now that is considered a joke.— Brian Hough (@b_hough) February 20, 2015
Dip Your Toe In
There is still a tremendous amount of value knowing code as a designer. Whether it is to gain a better understanding of the context we are designing for, making sure what we design is actually doable, or just simplifying our workflow, we are better served by having some coding skills. However, there is still the issue of time. I've found the best approach is to ease yourself into things by integrating code based tools into my design workflow. So grab your text editor of choice, and let's get started.
Let Code Do The Dirty Work
The first step to making more time for coding, is to leverage it to save time with your design. Task runners were created to handle the more mundane parts of the development workflow, and can do the same for your design workflow. In the world of responsiveness, generating all the assets necessary for every possible device is a huge time sink. This is where task runners can produce image assets, compile icons, and handle fallbacks for older browsers. Given the amount of time designers spend on these tasks, you can free yourself up quite a bit by automating this process.
@b_hough oh man, totally relate to that. always balancing between growing on the visual/ux side and coding. good to combine them?— Brian Lovin (@brian_lovin) February 20, 2015
The links below will help you get either choice up and running.
- Documentation: Grunt // Gulp
- Generate Responsive Images: Grunt // Gulp
- Generate Icon Packages: Grunt // Gulp
- Generate Image Fallbacks: Grunt // Gulp
Get A Start With Git
Almost everyone uses version control for their code base, Git being by far the most prominent. To get started, grab yourself a GitHub account, and read through their setup documentation. This process can help us get a bit deeper into the command line. If you would prefer, there is also a GitHub GUI available.
If you took my advice above and started working with Grunt or Gulp, we will be spitting out a slew of assets your dev team will be leveraging directly. We can make that even easier by placing those assets directly into our codebase ourselves, instead of passing them via email or Dropbox. This is a good way to familiarize yourself with committing code and preparing pull requests, the two primary functions you will be utilizing in Git.
Here are some links to get you started with version control:
- Get Started With Git and GitHub
- GitHub GUI for Mac
- Making A Repo on GitHub
- Committing Code
- Your First Pull Request
Look Into The Matrix
A good way to learn how CSS works is to see how your designs are interpreted into code. If you can access your company's codebase, spend some time going through the HTML and CSS to see how developers turn our designs into code. This is an invaluable way to learn how a developer takes things from mocks to a fully functional app.
Another way of accomplishing this is the built-in CSS property export in Sketch. Right clicking any element will export the CSS code needed to recreate that particular element. We can go even further using the CSS Buddy plugin which let's us write CSS directly in Sketch to create our elements. These are two great ways to learn CSS without leaving the comfort of Sketch.
Links on leverage Sketch to familiarize yourself with CSS:
Bonus: Prototype In Code
Read more about using Framer.js:
@brian_lovin The importance of needing to know code as a designer is seemingly directly proportional to the complexity of learning code.— Brian Hough (@b_hough) February 20, 2015
The time problem is a hard one to solve. Whether you are a designer, a developer, or somewhere in between, the explosion of new tools has made finding time to learn anything new extremely difficult. However, if we can start out by replacing or enhancing parts of our workflows with these new code-based tools, we will have a good base, and some spare time, to develop our coding skills further.