Development for the Designer
Designers and developers have a symbiotic relationship. While they may have complementing skill-sets, there are plenty of advantages to reaching across the aisle, so to speak. This two-part series discusses how designers and developers can benefit from becoming more familiar with each others skills and I’ll offer some advice on how to get familiar with the “other side.”
In this first post I’m going to talk about the world of the programmer, and how as a designer, you can start to get comfortable in that world.
The Disconnect
By nature, designers are a visual group of people. They think spatially and are affected by aesthetics to a greater degree than the average person, including most programmers. In many ways this mindset can make learning about computer science somewhat difficult. You don’t really think about pretty colors and shapes when thinking about computer science.
Snuggling up to the command line
To many designers, the command line seems to be a frigid, phlegmatic tool; dispassionate, mechanical and without personality. Despite the seeming lifelessness of the tool, we can’t argue against the sheer power of the command line. Working from the command line doesn’t have to hurt, and in many ways can be much more productive than using a GUI. Since many designers use a Mac, we will focus on BASH commands (used by Unix, Apple’s underlying operating system).
Learn how your system is actually constructed
Browse your file structure and learn where directories are located on your machine. Doing this will give you a greater sense of how your system works, as well as what sorts of files might be hidden. Moving files and directories within by the command line can be much faster than using Finder to do so; this is especially true if you know the exact locations of where your files/directories exist. Here is a short list of helpful commands to get you started:
- Change directory:
cd - List files in a directory:
ls - Create a directory:
mkdir new_folder - Enter a directory:
cd new_folder - Copy a file or directory:
cp /original/file/path new_folder - Move a file or directory:
mv /original/file/path new_folder
For more advanced commands, and in-depth documentation, I like using this site.
If you have an old computer kicking around that you don’t care too much about, it would be a great tinkering box for learning the command line. I’ve been a fan of using the FreeNAS operating system, because you can pretty much install that sucker on any machine. It only needs 256Mb to run, and it is all command line unless you connect to it through your browser.
Programmed to love
As a designer, you have the ability to hold images and ideas in your mind. You know how you want your designs to look and how to work, but your brain starts getting cloudy when developers descend into nerd diatribe, sputtering about things like rake tasks, migrations, loops, classes and so forth. A change in communication might yield a change in perception when describing and discussing the inner workings of your design. Really when you get down to it, programming isn’t far off from one of those Create-Your-Own Adventure books.
Write in pseudo-code
Pseudo-code is just a way of thinking about and documenting the logical aspects of how code works, in laymen’s terms. Let’s say that I want a hover state for a navigation item, but I want an active state for the item when the user is on the page. You could use this pseudo-code to describe that interaction:
If the user rolls over the navigation link, Then make the navigation link turn red.
If the navigation link equals the current page, Then make the navigation link turn blue, Unless the user rolls over the navigation link, Then make the navigation link turn red.
Eventually, this mentality will allow you to start coding on your own and can help you understand the code written by the developers that you work with. If you want to start building tests like you hear all of those Ruby programmers talking about, look into Cucumber. You are able to write out tests much like you would write pseudo-code.
Drop your WYSIWYG and pick up an IDE
At some point you will have to face it; in order to do real development you have to write out code. There are programs that help with code completion and syntax coloring, in fact all of the good ones do. I would recommend picking up TextMate or RubyMine. TextMate takes up much less RAM, but doesn’t have all of the extensive assistance that RubyMine does.
Tutorials and Community
Aside from a few disgruntled developers, the majority of the programming/development community are some of the best people that you can come across. Asking questions in forums is a great way to get going, just make sure you know the topic doesn’t already exist. Most programmers are so excited about the work that they’re doing, that they don’t hesitate to make time to help new programmers. If you want to learn Ruby (and you do), check out these great resources to help you get started:
If all of this is still too advanced and you want to learn more about basic programming using a GUI interface, check out Scratch! While it may be marketed as software for kids, many entry-level college courses also use it to teach programming fundamentals.
You’ll be a better designer for it
Although learning just for the sake of learning is valuable enough, there’s something in it for you directly as a designer. Crossing the bridge that spans the divide between quirky, artsy designer and pragmatic, intellectual programmer is a big step. But you’ll find that you have more in common than you may have guessed. As an artist, you think abstractly. You bring color, texture, and form to reality. A programmer also thinks with great abstraction. How else could they take your artistic vision and breathe life into it with a bunch of alien commands that abstract back to 0’s and 1’s? Programmers are all at once both incredibly logical and conceptual thinkers. Learning to program can be an intimidating process, but you’ll be able to approach your design patterns and process with greater clarity and confidence, equipped with a more thorough understanding of the entire process. Daring to step out of your comfort zone will give you perspective.
“Perspective is necessary. Otherwise there are only two dimensions. Otherwise you live with your face squashed against a wall, everything a huge foreground, of details, close-ups, hairs, the weave of the bed-sheet, the molecules of the face.” ~ Margaret Atwood (The Handmaid’s Tale)
