Should Designers Learn Coding?

In the past couple of weeks Ive been writing why its important for a Web Designer to know a bit of SEO , a bit of increasing the conversion rates via usability and if it makes sense to learn CSS if you only do small websites. Ive got partialy inspired by this article from Web Designer Depot that gives 6 Reasons Why Designers Should Code. So ok, nowadays being a Web Designer its more than creating PSD, but should a Web Designer learn coding? But first, lets recap the previous articles and say that I do agree with WebDesigner Depot that every Web Designer should know:

Understanding the expected functionality of the website will improve your perspective on how to design it and create user friendly interfaces. Make things as easy as possible, to the point youre building the site for dummy visitors. If you are into building the perfect user interfaces but thats adding complexity to the site usage, youve already created a failure path for the website.

Everybody now wants SEO Compliant sites so what does this actually mean for a Web Designer? Basically, every web designer should create the layouts in a way basic seo is implemented from the beginning. Not only that SEO is very important for a website as it can mean the success or failure of performing the desired function (selling, presenting portfolio, other marketing functions) but its an added value to the web design services and you can set a price tag for this and charge more.

Wouldnt that be destroying the creative side? Last time Ive talked with a designer about code, he told me that he uses the right side of the brain for creation and doing anything else will kill the creative flow. Besides, coding is not that easy, there are a lot of technologies to learn and no matter how hard you try, a developer than only codes will always be better at coding than you. However, when you begin to code your designs just a bit, you can create your own style. And the more you practice in writing code, the better you get in delivering a better overall work. If you want to become more than a simple PSD creator you have to start from simple things like coding a template in HTML and CSS.

On the other hand, there will always be a little war between coders and designers. Coders seem to ignore any design element that is smaller than 5 pixels, only see about 6 colors, and dont mind if proportions are not kept, if it works. And I bet youre tired explaining how this should be placed there and this should be resized and this and that. My experience also tells me that you are getting a lot of this cant be done this way from the coders.

So, you shouldnt be coding because it kills the creative side, but you should code to implement your design exactly like your creative right side of the brains tells you. Thats a bit of a non-sense, so what would be the workaround? Nobody was born being a great designer or coder, everybody started from scratch and from simple lines of codes, so why shouldnt you? So what if understanding coding techniques and actually do light coding its really beneficial? Sounds strange, but really, there are some principles, techniques and technologies that every web designer should have a clue about:

Every new great website that you see nowadays is probably using JavaScript or some JavaScript library. And the most popular right now is JQuery. There are a lot of tutorials and examples on how to create navigation and slide down menus or effects with JavaScript based on JQuery. You also get nice design effects, usable forms and cool functionality features. But the most important part you should understand when designing web site is to know how the implementation of these JavaScript thingies will affect the coding time and even more importantly the speed and reliability of the website. Because if it doesnt work, visitors will not get to see how nice it is.

Youve probably heard by now about cascading style sheet and how to write CSS. There are a lot of tutorials about CSS on the internet which you can learn from. And youve probably heard also about color gradients in CSS. Just to give you an example, using color gradients in CSS is an easier way and smarter because you dont use any images. The gradients are generated by a few lines of code. And the best part is that you can apply gradients to any elements that you want, even text and still no images are required. There are a lot more ways in which CSS could help the site, and as probably the coders will want to make a CSS site, you should at least know whats best to do with CSS and create a design suitable for it.

Being a designer its all about using the right fonts and the right design to create a perfect masterpiece. But by doing so, using specific fonts youve created yourself a problem: not every user has your collection of fonts. So this could be a problem if you dont want to use flash to save your fonts.

Luckily there is another way by using Google Font Directory. This could be a good thing if your fonts are found on the Google fonts collection, but you will have to load that font for your website from the Google servers. This could result in more waiting time for the visitors and you know nobody likes to wait. So why would you spend this amount of time and energy when using a general font could do the same job. You can take a look here for the standard fonts between Windows and Mac.

Should every site be created from scratch or should you use a framework? Thats usually a coder decision but there are a lot of useful frameworks that you should know about, especialy because frameworks should actually involve less coding. I know every design should be unique, but there are some web standards that you have to comply to, like the standard wide for a layout is 960px. Using a framework can help you with placing parts inside the layout, or with keeping the same white space on all elements from the design.

Youve got some clients, you agree on a design and start working with them. The client entrusted you to create the great design so why leaving money on the table? Maybe you dont know how to code that much, but a little bit. Is there a way to do more than just designing?

Because nobody understands your design better than you, the best idea would be to use a tool that writes the CSS and DIVs for you, without actually requiring any coding. Flexi CSS Layouts is a Dreamweaver extension that helps you create the CSS layout for a site without coding, so you might give it a try and implement the design using DIVs and CSS on your own. You need to slice the design elements then use Flexi CSS Layouts to create the CSS layout. Here are some video tutorials.

The old way to get around this dilemma was and youve definitely heard (and the WebDesigner Depot article also talks) about programs that can generate HTML pages directly from their interface from a psd file. One way to generate a HTML page was to use fireworks and slice your design into HTML slices and then generate the HTML page with the images. The downside was that it was limited to table design. You could not generate divs directly from Fireworks using HTML slices and when generating a HTML page using a program this way, is that you dont have control over your HTML tags and content. You dont know what class or id goes where. And if you used special fonts and styles, or even better you want to use javascript inside your HTML page than its like finding a needle in a haystack. You need extra time to understand what the program generated and which part goes where.

???????