Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

Should designers learn coding?

Update:

Here is an interesting article from Sandra Niehaus that talks about the same subject.

In the past couple of weeks I’ve been writing why it’s 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. I’ve 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 it’s more than creating PSD, but should a Web Designer learn coding? But first, let’s recap the previous articles and say that I do agree with WebDesigner Depot that every Web Designer should know:

Increased usability for your visitors

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 you’re building the site for “dummy” visitors. If you are into building the “perfect” user interfaces but that’s adding complexity to the site usage, you’ve already created a failure path for the website.

Easier SEO

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 it’s an added value to the web design services and you can set a price tag for this and charge more.

So now what, you should also code??

Wouldn’t that be destroying the creative side? Last time I’ve 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 don’t mind if proportions are not kept, if it works. And I bet you’re 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 can’t be done this way” from the coders.

So, you shouldn’t 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. That’s 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 shouldn’t you? So what if understanding coding techniques and actually do light coding it’s really beneficial? Sounds strange, but really, there are some principles, techniques and technologies that every web designer should have a clue about:

Knowing the limits and possibilities of JavaScript

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 doesn’t work, visitors will not get to see how nice it is.

CSS : A killer for some images in your design ?

use css gradients

You’ve 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 you’ve 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 don’t 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 what’s best to do with CSS and create a design suitable for it.

Use styles and fonts that can be applied to any visitor’s settings

use google fonts

Being a designer it’s all about using the right fonts and the right design to create a perfect masterpiece. But by doing so, using specific fonts you’ve created yourself a problem: not every user has your collection of fonts. So this could be a problem if you don’t 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.

Frameworks, useful or not?

using frameworks

Should every site be created from scratch or should you use a framework? That’s 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.

And maybe you shouldn’t code that much to make a site?

You’ve 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 don’t 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 you’ve 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 don’t have control over your HTML tags and content. You don’t 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 it’s like “finding a needle in a haystack”. You need extra time to understand what the program generated and which part goes where.

Facebook comments:



Leave a Reply