How Can Designers Effectively Avoid Coding
33
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:
- Find a friend to do the coding
- Contract someone to do the code
- Learn to do the code yourself
- 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.
[…] This post was mentioned on Twitter by PhotogZone, Web Design News. Web Design News said: How Can Designers Effectively Avoid Coding http://bit.ly/425KO1 […]
thanks for this great post
.-= designfollow´s last blog ..Coding a Web Design for Speed and Quality =-.
Very informative.
Thanks for all the info! A friend of mine is using a lot the http://www.psdcutout.com/ and from what I’ve seen they are doing a really good job.
Social comments and analytics for this post…
This post was mentioned on Twitter by allwebdesign: How Can Designers Effectively Avoid Coding http://bit.ly/425KO1…
I hate coding 🙂
One can avoid coding, but it will be a lot of help if one can code as well.. no use if you hire someone for coding.
It certainly does not work in a long term.
Be independent.
Another converter from PSD to HTML/CSS is Sitegrinder: http://www.sitegrinder.com , thanks for the list, I prefer to design rather than code.
Honestly, do yourself a favour and learn to code. Don’t be scared, HTML and CSS are really easy to learn if you give it a shot. It’s not like learning a real programming language that contains logic statements and whatnot.
I’d recommend “CSS Mastery” by Andy Budd—it’s an excellent book.
I think that coclusion is right. Effective designer should have at least basic knowledge of coding. At least.
.-= DlibrarieD´s last blog ..DlibrarieD: @marconr13 You right – there are problems with english pages =) It is Russian league. Our conference is in Moscow. =-.
By outsourcing the coding to other companies, you can save yourself a lot of time. You can literally handle so many more clients at once (and everyone else does all of the “hard” work)
Good code is an art form in itself!
Yes, I agree with you Squiders about math is just another form of art based on an old theory, but in the computer world it is hard to learn every thing, so my point is to focus on the most thing that gain your interest so you can excel and be able to learn more about it and get updates about it.
true, this is the idea about specializations 😉
Hi Marky,
I already do few coding 😉 The issue that my being a multimedia expert and had to handle different types of projects, I found that specialization can be a real bless. I know it may be hard fro some projects and for some clients, but the general idea is that designer have the ability to focus on their creativity instead of getting confused about how to learn many things and what to learn first.
I am artist, designer but only when i start to code my self front-end apps, i found how thing work in real wold and how much web and Ui design is functionality first and illustration second. Function over form is the only way in this field, everything else is crap:)
If only regular people who were not designers and coders would read this post. Thats what we really need.
I’m totally with you on this – it’s very hard for me to code my designs. It’s been great teaming up with coders that would rather hand off the design to me than do that part, and so it’s been working out well. Code for Design.
I’m just about to launch a similar service like the ones above, except I’ll do the design in 8 hours, instead of the code. WireframetoPsd.coma
thanks for the great article
Hello ,I’m glad to see your article .Well said.It’s perfect.
I am agree with you. Awesome article, very inspiring . Thanks for sharing this nice post. 🙂
Hello… this article having lots of latest design tactics for designer to avoid coding part effectively……. the design patterns to avoid coding used by XHTMLSlicing is really marvelous ………
[…] integration is almost a standard these days when designing a portfolio we… 2 Likes How Can Designers Effectively Avoid Coding | Flash, Design, Vector, Photoshop, Adobe Tutorials | Gr… This article give tips for designers to handle coding tasks in smart way using CMS systems and […]
Nice informative post…..
Thanks…
Great informative post….We also have the strong belief that designers should be designers..
Focus on what works for you and let us do the rest….
.-= PSD Cutups´s last undefined ..Response cached until Thu 6 @ 4:41 GMT (Refreshes in 23.74 Hours) =-.
Great information. Very inspiring.Thanks to share with us.
Thanks for tutorial. I’ll bookmark it.
Nice tutorial with all information.
Great tutorial, thanks for sharing.There is no reason for designers to waste valuable time when they could have a professional service at their disposal.
awesome tutorial…..thanks for sharing….very inspiring
Rafiq Elmansy… i want to tell you that you had described my feelings and experience of last 2-3 years in graphic designing.
your article was too good and specially the line of conclusion that its good for a designer for know the basics.
WE.. DESIGNERS.. need more articles from your side 🙂
Stay blessed!
Design Different!
Humadedulmi
Thank you Huma and I really appreciate our kind words.
all information of tutorial are informative.that was i appreciate.
Yeah,
Its a really great thought to avoid coding part and getting best code is connecting with best conversion companies
Your info are informative but coding is difficult than design. so designer are follow to design. Thanks for share.