When going into design, the majority of students are bright-eyed and bushy-tailed. They were the kid who was always drawing and painting, the one whose parents probably covered their fridge in water colors. So, they would certainly think I’m crazy to say they should also program.
However, design is not art.
There, I said it.
One of the most common misconceptions I receive from my family is that I am in some shape or form an artist. While I do illustrations (such as the one pictured in this post – which, by the way, was inspired by this Adobe Illustrator coffee cup tutorial), I do not consider myself an artist. Granted, I am currently working toward a degree in software engineering, with design as my secondary major (and the way I put the food on the table), but this is why I have come to the conclusion that programming is an invaluable skill to any designer.
Programming generally appeals to people more interested in math and science; its very nature is more mathematical than it is artistic. I’ll admit that I enjoyed math and chemistry the most in high school and college, but regardless, I realized while writing the markup for a site how invaluable my Visual Basic and Java classes have been in writing site code.
Now, granted, many designers take the approach in design of only doing graphics, or only writing PSD/AIs. These designers are losing a major part of the process by not understanding implementation and code; after all, the implementation of the code is just as important, if not more important than the actual mock-up.
I often compare programming and writing markup and CSS, and find several similarities between them, and even find some similar mistakes between them. Now, I understand that we want to keep the downloaded filetype as small as possible, which means cutting down on the amount of lines, whether they are whitespace or comments. However, I believe that just like in programming, adding in whitespace and comments is just as important for markup or CSS as it is for Java.
We often cite naming convention as the major way to understand what something does, but I refute this claim. Yes, naming convention is important, but at the same time, we must also learn the important processes in programming, namely commenting both our styling and markup for a later date if we decide to rewrite our styles, or if we later need to update our code because of a later change in standards et cetera.
Programming teaches us the practice of making our code readable. It teaches documentation of code, as well as adding in white space to better visually organize it. I’ve opened up several sites to look at their markup, whether to update it for a client, or to do minor changes, only to be horrified by the mess of code that I really can’t understand.
In addition, as markup and CSS was developed by programmers and web developers, so it is that it is very similar in several ways to programming. Tags must be closed, and standards must be met; styling must be imported just like certain classes must be imported for a program to function and utilize them properly.
Even CSS rules can be compared, in their essence, to programming. If a variable is stated to have a certain value and then later in the program that value is changed, the old value is discarded. In the same way, when editing CSS classes or identities, one must be aware that what is read last is what the final value for that class’s particular property or method will be.
Then again, there’s white space. White space allows for general readability through line indentation and empty lines. It allows for visual cues, both in programming, and in reading HTML, and allows the programmer or designer to easily depict where one element or set of rules begins or ends. In CSS, whitespace allows for the eye to easily differentiate between classes or identifiers and their properties. However, many programmers or designers often write this code as a single, long line; this is fine for a live site in order to lower load time (by however much). Yet when it comes to the backup files that are kept offline, it is good practice to still retain this indentation and whitespace in order to later go back and edit said elements if need or desire be. And believe me – editing a vertical list of properties is much easier than trying to read through a line of properties to find what I want to edit! Perhaps the best alternative would be to write the original code with white space, and then copy the folder it is in, and optimize it, and then zip the original code to save for later while the optimized code is put live.
In sum, I urge newer designers to take at least a beginning programming class. For those which have experience with design but none with programming whatsoever, I suggest taking a similar course if it has not been done before; perhaps it has no relation whatsoever to color theory or using Adobe Illustrator, but it will definitely help in the application of writing markup and stylesheets.
After all, wouldn’t you want to know why things are written the way they are than simply doing it because it is standards?
