I am proud to launch the new version of I Love Ngoc Lan a few weeks before the holidays and her birthday (December 28). The new design returns to large, beautiful photography. One of the feedbacks from fans is that they alway liked to see their idol every time they pay her a visit. Her photos are now paired up with big, bold, sans-serif typefaces to strengthen the design.

Speaking of typeface, another major change is the body text, which was previously set in Open Sans designed by Steve Matteson. The new layout is set in Adobe Arno Pro designed by Robert Slimbach. The choice was chosen for readability, but also to complement the sans serif faces on the images.

I must admit. I have not spent as much as I should on the site. Doing a redesign once a year is the least I could do to keep Ngoc Lan’s legacy alive. Still miss her dearly after all these years.

I am pleased to introduce the new Simplexpression just in time for the holidays. The major change is the new workmark. The previous version set in all lowercase Goudy. While Goudy was an elegant choice, I opted for Raleway, which is a sans serif, for a clean, modern design. The sans serif is also a better choice to convey simplicity.

Although the previous layout was responsive, it was not a smooth transition from mobile to desktop. I was still learning responsive design at the time. The new design is much smoother. For the user experience, I want to make it as simple and pleasurable as possible. Check it out.

To make the design fresh and to bring the codes up to date, I try to release a major redesign once a year. My goal has always been to simplify the layouts, markups and make changes to the things bothered me about the old design or codes.

For the previous design, my navigation had grown and I implemented the hamburger menu to accommodate the number of items. The use of JavaScript for the menu felt buggy and somewhat unnecessary; therefore, I removed it altogether in the redesign.

The inconsistency in the markups and layouts in the previous version also needed to be improved. The use of floats in layout made the markups and the CSS complicated. With the new version, I use flex box and multi-column in addition to floats to give me the flexibility to switch from one to two to three columns. In rewriting and modifying the markups, I also incorporated more ARIA roles into HTML5 elements.

To keep the site clean and lean, I no longer rely on JavaScript for fallback in older browsers. I also got rid of Normalize.css to embrace the fluidity of the web. Since my site doesn’t have to look the same on every browser, why should I try to normalize the CSS? I used Normalize.css because CSS Reset never sat well with me. Having to reset and redefine each element seemed like a double job. For a personal site, both Normalize.css and CSS Reset seem unnecessary. I also feel the same with a framework like Bootstrap or Foundation. They are just bloated with extra CSS and markups.

For the new design, my focus for the new design is still on typography. The wordmark is now set in ParaType’s Futura PT Condensed. The navigation is set in the same sans-serif typeface. Body texts and headings, however, are set in Adobe Text Pro designed by Robert Slimbach. What I love about this typeface is the readability at small size and the beautiful details at large size. Because I need a typeface that supports Vietnamese, I have a very narrow selection. I also have to limit my font choices in order to keep the file size down. Including all the character sets for Vietnamese increased the file size tremendously.

If you’re reading this site from an RSS reader, make sure to visit visualgui.com to see the new change for 2015. Although the New Year is still two months away, I wanted to do the redesign ahead of time like the way cars release their new model.

My client and I launched Le Mekong Vietnamese Cuisine’s web site almost five years ago. While the design stands the test of time, the codes are outdated. When the client asked me to optimize her site for mobile, I took the opportunity to rewrite HTML and CSS from scratch. The markups are now up-to-date and the layout is now responsive across all devices.

I also made some visual changes. The slideshow and banner images are now taking up the entire browser’s width, which makes the images bigger and more enticing. This site is still a fine example of how a small business owner could have her own brand and design rather than using the same template from Squarespace that millions of other businesses are using. Take a look at the new Le Mekong Vietnamese Cuisine.

I am proud to introduce the launching of Ken Elston’s brand new web site, my first project for a political campaign. Ken is a theater professor at George Mason University and he is running for city council in Manassas.

For his branding and marketing campaign, he recruited Jim Van Meer, a creative services manager at American Petroleum Institute and a current graduate student at Mason. Jim and I met when I started my graduate study. We hit it off well. Jim is my go-to man for print-related questions. We collaborated on school projects, in which he did print work and I did digital part.

So when Jim was tasked with Ken’s logo, print collaterals and a web site, he asked me to work with him on the web component. Even though my schedule was packed, I agreed to do the job for two reasons: To have the opportunity to work Jim and to get into the political market.

