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.

Jen Karin, one of my favorite clients, once again gave me a creative opportunity to do a fun project. Jen will be speaking at a conference and she wanted something to hand out to the audience. She likes the idea of giving a 4×4 card with her contact info on the front and her powerful strength message on the back. In a few hours, I came up with these designs in Illustrator. I really love a small project like this. It allows me to come up with something creative fast. For me, no project is too small. If you have something creative you need help with, do not hesitate to contact me.

Just rolled out a few updates on Mason Law. Brought back the image slider one the homepage, added more links, tightened up the typography and jazzed up the footer a bit.

While the visual only gets some minor changes, the entire CSS structure is completely rewritten using Sass. I went through line by line of CSS and convert everything into SCSS. Managing CSS with Sass is much easier and much more pleasurable. The more I use Sass the more I appreciate its maintainability. I also reduced to fewer media queries and put more focus on the mobile version.

Just rolled out PR Whiteboard blog for Matter Communications. I was brought in mainly for WordPress development. I was not responsible for any design aspect of the site. Nevertheless, the design is very nice.

After more than a decade, one of my longest clients, the Lancaster Education Foundation, is moving into WordPress. That means the staff members can now update the site themselves.

I actually made the proposal to use WordPress to manage their contents a few years ago, but they hesitated to do so. Recently they hired a new, young director and she’s quite web savvy. Not only we migrated the content over, we also integrated the blog so she could use the platform to communicate.

The template is based on Twenty Twelve, which looks almost the same as my original design a few years ago, with many details polished and modified. Sass is such a useful tool for changing and compressing CSS without touching the default style.

My biggest accomplishment for this project is to finally handing the key over to the owner for updates.

Right before Christmas break, I received a referral from Jennifer Karin, who is one of my favorite clients, to work on a project for her husband. Dr. Chris Sidford who owns Black Bag, a private emergency medical consultancy, needed a completely revamp of his web site. He would like the new site to be attractive, responsive, optimized for search engines and manageable through WordPress. (I have a feeling that Jen came up with the requirements herself.)

I was planning on taking my Christmas break and not doing any work because I was burnt out from grad school, but I couldn’t resist the opportunity. Dr. Sidford turns out to be a fantastic guy to work with just like his wife. I have the complete freedom to redesign the web site based on existing contents. The logo is the only visual element that I need to keep. Since the logo was set in Baskerville, I started with that typeface to set the tone for the body text. I found a nice, legible version of Libre Baskerville on Google web fonts to be used for the main copy and complemented with Open Sans Condensed for the headlines. They turned out to be a perfect match. For color, I used the red ribbon for links and standout elements.

As for the homepage, I put myself in the user’s perspective when I designed the layout. Since Black Bag is about emergency services, the first impression I would want to convey is trust. Can I trust this service? Nothing could get that message across better than the face of the people behind the agency. The nice, friendly photo of Dr. Sidford assures me that I can trust this guy when I am in an emergency situation; therefore, I used it as the main attraction.

Per the client’s request, WordPress is implemented for managing contents and the design is responsive to be displayed on various digital devices. For the first time I didn’t have to convinced my client that responsive is the approach to take. That’s one of the reasons I enjoy working with return and referral clients.

So go check out Black Bag. You might be interested in this unique, personal, immediate physician access, especially if you travel to foreign countries.

I can’t believe I am actually doing print work. Updated the graphic section with three new pieces from my Advanced Typography class. The latest piece is the restaurant menu design (pdf). The other pieces are from the previous projects: movie posters (pdf) and film rating system (pdf). More to come at the end of the year.

In the past few weeks, I recollected most of the designs I have done in the past for Visualgui and made screenshots out of them for posterity. Obviously I don’t have everything, but close enough to give an idea of how the design has evolve over the years. It does seem to get simpler and simpler. Check out the history.

It’s my pleasure to present the new redesign of Poplar Springs, a family-owned restaurant, spa and hotel nestled in northern Virginia’s wine country. Working on the project over the last six months had been challenging but also rewarding.

When I first met the owner and chef Howard Foer and his team, I knew immediately they would need a content strategist. Mary Dempsey, a fantastic writer and journalist who I had the pleasure to work with at The George Washington University School of Business, came to mind. We brought her on board and she did an outstanding job of getting the contents from the client and writing them in a short, concise approach. Our collaboration worked out so well that I would love to bring her on for future projects.

With the content out of my way, I was able to focus on the design and development part of the site. My first task was to redesign the logo. The previous logo was slapped together using Edwardian Script. The logo looked outdated and not legible. With the new design, I kept the poplar leaf and used clean, thin Futura for a modern look and feel. With the new brand, I created a simple layout to show off the beautiful property, the mouth-watering dishes and the relaxing activities in the countryside.

The front-end design was built using HTML5 and CSS3 with a responsive layout. The most impressive part of the site is using MODx Revolution as a content management system. Before selecting a CMS for the site, I faced with two choices: WordPress and MODX. Poplar Springs is not a complex site; therefore, both platform could do the job well. WordPress could have been an easier choice for me, but I determined to use the project to learn MODX. Nothing beats learning by actually doing it. It was quite an incredible journey. Even though I ran into the wall in a few stages, I have learned so much about MODX. After this project, MODX will be my choice of CMS moving forward. With just a bit of knowledge, I could build the entire site with the exact codes I marked up. Nothing makes a designer happier than viewing the source code to see the exact output he had intended. Try that with Drupal.

I am extremely satisfied with the outcome of the site. Thanks to Howard and his team for putting their trust in me and thanks to Mary for a fruitful teamwork.