Design & UX
Article

The Web Designer’s Guide To Programming

By Richa Jain
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?

Comments
vokul_inta_lct

I disagree, here is why:

I have a degree in Web Design & Multimedia from the college I went to and it exposed me to Graphic Design, Web Design and Web Development, in retrospect I'm glad I learned all of that because it gives me insight on various aspects of product development. However, in the early years, I felt I was real good at what I did, but I would see some web designs out there that were really, really creative and sound in principal that blew me away! I also would see some front-end code that was awesome that made my tid-bits of jQuery look like elementary. So I was caught in between because I was beginning to be a jack of all trades but Master of NONE! I see so many designers that want to aspire to be developers or learn coding, and they get caught up in rapid prototyping instead of mocking, wire-framing and designing with design tools, that they end up losing focus on design principals and turn out some lack-luster designs. Or miss details in flow because they are too busy worrying about what CSS or HTML to use or what jQuery/JS plugin they can load on their page. Designing requires cognitive thinking, and programming requires Logical thinking. When you split your focus between the two, your brain is 50% there and 50% here, meaning that the product and team is not getting 100% of that persons main specialty, in a sense the product did not get the full vetted concentration from design! You see this a lot now, websites are so monochromatic and flat, it's really sad.

I finally decided that I wanted to be a full on developer and now I am a very well versed Front-End developer writing my own JS Utilities and leveraging the premier frameworks out there, and I couldn't be more at peace of how much I have excelled in a role by focusing 100% of my brain power and concentration on that. I encourage designers to go back to embracing Graphic Design and utilizing the tools available to make compelling awesome designs that we developers will love to bring to life for them!

alexmwalker

That's a good explanation, @vokul_inta_lct

chrisofarabia

I didn't really read the article as an attempt at getting designers into the 50/50 space you mention. I read it only as a way of laying down some basics as to what sits behind making a design work on a web page. That to me doesn't seem to be a bad thing, and goes nowhere near far enough to turn a designer into a developer. I'd actually welcome something that went the other way, "A Web Developers' Guide to Design". The coding I grasp, design though, is something else entirely.

vlasterx

I also disagree that web designer don't need to know how to code. If they don't know, then they are graphic designers.

I have been working as web designer and frontend web developer for more than 10 years and in my experience all web designers that don't know how to make their design work through code, really don't know what is possible and more importantly - optimal. In my career I have came across many talented graphic designers that wanted to be web designers and their designs were always really bad when you take into account technologies required to make it work. Their sites were heavy when it comes to images and JS, HTML and CSS weren't reusable. Object oriented programming is a must today.

Is this article supposed to justify lack of knowledge for some designers who want to design for web and applications as well? If it is, you are doing us all a huge disfavor.

I recognize only web designers who are frontend developers as well. Graphic designers are useful only for creation of banners, cover images and that's mostly it. Sorry, but it is what it is. This is really demanding profession and people don't need to have illusions about it.

richajn

Hi vokul_inta_lct

Web design and development are two different skillsets - that overlap a bit. I believe designers need to know the basics of coding. It's not about code per se. It's not about designers being able to develop a fully compliant webpage. It's about knowing the tools of your trade and how web pages are built. Because, like you said, it gives you a holistic view of website development.

For someone who's new to the field, it is good to get exposure to the different domains so that you eventually figure out which is the best fit for you. I think that's the phase you went through in college.

Web designers should know the basics of code. But not spend their time worrying about the right plugins to use. That's the developers' job.

richajn

Exactly. A web design should know the basics behind what makes a webpage work. That doesn't mean they have to be a full stack developer as well. Those are two very different, specialized roles with different skill sets.

[ps: You're coming up with some good article suggestions Chris! I think we should sync up! ]

richajn

Well put. While I won't go to the extent of saying web designers MUST be frontend developers as well, they need to have a good understanding of how the front end works. They may not know the best plugins to use, or be able to write fully compliant CSS code that's compatible across browsers and devices - but they should understand how all of those work together and perhaps be able to put together a basic page.

If you truly want to master your domain, you need to know how things work beyond it.

chrisofarabia

Seriously? blush

vokul_inta_lct

Thanks, I think you understood that I was not undermining a Designer's role, simply stating their realm is broad in knowledge, theory, principles and application as much as a front-end developer's realm. I think collaboration on the limits of what a design can be, must start from the beginning between designers and front-end developers. I believe our industry in trying to push this hybrid web designer/web developer role for product development, is misinterpreting 'siloing team' members for efficiency.

vokul_inta_lct

I think I failed to mention that designers inadvertently venture into the 50/50 space because they are learning something new. It's human nature to be curious and human nature to venture into understanding what you don't understand. I'm speaking from experience, and I've worked with web designers who design in HTML/CSS for websites, and I have worked with graphic designers using graphic tools for websites, and in all cases the graphic designers create more compelling designs that have great form and function for a web page/site. I've asked myself why is that? I believe it's because the designer was in a design realm, where cognitive thinking takes over and they can be expressive on the canvas. I think I should title my argument 'How designing in HTML/CSS is watering down Web Design'.

What happened to the days of awesome intricate websites. Now we are all using cookie cutter templates and flat color palettes because bootstrap and google say so? We've taken the 'Design' out of Web Design in my humble opinion.

vokul_inta_lct

I agree, but you can easily just collaborate with the front-end developer and together put the form and function into a web design. That collaboration fuels knowledge sharing. And both will understand how they're roles overlap. And would it not be inefficient to receive a sub-optimal HTML/CSS page from a designer to have to clean up code wise anyway. If the design is received in nice comp form, and there is a bootstrap 'esque framework available to the developer, he can grid the layout in a jiffy and bring that comp to life. I'm just speaking from experience so perhaps you haven't experienced what I have. But I have experienced inefficient workflows when you go the overlapping skill set route.

chrisofarabia

I came across this article earlier related to my point about needing a Developers a Guide to Design. It's not too long, but be aware it links out to quite a few other resources to expand the topic out.

http://joelglovier.com/writing/design-advice-for-developers/

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.