Developers – Take a Step Towards Designers

As web developers we love to create awesome applications (if only awesome in our own minds or two a few people.)  We live in a world of code and data.  But we often miss an increasingly important aspect of the design of a website or web application.

To grow as better developers we need to take a step towards a design brothers/sisters so as to better understand their world.  Just as we live in a world of code, they live in a world of color.  But we do not have to live in the dark or think we are mutually exclusive.  Below are a couple of suggestions on getting started understanding the design-side of web development.

A Designer is not JUST a Designer

So you might be thinking you need a professional designer for a new web app.  You have a friend who creates posters at a local print shop who has a great eye for design.  But you will probably will be cruisin’ for a bruisin’ if you try to force your friend in designing for a web application.  Just in the same way that a Microsoft .NET developer might not know too much about developing a Blackberry phone application or a *nix application, not all designers specialize in web design.

The key is to search out those designers who know how to design for the web.  They are out there!  And boy do they create great work!  Just keep in mind that you get what you pay for.  A good design can cost thousands of dollars, but for that you will receive a web design that fits what you want, adds designer-value that as a developer you would not be able to put in, and will come in HTML/CSS files that your application can start working with directly.

Helpful Hint #1

To start getting stepping in the direction of understanding the design world of web development, I suggest that you find a few web design oriented blogs and just start following a few stories a day.  Not everything will make since, but the longer you follow, the closer you will get to “understand” a designer.

Here are a few blog suggestions to get you started.

• Smashing Magazine – This website talks all about web design and can get specific on things like different ways to design a web form.
• Six Revisions – Very much like Smashing Magazine as it deals almost exclusively on designing websites and web applications.
• Mashable! – A website that has information on design, web news, and overall status of whats happening in the web world
• Signal vs. Noise – Blog of company 37Signals.  Many times they will have design and layout posts regarding their web applications.

Helpful Hint #2

As you start to feel more comfortable with design, you can start trying to figure out what makes great design kick.  As you start seeing how the relationship between HTML and CSS makes a website “beautiful” or “useful” you can start trying to figure out how you can incorporate those aspects into you website or application.

Try finding a website that you think is a great site you might want to investigate the design of a section, header, or footer.  You will need the tools to best help you.  The easiest getting started would be to use the Web Developer plugin for Firefox.  This tool allows you to see the details of of CSS and other design elements.  Once you are on a page, under the “Outline” menu of the Web Developer toolbar, select the “Outline Current Element” options.  Now when you hover you mouse cursor over elements on a page, it will show you the CSS inheritance of that element.

Under the “CSS” menu, you will have control of the stylesheets that are on the page.  You can turn off specific styles and see how they affect the design.  The key is to just get hands-on experience in the structure of web design.

Word of Warning!

We are developers.  We have studied all our life to become developers.  We want to create great applications.  But as we see online, we also want to create beautiful applications.  Often we believe that we are capable to create web design as well as we can develop web applications.  But there is a trap in web design.  It can overwhelm your thoughts and time.  Many web developers (myself included) have found themselves spending hours getting something to “look right” only to realize that they have neglected it “working right.”

Sometimes it is better to find a designer to design, and as a developer just sticking to developing.  BUT by taking a step in their direction, you can start to bridge the gap.  The key is to understand what a designer has to go through and what they might be talking about when they describe the elements of design.  Because when you start to eliminate confusion, you start to find that both development and design improve.