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.

I Love Ngoc Lan has a new look. The major change is the hero banner. I want to move away from the fullscreen image and experiment with a more playful design. I had a vision of making a collage out of Ngoc Lan’s photograph and ended up incorporating them with flowers to match her name. Illustration is not my style, but I am pleased with the new design.

For typography, I stay with Open Sans. I wanted to use a serif typeface for reading texts, but couldn’t find a decent one with Vietnamese characters. Open Sans, a crisp and modern typeface, is legible and has full support for Vietnamese letters. I tightened up the body texts for better readability and unbolded the headings for a softer appeal.

I didn’t change the codes much except for some optimization in the markups. The content is still powered by WordPress and the layout is still responsive. CSS is now preprocessed with SASS for the ease of maintainability.

I Love Ngoc Lan turns 11 this year. Crazy how quick time passed by. I hope fans will enjoy the new design.

My goal is to make some changes to Visualgui every year. Despite my crazy schedule, Visualgui for 2014 comes a bit earlier this year since I have a bit of time on my hand while staying in the hospital with my mom. Whenever she fell asleep, I worked on it to pass time.

The focus for this year is the work section. I want to combine everything into one page. My colleauges and professors say that I have way too much crap in my porfolio. Potential employers don’t have time to look at everything. They just want to see my best work. While I completely understand thier perspective, I have no intention of making this site for employers. The work section is not a portfolio. It’s an archive of all my works. Now with just one click, you can see everything in an hierachy. The top hero showcases the most recent projects. The featured section displays the sites I want to highlight. If you want to see more, the three-column are list of works that still exist on the Internet. It could be overwhelming, but I do want to have everything.

In previous designs, I restricted myself to the screenshot of the works. Every time I want to do a redesign, I have to keep the width the same so that I don’t have to recrop each and every screenshots every time. The new work section is do away with all that. Now if I want to do a redesign, I only have to deal with three images.

The new logo is also a huge departure. I am going for a very minimal initial of the V simply because I am getting tired of seeing the word Visualgui. Another reason is that I now have a better understand of branding after taking the two graduate courses this semester on brand and identity. They both were very valueble courses even though they took up so much of my time.

As for typography, I chose Roboto sans for body copy and Roboto Slab for headers. Since they both come from the same designer, big up to Christian Robertson, they complement each other well. In addition, both typefaces support Vietnamese characters.

The new layout isn’t drastically different. I still like the one-column blog for readability. I also do away with comment entirely. I no longer have to include the comment functionality as well as the CSS styling for them. I do thank and appreciate all 17, 047 comments left on this blog. Even though they are no longer available to the public, I still have them for my own muse.

If you still reading and visiting this blog, I hope you enjoy the renovation. I also gave the Strength page a new look. My mom and I need some strength right now.