Visualgui.com Realigned

After many months of itching for a new design, I spent the last four sleepless nights realigning instead of redesigning my personal site. My original intention was to revamp both the design and the codes, but I simply can’t escape the white background. Although the layout isn’t drastically different, I incorporated many new things I have learned in the past few months. So let’s walk through some highlights.

The navigation is completely reworked. As you might have already noticed, the inspiration comes straight from Apple.com. What can I say? I am a fan of Apple’s design. I can’t be a sleek as Apple so I settled for more colorful.

The layout is now much wider (940px). The design is based on a grid that inspired by Khoi Vinh’s Ordering Disorder: Grid Principles for Web Design. Until I read his book, most of my previous designs based on improvised grid. Although the previous design worked out well with 800px, it’s time to move on toward larger screen; however, the new layout is also responsive and fits nicely with mobile devices. Big up to Ethan Marcotte for the invaluable tutorial on fluid layout from Dan Cederholm’s Handcrafted CSS: More Bulletproof Web Design.

HTML had been rewritten after many rereads of Jeremy Keith’s HTML5 for Web Designers. This site also uses some features from the rock-solid HTML5 Boilerplate. Paul Irish rocks!.

A big part of this redesign was for me to go through WordPress 3.0 and create a framework just in case my feature clients would like to use WordPress as a CMS. I wanted Visualgui to be a parent theme and than later on I can just build a child theme to meet whatever design the clients request. That way, I’ll have a based template to start off with. Thord Daniel Hedengren’s Smashing WordPress Themes: Making WordPress Beautiful is a great resource. I went through WordPress’s default theme Twenty Ten line by line and tried to convert it into HTML5 markups. I was half way through before I discovered ToolBox. That was exactly what I needed. So I went back to use Toolbox as a reference to build out a framework. For the purpose of this site however, I only use some basic functions.

As for typography, I am finally moving away from Helvetica, a font that works so well in term of clarity and supporting Vietnamese characters. The latter has been the reason I have been holding on to Helvetica for so long even my printed material was set in Helvetica. I am now switching to Cabin for the branding and headlines. I guess it’s time to print some new business cards to be consistent. For body text, I went for Goudy Bookletter 1911, my favorite classic typeface.

For CSS, I am playing with multi-column, which splits my blog posts into two columns. The new element doesn’t work on all browsers, but it doesn’t hurt. So yeah, that’s it for now. I am sure there are still tons of touchups need to be done. The screenshots on the sites and motion section need to be be resize. I’ll do that later. It’s time to catch some sleep. Work starts in a couple of hours.