Here Comes The New Design

UPDTE: Not any longer. Here’s the gist.

After what seemed like a never-ending marathon of bug fixing, the long-awaited re-design of my website is here. While it’s certainly not perfect, this new design is very dear to my heart in a very special way.

Sure, there are a lot of really great and completely free WordPress themes out there ready for the taking — but it’s always felt like I’m throwing my legs into someone else’s shoes whenever I pick one of these off-the-shelf designs to use.

While I certainly didn’t build all the components pixel by pixel and line by line, I — at least — planned the whole damn thing, from concept to the finished work you see now. What I really wanted to do was to bring out that little child’s voice that continues to coo so loudly inside me — in vivid imagery. But being the graphics-illiterate person that I am, I could only settle on using colors.

Still Undone - Lots of Known & Unknown Issues:

Despite the many hours of labour, there are still some issues with the new design — some known and (likely) many others unknown.

The obvious one is that most of the pages from the previous theme aren’t showing anymore, and clicking on the “Home” navigation link at the top takes you to the Journal (blog) section of the site. This is done on purpose, as I’m still preparing those pages to transfer to the Site Build It! platform.

I’ve been trying to woo some of my graphics-savvy friends to design a header image for me — but none has been wooed yet. Now I’m using text and a background color — and I really don’t like the colors up there. So this will change soon.

There are also a couple of minor bugs under the hood that I need to fix, and I’m sure there may be a lot more that I’m not even aware of. Feel free to contact me if you find anything fancy.

The Building Blocks

As I’ve said already, I pulled in components from here and there, spent what seemed to me like eternity on these building blocks, and ended up with the design you see now. There were times when I would stare at the screen for hours (yes, occasionally clicking here and there aimlessly) and not knowing what I was doing.

If it helps, you may think of this “design process” as a million monkeys dipping brushes into oil for a million hours — to produce the Mona Lisa — except in my case it’s a single clueless monkey (that’s me) that spent a billion hours.

The Horizontal (Top) Navigation

The top menu is a pure CSS menu I grabbed from 13Styles.com, a fine website that provides a few but high quality CSS menus. At time of writing there were only 12 CSS menus available at the site. All the menus are free, and for $US29.99, you get the source Photoshop files to customize to your heart’s delight.

But you probably know that even if I had these Photoshop source images, I couldn’t make any use of them. So I simply grabbed one of the pre-built menus (Wax) and used as-is.

The Vertical (Left) Navigation:

You probably have guess this by now: that this was also got from somewhere. Well, if you did, you guessed right!

The vertical menu you see on the left is a customized version of the Accordion Menu script from Dynamic Drive — a very popular website for script kiddies like me and (arguably) the source of the many fancy and completely useless animations you see on many websites.

This is also a free menu that’s available for anyone to use. But unlike the horizontal menu from 13Styles, this one uses Javascript to handle the accordion-like feature. Click on any of the yellow navigation menus on the left to see what I’m talking about

There is a “static” version of this menu from their companion website, CSSDrive, that uses pure CSS (no javascript) — but this doesn’t have the the accordion effect.

The original menu is shown to the right. I essentially changed the two background images used for the main menus: one for the “open” state (red) and the other for the “closed” state (black).

While I like the collapsing nature of this menu, I don’t know how long I’m going to keep it, as I really don’t like heavy client-side scripting that doesn’t add any substantial new features other than eye-candy effects.

The Layout & Other “Inspirations”:

The actual layout of the new site is based on an SBI! template I used in the past. But note that this was not a complete design — just a layout.

I used SBI in the past (and will be using it exclusively henceforth for clients’ websites) so I have lots of SBI! stuff lying round. Also I’ll be moving the main section of this website itself to SBI very soon, and that’s how I could justify using their layout to design this site even though I don’t have an active subscription for this domain.

It’s 5am now … and I’m already feeling dizzy. Probably hungary. Chest pains are also lingering around. I guess another trip to the hospital later in the day. Time for exercise now though. Let me know your thoughts about this new design.