Blog gets a massive redesign (and how I did it)

Yes, I know that last redesign wasn’t so long ago, but – I’ll be honest with you – theme that I used before was made as an experiment and I wasn’t really satisfied with it. The new one is more my style – colorful yet minimalistic, more crafty, using sans-serif fonts here and there for the typographic contrast between headers and content. For now, I think it’s here to stay, unless I find another source of inspiration that will strike me so much that I’ll decide to change the layout of my blog. As for me, I’m very happy with the overall effect – I know it needs some tweaking here and there, but that’s something I will be doing in free time, since it doesn’t require as much effort as working on the whole Wordpress theme made from scratch. If you’re interested in the process of redesigning the blog itself, read after the jump.

Re-design process

The project started out as a spark of idea to do something minimalistic, yet using crafty and ornate swirls and subtle flowery patterns in vibrant, spring colors, since – well – it’s spring, we should rejoice. And stuff. Anyway, I started to draw things on paper, as I usually do (unfortunately, I don’t have pictures of it here) – I started out with a 12-column grid which I divided 8/4 and decided to break it in two places to keep it regular on both sides. I decided that the places that will break the grid will be the logo and the tagline which lead me to the layout which you can see now on the site.

Second step of creating the new design was choosing the color palette. I usually go over to COLOURlovers to check new trends and interesting palettes. I usually focus on colors used in old children books, magazines etc. since I simply love how retro colors are mixed together. This time I focused solely on the article 2009 color predictions where I found the Giant Goldfish palette, by manekineko:

After choosing my colors, I started to think about typography. The first version of my logo had serif font in it and I basically love serif fonts used as headers, logos, teasers and anything that requires visual differentiation of header from content. Anyway, I jumped to FontSquirrel and DaFont in search of good looking serif fonts, where, after a while of scavenging, I found Justus by Khunrath which suited by needs and vision perfectly:

I threw few quick mockups to see how it looks like before I decided on the final looks and then started to re-design my Twitter background and colors, business cards and everything else to match the new design. After that I started to work on the Wordpress theme.

Slicing and making it a Wordpress theme

I won’t be very exact on the process of making a Wordpress theme, because you can find very useful Wordpress theme tutorials on WPDesigner or NetTuts+, but I will just focus on the technologies used to make it look like it does now. I didn’t create my theme from scratch, cause I wanted to deliver it quick and be sure that it works good, so I decided to tweak K2 instead. It took a while to get used to their code and way they created the theme, but after I got familiar with it, it gone easy.

Since I required some kind of font-replacement for the headers and I simply hate the ones that require Flash (like sIFR), I decided to use Cufón. Not sure how it works x-browser, because I didn’t have time to check it yet (will be doing x-browser tweaks this and next week, but I must say that using HTML canvas to handle custom fonts is the way to go before CSS3 will welcome us with @font-face for embedding external fonts.

Anyway, that’s about it. If you have any specific questions or other feedback, feel free to leave them in the comments or ask me via Twitter.