Almost exactly one year ago I thought of a cool name for my blog; “TetrisRockstar”. I liked it immediately and I could find a clear story in my childhood that would fit in with the name. Luckily tetrisrockstar.com was free as well, and April 09 I bought it.

Then began the arduous task of trying to find a new theme for the blog. I didn’t just want to switch the name and keep the theme, and I wanted a really good theme that preferably fit the name well. For about six months I regularly looked around for free or $20-$100 themes, but I never found anything that was really what I was looking for.

I then saw Matt Mullenwegs’ new blog and he had a fantastic huge graphic at the top of the blog. So big it obscured the rest of the blog, but I thought it was gorgeous. So I started looking for a designer that could give me something like that. I spend 3 months looking for a designer, I found a total of 4 designers that I thought could give me what I wanted and offered them each around $600 for a Photoshop file with a layout and some nice graphics. $600 is a pretty low amount, but it’s not like I was asking for multiple page-designs or any coding or anything like that, just one piece of graphic. I don’t think it was insultingly low, but 2 of the 4 designers didn’t answer once I said what I was willing to pay and the other half simply said the project was too small.

After realizing I would have to pay much more than I was comfortable with to get a nice design, I started working on one on my own. At least that would give me something personal. I wanted something a little retro/gaming-related for the tetris- part of the name and something a little grungy for the -rockstar part of the name. I found a theme on WooThemes that I thought was pretty OK, but needed quite a lot of tweaking to look like I wanted, so I started remaking it from the start and changed the things I wanted along the way.

[caption id=“attachment_1350” align=“aligncenter” width=“225” caption=“First version of the blog”] [/caption]

So this was the first draft that I came up with after a couple of hours in Photoshop. It had like, the elements that I wanted, the tetris-block, some more advanced graphics in the top and a grungy background. Unfortunately it looked like crap. I then tried some different approaches to this design.

[caption id=“attachment_1351” align=“alignnone” width=“225” caption=“Second version with top banner”] [/caption]

[caption id=“attachment_1352” align=“alignnone” width=“225” caption=“Cleaned up version”] [/caption]

The banner didn’t turn out as awesome and illustrative as I wanted, so I tried doing a really clean version, basically removing everything I wasn’t 100% satisfied with. But then obviously it needed something else.

I then found this awesome piece of graphic, the koi fish. Normally I hate koi fish, they’re a super-tired stereotype and I don’t even think they look that good graphically. But this one had something I really liked. I paid the designer £40 to use it on my blog and then I started incorporating it. In retrospect I should have paid once I was sure I was going to use it :P

[caption id=“attachment_1353” align=“aligncenter” width=“225” caption=“Koi fish version”] [/caption]

This I was actually pretty happy with, but the boxes on the right took up way too much attention and the whole design was very boxy. So I tried getting rid of the boxes in several different ways, spurring the following redesigns.

[caption id=“attachment_1354” align=“alignnone” width=“300” caption=“Removed boxes and added title “banners”“] [/caption]

[caption id=“attachment_1355” align=“alignnone” width=“178” caption=“Removed right content entirely and made fish more prominent.”] [/caption]

[caption id=“attachment_1356” align=“alignnone” width=“178” caption=“Changed titles and removed big boxes”] [/caption]

[caption id=“attachment_1357” align=“alignnone” width=“178” caption=“Tried doing a different more clean top”] [/caption]

[caption id=“attachment_1358” align=“alignnone” width=“178” caption=“A little more grunge, but still clean top”] [/caption]

[caption id=“attachment_1359” align=“alignnone” width=“178” caption=“Following the same design but trying different things”] [/caption]

[caption id=“attachment_1360” align=“alignnone” width=“178” caption=“I drew this tetris-block by hand”] [/caption]

[caption id=“attachment_1361” align=“alignnone” width=“173” caption=“The second version I was very satisfied with”] [/caption]

The reason I didn’t stop here was that I wasn’t entirely happy that I hadn’t gotten in all the links I wanted and there were still some.. problems with it, that I couldn’t really put my finger on. I also checked my statistics and it seems like a lot of you use the “Latest Comments” out on the side to see if there are new comments on the blog. So I wanted to get that back into the design.

I had a long stand-still here. Finally I found Spencer Frys’ blog and Max Voltars’ blog at the same time, and thought I could combine their best parts into one design that I would be happy with. This resulted in the following revisions.

[caption id=“attachment_1362” align=“alignnone” width=“221” caption=“New design with Web 2.0 top”] [/caption]

[caption id=“attachment_1363” align=“alignnone” width=“238” caption=“Ultra-clean version”] [/caption]

Finally I came to some sort of conclusion that I was happy with.

[caption id=“attachment_1365” align=“aligncenter” width=“250” caption=“Medium-clean version with koi”] [/caption]

I asked around a little among friends what I should do with this and the first suggestion was change the font. So I drew this up to see what I should choose from. Can you spot the one I chose? :P

[caption id=“attachment_1364” align=“aligncenter” width=“300” caption=“Title fonts”] [/caption]

Emma didn’t really like the koi fish, so I tried putting in the tetris block instead of that. I really couldn’t make that work though, I felt it ruined the flow of the design. Emanuel also had some good suggestions to change the top, the bottom and to add a little color by randomizing the divider tetrisblock.

[caption id=“attachment_1366” align=“alignnone” width=“249” caption=“The design with a clean tetris block”] [/caption]

[caption id=“attachment_1367” align=“alignnone” width=“249” caption=“The design with my hand-drawn tetris block”] [/caption]

Then I finally came up with a good version and make some minor tweak to get it as I really wanted.

[caption id=“attachment_1368” align=“alignnone” width=“249” caption=“Final design”] [/caption] [caption id=“attachment_1369” align=“alignnone” width=“249” caption=“Final design with final tweaks”] [/caption]

So now I had a design. That approximately took three or four months to get to :P I have now spent this entire weekend coding it up. The frames you can see in the pictures above are made entire in HTML and CSS3. That means it’s supported by the latest versions of Chrome, Firefox, Safari and Opera; but NOT by Microsofts Internet Explorer. Those of you using IE will unfortunately have to live with the old grey frames. It makes the design look much worse than it is, but I can’t get myself to only using 90’s technology because Microsoft refuses to update their browser.

Anyway, the frames were a problem in themselves to produce. I wanted frames on all the old pictures as well. Throughout the past I’ve used about 4-5 different ways to import pictures into blog posts. In the latest posts I’ve used something called wp-caption. Which is this grey frame with a caption underneath. In the past I’ve just imported the pictures straight in, but my frames needed to handle a bunch of different cases. Sometimes I have multiple pictures next to each other, sometimes they float left, sometimes they float left. And most of the times the picture should just be centered on a row by itself. For the frames to work at all, the picture needs to be surrounded by two div’s with classes frame and image. So to make everything work, I spent around 5-6 hours on writing the following script. Handling the insertion of these two divs in a proper way.

[gist id=346739]

So finally. I have something that works for everyone but the people on IE, and I hope it looks acceptable for those people, even if it’s not as awesome as on Firefox/Chrome/Safari/Opera.

I have also changed the commenting system so you can now login using a range of different options, or of course continue commenting as guest as always! You can now like comments and reply directly to comments as well. I think the new commenting system is pretty nice. Use it to say what you think! I’ll leave a little poll here in the end to gather opinion as well. But of course, if you have anything to say, do so! For those of you using IE and want to see what this blog posts looks like on another browser, click this link.

[poll id=“2”]


tetris