A Designer’s Introduction to Programming

by on 2nd November 2011 with 20 Comments

Designers are often quite hesitant to venture beyond the realms of HTML and CSS into the territory of scripting and programming languages, and for good reason. Programming requires a very different set of skills than mocking up web pages. Further, there are so many different things to learn that most designers don’t even know where to begin: JavaScript, PHP, Ruby, Rails, how can you possibly keep up?

However, in practice, programming turns out to be much less scary than designers imagine it to be. Today I’m going to show you how programming is a skill that you can learn once and then apply to each new language that you pick up. We’ll take a look at three different programming constructs in three different languages to see how similar they really are. If you’d like to get started in programming but don’t know a single thing about it, this article is for you.

Fear Not, You Just Might Like It

This site is generally targeted towards designers, and from personal experience I know that approaching programming for the first time as a designer is extremely intimidating. Designers are visual thinkers, we thrive through creation and experimentation using our mind’s eye and an expert knowledge of the tools of our trade.

Generally, we’re the kind of people that hated math class and anything else where creativity didn’t seem to have an obvious foothold.

“Generally, we’re the kind of people that hated math class and anything else where creativity didn’t seem to have an obvious foothold.”

Programmers are problem solvers. They love logic puzzles and tinkering with code for hours in the absolute absence of visuals of any kind. Keep in mind that these two categories of people aren’t mutually exclusive. If you fit both descriptions, you’ll likely absolutely love programming.

Not HTML and CSS

We’re quickly reaching a point where most web designers know at least a little bit about coding HTML and/or CSS. This experience and knowledge will indeed help you, but perhaps not as much as you might think.

HTML is a *markup language* and CSS is a *style sheet language*, they’re used primarily to format and insert fairly static content into pre-built pages. How you work with them is in all reality very different from wielding a *scripting language* or *object-oriented programming language*, which are the kind of hardcore programming tools you’ll find in use on the web today.

The Big Secret About Programming

That last part was the bad news, but fear not, there’s good news on the horizon. If you walk into a bookstore and wander over to the programming section, you’re likely to be completely intimidated. There are so many different things to learn! This intimidation is furthered when you happen to meet one of the super geniuses that seems to know pretty much all of the programming languages in existence. How in the world do people find the time to learn this stuff? Many beginners are so completely put off at this point that they give up before they ever even try.

“Programming languages tend to be very similar. Many of them use the same building blocks and similar tool sets to achieve their goals.”

The big secret that you don’t know if you’ve never really jumped into programming is that programming languages tend to be very similar. Many of them use the same building blocks and similar tool sets to achieve their goals.

I learned this little secret in my first interaction with programming: a Java class in college (not to be confused with JavaScript). Though I myself was a strapping young lad, the class was largely filled with men in their 30s and 40s. Virtually all of them already had jobs in programming and had been at it for twenty years or more. They were simply employed in the use of other languages and attempting to expand their skill set, often at their employer’s encouragement and expense.

Walking into the class on the first day, none of us knew much, if anything, about Java. However, by the third class, these guys were breezing past me. I was writing horribly simple little code snippets based on the fundamentals that we had learned. These guys were taking the same fundamentals and building elaborate applications with all kinds of cool functions way beyond the requirements for the assignment.

“Was I inept? It turns out, fortunately for me, that the answer wasn’t so simple.”

Was I inept? It turns out, fortunately for me, that the answer wasn’t so simple. The reality was that we were learning very different things. I was learning to program through the lens of Java, these guys already knew all about programming and merely needed a little help figuring out how to translate that knowledge into Java. I was a toddler learning to speak for the first time and they were multi-linguals picking up yet another language.

The point of this long story is to illustrate that, after you really get into programming or scripting with one language, the rest becomes much easier because you’ve dramatically reduced the learning curve. If you know how to code in PHP, the jump to Ruby is much smaller.

The Building Blocks

It’s easy for me to say that programming is built on reusable knowledge, but can I put that into practice? What are these so-called building blocks and how are they similar or different from language to language?

