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.

Inspired by Butterick’s Practical Typography, I gave my resume a typographic redesign. I went with the Libre Baskerville, which is an elegant serif.

Why updating my resume? I just want to play around with type. I am not looking for a new job. Just passed my two years at Mason Law and I am still loving it. Graduate school is going quite well for me even though it is highly stressful. The work is so demanding that I have to turn down several freelance projects. So no, I am not available for freelancing at the moment unless the project is so hard to turn down.

Kristin Bair O’Keeffe, the author of Thirsty has a new novel titled The Art of Floating. The book is coming out in April 2014 and she asked me to design a landing page for the book. It’s a fairly small project, which is perfect for the time that I have, but I enjoy crafting it. I really love the title she came up with and can’t wait to read it.

I am proud to present a brand new site for F.H. Buckley, one of George Mason Law School of Law high-profile faculty members and a prolific writer. For this particular web site, Professor Buckley would like to highlight his books and articles. He just released The American Illness: Essays on the Rule of Law a couple weeks ago and he already has another one, The Once and Future King coming out next year.

One of the things I love working with writers is that they always have their contents ready before meeting with me to talk about the project. With the real content to work with and an idea of what the client want, the process went sleeker than smooth jazz. I had the same working experience with both Kristin Bair O’Keeffe and Jennifer Karin. They are both fantastic writers.

The design for F.H. Buckley is simple and with the focus on readability. The layout is responsive and the content is powered by WordPress. It’s always a joy for me to launch a small project like this.

After thirteen years of manual updates, I am more than glad to turn the task over to the staff in the McCaskey Alumni Association. McCaskeyAlumni.org is now powered by WordPress.

In addition to migrating the site into an easy-to-use CMS, I made some refinements to the visual design. Although this is not the first web site I have created, it was one of the early projects that started my freelance gig. It also marked a turning point for me in term of heading into the minimalist direction. McCaskeyAlumni.org was my very first experiment with simple design and it has stood the test of time.

Even with the new relaunch, the concept is still the same as when it first launched. The new layout is wider and responsive; the typography is more modern; but the general look and feel is still crisp and open with plenty of whitespace. The client is still very happy with the original design after all these years. They’re even more excited now that could make changes themselves.

Visualgui gets a few minor updates. The FancyBox, which was used primary to pop up slideshows, is now gone. Showshows are now just opened in fullscreen window. Without FancyBox, jQuery library is no longer needed. With the exception of Google Analytics, the site is now JavaScript free.

Links in portfolio sections are no longer opening in new windows. In the previous design, I used blank target because of infinite scroll. One of infinite scroll drawbacks was breaking the back button. Even though I am no longer using infinite scroll, I totally forgot to get rid of blank target. Coincidentally, my wife just complained to me that she hates it when web sites open up new windows. Although she was not referring to my site, my motto has always been that if your wife hates something you better change it.

On the visual side, the header and footer are switched from black to white. Somehow the back strip at top and bottom makes the layout look trapped. After changing it to white and I asked my wife for feedback and she said that the white makes the layout less divisive. I totally agreed. The new sticky navigation at the bottom has a very subtle transparency, which is inspired by Apple’s flat direction in the new iOS 7. Even though the flat design in iOS 7 has received tremendous negative criticisms from the design community, I predict it is going to be fantastic. Can’t go wrong with minimalism. Let’s wait and find out.

Launched a little prototype web app for Mason Law Library. This web app was developed for a graduate course (Advanced Web Design) using jQuery Mobile. The purpose of the app is to offer a set of core functions, such as searching for books, chatting with a librarian, connecting to law-related catalogs, that catered to the Law Library patrons. Please note that this is a prototype; therefore, not all features are functional. Read more about the concept of the app.

Here’s the new Visualgui for 2013. The design is not a huge departure, but quite a bit of refinement. The layout, in particular, is much more simplified. My goal is to create a consistent experience across all devices rather than relying on media queries to shift elements around. One of the recent criticisms of responsive web design is that layout changes drastically when viewing on different devices, which caused not-so-savvy users confuse. My approach is letting the mobile experience drives the design and making as less changes as possible when browsing in larger screens.

For the first time, I am including GUI elements in my navigation. This has been one of my pain points. While the name suggests GUI, I have never included any GUI elements. I have been doing quite the opposite of visual and graphical. Simplicity has always been my thing.

One of the big changes in this version is the restructuring. The naming and labeling needed to be changed to reflect my current direction. The site section is now renamed to web. This is the most important section of the site because designing web site is my area of service. The motion section is now renamed to special. I gave this one quite a bit of thought. Since I am no longer doing Flash slideshow, this section gets quite stale, but I don’t want to get rid of it entirely. Most of the Flash pieces I had done are personal and they are very special to me. I want to be able to make this section active and as the same time keeping an archive. As a result, I named it special so that I can continue to add more special projects in the future, but they don’t have to be motion slideshow. For instance, I’ll add my Jazzapp, which is a school project, once it is ready. The info section is now renamed to about. I have debated about this for a while and came to conclusion that about is more personal than info.

I also made a handful of subtle changes. I am now using the Monotype’s Noto families, which support full Vietnamese characters, for the texts. The pairing of Noto’s sans and serif created a nice harmony. I am glad to see Google is adding Vietnamese typefaces to its collection. It’s still limited, but better than nothing.

I chucked out all the rounded corners as well as infinite scroll. Although I don’t have an issue with infinite scroll, it’s not one of the most loved features of usability. In addition, getting ride of infinite scroll takes off quite a bit of JavaScript codes. Even though JavaScript is getting quite popular, I still want my site to depend less on js as possible. That’s about it.

In the past month, I have the pleasure of working with the well-known Vietnamese painter Dinh Cuong and his sons to create an online presence for him. One of his sons, Chinh Dinh, reached out to me to create the site as a special gift for his dad. How can I turn down a project like that? He found me through this web site and it turned out that they also live in my area.

Since Mr. Dinh Cuong and his sons are artists, working on the site was an intriguing experience. For the first time, my client wants a much simpler layout than what I had expected, which works for me since I also appreciate clean, minimal design. It also makes perfect sense to let the attention focuses on the artwork instead of the site.

One of the challenges for the project is that they want to show the complete painting without having to scroll. The web is a fluid medium. We have no control of the users’ screen size. My initial Lightbox solution didn’t do it because it was too fancy (the opacity, drop shadows and limited room for the painting info). They also prefer to see the painting on the page rather than a pop-up.

Fortunately WordPress has a nice gallery feature out of the box. The image template gives me many options to style up the design. Because the paintings come in various sizes, the vertical ones are too long for the browser window. For my personal preference, I don’t mind scrolling to see more details of the work; however, the client prefers the works to be visible on the page, at least for most desktop users. To solve the problem, I put a constraint on the image height, which means a certain image can’t be taller than a preset size (600px for example) and the width needs to adjust to the height.

The site is responsive and the backend is powered by WordPress for the ease of updates. Without further ado, here is dinhcuong.com.