So now you have the tools of the web developer. You have mastered photoshop, conquered XHTML formatting with CSS, and can develop ajax web components in your sleep, and often do. The tools and skills needed you possess; they are yours. Now it is time to bring them all together with… the process. One process to rule them all, one process to find them. One process to bring them all and in the web-sphere, bind them.

Gather information

The process begins with information gathering. To build an effective site for anyone, you must become a mini expert in the subject matter around which the site will be built. You must glean as much information as you can from the site owner, the internet, books, and other experts in the field. Pay close attention to what things attract them, what they like looking at and what their needs are. However, and this is extremely important:

Why? Because they are not the experts in design and development. The easiest way to think of this was stated by Alan Cooper to a group of Microsoft developers. It was funny when he said it but the analogy holds true. In a kindergarten, absolutely everything the teachers do, absolutely everything is focused on the welfare, education, and safety of those children. However, never ever does this entail taking orders from the children. Why? They don’t know how to take care of themselves. When hungry, they ask for candy. Were the teachers to give it to them, they would be doing them a disservice. Instead, pay close attention to the design tips they will give you (and believe me, everyone’s a designer when it comes to their site) and ask your self “Why does he want that link there?” or “What is goal is she trying to solve by wanting that form there?” There is an underlying goal they are trying to meet that, more often than not, you can solve in a better way. You want to design with their goals in mind. That is the key. So first you have to know what their goals are. Talk to them, study them in their natural environment if possible. What do they really want the site to do? and how can you design it so that it will do so most effectively?

Come up with a look and feel

As you research the subject matter, you will inevitably get a feel for what kind of a look and feel you are going to need. A church website will, and should, look very different than a Gothic metal band site. Play around in photoshop with the concepts you get during your research. Often I browse through the plethora of photoshop tutorials to get concepts and ideas that fit into the genre of site I am working on. Don’t be afraid to start over, throw out what you are working on if it doesn’t fit the subject matter. Not long ago I was working on website for a local Jersey Mike’s owner. I had just seen a great concept that I loved and wanted to mess around with so I tried to make it fit into that project. It didn’t. The concept was good, it was brilliant and bold, but it wasn’t a sandwich restaurant site. I had to set the whole thing aside and start from scratch again. Don’t be afraid to do so. Better to get it right the second time than leave it wrong with the first one.

Cut the layout up into an HTML/CSS template

This takes practice, and is almost an art form of it’s own. The caveat I would pass on about this stage is one I first heard half a dozen years ago. It was true then and it still is:

At the time I first heard this, HTML layouts were, by in large, done using complex levels of tables. We had become proficient at it. It was familiar to us. And I was GOOD at it. So when I first heard that best practices dictated the use of CSS for layouts, I was bummed. However, If that’s the way things should be done, I was gonna do it that way. I can’t tell you how much cleaner, simpler, more robust, and nicer it is. I would never do a table based design again. It’s not worth the hassle.

Plugin content, template an application, or whatever else

At this point you are ready to plug in text if you are just doing straight HTML pages or if you are doing something more complex like skinning a web application or building your own, you are ready for that as well. Using this process you can assure that all the pages have the same look and feel, the right look and feel.

Over the years I have had a lot of good times building websites. Most of the things I have talked about in this series I learned through experience and I hope you can avoid some of the pitfalls I fell into over the years. And I look forward to seeing awesome web development forever more.

Tags: Internet, Programming, tutorials // 1 Comment »