How Much Code Should Web Designers Need to Know?

by Web Design

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.

artist room easel setup paintings

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.

Macbook Tech Jobs in Tokyo

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.

internal watch gears

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.

Nintendo and video game paper characters

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.

You might also like…

Good Old Static HTML Sites Aren’t Dead Yet. Should They Be? →
Should You Keep Your Website Open Source? →
Should Designers know how to code? What do you think? →
Is a Design House-Style Really Necessary? →
Things I Hate about My Clients →

Author: (97 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

  • http://twitter.com/MysteryE MysteryE

    This is a nice article.

    I’m a web designer, and my responsibility at office is to create the
    design and code it into static HTML/CSS with jQuery. After that, the
    programmer do the rest.

    It’s really important for web designers to understand the CSS process,
    since it will lighten the programmer job. No matter how beautiful your
    design, it’s still useless if it’s almost impossible (well, okay, VERY hard) to code into
    HTML/CSS.

  • http://twitter.com/KieronKeenan Kieron Keenan

    I love both!

  • Marco

    Designer here. Looked into html/css a bit. Did some professional courses. Thing is: If you don’t often ‘do code’ you simply forget important details. And then there’s the different browsers, jQuery, html5, css3, elastic/static design, mobile design, @fontface:twitter, and so on. I’d say it’s almost impossible to just do ‘a bit’ of code (unless you don’t mind having crappy code). It’s all or nothing really.
    And besides, we’re visual beasts. Code is actually quite hard for us. Just as typography, composition, color-combinations, branding, UI, UX and more are difficult to you. Design is not “pretty pixels in an image.” Design is the entire experience and the way the website works (the code). Good coding is part of a good experience, of how it works. You’ve failed to think it through.

    • Damastercas

      Marco, you seem to place a far higher importance on design.
      In reality they are completely equal as one cannot be a success without the
      other. I’m trained as a web developer but have since researched web design in
      more depth, design is fun, it lets you use your imagination to create an
      experience. However if the coding is sloppy or can’t be carried out the design
      is meaningless.

      Every web designer should invest a portion of their time to learn coding basics
      at least. Without learning the principles of code how can you even be sure your
      unique design is feasible?

      Please give code and developers a little more respect they
      do far more than just make your design/experience possible on the web.

      • Jeffcitychris

        I couldn’t disagree with your characterization of Marco’s comments more. No where in his comment does he say design is more important than coding, in fact, he states that good coding is a part of (designing) a good experience. Sounds to me like he is appreciative of the role that developers play in creating a successful user experience.

        I think the main take-away from this discussion is that design is not just about the visual aesthetic.  A lot of planning and effort goes into designing a web site or application before aesthetics even comes into play. Content strategy, information architecture, user experience design, graphic design, technical functionality/coding, hardware infrastructure, etc. must be a collaborative effort if a project is going to be successful. So there is plenty of work to go around for everyone, be they creative staff or technical staff or project management. Respect one another and appreciate what each side brings to the table. 

  • Andy

    Jack of all trades, Master of none.  

    Much better to work in a team when you can perform the strengths of every member.

  • todd

    I’ve done both sides. I think knowing how the technologies work is very important to designing great UIs and UXs. And it is what separates a digital designer and traditional designer. That being said, designers shouldn’t be expected to be able to build websites – designers and developers are different jobs and require different focus. If you try to balance both most likely your designs are going to be average and your code is going to be average. You only have so much time in the day, so put your energy into things that will strengthen you’re craft.

    One final comment, use Fireworks to design for the web. So many people are stuck in Photoshop because that’s what they know, and it really is a time suck. Photoshop has it’s place and it’s not for designing websites. Instead of spending a bunch of time learning code, why not spend time learning how to be a more efficient and stronger designer, then take all that time you’ll save and start learning basic technologies.

    • Andy

      fireworks is the best.  the sign of a true web professional.

    • Evan Skuthorpe

      Fireworks over Photoshop!? Ha!
      Both have pros and cons but the majority of web design professionals no doubt use Photoshop and that’s probably for a reason… Fireworks is awful in my opinion but other designers I know sing its praises over Photoshop…

    • http://twitter.com/natecreatesllc Nate Creates

      Actually, your comment on Photoshop is not good advice to the newcomer. In a professional environment, where you may be delivering your design file as well as code, it’s industry standard to deliver PSDs. While Fireworks does some aspects of web design perhaps more efficient – it’s lack of universal support between agency and client, or between multiple team members, means wasted time. The focus instead is really great CSS, semantic markup, and efficient use of jQuery/Javascript to enhance the experience.

  • http://twitter.com/widodemarco wido

    To me, a person who doesn’t have a clue on CSS, or HTML (a must) cannot be called a web designer. If you just do mockup a “prototype” for a site on Photoshop, it’s good, and surely looks nice. But it’s not a website. It’s not alive. It doesn’t do anything. A web designer should know how to BUILD it. How to turn it into a live thing, a functional thing. 

    Personally I’ve built a bunch of projects right into the Notepad++, without mocking it up on Photoshop. Skipping that step. Just using it to create the images that were in my head. And this saved me a lot of time, as the process of working in Photoshop just gives you the idea of how the site will look like. But it’s not the site YET. You must spend then some time coding it.So for me, a web designer should know how to mockup a site in Photoshop (optional, depending on coding skills) and how to transform it into a valid W3C and semantic HTML/CSS that actually do things. Just in that instance the front-end part would come, where you bump up your quality with jQuery magic.

    • rs

      I agree. I think at least HTML and CSS if you want to be a modern day web designer.  But libraries like jQuery are becoming more essential too and yes, it’s programming, but you can enhance the design in ways Photoshop can’t. Nowadays, I usually start a web project in Inkscape with a few wireframes and then I design straight in html and css using the wireframes as a guide. When I’m done with the layout I pick a color palette and continue from there. Designing in code is a whole new playground.

    • Leonard

      “To me, a person who doesn’t have a clue on CSS, or HTML (a must) cannot be called a web designer. If you just do mockup a “prototype” for a site on Photoshop, it’s good, and surely looks nice.”
      I strongly disagree with that.

      I think it’s certainly possible for a someone with no programming experience (including basic HTML) to be a ‘good’ web – designer. I see proof of that at work.
      We have an exceptionally talented print designer, working with a project manager / producer with strong coding skills, and it work.

      That opened my eyes… I once worked as a designer (and I want to get back into that line of work), but currently work as a web-developer. So I can see the value in what a pure designer (no code) produces…

    • http://taketheleap.ca Kevin Gamble

      “To me, a person who doesn’t have a clue on CSS, or HTML (a must) cannot be called a web designer.”

      Exactly.

      That’s like calling yourself a carpenter because you know how to use a hammer and a saw, but can’t translate those skills into an actual completed project.

  • JCM

    I don’t agree that you should learn jQuery, you should learn Javascript and so jQuery. Because jQuery = Javascript, but Javascript != jQuery.

  • Fred

    Hate to be a baw, but ‘How Much English Should a Blogger Need To Know?’ is quite a relevant question here. Don’t think your blog title’s making much sense.

  • Jordan

    A designer doesn’t really need to know Markup, only understand how a developer works. Just if they remembered to align strokes to the inside of a shape and used pixels for the measurements instead of inches, then that would be great ;)

    I’m sure that doesn’t stand for all, but I think we’ve all been there more than once, hehe.

  • Sane151

    I was just wondering about this very topic.  I am in the process of learning HTML5, CSS.  When I think about all the other stuff, JAVA etc. I feel overwhelmed at times.  Thanks for your post.

  • Elainejoli

    Client here.  I can’t tell you the frustration of hiring a web designer who only understands design with minimum coding skills.  Years ago, it was true.  Designers were only required to make the site reflect the brand, but not anymore.  It is actually rather challenging now to find a designer that has the natural “right eye creative ” for design as well as the “left brain” for the hard stuff of coding, but that’s what we want and need. We don’t want our designer giving us something that the programmer has to change, or not giving us something new in our sites (that has to come from understanding programming).  Yes, learning to code is hard.  But every field has had to adapt to the marketplace.  Imagine accountants who aren’t e-file savvy, architects who still use hand renderings, even guys on the car assembly line have had to come out of their comfort zone because it was required.  Web designers – it is required.

    • Jordan

      I would tend to agree with you on this and its understandable too. It should be made as easy as possible for a client. They pay money, so should then be able to receive a finished product that’s fully functional and is designed to suit the service or product that they are selling.

  • Stu

    This is a good article, my background is design and I started on a drawing board before computers were able to do the basics of what we do today, I have since gone on to programming and database design but I’ve always been involved at design level and worked with some fantastic designers and typographers learning skills all the way.

    These days I’ve stepped back from databases and programming and I’m concentrating more on design again, I couldn’t do what I do now without the knoweldge of HTML, CSS and jQuery. HTML & CSS are essential for anyone wanting to be a web designer and if you can get on with jQuery even better. These languages make my designs come alive and push my design creativity to exploit these languages, especially CSS and jQuery and now with the ability to embed fonts quite successfully, typography isn’t just based on your system fonts or graphics.

    After 23 years I’m still learning and every new job brings a new challenge!

  • eels2010

    This is a great topic. 

  • karks88

    Wonderful article.  I work on my own as a freelancer and so I do need to be good at both sides of things.  While I think I’m better at the design portion, I do enjoy actually making things work as well.  I know a little PHP (enough to be dangerous) but my strong point is CSS/HTML.

    I think what is great about the time we’re in now is that we have tools like WordPress, Joomla, etc. that help designers create dynamic sites on the fly.  We don’t need to code from the ground up any more, which is a big advantage.  When I first started, if you wanted a CMS, you were pretty much going to build it yourself.  But since the tools have improved, my knowledge has improved as well.

  • http://www.oldworldcreative.com Evan Skuthorpe

    A web designer must have *at the very least* an understanding of front-end technologies.

  • http://twitter.com/toasterdroid Jedediah White

    I’ve always been interested in both design AND development. I always start with the design first and then think, “how can I make this or that work best in this project?” That helps me to create my own problems and then go about solving them. It helps to find and make note of resources too. When I don’t know how to do something for example, I go to stackoverflow.com and almost immediately receive an answer every time. It’s good to know both sides – I’ll never be an expert, but I can compile what I know to make something that both I and the client are proud of – and if I can have fun along the way, and perhaps even learn something new – it’s all worth the effort.

  • Cflavigne

    “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.”  I guess this writer has never heard of Site Grinder by Media Lab. 

  • Kelly Johnson

    I’m fortunate enough to have had the motivation at the time as well as be in an agency back in ’96-ish that had clients with interest in ‘the world wide web” so I got started back then though I have a BFA in Graphic Design and have worked both in print and digital since then.

    After 20 years in design/advertising, the one huge aspect that most do not realize is that a good designer can learn to design for any media/channel etc but one will have to learn that designing for the web isn’t the same as designing in print. The work-flows are almost entirely different.

    I’m speaking of true interactive design here, not just About Us and Contact pages that are linked. The teams required to put together a successful (granted that term is relative to the creative brief) website are more integrated at every step than even say an annual report  work-flow. There aren’t long gaps between the teams/individuals like there is in print: initial meeting, concept, hone concepts, copywriting, design, catch a movie, internal meetings, reviews, hone some more, show client and possibly start over…a true web designer needs to understand how things work..not necessarily be able to code them, but much more so than saying “clicking here will make this picture fade-out and this new content fade-in its place.”

    It’s just like video. Motion is entirely different than print design. Good ideas are good ideas and most of the great ideas in advertising history have been seen or read off a page or tv not because the web is so young comparatively but because far too often, the ‘good ideas’ on the web are usually just neat techniques or new tech… not actually conceptual ideas that link a product, service or person to ones mind. (Of course there are exceptions). That’s not the webs fault.

    So, if you really want to up your ante and put a notch in your belt, read-up on accessibility, user experience and content strategy because those are concept-related ideas that are very important to the web/mobile landscape and probably more easily remembered by a creative than code theory or snippets. However, in each of those, coding practice and such will be addressed so you will be far better equipped than the person who can tell you the closest cmyk equivalent of pms 234!

     Just my two cents.

  • http://www.kristincurrier.com Kristin Currier

    Print designer turned web designer turning front end dev here. I have been studying coding for some time now. Taught myself HTML, CSS, JS and PHP. What I couldn’t grasp in JS or PHP, I just started taking real classes in. Sitepoint books, Lynda.com, popular design blogs, reputable designers in the field like Chris Coyier and the like…it’s all out there, you can learn it. I do feel however that it’s hard to balance the 2. I do have to at some point revisit just strict design. But as an in-house designer, I do see the job descriptions out there, and they do ask for designers who can code. I just happen to enjoy both. Code is a fine craft, and we creatives can appreciate that.

  • http://www.facebook.com/bree.radloff Bree Radloff

    Hello, 

    This is a great article, and this topic comes up often at work. I’ve worked with a slew of designers – some more or less familiar with code. I think it does help to produce truly effective designs if you know how the pieces move under the hood, but it’s not required. The truly stellar designers that I’ve worked with are awesome because the posess awesome design chops. 

    I’ve also worked with creative directors on both sides of the fence. One of my favorites insisted that designers should exist in the realm of possibilities, and not worry too much about code.

    Personally (as a UX’er with a design background) I like to construct my skill set like a ‘T’ … I try to have a broad, shallow understanding of many topics but go deep and specialize in my key areas of focus.

    -Bree

  • http://twitter.com/K_J_Designs Keith James Designs

    I’m a hybrid designer/developer. I really don’t think a designer needs to code. It’s really one of those left brain/right brain conflict. I do think that developers are creative but in more of a non-visual, problem solving way. I actually prefer to have a designer give me the comps so that I can just code it up. The problem is that a static design cannot communicate how a user interacts. As long as the designer can wireframe, there shouldn’t be an issue. This is where Fireworks has a distinct advantage over Photoshop.

  • Colette

    I think the industry is so rapidly changing and so innovative that there isn’t a HUGE need for designers to know code. For example there are a variety of Content Management Systems created specifically for designers with no coding experience, like Contegro (www.contegro.com). Obviously it is always good to expand your skill set but I am not sure the argument you are having is as relevant now as it was say 5 years ago.

  • Jayprayag

    I liked the article and the facts told about what a designer should know. In these days of “technology explosion” one has to understand the emerging newer things  but also be able to ‘gel’ them together to bring out a remarkable website design. Very pleasing language has added the joy of reading. Thanks for the post. I may say that  create thenet channel has helped me to understand many intricacies of the trade. I am really very grateful this channel. A newbie shoul look for this channel.

  • Dan

    Can’t confuse web design with graphic design and hope to get away with making a pretty website design and get it built. Even a graphic designer needs to understand the fundamentals of print… i.e. how inks work, how documents need to be set up etc… Just like a web design NEEDS to understand how code works and what is and isn’t possible. Web designers need to know more than just what looks good. But is it possible, does it lend it self to easy maintenance and most importantly is it affordable!?

  • http://twitter.com/RicoSmith_ Rico Smith

    I think it’s very important for web designers to at least know HTML/CSS in it’s most basic form. I know from experience that as a web designer who can code, it’s much easier for me to explain to developers what I envision with a design, because I can explain to the developer in the correct terms and language what my design should do once executed in code. 

    It’s also a plus if you can push the developer creatively in the development of the website because you look at their job from a different viewpoint than their own, but understand the limitations. (The same applies to me who learnt a lot from understanding how to develop websites using HTML/CSS and jQuery.)I also appreciate it when developers spend a bit of time learning about information architecture and design in order to know why they should execute my design to the exact pixel. I think as also mentioned in the comments that web design is a collaborative effort and everyone has an equally important role and it just makes the journey smoother if everyone does their jobs in such a way to make the next person in the development process’ life easier.