Great question! Let’s find out by taking a look at some of the most basic but most used programming constructs. Understanding these will jumpstart your programming education regardless of the path or language that you choose to pursue.

Variables

screenshot

Variables are a wonderful thing. If you’ve ever used LESS or something similar then you’ve seen the wonders of variables and how they can save immense amount of time. I’m still not sure if they belong in CSS, but the programmer in me sure wants to see them there.

A variable is essentially a way to store information. You can store something as simple as a value, say 39, or something as complex as an entire array of data containing hundreds of values. Think of a variable as a box. Boxes themselves don’t seem all that important, it’s what’s inside that counts. However, boxes do make for a convenient way to store and access certain items.

JavaScript Variables

Let’s jump to an example. Since JavaScript is a likely first candidate for moving past HTML and CSS, we’ll start all of our examples there. Here’s how variables work in JavaScript:

// Creating a JavaScript Variable
var contentWidth;
contentWidth = 496;

// Using the Variable
alert(contentWidth);

Here you can see exactly how variables are used in JavaScript. First, you “declare” a variable. This simply creates it or brings it into existence, when doing this you always want to name it something indicative of its contents. Next, you assign it a value (often these two steps are combined), in our case I threw in an arbitrary number. Remember that, “contentWidth” is our box, which now holds a value. Any time we want to access that box, we just use the variable name, so to end the example out I created an alert and inserted the variable. This will pop up a box with the value “496”.

This may seem useless here but imagine we had three hundred lines of code that referenced that variable frequently. Any time the value of that variable changes, our code still works perfectly because the variable name has stayed constant. Without variables, this would be impossible and much more code would result.

PHP Variables

Now that we have that solid foundation of information, learning variables in other languages becomes much easier. This time we’re not learning what variables are and how they work, only how to use them in other languages.

Here’s a look at how variables work in PHP:

// Creating a PHP Variable
$contentWidth = 496;

// Using the Variable
echo $contentWidth;

There’s a lot of similarity here. Notice the use of semicolons to denote the end of a statement and how comments use the same syntax. This time we declared our variable and assigned it a value in a single line. We can see that the syntax for this is nearly identical, with the important distinction that PHP uses a “$” at the beginning of a variable name. Note that the “echo” command merely prints something to the browser page.

Ruby Variables

Now let’s take a look at variables in Ruby.

# Creating a Ruby Variable
contentWidth = 496

# Using the Variable
puts contentWidth;

By now you can see that a lot of what’s involved in learning a new language is just figuring out its various quirks. For instance, JavaScript and PHP used semicolons at the end of a line, Ruby does not. Also, this time around comments are created with “#” instead of “//” and we use “puts” to output our result.

Loops

screenshot

Another popular programming construct is a loop. With loops you can save yourself the trouble of repeating code again and again by automating the process you want to achieve. When creating a loop, you must be sure to declare the parameters of the loop, such as the conditions for when the loop will cease. You don’t want the actions continuing on infinitely so you must create a condition whereby the loop will be terminated.

JavaScript Loops

In any given language, there are usually multiple types of loops. Here’s one type in JavaScript, the “while” loop. In this example we set up a variable, then create a chunk of code that should execute again and again for as long as the variable is less than 50. Then within that block of code, we define the actions to be repeated. In this case we’re logging the value of the variable to the console, then increasing the variable’s value by one. Since the variable is increasing every time the code runs, it will eventually hit 50 and the loop will terminate.

// JavaScript "while" Loop

var x = 25;

while (x < 50) {
	console.log(x)
	x++; // Increases the variable by one
}

This same thing could be achieved with a "for" loop. This version a little more succinct as is states the value of the variable to start, the condition under which the loop terminates and the action to take on the variable all in one line.

// JavaScript "for" Loop

var x = 25;

for (x=25;x<50;x++) {
	console.log(x)
}

PHP Loops

