Web Design

When I started web design back in 1996 I used to think a good website is one which has a pretty interface so I started off in that direction. Around that time there were no blogging software or content management systems as such so presentation got a lot of attention so I spent quite a bit of time designing pretty interfaces. I had the whole process streamlined and got really good with Adobe, HTML markup and then CSS and JavaScript.

It was fun while I was at it but over time I shifted my focus to core web development. I am putting these up here for archival purposes and don’t consider them to carry much weight anymore. None-the-less my experimentation with these designs still helps me with my presentation (don’t mind the cheesy descriptions either :) I wrote them way back, in spirit of the work).

First Encounter With Flash

This was my first experience with Macromedia Flash. It has customizable backgrounds, an animated spider and 8mm effect. The spider was drawn in Macromedia Freehand and then animated in Flash).

View the movie (40K)

Total Flash Experience

This is my second flash project. I used some new effects (onion skin f/x on the loading title), morphing, sounds and action scripting. The bottom buttons customize the look and feel.

View the movie (66K)

Blue Sparkle

This design never made it past the Photoshop canvas. The design utilizes a lot of curves, shadows and translucency to create a space-age look. The blue background uses gradients, shadows and speckles to create louvres. The menu has a satin type texture and for the background, I used pastel tones in shades of blue.

Blue

Soon after I learnt about the scan line effect, I made this template, which quite obviously abuses the effect in every design element. This template looks a lot better in full resolution (this scaled screenshot distorts the scan lines, so the colors and effect don’t look half as good). The menu (inset: bottom-right) was my first CSS driven menu using rollovers. This was done around 2000 when CSS was still evolving quite rapidly.

Menu Bars

Some slick menu bars and dividers. Most of these were made while experimenting with Photoshop effects.

Red and Orange

This template looks so much better in full resolution. I used a lot of empty space and curved borders to create distinct partitions for the header, menu and content. I used rich orange shades, and the content box (inset: right) has a relatively darker background for more legible text.

Sporty Yellow

This template has sporty yellow colors. The conversion from canvas to HTML got really messy and I only managed to get it to render correctly in Internet Explorer (it would be much easier now using CSS). It has a webby background, oblong duo-shade buttons with a bulged right edge. The popup menu (inset) is the same size as the menu, but reduced to fit the screenshot.

Lime Green

Not many templates out there use green colors, so I started with this one.

Pulp Green

More green!

Red and Blue

This Red and Blue template was just a spur of the moment thing while I was sitting bored. It never went past the Photoshop canvas.

Spider’s Nest

This design came after I saw Spider Man. I went overboard trying to create webs.

Vibrant and elegant

This template has a vibrant header. The rest of the template however, uses grays. The menu uses black and silver (steel). The menu background changes to a vibrant color when the mouse hovers over (Portfolio button) which makes it appear louder in contrast. The site looks real slick in full resolution.

Beige on Red

This design was mostly experimental, since I was into Beige at some point and the red stripes looked really neat with the beige. That’s my picture in the image.

Blossoming Menu Bars

More menu bars and dividers.

Radial Buttons

I made a whole bunch of buttons while trying to come up with one for logo text. I also added a menu widget to this screenshot (inset: left)

Logo Ideas

At some point I needed to design a logo for my site and this is what came of it. These are just a few of many.