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.

We are proud to present the launch of United Green Solutions, an alternative energy and general contracting company that provides turnkey solar electric and lighting projects for commercial customers. UGS needed a clean, fresh and simple web site that conveys its forward-thinking in the pursuit of global sustainability. To promote the firm’s expertise in creating alternative energy efficient solutions, we worked closely with UGS team to craft informative, inviting design using HTML5 and CSS3.

A brand new site with a brand new product line. After many months on the back burner, Simplexpression gets a complete renovation just in time for the fall.

For the site redesign, we replaced the simple white design with a muted tone. The new homepage displays all the thumbnails that will float according to the user’s screen resolution. We also revamped the codes to bring the site up to HTML5.

For our product, we took down all the old pieces and changed the way we photograph our new pieces. We abandoned the concept of naming our pieces after female jazz singers because choosing a name to attach to a piece has become quite a challenging task.

So head over and check out the new site. I hope you like our new approach and spread the love.

Just launched a new web site for one of my longest clients: The Lancaster Foundation for Educational Enrichment. I designed the original site eight years ago and have been maintaining it since. The new executive director wanted a brand new site that is clean, simple and attractive. So I worked with her and her team to rebuilt the site from scratch. The new site is marked up using HTML5 and the content has been rewritten.

I finally got around to install WordPress for the School of Business to replace the good old handcrafted newsletter. I no longer have to spend time hand-coding each newsletter. My colleague who writes the content of the newsletter could just post as she go along. One of the advantages is that we don’t have to wait for two weeks to send out the hot news. It will be more immediate. I also don’t have to feel guilty spamming 25,000 people every two weeks. They can just subscribe to our RSS feed and read as they pleased.

I installed the latest version of WordPress, which is 3.0, and tried to theme it based on Twenty Ten, the new default template for WordPress, but the new theme is way too complicated. Furthermore, the new template from GW isn’t so simple either. To get the two to work together will take tremendous amount of time or at a week straight to breakdown the PHP. So I went back to the classic theme, which is the most straightforward out of the box. Even with the classic theme, I had to strip the code down to its core for my needs and trim away the extras. Twenty Ten has 26 files and two folders. My theme only has three files (index, comment and css).

What is up with the long URL? When I thought about the project, I couldn’t find an appropriate name for it. I brought it up at our communication meeting and asked my colleague to help come up with a name. We tossed out a few ideas, but then it hit me: atthecenterofitall.business.gwu.edu. My boss was immediately sold on it even though it’s damn long address. She defended the idea by retelling the story about one of our alumni. In an executive meeting somewhere in another country (I can’t remember the name), he introduced himself as a graduate from GW School of Business and one of the directors at the table complimented, “At the center of it all.” Furthermore, We had done quite a bit of promotion on that catchy phrase. So I thought it’s a great marketing strategy and I was so glad that my boss was with it. I still love saying it: at the center of it all dot business dot gwu dot edu. How awesome is that?

I just launched Sketches of Miles, an experimental project combining Miles Davis’s albums and web typography. The concept is to design each individual poster-style page based on Mile’s cover art. To make the project more interesting, I also write a Twitter-style, one-sentence review and each piece has to include the title of the album.

What inspired the project? After purchasing Miles Davis’s The Complete Columbia Album Collection a few weeks ago, I am still trying to get through more than 70 CDs with every chance I get. I listen to Miles at work, on the train and on road trips. One night, I just drove Dana and Duke around DC just so I could get through an album. The problem is that I can’t soak in everything that fast. The only way for me to pay close attention to an album is when I want to write something about it, but I can’t review all 52 albums. I could if I don’t have to take care of Duke. Being a parent changes my priority.

So if I could listen to the entire album and sum it up in one sentence, it would force me to be more focused. Sure, I can just post a quick sentence on Twitter, but I don’t want to be lost in the Twitter world. I want to make simple project and learn something out of it. I have been wanting to play around with web typography as well as crafting each page with a unique design.

A couple months ago, I came across an article from David DeSandro about Stacey, a lightweight content management system and how he uses her to create each individual entry. Stacey is simple and very different from a traditional blog system like WordPress. I downloaded Stacey and was impressed by her simplicity, but I couldn’t do anything beyond the default template. I needed a real project to get a hang of it. So I stripped the system down even further to do what I wanted to do. I got stuck and contacted David for assistance. He replied the next day and even showed me the source to his entire site. I was in awed. Mad props go out to David.

Since this is a personal project, I could careless if the site works across all browsers. Safari is the only one I test it on. There are no reset CSS, no layouts and no clear fixes. The site is a very basic HTML5 markup with very little use of CSS. All fonts are real (no images). I am currently using some from Google Font Directory as well as the safe fonts beyond the Helvetica. I’ll try to look out for more free fonts to link to.

So I hope you enjoy this tiny project. I am not sure how often I will update this site, but you could pick up the RSS to be notified whenever a new piece is up.

iLoveNgocLan.com launched seven years ago and it has been the place for people to share their love for Ngoc Lan, one of the most beloved Vietnamese female singers. Visitors come and go, but the site has never been vacant. Fans have continued to visit and share their thoughts everyday.

I am ashamed to say that I haven’t spent as much time as I should in maintaining the site. We started off with four admins, but now we’re just down to two. My parter has been doing a great job of overseeing the site all these years. If it wasn’t for him, I would have given up on the site. At times I have thought of bowing out as well, but I owe it to the people who have been to the site all these years. So I decided to rework the site up to keep it up to date.