Once again we find that PHP is very similar to JavaScript. After reading through the examples above, you should be able to effortlessly grasp the PHP equivalent. Here once again we have a while loop and a for loop, each of which contains nearly identical syntax to their JavaScript brethren.

// PHP "while" Loop

$x = 25;

while ($x < 50)
	{
		echo $x;
		$x++; // Increases the variable by one
	}

// PHP "for" Loop

$x = 25;

for ($x=25;$x<50;$x++)
	{
		echo $x;
	}

Ruby Loops

Here are the "while" and "for" loops in Ruby. As you can begin to see, Ruby is much looser in its syntax than the other two languages we're using. Not only are there no semicolons, the curly brackets aren't present either. Also notice how different the "for" loop looks this time around.

// Ruby "while" Loop

x = 25

while x < 50
  puts x
  x+=1 # Increases the variable by one
end

// Ruby "for" Loop

for x in 25..50
  puts x
end

Functions

screenshot

Functions are yet another programming construct created to save you time by avoiding repeating the same code. When you code an application, it will probably perform anywhere from one to thousands of tasks. Each task represents a chunk of commands. When we toss the commands into a function we can simply call that function instead of writing out that full code. In this way a function is a lot like a variable that performs a task or list of tasks.

JavaScript Functions

Let's build a super basic function in JavaScript that takes any number passed to it and squares it. We start here with the word "function" then follow it up with a variable in parentheses. Then inside the function we perform various actions and return a value.

// Creating the Function
function squared(someNumber) {
	return someNumber * someNumber;
}

// Using the Function
console.log(squared(9));

When we use the function, we replace the parenthetical variable with any number we like and the code inside the function will be performed on that value. In the example above, the result returned would be 81.

PHP Functions

By now you're so familiar with the JavaScript to PHP conversion that you should be able to do it all by yourself. Here's the syntax:

// Creating the Function
function squared($someNumber)
{
	return $someNumber * $someNumber;
}

// Using the Function
echo squared(9);

Ruby Methods

Once again, Ruby is quite different. In fact, Ruby actually refers to this particular construct as a method, not a function. However, we can still quickly apply our knowledge of functions to decipher how this works.

// Creating the Function
def squared(someNumber)
   return someNumber * someNumber
end

// Using the Function
puts squared(9)

As you can see, the Ruby method is performing the same task as the JavaScript function. It allows you to pass a number into the parameters, after which is squares that number and returns the value.

Easy Right?

By now you should be able to see the importance of understanding the practice of programming independently of any programming language. There is a shared structure and method of programming that you'll find throughout the languages that you learn. Many of the differences are *semantic* and amount to slight syntax differences.

Don't take this to mean that programming and scripting languages are all the same, they're not. They all have a specific purpose that defines how and when you use them. It's a lot like learning Adobe Illustrator and then jumping to InDesign. You're dealing with two different things created for two different purposes, however, there's enough similarity that an expert knowledge of one will help you learn your way around the other.

Conclusion

This discussion was not in any way meant to be exhaustive. You don't now possess a complete fundamental knowledge of programming. Instead, you merely learned about programming in a way that hopefully makes it more approachable. Instead of seeing a mass of completely different languages that you have to learn, you should now see a collection of related practices in which the study of one actually expands your understanding of the others.

So where should you start? As I mentioned above, JavaScript is definitely the place for web designers to begin. Its application is immediately apparent, especially when combined with jQuery, to the HTML and CSS that you already know. From there the leap to PHP is much more manageable, which might lead you to study Ruby so you can master Ruby on Rails; the possibilities are limitless!

Comments & Discussion

