How Web Developers Can Become Better Designers – Tips

This article addresses developers who like to fill a common gap when faced by providing dummy design for their projects or need simple design skills to provide their coding in the project with good look layout or color combination without the need to designer assistance in this early stage of the project.

Introduction

Although few of us are capable to do both design and developing tasks at the same time, most of us are either developers or designers or at least feel better in either fields. There is no doubt that during the web design project, desktop projects or other project process, there is an intersected gray area that need from both designers and developer shared knowledge of each other part, since it is a team work and no one is working in his or her separate isolated world.

Through my years of work as a designer, I always face the same situation with developers again and again, most developers who are building their functions and code lines are and have to create dummy layouts that will be handled with the designer later. But this dummy layout may put the designer into dilemma and confusion about what the developer really want to do. In this situation documentations and alot of meetings can handle this issue, but when the developer need to submit this dummy to the client, it has to be good look to not make the client angry enough to cancel the project.

This, in many situations such as the above one or for a developer who like to create his own profile or website to show resume or work samples, the developer need to have some design skills to handle these situations. The idea is, design skills are divided into two parts. The first part is talent, which is hard to be gained because it is actually a gift or bless inside each designer. The second is learning and practice, which is gained by trying to learn and get visual experience from other work examples and designs.
However, the second part is the secret behind the article here. In this article, I will trying to reveal some tips for developers to gain design skills that can help them handling the design part of their projects and small tasks.

Start by Practice

The most important part in the designer body is the eye. It is the source of his or her inspiration and learning skills. In my old study in fine arts, my mentor used to advice me to look and keep looking for designs and visual scenes in my daily life, it is some thing that is called visual experience. The visual experience helps you know basic design concepts and color combination ideas from design projects that have prove user friendly and accepted designs from many existing users.

This first tip is the easiest one as you can start by asking a designer from your friends to send you some inspiration design ideas or just Google for the best web designs and design ideas on the web, start by looking to a new design every day and enjoy it, but do not forget to navigate every new design and see how much user friendly is it and how much it is easy for your personal experience.

Build the Design Layout

When you start a project, you usually have a list of functions and its location in the project, this is a good start to let you start putting the place of the function and how it will look like based on the client needs and the experience you gained from the above tip. In large projects there is some one that is specialized for the layout design, but it is a good skill to acquire as it helps giving you good experience about the project workflow as whole.
You can build the design layout on paper, Microsoft Power Point, Microsoft Word or even graphic applications such as Adobe Photoshop.

Templates or Not to Templates

In the few last years, the Internet has been facing a new trend in web services based application after the spreading of the cloud computing concept. Nowadays, you can find many sites that provide ready good and cheap design templates that fit with different projects such as static web sites, Flash web sites, CMS based web sites such as WordPress templates and even you can find templates for brochure design and business cards designs.
Although, the web templates and stock royalties site provide graphic elements with a low price, it can not replace the designer work because the these template design does not provide the unified look to your project unless you bought its total rights with high price. The other disadvantage of using templates that is may not meet your real needs such as the customized designs the designer can provide. But over all, it can help developers to get out to the client with a project with the design requirements needed to finalize the project.

Stock Images and Free Royalties Sites

In these sites you can search and find images to use in your project and buy it with low price and high quality as well

Istock Photo

Fotolia

Dreamstime

Stock Icons Sites

Stock Icon

Icon Shock

Web Site Templates CMS Based Templates Sites

Template Monster

Press 75

Studio Press

Dream Template

Print Layout Designs

Stock Layout

Fonts Resources

One of the useful graphic resources that can help you made a layout with creative unique look is fonts, there are many free fonts resources but I like to share with you couple of them for your reference.

1001 Fonts

Dafont

Urban Fonts

Choosing Colors

Choosing colors and color scheme for the design is always one of the most important challenge when it comes to create layout and designs. The first and second tips can help setting the color scheme for the project, but in some times you may need to set your own color combination. As designers, we can use color palette to set the color combination used in the project or website. One of the most famous color combination tools is Adobe Kuler, which allows you choose between different color schemes, rate it, edit it or even use it with graphic applications.
Adobe Kuler has an icon to be accessed from different Adobe products, but it is also as an Adobe AIR desktop application that you can setup on your computer and get updates from online users color combination collections and choices.
There are some other web tools that can help you choose the color palette for your project or set the color combination for it such as the following:

Adobe Kular

Color Schemer

Febooti

Few Design Skills Won’t Hurt

I do not mean that you need to go the the design school or learn design application, but it can help if you know some basics about one of the famous design tools which is Adobe Photoshop. The important of Adobe Photoshop is that it fits to all design tasks such as web design, user interfaces, print designs and mobile application design.
Adobe Photoshop is a huge application that extend to many features such as animation and 3D, but you do not need to know about all this, you can only know what you need to edit image, create a banner ans some simple design skills.
There is also an online free version of Adobe Photoshop that help you edit images from your computer and uploaded from your mobile phone. You can also use some of the free online tools to edit images.

Conclusion

These tips help developers to complete their simple task or small project with a good design look for better influence on the client and better communication with the designer. These tips can not replace the designer position as it helps only in the intersected area between both designers and developers and can not replace the the unified design and creative ideas experience that the design can do for your project.