As expected, Jim created a simple, elegant logo for Ken. To be consistent with Jim’s work, I had a set of design elements to work with. Jim chose red, white and blue for the obvious reason. For typefaces, he selected Goudy Old Style and Helvetica Neue. I like the combination because it plays on Ken’s message: “Building on our past and planning for our future.”

In the process of designing the web site, I want voters to get two things: the candidate and his stand on issues. For the homepage, I selected a friendly shot of Ken to let voters see right away who he is. I also pushed for a page with issues to let voters understand his position.

For the secondary pages, I used photos of him and his family to give voters a bit of his personal life. The site is powered by WordPress, which also gives Ken the ability to blog. I worked with Ken directly from providing him the design to getting the contents. Through our professional relationship, I have learned that Ken is a team leader who gives and receives thoughtful feedback. I am confident that Ken would be a great city council for Manassas. Vote for him.

In the effort to rebrand Mason’s online presence, I designed a new WordPress theme for various School of Law’ network site based on Twenty Twelve. Why did I create a child theme and not a brand new theme? Even though Twenty Twelve is not perfect, it has all the built-in functions that meet many requirements from faculty, staff and students.

To get the design that I want, I stripped away the ornamental styles, fixed the spacing, and created a clean, simple theme. Chrome’s Developer Tools and SASS are my savior. I incorporated the new logo, typefaces (Minion Pro and Myriad Pro) and brand colors from Mason’s style guide.

I am using the Web Services Blog as a demo to show various stakeholders how the new design look and will help them to implement it.

I am pleased to announce the release of the new web site for the George Mason University School of Law, realigned to simplify the user experience.

The goal for this redesign is to rethink the main navigation and hierarchical structure to let users find what they need quickly and without being overwhelmed. As a result, the numbers of navigational items have been reduced as much as possible and the color choices have been limited to Mason’s brand. Whitespace has also been generously given.

The role of typography has been reconsidered. Lucida Grande had been the default choice for the Law School web site in the past decade. The new design takes advantage of embedded fonts. Myriad Pro was chose for user interface and headings. The body text is now set in Minion Pro. The pairing of Minion Pro and Myriad Pro worked well together and compliance with Mason’s style guide.

I started the redesign initiative a year ago, but it was shelved because we were waiting for the major rebrand from the University. That process has been extremely slowed; therefore, we decided to move ahead with our redesign. I spent the past month delving back into the redesign. We want to relaunch it before the summer is over and here it is.

I tweaked the design for this site again to make the logo smaller. I had fun making the logo humongous, but it was too big and took up way too much real estate. Using SVG for the logo without any fallback doesn’t sit quite well with me even though I could careless about IE8 and below.

With the new change, I replaced SVG logo with real typeface. For typography of the entire site, I replaced Roboto with Source Sans Pro. If you have Adobe products installed on your machine, I also changed body text to Minion Pro. I don’t have a subscription to TypeKit; therefore, the fallback for the body text is Source Sans Pro. My type choices are limited because I want the ability to display correct Vietnamese characters. Google Fonts only has a handful of typefaces that support Vietnamese subsets. I don’t even see Vietnamese listed under TypeKit’s language support.

One additional change on Visualgui is that the huge hero on the homepage is now gone. I have that feature for many years and grown tired of it. Text is the only thing on the homepage.

With the effort to make Visualgui into a consistent brand, I decided to play up the logo quite a bit. I settled on League Gothic typeface after using it on my business card and other print materials I have done for my class on professional design practices.

For this new update, I also want show how beautiful and responsive a designer can do with SVG, especially with typography. The logo is only 3K since I designed for mobile first. The actual size of the logo is 320px wide, but it can scale up all the way to however your screen can accommodate. If you visit this site on a mobile phone, you can see that the logo is not large at all.

With the humongous logo, I am losing the big image hero on the homepage. Even though I am going to miss it. I have always had trouble filling it in. If I don’t change it for two weeks, I feel it started to get old. I am also wanting to move away from doing that updates as well.

For the second assignment in professional design practices, I rewrote my entire resume, particularly the descriptions in the experience section. I also focused on the typographic details and settled on two typefaces: Lora and Lato.

For the work portion, I broke down into two separate pages. The work landing page now featured only eight selected projects. I don’t want to overwhelm visitors with everything I have done. The full list page has all the projects I have worked on. This page is more for me than for visitors, but it is available for the public if anyone is interested in the exhausted list.

I also moved some of my past work to Pinterest. Here are the boards: Graphic Design Portfolio, Visualgui past designs, Vassar homepage banner archive and Vassar homepage archive.