How Much Code Should Web Designers Need to Know?

This is an interesting topic which isn’t often discussed between web designers. Getting started in Adobe Photoshop is difficult, and you feel an exhilarating rush when you complete your first web project. But what good is a website mockup if you can’t build it?

Arguably designers by definition do not need to understand any programming. Design is just that – pretty pixels in an image. However many talented individuals are coming forward who take the time to study both fields. You can market yourself at prospective jobs as being proficient in both design and markup. I’m going to discuss a few points on this topic and maybe we can figure out a balance on how much code is required for web designers to understand.

The Problems

In an ideal world we would be able to build graphics and easily import them into a program for compiling into a website, desktop app, whatever. Sadly this is not the case and doesn’t appear to be anywhere on the horizon. For now web designers & developers must work together to build projects which are stunning visually and function appropriately.

This partnership is important because when you have a skilled duo working together you’ll notice much higher quality from both individuals. However where should the line be drawn? This is entirely up to your team and your individual circumstances.

I would argue that anybody skilled enough in creating stunning web graphics should be able to understand even minuscule HTML/CSS. If you’ve never in your life learned a development language then this will be an uphill battle at first. But given a few weeks of study practically anybody can understand the basics of HTML/CSS markup. And it’s certainly not something you’ll regret learning down the road.

What are your Responsibilities?

If you can get away with only landing design work then you’d be in a very lucky position. Most project managers consider any “web designer” to also understand frontend development languages enough to build their ideas into a browser. As mentioned above you can have zero knowledge of HTML and pick up the basics in just a few weeks(maybe 1-2 months).

CSS is a bit trickier where you need to understand positioning elements on the page. This may take more time to really nail down the concepts, but both these languages are required for building semantic web layouts. I’m sure most designers who already understand these frontend languages will vouch in saying it’s a major improvement over solely performing graphics work.

Webpage Scripting

The fuzzy grey area to consider is frontend web development for dynamic content. JavaScript is easily the most popular language and supported in all modern web browsers. Web designers shouldn’t feel required to learn any JavaScript – but it is an immensely powerful language which you can use to add flair into your designs.

And to boot the popularity of library frameworks such as jQuery makes learning JavaScript hundreds of times easier. In fact most web developers do not write code in straight JavaScript anymore. jQuery is just easier and can perform all the same tasks with fewer lines of code. But I have to admit that the syntax looks much more like a programming language than HTML or CSS.

If you truly have an interest in pushing the envelope with frontend coding then take some time to study the basics of jQuery. You’ll really be an asset to any creative team! A web designer who can put together brilliant mockups and also code them into a dynamic page is the rarest exception. These tasks are often split between the designer and a frontend web developer.

But you can market yourself as both a designer & developer using these web languages. Check out our collection of jQuery tutorials to get you started on the right path. There are also dozens of helpful videos in YouTube if you can learn better by example.

Taking it Slow

If you are coming into this with absolutely no knowledge of web coding then it can appear very overwhelming. Do not expect to be building your portfolio site in HTML on the first day! It will take some time and dedicated studying before you memorize the common page elements and CSS properties. But within a week or two you should be feeling very comfortable reading HTML.

Just remember that you want to build websites properly and follow semantic rules. If there’s anything worse than a web designer who doesn’t know how to code, it’s a web designer who codes poorly!

The newest specs on HTML5 are very simple to understand and build a document outline. We have collected a few HTML5 web templates which you can download for free and play around in the source code. This is the best way to start learning once you understand the basics of how to write in HTML. Diving into other people’s code will show you examples of how professionals in the industry are building their layouts.

Freelance Stability

One of the best arguments to put out is the stability web designers can earn with freelancing. If you can only build PSD mockups then there’s no way you could take on client work without also paying a frontend web developer to code the site. This would cut heavily into your profits on any projects you land.

Having done plenty of freelance work myself I can say the projects I most enjoyed were with clients who only needed a basic website design, yet with more complex JavaScript-based animations or dropdowns. I mastered a large portion of my current skillset by practicing on these freelance projects and learning as I went along. The countless resources in Google make this possible now more than any other time in history.

But even disregarding freelance work you could still be interested in working for another design agency. Problems can then arise when you’re creating a PSD mockup which doesn’t accurately reflect possible web UI elements. Then the developer on your team needs to request changes and the project is drawn out even longer.

The flow of any workspace can be disturbed by small yet annoying oddities like this. Building in Photoshop and HTML/CSS gives you a lot more control over the final product and offloads work from your design team. This opens opportunities to work with experienced PHP and JavaScript developers who then use your semantic HTML as a template for more customized scripts.

Your Future Goals

Ultimately this question of “designers who code” cannot be answered the same for everybody – and that’s why it makes such an interesting discussion topic. You need to consider what your goals are in the future and if they require an understanding of properly building websites.

There are plenty of design jobs where you can work strictly on branding elements. This includes logos, vector illustrations, icons, mascots, and other goodies. But even digital illustrators may wish to put up their own portfolio website one day, and this is when a brief understanding of HTML comes in handy.

If you wish to read a bit more on this topic check out our post should designers know how to code? There are solid arguments for both learning frontend coding and strictly sticking to design only. And again it all comes back to your own personal preference and requirements for creating digital products.

Conclusion

It is your decision for which skills you decide to learn and how you further your own knowledge. Modern web designers are almost assumed to have some knowledge of HTML and CSS code. When first getting started in design it’s difficult to multitask in both areas. But after just a few months it shouldn’t take long for your curiosity to peak.

What suggestions do you have for web designers looking to understand frontend coding? How do you feel this can affect performance both as a freelancer and working with a design team? Let us know your thoughts in the discussion area below.