Mason Law Realigned and Simplified

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.

Make the Logo Smaller

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.

Make the Logo Humongous

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.

Resume and Work Updates

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 2014

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.

Visualgui 2014 Focuses on Work

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.

Resume Redesign

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.

Landing Page for The Art of Floating

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.

Web Site for F.H. Buckley

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.

McCaskey Alumni Relaunched

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.

Contact