New GrantPalin.com Design

I’ve had this design in the works for quite a while. I’ve lost count of how many times it got back-burnered so I could work on other things, but I recently made a big push to get this redesign out the door and off my list.

My goals with this redesign

Be more open
I decided to use a wide fixed-width layout. Going wide is an increasing trend these days, and I wanted to do the same, particularly because I want to show photos or code samples, which is easier on a wide layout. 800×600 has been the norm for years, but now it seems rather limiting. I decided to not use the standard sidebar, instead creating “blocks” of content relevant to the current page.

More emphasis on work samples
Previously, my portfolio was located within the About section. For the “new” site, I wanted it to be more front-and-center, more noticeable. This matters to me as I want to have my past work be more prominent to potential future employers that visit my site. I’ve used better screenshots, and provided some description for each project, as well as listing the technologies involved.

Photo integration
In the past, ZenPhoto handled my photo galleries, and it worked. ZenPhoto is a great product, with an active community. But I was also putting my photos on Flickr, causing some repetition with managing photos in two locations. After some thought, it seemed the best way to go was to forgo ZP, and make use of the Flickr API to display my photos on my site. I found a nifty plugin that integrates Flickr photos into WordPress: Flickr Photo Album. Just install, customize the templates, and job done. The end result is visible in the Gallery. The plugin is also used to display random photos in the footer.

Simple look
I have seen many sites around the web that are gorgeous and colourful, and not at all boxy. I wanted something simple and straightforward, so I didn’t do anything too fancy with layout or images. I did use a multi-column layout, with different combinations of column widths for different pages.

Be more representative
I decided my site would look much better if it somehow represented my personality. The previous design did not do this at all. I like structure and organization. My interests include drawing and photography. The new design needed to reflect those aspects of my personality. Hence, the decorative header images, the grid layout, and the grid background (I used to draw a lot on grid paper, at one point I was quite into drafting).

Be less “bloggy”
My site until now has been primarily a blog. I had made use of the pages feature to add some specific pages, but it wasn’t very well organized. I wanted to repurpose this site so it is less a blog and more a personal and portfolio site. Which, of course, includes the blog component.

Do some housecleaning
The site backend was somewhat messy up until now. I had stray unpublished pages strewn about, unused or little-used categories, tags that weren’t displayed, too many plugins, and so on. I’ve removed the extraneous pages, and have those down to a bare minimum. All other content is in the posts system. I started using tags, and have converted some categories to tags where appropriate. I now try to use categories as general buckets for organizing posts, and tags for adding specific keywords. I was also using close at least fifteen plugins, and have reduced that number down to ten. That may get reduced a bit more eventually.

Start to Finish

First mockup - basic but a start!
First mockup – basic but a start!

I started with a really simple layout (shown above). As mentioned, I wanted a simple layout, and I like the colour blue, so that’s how the initial mockup turned out. I used Fireworks CS3 to create the mockups. Fireworks is a great tool for the purpose.

Final mockup - looking good!
Final mockup – looking good!

I went through about ten revisions, trying different ideas, different layouts and colours and images. At a certain point, I liked the direction I was going in, so I kept going that way. So the last few revisions were rather similar, only changing in little details until I was happy with the look. The final revision is shown at right.

This end result is a little different from the final mockup, but not hugely so. I changed positioning a little bit, made the navigation icons smaller, moved some items around, and simplified the footer.

Soooo…

The WordPress 2.7 release was very timely, and the time was just right to activate this new design.

It’s not quite “done” yet, but I decided it was close enough. There are some little details I want to tend to, such as more imagery or icons. But, it’s good enough for public consumption.

It’s not the prettiest or most cutting-edge, but I like it and think it will serve my needs for quite a while yet. Considering that I’m more programmer than designer, I think it turned out fairly well.

Along the way, I used some particular techniques (in HTML, CSS, and JavaScript) to help achieve the end result. I may write a bit about those techniques and their results in the near future.

Any feedback? Please leave a comment!