My non-technical friends frequently ask about the process behind web development; they are baffled when they see a robust website and learn that it began life as a big, blank box Photoshop. When I started development for the new version of my site, I decided to chronicle the process from beginning to end to shed light on the design process that I use.

Below you will find a chronological time line of the design process.

My original idea was to include vector art as a main part in the design. Not having a lot of experience doing abstract vector art, I played around in Illustrator for a few hours and came up with the piece above.In my previous 8 versions of Dark Crimson, I relied on the namesake color but decided that I wanted something different for this version. After a few days of testing various color pallets, I decided on a blue-green color base.

Since my site has always been somewhat “experimental”, I typically embrace the idea of making the plan up as I go along rather than meticulously planning everything as I do for most web projects. Following this spirit, I was not sure which direction to go, Flash like 7 of the last 8 versions, or XHTML / JavaScript. I decided to make the decision after the preliminary design.After about a week of perfecting the textures and colors, I made the above design as a starting point.

After picking apart my original design, I decided to test its feasibility in Flash. Although the design turned out very visually appealing, it was not practical for the type of site that I wanted to develop. Click here to see this concept.

Next, I decided to test the waters of the original concept in XHTML. The result was more user-friendly than the Flash version but it wasn’t what I was looking for. Click here to see this concept.

Although the grungy-paper texture is was trendy, I didn’t think it had its place in the design. I re-worked the concept and came up with navigation scheme for the next concept. Also, having spent several days working on the vector art piece, I wanted to utilize it in the design. Click here to see this concept.

I further worked the design concept and needed a splash image for the homepage. My goal was to design something to compliment the overall green color scheme while also creating a visually appealing theme that would be used variously throughout the site. Since I was going for a theme that would look great on a 17′’ monitor or a 70′’ TV, I wanted to make sure that the design flowed into a solid color as seamlessly as possible. The Spalsh also had to accommodate readable content for the homepage.

I liked the original but I felt that the colors clashed with the overall theme and that it did not flow as I had originally imagined. I also realized that I was not making use of the vector graphic that I created earlier and tried to find a way to incorporate it. The result is seen in the screenshot above. With the addition of some carefully tweaked brushes and filters, I was able to successfully utilize both of my original key design components. Click here to see this concept.