I am happy to announce that my new design is up and running fairly well. This morning, I made a dynamic menu/title (the former, thanks to this article, the latter a result of some very basic programming — but I’m not here to brag). I’ve been working on this for about a month, maybe a little longer, and the final result is a great deal more polished than my original mockup — but it’s not that different either.

My process

Most of the mockups I’ve ever made in Photoshop are unfinished in some critcal way. Maybe the color aren’t quite right — that always takes a lot of tweaking once you have to see them all over the screen — or maybe that logo isn’t all it’s cracked up to be. Maybe it’s not your logo at all, it’s a logo that was swapped for yours at birth, and now it’s a hunchback with tentacles, and you don’t know where you’ve gone wrong as a parent, but it’s happened, and now those angst-ridden teenage years are coming on fast and—

That was not the metaphor I had in mind. Moving on…

Mockups and markup

A lot of people have probably already read Meagan Fisher’s article on mockups vs. markup, and if you haven’t, do it right now. Photoshop mockups are extremely inflexible. While I think it’s important to play around in Photoshop just to get your bearings, know that 90% of the work you will be doing will be with markup. Every now and then after I exported the images for my design, I’d return to Photoshop to grab a color (although Colourlovers helped out a lot), or refine an icon, but that was it. When you know what you want to do, Photoshop is pretty much useless.

So as soon as I got out of the whirlwind of possibility that is Photoshop with a decent design, I churned out Version One, which will never be seen by human eyes; then, Version Two, which is similar, but better; Version Three was nearly there. I broke away from the vertical menu to tabs, which I hadn’t done in a while. At any rate, it seemed to suit the theme, and left the sidebar open for content — delicious, delicious content.

Trial and error

I initially tried to get pointed tabs at the top of the page, but the varying widths of my tabs made that a bit more trouble than it was worth. I compensated by…using -moz-border-radius around the place. Because those things totally go hand in hand.

I hadn’t tried rgba before this design, and I wasn’t sure if it was worth it. Within seconds of applying it on the navigation (I thought it would be unwieldy and superfluous everywhere else), I changed my mind. It is extremely easy to use, and very pretty if you use it right.

I also tried out Cufón and @font-face for the first time. I stuck with @font-face, because it was the easiest to manipulate. I could change weights and fonts without having to upload a new Javascript file every time. But I have to say, Cufón is very neat. If you’re using sIFR, Cufón is infinitely easier to use. I mean, for chrissakes, there’s a generator. And it renders very smooth. @font-face renders a bit choppily (this might be caused by other things as well), but unlike with Cufón, I won’t have to worry about selecting text or :hover (this is apparently supported, but I couldn’t get it to work).

Then, I thought about upgrading from Movable Type 4.1 to Movable Type 5, which was released a couple days ago. After a few minutes of playing with my installation, I decided not to. The interface is gray and boring, the navigation is a bit confusing. I’m not sure why they got rid of MT 4’s UI, because it seems infinitely better.

So that’s a wrap! I have a few more things to clean up about this design, but I’m pretty happy with it. Let me know what you think! :)