In this article, I will try to fill the gap between design and developing from the designers’ aspect of view to help designers to understand the coding concept and allow them to complete their own projects with smart way without the need to hire or get help from other developers.

Introduction

Do you think you are a code dumb and design lover? Do you like looking to colors instead of taking hours looking to lines of code? Do not worry, it is not your fault. This mean you are a right brain thinker and you may find your love to design is part of your DNA structure if you got the chance to do a DNA test. Before human being move to the web, designers did not require to know any code knowledge, they used to design printing materials where there was no coding step lays after finishing the design job, you just create the design based on totally art concepts and send it to the print house to handle printing your design. However, after the big jump to the digital content and cyber world where every person on the globe has his or her own site or blog, design becomes not enough, there is a step to convert your design to a really interactive web site, or desktop application…etc.

This step is the developing process where there are alot of coding and scripting lays beneath. In most firms, they understand that must be a designer and developer to finish a website or desktop application, which makes designers more comfortable to not have to learn coding, they focus on the creative issues and design task where they belong to.

But actually this is not enough, in my last article about how developer can be better designers, there are two points where both design and coding intersect. This first case is where you are in a small firm or trying to build your own web profile or blog. The other case is that you need to understand how the coder will handle your design and how your design will compliant with the output requirements and specifications such as web site developing concepts, output resolution or design structure that is required by some CMS systems.

In this article, I will put an end to this gap by providing some examined tips that can help designers to be more smarter when putting their design and be aware about the next steps that will handle their designs and avoid coder to destroy designer’s work or facing a bad news that the design is not suitable for the web site required…etc.

Design or Code

Many designers are looking to learn coding to serve themselves in regard to complete their project to supply their own needs to create a profile web site or demo presentation…etc. This may help if you do not have a long list of design tools that you want to learn to enhance your work and give your creativity extra ability to show up. Design and animation tools are too many and they should be in the top of your learning list already. However, there are four types of solutions for this dilemma:

1. Find a friend to do the coding
2. Contract someone to do the code
3. Learn to do the code yourself
4. Do not do the task at all

First, I will exclude the fourth solution since it is not logical in our case. The first solution may not be available for many of us especially when you got a limited connections with developers. For the third solution, this may not help much especially with limited time project or you do not have the time to learn these developing tools.

The next sub-titles work around the second solution by giving you ideas about how to complete your project with design and code in a fast efficient way.

Bridging the Gap Between Designers and Code

I have noticed a common problem with designers who never touched code or get an introduction to how the code works, most of this type of designers are printing designers and art students who only worked with traditional art. The problem is these designers are used to see things and work with visual tools such as icons, panels and dialog boxes…etc. When designers are faced with code lines, they may find it difficult to understand the other way of thinking and think about commands and tools they do not see with their eyes.

However, I think designers have to learn basics about the code and the output format for their design. For example, designer who are doing websites, they should be aware of the web basics and how their sites will be implemented on the web. Also, they should know what is needed to deliver their work to the next developing stage such as learning how to use the Slice tool in Photoshop to convert their design to the web page. One of the important skills that designer should acquire is the knowledge of the project functions and how to provide user friendly design for these functions or the audience will never be bale to use it easily.

The designers who know these fundamentals will be able to save their design from being distorted if it does not meet will with the output or modified from its original idea to meet with the final output. Also, designer who know these skills will be able to talk well with the developer and be able to understand how to deliver the idea with an appropriate terms that can be understood by the developer.

CMS Based Sites

One of the solution for the coding problem for designers is to relay on a Content Management Systems, which allow you to handle content, design and functions with ready made system, so you only want to know few and easy to learn information about the system. The disadvantage of using CMSs is that it limit your design ability in themes or skins that only meet with their structure, which differs from one system to another. There are many structures that can fit with your project needs such as Joomal, Mambo and Drupal for website management and the lovely WordPress for blogging.

Since most of the PHP CMSs are open-source, most of its information and tutorials are free which enables you to find a variety of systems to use and work with based on your needs in the project.

Services to Handle Your Design

With the increase of cloud computing applications and specialized services over the web, a new creative solution has been found to solve our problem, you do not have to search for developer to do your work and you do not have to manage or hire a developer to do the project. There are web sites that all you have to do is to provide it the design in PSD format and they handle the rest, they convert your design into functional project and brings it to life with adding dynamic content and function codes for your design static graphic elements.

With this idea that may look new to many of you, it will help reducing the cost and provide better workflow for your project, here are some of the useful web sites that provide this service for you and your project.

w3-markup

psd2html

rapidxhtml

convert2xhtml

drmartian

psdgator

xhtmlslicing

design2markup

crazyxhtml

Conclusion

Finally, the knowledge with code and site structure for designer helps better workflow for your design and the ability to understand how the project moves and what does the project really need from the designer. There are tools such as CMs tools and web sites that can help you convert your Photoshop  PSD file to coded web site content, which helps you to complete your project without the need to developer next to you to complete the work.