Some of the regular readers of this blog might have noticed that the design has changed. When I originally setup this blog, I of course chose one of the many ready-made themes available for WordPress. I settled on WP-Andreas01 and modified it for a two-column layout, swapped out the header image, and adjusted the colors. It was clean, it was light, and it was minimalist. Eventually I grew tired of it and wanted a dark theme, instead. I eventually settled on Never Ending Darkness which again was clean and minimalist. In the back of my mind, something bothered me even after I made the requisite changes to the layout, colors, and graphics. I finally determined that the design was cliché. So if I was to be happy with the design, it would have to be a design of my own making. This is a post-mortem analysis of that design.
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.