For my style assignment, my main goal was to make my blog generally more personalized as well as to add a couple of features that might make it more interesting to my potential audience. Luck meets Life’s old theme was “Connections,” which worked out fairly well because I was able to customize the header to make the blog appear more original. The greenish-gray colors also went along with my shamrock/clover theme. Using CSS, my plan was to keep with the greens and grays and, more excitingly, to make a navigation bar using images. This being my first foray into CSS, I chose “Plain Blog Template 1.0″ to start with so that I would have a clean slate to work with and plenty of room in the header for my dream navigation bar.

My redesign got pretty close to my original vision. I only really had my heart set on the color scheme and the navigation bar, so that turned out rather well. The sketch I made for the assignment might actually work better for an entire website, not just a blog. Since the sketch was vague, it allowed for the design to grow as it went and evolve as my CSS skills improved little by little. With plenty of help from Zach Whalen, I was able to figure out the custom CSS coding for my navigation bar. I wanted thumbnail images for each page that would get a little larger when the cursor rolled over them. The only big difference between my sketch and my redesign of Luck meets Life is the layout; the navigation is at the top of the page rather than on the right side. This difference makes the pages more prominent in the blog layout which I think worked out for the best.

I think that the new design makes Luck meets Life more colorful and fun. The plaid (from colourlovers.com) in the background brings the focus in to the main blog content and the images across the top for navigation make my pages more eye-catching. Before, the pages were simple text links and not very interesting. Now, they’re at least fun to roll over with a cursor! Overall, I am very pleased with the redesign and I definitely plan to keep it. I like the personality that the new design brings to the blog – it really feels more like “me.”

I only ended up with two problems: 1.) My “home” link doesn’t work correctly – I haven’t figured out how to make it actually reload the main blog page yet. Right now, there’s a placeholder page. 2.) I didn’t think to make room in the navigation bar for this particular page, but I’ll hopefully be able to rearrange the header to make it fit okay.*

* Both problems have been resolved. :)

Scans and Screenshots (click for full-sized images):

Original Sketch

Old Design

Redesign