This site gets a bit realigned. The Swiss design was a nice experiment. Unfortunately it was not working as smoothly as I had expected. Although I love Proxima Nova, its Vietnamese diacritical marks are simply not legible, particularly on the uppercase letters. Another major problem that needed to be addressed was the vertical wordmark. On really tall monitors, like the portrait screen my wife is using for her work, the wordmark gets really big, which ends up obscuring the content. In addition, readability is not optimal in the sans serif typeface; therefore, I wanted to go back to a more traditional reading experience.

I still keep Proxima Nova for the wordmark and the UI elements, but replaced the body copy with Adobe Text Pro, which is one of my favorite text faces that has Vietnamese support. In the work section, I want to go back to display full-screen SVG images. I added a new book section to promote my web-based books as well as printed books I have collected.

The goal for this realignment is to provide a clean, crisp design with the focus on readability. I hope this minimal version will live on for a while until I find new inspiration. I don’t think I can strip this design down any further.

Visualgui gets another makeover in less than two months. Somehow I was having the urge to go for a Swiss design. What I still love about this style is the ability to reduce everything to the core. This redesign is a quick one because I took out things from the previous design rather than added anything new. I reduced the number of typefaces and columns to one.

Proxima Nova, by Mark Simonson, is the only typeface used in this version. I wanted to play with the wordmark a bit. On the desktop version, the wordmark changes to vertical display. I also wanted to use a sans serif typeface for body text, something I haven’t done for a while.

Another big change in this new design is white space—lots of white space. I am still obsessed with white space and simplicity. Even though I could have used the previous design until 2016, I just wanted to make the change before the start of the new semester, which is next week. I will be focusing on my final project, teaching, and doing a handful of projects at work and home. I just hope that I won’t stress myself out. Doing a redesign like this actually helps releasing some of the anxiety. I am going to bed and will spend all day tomorrow with the kids.

The new dean has a new vision for the George Mason University School of Law: Learn. Challenge. Lead. In his letter to the staff, he wrote, “We want prospective students to know that they will receive an outstanding legal education (Learn), be taught to critically evaluate prevailing orthodoxy and pursue new ideas (Challenge), and, ultimately, be well prepared to distinguish themselves (Lead) in their chosen fields.”

To support the new mission, the website needed to be repositioned. The first step was to make the design bolder; therefore, the layout needed to expand to display larger graphics. The previous layout was designed on the 960 Grid System. Fortunately all the dimensions were measured in em units; therefore, the layout scaled accordingly when the width increased from 960 to 1140 pixels.

To showcase Mason Law’s exceptional location, faculty, community, and career services, a homepage slider is needed. After thorough research, I chose David DeSandro’s excellent Flickity, which loads fast, provides flexibilities, and works with responsive images (Picturefill). I highly recommend Flickity for responsive slideshow.

In addition to the slider, the new Mason Law homepage features larger type, richer colors, and bolder visual elements. The footer of the site incorporate the striking tagline: Learn. Challenge. Lead.

For typography, Myriad Pro is the only typeface chosen, but its extensive family gave the design tremendous flexibilities. The story pages (location, faculty, community, and career services), for example, use heavy weight to incorporate typography into photography. I enjoyed making editorial designs for these pages.

For the work behind the scene, I cleaned up the templates to simplify the design and make the layout more consistent. CSS is not as organized as I would have wanted, but I am glad that I wrote it from scratch; therefore, I knew exactly where to find things. Sass is a huge timesaver. Making changes to a large site like this could have been a nightmare if I were to rely on a CSS framework.

Giving the short timeline (less than a month) and the number of people involved, I am satisfied with the new changes for the website. The iterations were small, but they made a big impact. Everyone on the committee, including the new dean, is pleased with the repositioning.

This site is going through another restyling within two months. While I love experimenting with setting white text on black background for a change, my taste is the reverse. For this redesign, I keep the layout almost intact, but the typography is completely new.

Because I am moving away from images, the typefaces need to communicate both as visual aesthetic as well as functionality. In addition, the type must display correct Vietnamese writing; therefore, I am investing heavily in fonts in term of performance. The main typeface is Arno Pro, designed by Robert Slimbach. Because I need to use Vietnamese characters, which increased the font size tremendously, I might as well take advantage of discretionary ligatures in Arno Pro. The headings are set in big, beautiful Proxima Nova Extra Condensed, designed by Mark Simonson. As for the branding, I am loving the gorgeous Acta Poster Swashes, designed by Dino dos Santos.

For font delivery, I am now using the Web Font Loader method. In the previous version, I used Typekit’s default delivery because I could not stand the flash of unstyled text (FOUT). I changed my mind early this month when I was vacationing in a rental house with limited internet connection. My website was blank for over 30 seconds or so in a slow connection. I am now OK with the FOUT as long as the content is not blocked.

For the work section, I am bringing back SVG to create big visual impact with small file size. I am now combining all my school and personal projects as well as my book collection into the more section. Those contents are probably more for me than my visitors, but just in case you are interested. My other reason for gathering them in one place is to simplify so that when I want to redesign this site, which I hope to do more often, I could easily do so. I only have to deal with three pages instead of five or six. I even abandon my Google custom search for DuckDuckGo. That way I don’t have to deal with the search page anymore. That’s it. I hope you like the new changes.

The new version of Visual Gui goes black. For this redesign I am experimenting with dark background and legibility. I wanted to see how well a serif typeface reads on a dark background. Readability has always been my concern; therefore, I hardly take this approach. Then again, I don’t see any reason not to give it a shot since this is a personal site after all. If it doesn’t work out, I can always redesign it again.

Making the switch from white to dark background is the boldest move in this new version, but another change that I have wanted to push is getting rid of the standard navigation. Although this is not something new, I wanted to have one sentence that describes me: “Donny Truong is a Visual Gui who loves to learn, read, write, and omit needless design.” The second sentence, “He recently published a book on web type,” will change to promote my latest project or highly something special. If users want the standard navigation, they can always find it at the footer of the site.

For the work section, omit needless design, I took out all of the screenshots and provided a short blurb for each project. The learn section has been simplified to highlight only a handful of projects I have created in my graduate program. I also included a teaching section on the same page. The library section, which showcases the books I proudly own, is also reduced to one column.

As for the typefaces, I am combining Minion Pro Condensed, designed by Robert Slimbach, with Myriad Pro, designed by Robert Slimbach and Carol Twombly with Fred Brady and Christopher Slye. Because of the dark background, I wanted to have the most neutral typefaces so that they don’t distract the readers. I also needed the typefaces that support Vietnamese language. These two workhorse types do the job.

I hope you enjoy the dark version of the site.

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.