Do web designers need to know how to code?

Do web designers need to know how to code?

Yes, Web designer has to deal with software like Adobe Photoshop, Illustrator, and InDesign to create a design for the web. Then this design deals with coding to make it online. And for that, it's very important for the web designer to understand the components of there design to represent as a coding. For that, they should have the knowledge of coding, not fully understanding but with basics.

Personally, it all depends on your skills and requirements. Skills being able to learn and grasp stuff quickly. Requirements being finances. Learning something will need time., and that would kill your productivity for the time being.

So if you have a lot of time to kill, go ahead and learn to code.

I've been a designer for the last four years and i am good at editing basic stuff. I just dont have enough time to learn code the pro way.

I think web designers should know HTML/CSS — even if it’s just limited to the fundamentals — for the sake of being able to create web designs and web interfaces that work on the medium.

Web designers may choose not to write the HTML/CSS themselves, but knowing how markup and CSS works is essential to being a web designer. Web designers might not need to be HTML/CSS ninjas, but it serves them well to know (at least) how their web layout comps are converted to a website.

For me, the designer/developer disconnect is something that happened years ago, but then people realised that web design is a lot more then just doing a mockup.

For me, when someone calls themself a web designer I expect:

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

To me, a web designer is someone who can create the client side of a site.

A good web designer will have all of these, and an understanding of how choices they make during the design process affect the UX of the site.

When someone says web developer, I expect:

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

A good web developer will have all of these, and be able to understand how the architecture choices he makes will influence the front end of the site and the functionality exposed to users.

You also get people who specialise in UX and other areas that are more horizontal then web design, in that they apply to a number of different development environments.

edit: If anyone has an example of a good design group that separates the graphic design from the web design I'd be very interested.

Yes. An artist should understand the medium he's working in, be it a painter with his oil and canvas, a sculptor with his marble and chisel, or a web designer with his HTML and CSS.

I used to work in the videogame industry. The best game designers were creative people with a strong technical bent who understood the ever changing limitations of the medium and could design for it. People who can't do that overreach and the watered down implementation of their vision ends up sucking.

I recently did some web development where the designer's background was entirely in print media. The result was rather beautiful pages, which would have been fantastic in print, but worked rather poorly as a website.