While the previous design was still attractive, the codes were getting out of shape. Seven-year-old code for a web site is ancient and I have been wanting to redesign the site for quite a while, but the massive contents and the the lack of time have been pulling me back. The site couldn’t escape my mind and every time I need to update the site I frowned so I decided to tear down the site and simplify it. The folks will miss the theme-switching feature, but the site is now in a much better structure. The design also allows the space for promotion.

The site is upgraded to HTML5 and the entire contents, not just the homepage, are now powered by WordPress.

Every time I listen to Tuan Ngoc’s gorgeous rendition of Trinh Cong Son’s “Nho Mua Thu Ha Noi,” it urges me to do a slideshow. From Trinh’s picturesque visual lyricism to Duy Cuong’s intimate arrangement to Tuan Ngoc’s intricate yet effortless phrasing, this tune strikes a perfect balance between words, music and vocals. Imaginary and motion would add another dimension to the song and that is where I come in.

A while back, I wrote a post looking for photographers who had taken beauty shots of Ha Noi to collaborate on the piece. I contacted half a dozen of them. Since the project has no money involved, it’s understandable that none of them replied back to me even though their work will get exposure. It would also required more time from them to go out and shoot more photos to accompanied the song so it was impossible to collaborate. As a result, I abandoned the concept.

Thanks to my lovely lady who scoured the web to gather images that are suitable for the slideshow and encouraged me to pick up the project again. So this is for you, my love: “Nho Mua Thu Ha Noi.”

Disclaimer: This is a personal piece and I am not making any money off it. I really hope that the owner of the images don’t mind me using their photos.

Just in time for Vietnamese New Year, I am proud to introduce the launch of a brand new web site for a grand-opening restaurant: Le Mekong Vietnamese Cuisine. Khanh Quynh, co-owner of the restaurant, is a young, creative lady who would like to get things right from the start. She knew what she wanted to do with the restaurant and she knew right from the beginning that marketing is essential.

At first, Ms. Quynh hired me to design the web site, but I also ended up creating print materials including logo, business cards, letterhead, flyers, gift certificate, envelope, handbook and server training cover. Her reason is that she would like a consistent look and feel across the board and she likes my simple style. I can’t argue with that.

I didn’t design the print version of the menus, even though Ms. Quynh would like me to, because it would be too much. I am not a graphic designer; therefore, I am not ready to take on the menus in the time frame that was set. The online menus, however, are the pages I am most proud of in this project. The items were presented using pure CSS instead of tables.

The logo is set in HL Thu Phap, an extremely popular Vietnamese typeface that is being used everywhere in Vietnamese publications. What makes this brand distinctive is the bright orange set against the brown background and complemented with the clarity of Univers. While the script suggests traditional Vietnamese, the san-serif gives a sense of modernness. I gave Ms. Quynh several designs, but this one seals the deal.

As you can see on the homepage’s slideshow, the interior colors of the restaurant match the colors of the web site. Like I said earlier, Ms. Quynh is very consistent. She sent me the palette right after she had a meeting with her interior designer and immediately I knew what the web site would look.

As for the code behind the scene, this straightforward web site is markup in HTML5 with a bit of CSS3 and a Flash slideshow. I also convinced Ms. Quynh to use Twitter as a marketing tool for her restaurant. She can tweet about new promotions or specials of the day on Twitter without having to hire me to update the web site for her. It’s a great, cost-saving way to get the words out. I also gave her Twitter page a similar look and feel.

Le Mekong has just opened for business in less than three weeks; therefore, some of the contents like press and events are still to come. I also whipped up the about page as well as the intro blurb on the homepage. If you live around Johns Creek, Georgia, come check it out and let me know what you think of the food. Just tell her you’re a friend of Visualgui.com and you’ll receive 20% off. So what are you waiting for? Head to Le Mekong and treat your family a New Year dinner.

Attorney Julie Vien Tran just launched Julie Tran Law, a simple, professional and elegant web site with dual languages (English and Vietnamese) to promote her law offices.

What I have learned from our email conversations is that Ms. Tran is not only professional, but also very approachable, and I wanted to convey that on her web site. Right on the homepage, I have Ms. Tran standing in front of a faint (almost silhouette) but recognizable building of the Supreme Court. Her pinstripe suit suggests professionalism and her friendly smile gives visitors the personal connection.

The only problem is that Ms. Tran is a modest person and she doesn’t want the web site just to be about her since she will be planning on recruiting more attorneys. (Any lawyer needs a job?) So the homepage will be changed once she hired a photographer to take some shots to be rotate on the front page, but for now, I am glad we are launching with this direction.

As for the navigation, my initial approach was to have two separate sets: one for English and one for Vietnamese. When I combined the two together and set them apart using font size variations, the navbar looks much better. If users want to read Vietnamese, they can just click on the Vietnamese words.

Ms. Tran designed the logo herself and I made a suggestion to use a different typeface. I wanted the letter J and L to have a sense of balance with the middle T holding the two letters together to resemble the scales of justice. Bauhaus 93 has that perfect balance.

As for the coding, this site is structured in HTML5, the future of markup, with a dash of CSS3 for some visual effects and a bit of PHP to hold the pages together.