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.
The Jazz Board Game, a project for my graduate seminar class, combines my passion for design, jazz and my childhood favorite board game: Cờ Cá Ngựa. I always thought that Cờ Cá Ngựa is an original Vietnamese board game until I started to do the research for this project. Cờ Cá Ngựa is based on Pachisi, which originated in ancient India. I was a bit disappointed to learn that my only childhood board game is not original.
Nevertheless, I had a blast making The Jazz Board Game. Writing up all the trivia questions was quite a relearning experience. I designed the colorful board and even painted my own moving pieces. The best part of the project was selecting and cutting the ten-second samples of the jazz tunes for the listening comprehension component of the game.
When I first pitched my concept to the class, I did not intended to include the audio component. My classmates suggested that I should and they recommended getting greeting cards with sound. I did some research and couldn’t find anything, but then I came up with a different solution, which is using the iPhone for the audio component.
So I ended up creating an app for it using jQuery Mobile. My initial idea for the app was just a simple one-screen design with sample of the tune and info randomly loaded. That was actually all that needed to be part of the game. When I did a test run in class, however, I realized that the players have to have quite a bit of jazz knowledge to play. So I expanded the app to include trivia questions. I also added Jazz a film by Ken Burns and a resource section to help people who would like to learn more about jazz.
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.
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.
In the second half of the graduate seminar class, we ditched the textbook and picked up a real design project. Between myself and three other graduate students, we decided on making a marketing campaign to promote the MA & MFA degree at George Mason School of Art. Right now the school has one MFA and four MA students.
After many brainstorm sessions, we came up with a tagline: “Real World Design.” Here is the message we want to send out to potential students:
Here at Mason, our design programs are taught by and for real world professionals. People who eat, drink and live this stuff. From websites to environmental graphics to ad campaigns seen by millions, a Mason MA or MFA in Design means your portfolio will be filled with real world work. Because it’s not just a design degree. It’s your profession.
Once we had that down, we agreed that featuring recent graduate students would be the best strategy. So we picked out two students and created our campaign around them. After we came up with the branding (look and feel, typography and images), we split up the work. One student created the posters. One created the brochure. One created an email postcard. I was responsible for the landing page.
We presented the project to the dean of the School of Art and she immediately wanted to use the materials to promote the graduate program. I am so glad that we got to do a real world design project in our class. So if you’re a graphic design and looking to get a master, join us!