Should Designers Know Code?

Beau Walsh: Coding Designers

Have you ever noticed that in many a Nintendo game, Mr. Mario himself tends to have the jack of all stats? That glorious man and his mustache seem to be all around decent at everything. Making him a solid competitor whether it be carts, tennis, you name it. He has the acceleration, speed, and handling.

Now as web designers, our main task is fairly obvious: the design part.

There are the purists that believe only in the sacred trinity of the Photoshop, Illustrator & inDesign. Any part of the process beyond the Creative Suite design package was meant for the hands of someone else.

But bringing up our stats in other areas can help us get that star or koopa-shell or… Ok, I think my metaphor is getting lost.

So the question arises: Should a designer know code?

But before we go much further, let’s get to the same page and clarify what this word “development” means. You never know who could be reading this (hi, mom).

For the purposes of this conversation, the type of developer we are referring to is “front-end developer.” These guys deal with the way content shows up in that browser of yours.

In web and most things code, you have your back-ends and front-ends. Without getting all birds-and-bees on you, it basically means building the objects, relationships, and databases versus calling and styling them. Both use code, but different kinds.

So front-end think HTML, CSS, some Javascript, some PHP.

Still with me?

Now, a lot depends on what your goals are as a web designer.

There are those who are completely satisfied never typing a single <div> tag in their lives. Fine and dandy. Because just like the limitless world of design, development has no ceiling to its knowledge. The learning curve is intimidating to a focus of a photoshop-dweller.

We need PSD-pros. They create the pixel-perfection, at times obsessing over the slightest tick-mark to the left or right.

With technology and some friends, designers can navigate past the rigid syntax—Leaving the confusing amalgamation of characters and logic to someone else.

Learn some.

Mario didn’t go the same route of other characters. They may have awesome handling but leave their drifting abilities to drop off the face of the Rainbow Road. No, he shows up with an understanding of all.

Some may have alerts going off:
“Jack of all trades! Jack of all trades!”

Settle down, I’m not advocating that you become the master of none here. While that may be the route for some of the less niched, it simply isn’t practical. Furthermore, it is against the advice of many famous designers.

But what I will say, is that the study and understanding of how the web works will give you a strong insight into what is possible. Notice I said study and understanding—I didn’t say practice. You don’t have to commit to hours of troubleshooting, googling, and weeping. Simply learning a few new words will go along way.

Knowledge across different fields connect networks of new understanding.

Sorry, that was a really cheesy, abstract statement. More Mario?

Going back to our red-hatted friend, his ability to accelerate complements his top speed because it gets him there sooner. Then the solid drifting and handling help keep that pace.

You don’t need to drop everything and spend the entire week in a wifi-less cabin with CSS coding tutorials. Funny enough, that’s what I did but I may have different goals than you. The main point here is to gradually familiarize yourself with the process, capabilities and future of coding.

I plan on going more in-depth on this subject, providing designers with a top-down view on what basic concepts they should know that will help improve their design workflow. This begins with the vocabulary that provides a stronger line of communication between all of those working on the project.

What aspects of development do you want to learn about? What definitions would you like in “designer terms?”

Leave a comment below and let’s start the conversation!

Leave a Comment

Your email address will not be published. Required fields are marked *