Dane. Designer.

Old Blog

Freya Dissection

Freya

Lying somewhere around the apartment, in the living room I think, I have a stack of sketches with design explorations that I made in the first few weeks of the redesign that has led to what you’re looking at right now. A flurry of attempts at coming up with a new form. Something to break the backbone of the blogosphere; the monotony of header, content, sidebar, footer.

Having played around for a few weeks with the elements that combined constitute Binary Bonsai, I eventually landed on the inevitable conclusion that the revolutionary layout I was looking for was a wild goose-chase, and the inevitable conclusion was to restart the redesign.

Having run this site for a couple of years, I have if nothing else, learned a lot about how I personally utilize it, and the new design needn’t necessarily invent a new form, but rather further the previous one through the experiences I’ve gained.

I hereby present, header, content, sidebar and footer…

First, a Word on Colors

I’m good at many things that have to do with graphics. I can draw (though I won’t be making a living off of that any time soon), I can model in 3D, I know all sorts of stuff about rendering and usability.

But I can’t do colors to save my life. Yes, it suddenly now makes sense why the previous designs have been somewhat monochromatic in their presentation, doesn’t it?

I love colors though, and I am envious of people like Dave Shea who seem almost oblivious to how virtuosic mezzoblue’s new look really is.

So one of the highest priority items on my todo list for this design was to get some color into it. I played around with a variety of setups, only to continually ram my thick skull into the wall of “Hmm, if I just lower the saturation on this a little then…”. In short, I’ve had enough of desaturated, monochromatic color schemes.

So I tried a variety of approaches before I finally settled down on the current blue / pink combination. I liked the overstated boldness of the pink links, in that its connotations are so feminine. But then again, I did warn you. On the other hand, I was also a bit dubious about using something so different from what I would expect of myself.

In the end, it works for me. If nothing else, then because its so different from what I’ve tried before, a I think we all do well with some change now and then.

My work would’ve been considerably more grueling if it hadn’t been for Color Schemer Studio, which is just a damn near perfect application for assisting in web design.

No Validation, No Testing

Yes, it needs an entire headline all for its very self. I haven’t validated this site, nor have I tested it on anything other than Safari and Firefox for OS X. It has errors, there is no doubt about that, but it is—as with the content—a work in progress.

Starting with Kubrick

Kubrick was written with two goals in mind. On one hand I was trying to meet the wishes of the people who were querying me on whether or not they could use the Binary Bonsai design for their own blogs. This was what drove the look and feel of Kubrick. On the other, the code was driven by my desire to create a base from which new designs could arise.

So it was only natural that I employed the 1.3.0 base that Ryan Boren cooked up (based off of version 1.2.5), in an effort to simultaneously upgrade WordPress from 1.2 to 1.3 and move the now aging and slightly soggy 3.5 design that was carrying Binary Bonsai until a few weeks ago. So if you’re looking at Freya and thinking: “This bares an uncanny semblance to Kubrick”, then you’d be right.

In designing Kubrick, I did everything I could to make it the best possible template, within the frames I had to work with. And considering its general purpose, it still is the best I can come up with in terms of the information architecture it has.

Of course, where Kubrick is a template made for general consumption, with Freya I can of course implement all the little hacks, plugins and addons that I don’t want to otherwise clutter up Kubrick with.

Something Old, Something New, Something Borrowed

As many of my entries can attest to, I care about my past in all its many shapes and forms. Binary Bonsai has gone through a range of different looks since its inception in June 2002, and I did my best to pull on my experiences with the previous designs.

  • Despite believing it to be a nice move, I decided against Kottke’s minimalistic header and instead retained a rather space consuming header.
  • Though I believe Greg has nailed it, I also decided not to go for a 3-column design, and instead retain the exact same setup that I have been using for years.

These are just a few of the things that I had pass through my grey matter as I slaved over my Powerbook, oblivious to the presence of such secular matters as… ehm… my girlfriend (I am convinced that she is as happy the worst part of this is over as I am).

Anyway, back to the matters at hand. Freya, which is what I have baptized Gil Elvgren’s great pinup girl that has adorned my header many a time. He painted her somewhere in between the late 30’s or early 40’s, along with a great many other sexy and unbearably innocent women, designed to entice the GI’s going abroad to fight in the great European War…

The question of copyright inevitably comes up whenever she is discussed, and while I wish I could give you an assurance that I have every right in the world to use her, I can’t, because I most likely don’t… But we’ve had his paintings hung in our kitchen for a long time, and I’ve come to like them so much that it almost feels wrong if I were to take her down.

As I’ve been working on the different aspects of the site, I’ve spent a great deal of time looking at how other sites do similar things and taken notes as to how their implementation could be put into use or improved.

Alas, many of the things that I was counting on having ready for the launch aren’t, but more on that later.

Content, Content, Content

Most blogs rely on a constant string of updates and thus mostly ‘live’ in the now. In fact, some blogs have such a low regard for archived content that it is next to impossible to explore them, let alone find a specific item.

I treat my blog not only as an outlet, but also an archive of my life. And having on several occasions had to find an old entry in my own archives, I’ve felt the pain of sifting through tens if not hundreds of useless entries, until I just ended up giving up.

