Design & UX

The Web Designer’s Guide To Programming

Richa Jain
Share
Photo credit: Cameron - Nick-icorn

Photo credit: Cameron – Nick-icorn

Do web designers really need to know how to code? Do we really need “unicorns”?

The answer is probably no.

Today's world is heading towards super specialization (for example mobile apps for just about anything). Most designers prefer to focus on their strengths – the creative aspects of the website design. Let the developer figure out how to bring it to life. Or better still, create a live site with modern co-design tools, where there’s no need to call in a developer!

But here’s the thing – as a creative, you want full control over your work. You want to see your work go live. You want to push the boundaries.

As Van Gogh wrote

‘I keep on making what I can’t do yet in order to learn to be able to do it.' — Vincent Van Gogh

To truly master your craft, you need to understand the medium. The medium of the web, is code.

For those who aspire to master web design, the question is not really “Does a web designer need to learn how to code?” but it’s more of “How much code does a web designer need to learn?”.

A designer does not need to be an HTML or CSS guru. Or an expert coder. A designer needs to understand just enough about the code that forms the basis of the web – to be able to connect the dots and make sound design decisions.

Code: It's not as hard as you think

For someone who’s never done any programming before, it can get a bit overwhelming. HTML, CSS, JavaScript, PHP, Ruby, SQL .. web development actually uses a bunch of different programming languages. If you’re a designer keen to learn how your website design comes to life, here’s what you need to know and where to get started.

Front End vs Back End Web Development

The part of the website that viewers see is called the front end. The back end comprises of all the stored data, images, the server and other components. Web design and development is a bit like building a house – an architect designs the house much like web designer designs the website; the construction crew puts up the brick, mortar, plumbing etc akin to back end development, painters, interior decorator etc handle the visible, finishing touches to the house similar to front end development.

Frontend development is done in HTML, CSS and JavaScript, while back end developers normally use PHP, Ruby, Python, Java, SQL or .Net for programming. Full stack developers who understand and can code the full stack ie both frontend and backend. (For more information on front end vs back end development, you can read here and here).

A designer does not need to learn all of these programming languages. The goal is not to be a full stack developer, or really any kind of developer (unless you really want to make the transition!). The goal is to understand how a design translates to code. It makes sense for designers to focus on understanding the basics of front end programming since it is the part that creates the layout and the visual elements of the design.

HTML (HyperText Markup Language)

Going from the design or mockup to a live website involves many stages of coding, and as you saw above, many languages. The first step in the process is usually to map out the components of the site into HTML elements and write out the basic HTML code. Each component is called an element, and specified using tags. Text, images, animations each become an HTML element. Each element is structured into a hierarchy called the DOM tree, which determines the order in which each element is loaded and displayed. Here’s a simple example of basic HTML.

<!DOCTYPE html>
<html>
<body>
  <h1>A Dummy Heading</h1>
  <p>Some text that spans the line.. </p>
</body>
</html>

And this is what it looks like:

A dummy heading. Some text that spans the line

It’s rather plain ! Other than the basic text we put in, there’s no styling, layout or any other visual elements here. That’s because styling information goes into the CSS. But before we move over to CSS, here’s some great online trainings to help you get familiar with HTML

CSS (Cascading Style Sheets)

Most of the styling information is stored separately from the HTML as CSS sheets. Developers prefer to separate the content from the style so that it is easy to change one or the other without messing everything up, or having to redo the entire code. This works really well especially for large websites with multiple pages. Each page no longer requires to have it’s own layout coded or the fonts etc defined. All pages can use a common set of CSS style sheets to leverage a common layout, font set etc.

Or if the client decides they want major changes to the layout at the last minute, you can go and just change the CSS styles without having to edit each page of the site. Usually when developers start coding, it is an iterative process going back and forth between the HTML and CSS before they have the final versions ready.

Lets take the first example ahead and add some styling. The following lines make the heading blue and center it.

<!DOCTYPE html>
<html>
<body>
<style>
h1 {
    color: blue;
    text-align: center;
}
</style>

  <h1>A Dummy Heading</h1>
  <p>Some text that spans the line. And goes on. And on. </p>
  
</body>
</html>

It now looks like this:

Simple code example: A dummy heading followed by some text

Again, this is just a very basic example. You can learn some practical CSS from the following online resources:

JavaScript

JavaScript is what lets you have dynamic, interactive elements on your web page. Most contact forms, changing image carousels, auto-suggest / auto-fill fields and the likes are all based on JavaScript. Sure there are other ways to add certain dynamic elements, but JavaScript is by an far the most popular. JavaScript is also used to change the HTML content, or load different content. W3School has some good live examples where you can see how JavaScript changes the content. To learn more about JavaScript and how it can help designers, check out the following resources:

There is an extensive library of JavaScript functions, APIs and plugins readily available for most web tasks. Meaning, you can easily use these pre-built packages and rarely have to write more than the basic JavaScript code yourself.

Putting It All Together

Code: It's fun

So we’ve introduced you to the basic languages of frontend web development – the ones that are used to translate your design into a live web page. Like we said earlier, the coding process is often iterative with the developer switching back and forth between these languages, depending on the functionality required. But how does it all come together? The following courses can help you understand how HTML, CSS and JavaScript come together to bring your designs to life:

Note that these are just some hand picked introductory courses to get you started. Those interested in diving deeper, or expanding their skills to include front end web development can look up further resources at Learnable, CodeAcademy, Tut+, Udemy or other online portals.

Wrapping it Up

While designers don’t need to know how to code, taking the effort to learn the basics of front end development will definitely help expand their horizons. It brings in

  • an understanding that helps create new design possibilities
  • the ability to implement or experiment with your own live sites
  • the opportunity or perhaps the vocabulary to interact with your developers

and most of all, the satisfaction and respect you get from all of the above.

Is it hard? Probably (but the super easy, comprehensive course I’ve listed about should make it a breeze). Is it worth it? Definitely.

If you’ve already walked this path, do share with us – How has it helped you as a designer? What were the biggest hurdles you faced?