lunarboy_retrospective_v5

It’s been five years since the last time I redesigned this website. So welcome to Lunarboy.com 5.0, fresh for 2014.

Technology has changed a lot over the last five years. The most pressing of which I had to address was mobile-friendliness. Version 4.0 didn’t look that great on a mobile device. The iPhone was only two years old at that point and the iPad hadn’t even come out yet.

I actually began an attempt at a redesign back in 2010. I made it through a few rounds of sketches. With this first one, I was playing with typography and scale.

lunarboy_5_v1

Although I liked the scale and contrast, I wanted to play a bit with depth. Which led me to some experiments with Cinema 4D and this…

lunarboy_5_v4

But alas my poor CSS skills didn’t enable me to pull this off and I shelved the whole project.

Fast-forward a few years and out of necessity I had to put up a new site rather quickly. The need was primarily to show off my work to prospective employers, not to showcase the blog. So first I went to Squarespace and put up a very quick site with my latest work, killing the mostly inactive blog. It worked as a very basic portfolio site, but it was also very frustrating for me as a designer to not be able to customize certain things. For example I really wanted my landing page to present a statement about me, as a typographically composed image (that could swap out at certain breakpoints). That amount of customization just wasn’t possible, or I simply didn’t know how to do it within their interface. (I still like their product and would recommend it to anyone who’s not a designer.)

Next I tried to build something from scratch using Adobe Muse, since I had the Creative Cloud suite, I figured “What the hell.” Unfortunately Muse really is still a 1.0 product. I found that I could only use a few select TypeKit fonts even though the full TypeKit library is included in Creative Cloud. Muse’s recompression of all images was also a problem. Even when I sized images in Photoshop precisely, Muse would still recompress PNGs and JPGs at a much lower quality than I would accept as a designer. At some point I thought that I could just replace all the images after the fact and do a lot of hacking to make it work. But that seemed pointless.

So then I started to look into WordPress.com. It seemed that their hosted solution with all the cool templates could be an easy way to get the site I wanted. They had more variety in templates than Squarespace. They had plugins—or so I wrongly thought. After buying a template and hacking it in CSS, I got to a pretty good point. But then I wanted to assure that users viewing my site on high-density devices received Retina-quality images. But alas, WordPress.com does not allow JavaScripts or plugins to make that possible.

Finally I settled on a self-hosted WordPress solution. I bought a new theme called Agent which has a lot of great bells and whistles. I was able to install WP Retina 2x, a plugin that makes it easy to enable the serving of Retina-quality images. (Although there is a nasty bug of it not working properly with CDNs. Something I had to experiment with.) It’s a self-hosted instance on Amazon Web Services which I was able to do relatively easily via Bitnami.

Is this new redesign cutting edge and 100% reflective of my personal aesthetic? No. But it gets the job done and I’m fairly happy with it. Maybe some day I’ll revisit the layered transparency idea.