With that in mind, I decided to focus most of my attention on the archival system of Binary Bonsai, hoping to make it easier and more fun to traverse. Currently only some of these features have yet to be implemented or activated, however the plan is to have everything working as soon as possible. So don’t fret if you’re unable to find some of these points.

  • Everything relating to the blog is interconnected. If you are on a permalink, you’ll have the option of going to the next or previous entries, to the categories in which is resides or categories related to those. And finally you get a list of entries that are likely to be related in some way. Click through to a category archive will bring you the latest 10 entries in that category. On the sidebar you’ll be served with a list of entries from that same category that I have marked noteworthy, making it easier to skim the cream. And again it will tell you which categories somehow relate to the one you’re currently viewing. (I need to start marking the 1200+ entries as noteworthy, which will take a little while).
  • The archives all tell you what you need to know about where you are. If you’re reading the Binary Bonsai category archive, you’ll for instance be told, on the sidebar, as well as in the title, where you are and what this category is all about. (I couldn’t set this up on my testbed as the database differs from the live one, but I’ll get right on it, it’s mostly a matter of setting up some numbers).
  • Some categories, like reviews, have slightly different pages, specialized to take care of their particular subject matter. (Again, since my database differs, I haven’t actually moved reviews into their new categories, though the categories do exist, they’re merely hidden).
  • Livesearch is nothing new, but it is nonetheless a minor revolution in searching, making it much easier and effortless to find what you’re looking for, by making changes on the fly. And of course, the search input is finally back in its proper place.
  • Ping- and trackbacks are now sorted out from the comments list and placed in a special container in the comments section sidebar. (Not currently operational, detection of comment type differs from 1.2 to 1.3, and all my code is for 1.2…).
  • On the backend I now have Amazon Associates integration, which I will be using when I’m linking to Amazon items. I hope to also setup a more integral system for connecting the various entertainment media related categories and entries.

Also I recently suggested on the WordPress hackers list, that a new search engine be built for WordPress, as the current one is absolutely horrid in its simplicity. So look forward to relevance sorted searches.

One of the things I really would’ve liked to have had ready for launch was this idea for a new ‘digging archive’ system (pardon the name, it was the best I could do.

Mockup of Digging Archives

The idea being that either all the data is preloaded on the page, or fetched using the same code that powers livesearch. The mockup above isn’t entirely accurate, actually the entry titles should be in opposite order, the latest being at the top…

When you first load the page, the current year and month is active, with the titles for all entries underneath that month loaded at the far right. Press another month, and the entries will change to reflect that month. Click another year and the months change to reflect that year instead…

The clever part being the ease with which you can quick hone in one that ‘something about kubrick that I posted last summer’. Variants could also allow for category segregation at both year, month or entry level (I would probably go for month level myself).

The crux of the plugin needs to be the speed with which it operates. It can’t be counting on passing variables between reloaded pages, it needs to all be inline.

If you feel up for the challenge, let me know.

Left To Do

There are still some things that need to be adjusted a little. Tweaked if you will.

  • Some spaces between headers and metadata is too tight or too loose. Some lists need a bit of space adjustment as well
  • Ping- and trackbacks need to be segregated from regular comments. Layout is all done, I merely need some segregation code.
  • The category listing on the main archives page needs to be changed, I’d forgotten about that. It was one of the pages lost this morning.
  • The .htaccess rewrite rules for some reason bork, meaning that /kubrick/ isn’t redirecting you to kubrick.php as it’s supposed to.

Where We Go From Here

It has been my desire to write longer, more prosaic and topical entries (no Tom, not tropical!) and Freya has been designed to stand in the middle of that and the more pragmatic information architecture described above. Thus both the white-background entry part of the permalink pages as well as the comment section fare best when presented with entire paragraphs and not the one-line entries of the recent past. To quote myself:

“Life has perpetuated itself against odds of meta-biblical proportions. Intelligent life twice so, and I would hate to believe that we crawled down out of the trees so that I could waste your days with something that I cannot stand by fully. So enough of that. From here on in I won’t let myself off that easy.

I have opposable thumbs dammit; hear me roar.” #

Of course, that’s not quite how it went down. So much for opposable thumbs. Time to live up to my own hype…

Cleaning Out My Closet

The archives have inherited some of my charming personality, and upon entering them, my hordes of zombie-cyborgs quickly and ninja-like count up some daring stats that define the backbone of Binary Bonsai. It’s currently telling me that:

“With its 1204 entries, totalling 226,540 words and 7721 comments totalling 448,636 words, the Binary Bonsai archives are by now quite expansive.” #

And I can tell you with some certainty and authority in my voice that not all of those 1204 entries are worth their weight in the magnetic flux patterns they generate somewhere in the Northern US on Matt’s server…

So, the dilemma is: Do I go back into the archives and delete the one-liners, the now extinct clippings archive and pointless clutter entries? Or do I respect the sanctity of the grave and the comments, however few, that would undoubtedly fall with the doomed entries?

I’m not entirely sure yet. Though I’m leaning towards an audit of some sort.

What Could Have Been

Not so much for your good, as it would be for my won archival purposes, I hope to scan some of the sketches that I did in the initial redesign phase and get them up here or on flickr.

And also for archival purposes, here are some of the early rough mockups that I did, while trying to find my groove. They’re presented as they were found, which means that elements are bound to be disproportionate, poorly placed, colored and so on and so forth. Standard disclaimer.

  • Boring – Not much to say, other than: I don’t think so!
  • Clean – I actually don’t mind this one so much, though for it to be turned into something proper, it would obviously need some more work. Seeing it again, I’m reminded of my old menu structure, which was actually a good idea. Maybe I’ll return to that at some point. The header uses a piece of the Worn design.
  • Word – This one almost made it! But I decided that the world had enough ‘worn’ blogs out there, and on top of that, it didn’t really have any of ‘me’ in it…

From Here on In

I need to fix the various bugs that’re cropping up (ugh), and add in the things I’ve talked about. After that, I’m looking forward to writing something cohesive again.

Also, I think I promised you a Half-Life 2 review?