Some of the reg­u­lar read­ers of this blog might have noticed that the design has changed. When I orig­i­nally setup this blog, I of course chose one of the many ready-made themes avail­able for Word­Press. I set­tled on WP-Andreas01 and mod­i­fied it for a two-column lay­out, swapped out the header image, and adjusted the col­ors. It was clean, it was light, and it was min­i­mal­ist. Even­tu­ally I grew tired of it and wanted a dark theme, instead. I even­tu­ally set­tled on Never End­ing Dark­ness which again was clean and min­i­mal­ist. In the back of my mind, some­thing both­ered me even after I made the req­ui­site changes to the lay­out, col­ors, and graph­ics. I finally deter­mined 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 mak­ing. This is a post-mortem analy­sis of that design.

The­mat­i­cally, the design is derived from my alma mater. The color is taken from the school col­ors. The use of roman text for the blog title and head­ings gives a sense of clas­si­cism. The illu­mi­nated drop-caps in lead­ing para­graphs and fancy bor­ders adds refine­ment. Of course, these ele­ments of clas­si­cism and refine­ment are jux­ta­posed against the asym­met­ric header graphic, the brick wall, rough edges, and weath­ered icons. The ivy ties the two by being both a sym­bol of refine­ment, but also being raw, organic, asym­met­ric, and destruc­tive (to walls).

With this design, my goal was to bring in more irreg­u­lar­ity and keep straight lines to a min­i­mum. How­ever, I wanted to avoid the overuse of gra­di­ents, reflec­tions, and shad­ows which are a sta­ple of Web 2.0 designs. I also didn’t want to overuse real-life tex­tures or objects turned graphic ele­ments com­mon with Grunge designs. What I finally set­tled on was to use sil­hou­ettes almost exclu­sively for the graph­ics. Sil­hou­ettes evoke the idea of shad­ows, fur­ther com­pound­ing the idea of dark­ness. The neg­a­tive space is just as impor­tant as the pos­i­tive 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 fur­ther accen­tu­ated by the back­drop of black and white, more empha­sis on the black. The red is not used for many ele­ments either, often just adding a punch of color. I also put more thought into bal­anc­ing the con­trast of the font color this time around. As some of my read­ers have pointed out and I’ve expe­ri­enced on occa­sion, the con­trast between white on black is too dis­tract­ing at smaller font sizes. So I set­tled for light gray on dark gray for the main body text. I may even­tu­ally do the same for the right col­umn, but it works for now. Those who read the code will be happy to know I switched plug-ins to Syn­tax­High­lighter Plus, and as a result, the code lay­out is much nicer.

The one graphic that is not a sil­hou­ette is the black and white photo of the brick wall with ivy grow­ing on it. In my ear­lier iter­a­tions this was actu­ally tinted red, but I felt the solid red sil­hou­ette became lost in the back­ground, so I switched it to black and white. Instead of using a drop shadow to indi­cate depth, I “blurred” the image to give the illu­sion of depth of field, but rather than use a sim­ple blur I used a noise fil­ter giv­ing it more of a speck­led, cell-shaded look so that it fit in with the sil­hou­ettes 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 con­firm this. I think I did strike a bal­ance. I don’t know if I want to pub­lish the tem­plate though. I like the fact that it’s one of a kind. I sug­gest you check out the About page for the cred­its.

UPDATE (15 Nov 2008): IE6 had a few minor ren­der­ing prob­lems with trans­par­ent PNGs and box mod­els for some DIVs. I cor­rected the prob­lem using a con­di­tional stylesheet specif­i­cally for IE6 replac­ing the PNGs with GIFs and adjust­ing the styles of the prob­lem­atic DIVs.

Comments are closed.