20 Comments

  • GushingAlgorithms

    I don’t mean to sound like some elitist, but any designer who just picks up programming and then thinks it’s easy hasn’t ventured into the realm of real programming yet. In short, don’t major in computer science anytime soon. Writing some WordPress function that calls the category list, or making a For loop, or making a 3-line jQuery function that makes a link fade colors: this is all child’s play. It’s step 5 on a 1000-level staircase. If you can’t do differential equations without a calculator, you can’t do the real programming.

    Sorry for this episode of Oz / Scared Straight. Just wanted to be honest, though.

  • http://twitter.com/Eric_Allison Eric

    I agree with GushingAlgorithm, however, I do believe it’s good for designers to have a bit of programming experience. Even if it is the “basics” above.

    Nothing frustrates me more than having to develop an application that’s been given to me by a designer who has no clue what’s possible and not possible in the back end. (Everything is possible… but not always within a client’s budget) ;)

  • Ana

    As a designer, I believe that the whole point of the article is to invite designers to take that step (those who haven’t). The author is clearly trying to make a point that we (designers) should focus on learning one first instead of avoiding programming because we feel overwhelmed by all the different languages.

  • Florian

    What about an article about the other way around?
    “A Programmer’s Introduction to Designing”

  • Rob

    Why are designers doing HTML & CSS ? They should design not code.

    Programmers should code and not design.

    Simply saying that designers mock up web pages is ridiculous, they do a lot more.

    Speaking for myself, I class myself as a Front End Developer HTMl (5), XHTML, CSS & Javascript.

    Why should I need in-depth knowledge of server side code when there are tons of clever programmers out there creating Open Source CMS, Blog and eCommerce systems.

    I have been working on the net for about 11 years and to date have never felt the need to learn PHP, ASP etc.

    No one person can do everything, thats why Internet/webdesign agencies have a team of designers, front and back-end coders.

  • http://www.richmcnabb.com Rich McNabb

    Great post. You’ve successfully convinced me to start learning JavaScript :)

  • Joshua Johnson

    Why should designers learn to program? The same reason anyone else should, it’s fun! I’m definitely not suggesting that designers NEED to or should feel pressured to program, but the truth is web designers especially often wish that they could launch their own personal products from start to finish. Designers are the type of people who sit around thinking up great web app ideas, then they get discouraged thinking about all of you guys saying that designers have no business coding.

    There is absolutely no logical reason to discourage someone from learning something. If you’re a designer and you want to learn to paint, then do it, if you want to learn to kick a football, do that. Programming is a skill that, when combined with design talent, can take you quite far in a world where web geeks turn into billionaires.

  • Zoli

    I think that designers should atleast know how a webpage is built.I’m a HTML/CSS coder and I’ve had issues with designers who added fancy effects to the webpages,then showing the client the design.Afterwards they give me the design to code it and I was kinda scratching my head and telling the client that without some compromises he should reach deep in his pocket.

  • http://lakology.com LAKSHMI MAREDDY

    I support Joshua on this topic.

    Joshua is talking about day to day stuff that is now being taught in high schools. A lot of common sense, logical thinking and not flapping your hands will help most designers do better stuff. By understanding how the different parts work, one may produce better code, write an app or just do his job better.

    Designer friends, to cut your designer teeth, try templating for WordPress, Blogger, Tumblr. You already know the html/css part, you will also know how to read the code bits and what they do. And as a next step move on to Javascript/Jquery and then to PHP coding etc. The biggest confidence gainer is not talking to programmers who say “I am the programmer, and you don’t know nothing..” Instead take all the help you need via tutorials, beginner books, and kind friends. Why do i say so? Even design employs a mathematical mind. Unfortunately we are so brain washed and society further adds to social ranks such as programmers are better than designers etc. that we accept the status quo.

    For all you programmers who are against designers learning, I would like to point out that modern programming languages are OOPS based and very right clickable and easy to learn because there was once a shortage of programmers and the industry needed people so badly, that they designed code in such a way that it was easy for anyone to code, including you folks now.

    As far as i am concerned, any *idiot* can code in ASP/PHP/CSS/HTML/RUBY/C/C++/.NET/Java etc. So if you are a programmer coding in these languages, you know you want to move on to more complicated platforms/languages .. What say?

    Not every programmer is doing fancy code such as making aeroplanes/washing machines work, or assisting in creating fractals etc. Not everyone is a bio scientist or rocket scientist. There are quite some flavors of coding out there. Most of them deal with reading and writing to databases and writing SQL. So as a programmer if you have time to come on to design sites and diss, you may not be the king of the hill or you are very insecure. So cut some slack, and allow people to grow. What i hear is a lot of small mindedness. If designers want to learn they will do so, make some mistakes learn from it and grow. If you are mature and confident, you wont feel that threatened i think..

    I am from the software industry, can code, am a comp.science student, can actually draw and design websites.. I get both things such as “negative space” and “abend”..

  • http://Jim-Nielsen.com Jim

    I started in design and have been learning a lot in programming languages. Going from JavaScript to python to c++. I would say the hardest thing for me to pick up on and get a grasp on was not variables or loops or syntax, but rather how to solve problems programmatically…If that makes any sense. Once I could figure out how to break the problem into tiny steps and solve, the coding was the easy part :)

  • http://8gramgorilla.com/ Gordon McLachlan

    It’s been my experience that trying to teach a designer how to code is like trying to teach a bird how to swim. Better to leave them to what they do best :) There are plenty of other ways to convey what is and isn’t possibly without them knowing how to programme :) Plus, let’s not confuse coding with HTML and CSS markup here!

  • Dan

    I really enjoyed reading this article. Coming from a illustration background the world of programming is a very daunting and scary place, but thankfully they use similar syntax so once you’ve grasped one language you’re on your way to tackling others.

  • http://www.obxwebdesigner.com Quentin

    From a background in both design and programming I would say that finding a medium of what the client wants can become a struggle of communication between the designer & developer.

    Designers typically think outside the box when it comes to interface design. Sometimes so much so that when it comes to the practicality of development the scope is outside the clients budget. This can be a balance that all designers should have some background to the capabilities of the programming they are putting themselves into. 

    Programmers are lazy. Sorry to say it fellas but for the most part you’re all about finding the easy way out. When it comes to taking a design that is put in front of them they tear it up and say this can’t be done because of this or that and… well it never looks like it was intended and sometimes even function like it should.

    Most of them throw out terms and lingo to basically put the fear of god into anyone who wants to attempt programming. The reality is that most types of website jobs already have have a jump start platform that just needs some tweaking and even if your no expert. A little bit of forum searching and google searching can usually get you the answer you need to your problem.

    Now at this point some programmers & designers are screaming at the screen. But the truth of the matter is they both need to have a little respect for the other one to get the job done right to make the client happy.   

    Or you can learn to do both like me :-)

  • http://www.handbagsdreams.com Louis

    Nice post. I just start learning web design. Your blog helps me a lot in learning. Thank for your excellent job.

  • http://www.junyuetrade.com NikeJordans

    I got more useful information on this blog.. Thanks to sharing the useful information.

  • http://foodiesarsenal.com Todd

    This is really great… I’m the exact kind of person you were trying to write for, I guess. Pretty good in HTML/CSS and totally bewildered by programming. really good intro, I’ll try to keep pressing on.

  • sello

    That’s a very helpfull post for us who are starting to learn, I just don’t undrstnd wats the hating on designers is for… Thanks for the post…

  • Myrtice Francesconi

    Nice post. I was watching continuously this blog and I’m impressed! Extremely useful info especially the last part I care for such info much. I was looking for this specific info for a long time. Thankyou and best of luck.

  • http://goo.gl/ZB5VD Javarevisited

    This tutorial is not just applicable to designer but for any beginner who wants to explore web technology at-least scripting part. being a Java programmer I tend to go towards server side scripting in JSP and client side on javascript. fantastic tutorial.

  • http://wtc.la/freecnatraining30489 cna training tampa

    Remembering to be strong for the patient’s family is very
    important. Nursing aides are also given necessary time to
    focus better on their jobs and responsibilities through these
    training programs. Skills-enrichment courses for blacksmithing, forging,
    ironwork, and ornamental metal work can broaden the range of industries where he can find work.

Subscribe

Membership
About the Author