One of the challanges of setting up the Admissions Office Intranet is that I had no content to work with. The Admissions Office needed a site that is limited to just incoming law students. My responsibility was to come up with the shell that would allow the staff to fill in the pages.

I had three choices of CMS. Drupal would be too complicated for the project. MODX was my selection, but designing an empty site from scatch was not an ideal solution. The effort was not worthwhile for a restricted site. I needed something that is well thought out to kick off with. WordPress is the perfect choice because its default theme, Twenty Eleven, had everything that is required. I just needed to jazz up the design a bit to comply with the school’s branding.

I decided to experiment with WordPress’s child theme based off Twenty Eleven and ended up loving the idea of customizing the design without touching the parent theme. With a bit of CSS knowledge, one can create a pretty decent site. The child theme turned out to be a perfect solution for this particular project. The site is obviously restricted, but you can still get a sneak peak of the homepage.

I am pleased to announce the new launch of Theatre Arts Workshop, “a professional performing arts teaching facility for students of all ages, ambitions & abilities.” This project is a collaborative effort between me and Ryan Dellolio, a very talented web developer who was a colleague at GW.

Ryan brought me in to do the design and front-end development. I worked with the client on the visual layout and created the HTML5 template as well as the responsive design. He took care of implementing WordPress and everything else. The partnership worked well and the client is very happy with the new site. I hope to get the opportunity to collaborate with him again in the future.

As a father of a two year-old, I sure got a kick out of Adam Mansbach’s Go the Fuck to Sleep. I could hear the voice in my head saying, “Please close your eyes and go the fuck to sleep. I got other shit to do.” Putting Dao to bed has always been a challenge for me. He kept wanting to play until he gets tired out. Usually I fell asleep before him.

As I was listening to Samuel L. Jackson narrating the book, I couldn’t help firing up Flash and create some animation. I haven’t touch Flash for a while; therefore, it is a perfect little project to brush up my chops. With this piece, I just wanted to play around with simple typography in motion. So check it out. It’s time for me to go the fuck to sleep as well.

The spring edition of GWbusiness magazine is now online. In addition to new contents, the layout has been realigned to be responsive. GWbusiness went online over a year ago. At the time, I was just getting into HTML5; therefore, some of the elements needed to be updated. I also changed Georgia to Quattrocento for the headers and Quattrocento Sans for the body type.

Thanks to my colleague Molly for the encouragement.

I am pleased to announce the new launch of Jen Karin Writes, a blog for an award-winning writer and imagination advocate. Ms. Karin approached me right after Writerhead went live. Big props to Ms. Bair O’keeffe for the referral.

With Jen Karin Writes, I was presented with a challenge: a very close-crop portrait of the writer. Meg Silliker of Bluelime Photography has done a great job of capturing a natural smile from the writer, but the vertical portrait is difficult to work with for the web.

To make the layout work, I anchored the photo to the left in a fixed position (no scroll) and let the contents flow next to it. The photo is served as a starting point for building small layout first. I used 320 and Up along with HTML5 Boilerplate and WordPress’s Toolbox as a framework. I also referred to Tim Brown‘s Modular Scale for headings.

Many thanks to Jen Karin who is such a fantastic client for giving me the full creative freedom to put the site together. I am very proud of Jen Karin Writes and hope that she’ll enjoy using it as much as I had enjoyed crafting it.

I am pleased to announce the new launch of Writerhead …with Kristin Bair O’keeffe. This is the second project I get to work with Kristin, the talented writer. Two years ago I created a web site for Kristin’s first novel Thirsty and we both were very happy with the project. So when she approached me to turn her static site into a vibrant, dynamic blog, I didn’t hesitate.

Before I even gave Kristin an estimate, she already had all the contents ready for me. I wish all my projects could begin this way. Kristin also knew exactly what she wanted: simple but bold. As you can see from the site, you can’t get any bolder than a big, bold persimmon masthead with an incredible amount of text. My first instinct was that it’s too much text for a site description, but then I didn’t want to take it out after I see the playfulness of it. That’s what making the site stands out.

Kristin wants the ability to update the entire site herself; therefore, WordPress is the perfect tool for this project. The theme is based on “Toolbox: An HTML5 WordPress Starter Theme.” The theme is styled with semantic HTML5, but I modified the codes a bit to incorporate HTML5 Boilerplate. I tried to stay closed to “Toolbox”‘s structure as much as I can so Kristin can add new widgets or create new menu item without me going into the codes. I relied mostly on CSS to jazz up the look and feel. I also used CSS media queries to make the layout responsive. CSS3, HTML5 and WordPress make me love what I do.

Writerhead is truly a rewarding project to me. Even though I digged into these new technologies with Visualgui.com, Writerhead allows me to see WordPress really works. With Visualgui.com, I customized almost everything so it is very specific for my own needs, but Writerhead is much more flexible since I have to design with other users in mind.

So thanks Kristin for the opportunity. I hope you’ll enjoy using the site as much as I have enjoyed designed and developed it.

By the way, Kristin will open a personal essay workshop online. So if you’re interested in improving your writing skills, check out her classes.

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.