In my experience (I'm a coder, not a designer), it is not so much a question that the web designer should know about code. But they should know about how their work is being applied inside a browser.

The greatest problem with designers without enough knowledge about web/browsers is that they create designs that look beautiful, but don't really work inside the browser. Just a couple of things some may not have considered:

• Use of fonts. They use fonts installed with their PhotoShop, which the average user don't have. Or they use Mac fonts, which don't exist on Windows/Linux.
• Lack of respect of screen/browser size. The design is not meant to be shown on smaller computers. As smaller notebooks/tablets are being more popular, the need to take smaller screen sizes into account becomes more important.
• What should happen when you resize the browser screen? Has the designer taken into account what should happen with the design when the browser is resized.
• What about scroll bars. The design typically comes with "lorem ipsum" placeholders. What if a lot of text goes into that placeholder and we need scroll bars, where should we place them.
• A lot of images. Some designs require you to cut out a lot of png's. This can lead to long response times from the web server as the initial page requires the browser to download all these png's.

These are the problems I have seen when working with designers. These are not issues about the designer not knowing anything about code. But issues about not thinking about how the design is put to use.

Designers should have an idea of how coding works. It's sometimes the only way to prevent their front-end developer from going homicidal. To acquire that idea, direct experience may be the easiest way.

There certainly are others, but it cannot hurt your business to learn to program a little Javascript. (Actually times are changing and there are legions of guys with designer skills that can javascript their way out of their DOMs, but that's a whole different story)

My general thoughts:

• Front end web developers have to deal with awful backends and many levels of idiosyncrasies to bother with your design subtleties. Most of those idiosyncrasies are caused by bad choices of pre-fab backends on the management part and steal hefty amounts of time to deal with.

• Web designers while dealing with such stressed individuals risk their life, constantly. And should take some of those front-end matters in serious consideration, instead of dropping the design on their table and run away screaming to the office "I'm over, I'm done, from now on it's all of the dev's fault!"

• Design shops should burn.

A broader understanding of the medium one is working in always makes one a better artist and craftsman in that realm.

Many web designers that don't know front end development are difficult to work with no so much because they are bad web designers but because they just aren't web designers at all. They are graphic designers with some print background and are trying to build brochures and posters rather than actual web sites.

It's like hiring a landscaper to remodel your bathroom. They have a sense of design, and likely understand some of the fundamentals, but odds are they are much better at landscaping your front lawn than they are at tiling your shower.

A decade ago when most web sites were still built like factory floor assembly lines, it wasn't as big of a deal to have one person do the PSD, the next person do the HTML and the next add the DB, etc.

But these days, most progressive web building is done with an agile process and the teams are diverse with plenty of user experience methodology added in, progressive enhancements, integrated back end and front end systems, concepts such as reactive web design being tossed around, etc. As such, a lot of the design process has to happen in code. Be it prototyping, user testing, iterative design, or what have you, the code is the medium and the team needs to understand it.

No, not everyone on the team needs to be able to write jQuery plugins. But the team should at least know what they are and the UX/Web Team should have people on that CAN write them, as ultimately, whatever that gets designed has to be built.

Lauren, ghoppe and Farray all speak sooth, so I'll not rehash any of what they said. As a matter of practicality, let me offer another take on your explicit and implicit questions.

The best approach for a developer is the same one that printers have been beating the drum about since Gutenberg cut his first type: insist that the designer involve you in the project right from the start. Make it clear that you must be involved in the discussion before a single pixel hits the screen.

When I'm on a print design project that involves anything unusual, I'm in talks with the printer and bindery folks right away. They know a hell of a lot more about their craft than I do, so I make it my business to get them involved right at the start. Unfortunately, beginning designers, especially when they're fresh out of school and haven't yet become acquainted with the real world, sometimes neglect that simple step and end up in deep kimshee without a life preserver.

Campaign in blogs, on forums, with clients and project managers, with local schools and user groups and any designer within range: "Talk to your developer before you start to design!"

A developer is going to get comps from designers who have no clue what they're asking for, just as prepress departments sometimes get artwork that's unusable (and designers get briefs only a masochist would follow). But you can prevent a lot of frustration and wasted time if you insist on a place at the planning table.

Depends on where you work.

If you work for a large company then these may all be individual roles:

1. UX or Architecture Specialist - plans the site's information architecture/organization/makes wireframes

2. Designer - designs the site using photoshop or other tool

3. Front End Developer - does html/css/javascript/json/xml/etc. and writes templating code that integrates front end with back

4. Back End Developer - does the programming that makes everything actually work dynamically

Most mid level places require the designer to handle the UX decisions as well. But smaller places may need the designer to do all of the 3 above things. However front end is a tricky area and there are people from different skill sets in it. If you are a designer who needs to do front end, you definitely shouldn't be expected to know much more than HTML/CSS and JQuery or some other frame work. Expecting a designer to know the deeper aspects of javascript and back end integration is asking too much.

Of course if you are freelancing you need to know and do everything yourself ;)

Do web designers need to know basic modern CSS and HTML techniques?

Yes.

Why or why not is this important for a well rounded web designer?

I answered "yes" because you used the word basic.

It is absolutely essential that web designers know basic HTML and CSS techniques, in the same way that architects must know something about physics and material science, print designers must know something about the CMYK printing process and fashion designers must know something about fabric.

If you don't know anything about CSS and HTML techniques you can't call yourself a "web designer". You're simply an artist or something.

Comments about your thoughts:

Front end web developers should be skilled enough to code up any design.

False. This is an oversimplification. Some things do not translate well to the web. Some designs may fall apart or not work on a certain platform or screen size that needs to be supported.

A web designer needs to know limitations depending on audience and performance requirements. A designer who knows CSS and HTML knows how to tweak the design so the underlying code can be made as responsive and efficient as possible.

Web designers should have an understanding of how users will actually interact with their design.

You've described UX Design, which is a completely different discipline. Although User Experience Design involves aspects of Graphic Design, it really has very little to do with CSS or HTML.

While good well-rounded web designers should have familiarity with UX Design, it's also common for them to collaborate with UX specialists.

Design shops would rather have designers design and leave all the coding up to the developers.

This might be partially true, but not wholly. One popular paradigm in content management systems is MVC (model/view/controller). Many design shops want the designers to have some familiarity with HTML/CSS coding so they can focus on the presentation of the content (the "view"), while the developers focus on the model/controller.

This isn't to say that some shops don't employ Graphic Artists who simply focus on graphic elements and push pixels around — but they aren't Web Designers, in my view. A large website might employ Graphic Artists, Web Designers, UX Designers, Web Developers, and Database Specialists who all collaborate to produce a finished website. A freelancer who builds smaller sites might dabble in all disciplines and call themselves a Web Designer/Developer.

Yes and no. Knowing how your target environment works is important, but it's not really important that you understand the specific code required to make the system work that way. In other words - I wouldn't worry about specific syntax to create rounded corners in all major browser engines, but I would consider it important that you understand whether or not you can create rounded corners in all major browsers (and how much code is required to do so).

For example, just a few years ago we were still saddled with IE6. We had an absolutely beautiful design for a corporate intranet application, but it was highly reliant on transparent overlays. IE6 could display PNG8s but didn't respect the alpha channel in PNG24s, and to use CSS-based opacity required ActiveX filters and other issues. Hoops could be jumped through to achieve the desired effect, but each hoop represents longer development cycle, higher rate of bugs, more difficult maintenance, etc. In addition to the direct cost in man-hours developing and maintaining this (now troublesome) design, there was also the opportunity cost of tying up developer-hours patching a kludgy codebase instead of working on version N + 1.

When in these sorts of situations, the cost/benefit of each visual effect in a design has to be measured:

• How amazing is the visual effect?
  Can it be replaced with another equally-impactful visual that doesn't require as many Construction resources?

• Can the effect be reproduced correctly on the target? If your original design can't be accurately recreated by the target, your design needs to be replaced with the closest approximation that will be available. (Thankfully this is becoming less and less of an issue for web designers.)

• How much time do you have budgeted?
  Can you afford more man-hours in Construction to achieve the effect you desire? If not, can you redesign the feature in less time?

• How much of the codebase would have to be refactored to accomodate your visual?
  If Design and Construction are happening concurrently, or if you're reskinning a legacy application, just how hard will it be for the coders to incorporate your visual? Not just the hours involved to do the rewrite, but the potential hours debugging and maintaining the newly changed code.

There is some overlap between the above bullet points, and some other points that aren't listed. The point is that, even on this short list, there are business costs that must be considered. You can assess the situation much more efficiently if you have a grasp of how the target system actually works.

If you have an understanding of the limitations of CSS or HTML prior to making your design, you can create designs that will flow through the Construction phase without issues. You will also have confidence that your design can be implemented, and the power of knowing the approximate cost. This is always handy to have on your side.

A web designer should understand how code works and what it's capable of, in the same way a print designer understands what ink on paper will look like and how paper can fold or be cut. Any designer should understand the limitations and strengths of the chosen medium.

If a web designer is creating this drop-dead gorgeous site, it would behoove him or her either to learn the basics of coding or to sit with a coder at a few points in the process to check that the site of gorgeousness can be achieved. So I'd say a web designer at minimum needs to know about code.

I think it's specious to say "a developer can code anything," the same way you can't say that anything that can be printed can be reproduced exactly on the web using HTML/CSS.