Lost In Pixelation

Designing Code

Designing Code

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.

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.

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.

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.

Grunt and Gulp are the predominant options. Installing either is simple, and will start to get you comfortable with the command line. There are some deeper differences between the two, but for our purposes, it boils down to how they are configured. If you have some basic understanding of JavaScript, or want to challenge yourself a bit, Gulp feels more like writing code and will let you stretch your legs a bit. If you are just starting out and can write JSON, Grunt is a good choice.

The links below will help you get either choice up and running.

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:

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

I mentioned earlier about dynamic prototyping becoming a larger part of our workflow as designers. One of the leading tools for mobile prototyping is Framer.js. Using a simplified syntax for JavaScript (CoffeeScript), we can code up fully interactive prototypes, complete with animations. A lot of designers I know have not gotten this far in their toolset, so now is a good time to add interaction prototyping to the mix, while also getting more familiar with JavaScript.

Read more about using Framer.js:

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.

© 2011-2015 Lost In Pixelation, All Rights Reserved.