It’s built using WordPress, but you wouldn’t know it by looking at it. This way I can add and remove samples easily. I opted to go with a (mostly) single-page site. There’s a second page for a contact form. jQuery and various plugins handle the dynamic features. I definitely prefer this over what I had before.

Feel free to check it out by clicking the Portfolio link above.

Thematically, the design is derived from my alma mater. The color is taken from the school colors. The use of roman text for the blog title and headings gives a sense of classicism. The illuminated drop-caps in leading paragraphs and fancy borders adds refinement. Of course, these elements of classicism and refinement are juxtaposed against the asymmetric header graphic, the brick wall, rough edges, and weathered icons. The ivy ties the two by being both a symbol of refinement, but also being raw, organic, asymmetric, and destructive (to walls).

With this design, my goal was to bring in more irregularity and keep straight lines to a minimum. However, I wanted to avoid the overuse of gradients, reflections, and shadows which are a staple of Web 2.0 designs. I also didn’t want to overuse real-life textures or objects turned graphic elements common with Grunge designs. What I finally settled on was to use silhouettes almost exclusively for the graphics. Silhouettes evoke the idea of shadows, further compounding the idea of darkness. The negative space is just as important as the positive space because where the two spaces meet defines the edge of the silhouette.

The design has but one color and no other shade or tint of it—that dark, almost blood, red which is already an intense but not over-saturated color. The red is further accentuated by the backdrop of black and white, more emphasis on the black. The red is not used for many elements either, often just adding a punch of color. I also put more thought into balancing the contrast of the font color this time around. As some of my readers have pointed out and I’ve experienced on occasion, the contrast between white on black is too distracting at smaller font sizes. So I settled for light gray on dark gray for the main body text. I may eventually do the same for the right column, but it works for now. Those who read the code will be happy to know I switched plug-ins to SyntaxHighlighter Plus, and as a result, the code layout is much nicer.

The one graphic that is not a silhouette is the black and white photo of the brick wall with ivy growing on it. In my earlier iterations this was actually tinted red, but I felt the solid red silhouette became lost in the background, so I switched it to black and white. Instead of using a drop shadow to indicate depth, I “blurred” the image to give the illusion of depth of field, but rather than use a simple blur I used a noise filter giving it more of a speckled, cell-shaded look so that it fit in with the silhouettes better.

All in all, I’m very happy with the first pass. I’m sure there are still rough spots I need to iron out, and I don’t think design-wise, it will degrade well to older browsers. I’ll have to confirm this. I think I did strike a balance. I don’t know if I want to publish the template though. I like the fact that it’s one of a kind. I suggest you check out the About page for the credits.

UPDATE (15 Nov 2008): IE6 had a few minor rendering problems with transparent PNGs and box models for some DIVs. I corrected the problem using a conditional stylesheet specifically for IE6 replacing the PNGs with GIFs and adjusting the styles of the problematic DIVs.

Now, I’m just one among the many listed in those dismal unemployment numbers you hear during the evening news. Thank goodness I got that part-time job to give me some cash to float on. Unfortunately, that means some of my planned purchases will be delayed. I’ll be spending part of this weekend brushing up my resumé and reading about unemployment claims.

Most US animated features are just derivatives of live action sitcoms (The Simpsons, Family Guy, etc.) or purposefully aim at a younger audience as a means to market toys. That’s not to say the Japanese don’t do it. You only have to look as far as Bandai and Gundam to see they do it too, but at least some of the series they’ve produced aren’t dumbed down and actually have recognizable (if not Oscar-caliber) character and plot development (Gundam 00, Gundam 0080, etc.). Which is why I applaud Warner Brothers for taking a queue from Japan, when they produced Animaniacs and the more recent DC Comics series. It doesn’t hurt to put some smarts into your shows. Same goes for Pixar. Nickolodeon takes the crown, though, for their epic series Avatar: The Last Airbender. It’s appealing to adults the same reason Harry Potter is; it’s just good old fashioned storytelling. Not since The Mysterious Cities of Gold has Nick had such a great show. To put things in perspective, it was 15 years from when MCoG ended to when Avatar started, and MCoG originally began airing in 1982!

In any case, even though I do prefer smarter, more mature animated features, I do occasionally watch shows that don’t fit in that category. For example, I’ve watched Kanon 2006 and I’m currently watching Clannad and Shakugan no Shana. They have a high level of production. I’m also in the middle of Spice and Wolf (English). It’s something to watch as the winter season winds down and until the spring season starts. It doesn’t hurt that the characterization of the female protagonist appeals to me—sassy and smart. Plus being a wolf goddess and cute, I was inspired to turn her into a Firefox icon—a small piece of functional fanart. It gave me a chance to flex my (meager) Photoshop skills. Those who watch the show will recognize Horo from the ending credits where she’s hugging a giant apple. After making the icon and I can’t help but think that a complete Spice and Wolf Firefox theme would be kind of cool, or perhaps a full Gnome/KDE theme. Maybe someone can take this icon and run with it. The zip file contains .png icons at various sizes and should be compatible with Gnome and KDE. I don’t feel like making an .ico file for Windows. A Photoshop 7.0 file is included. The file can be imported into The GIMP, but you’ll need to adjust the saturation of the top layer to something between 60 and 80 to match the Photoshop setting of 40.

 firefox-horo.zip

Enjoy!