The second project for Web Design & Usability required students to redesign a web site of their own choosing. The goals were to improve usability, user interface and visual design of an existing site. They must present at least six areas where improvements were needed. This project focused on the desktop screen only. Minimum deliverables included a homepage design, secondary page design, a user-interaction design and another of their own choosing. They may hand in screenshots showing how the pages work or a functional HTML demo. Graduate students were required to design a mobile version of their redesign with the minimum deliverables of a homepage design and another design of your own choosing.

To help students narrow down their selection, I assigned the following questionnaire:

1. What site will you redesign?
2. Who visits your site?
3. What do your visitors look for?
4. Are they able to find it? If not, why?
5. What does the current site do well?
6. What does the current site do poorly?
7. What are short-term or long-term goals that need to be considered in the redesign?
8. How does the user interface need changing?
9. What is the most important factor of the new site?
10. What areas would you improve in the redesign?
11. What features would you eliminate in the redesign?
12. What features would you highlight in the redesign?

Areas of Improvement

The following list gives students an understanding of what I was looking for in their redesign:

1. Navigational conventions
2. Effective visual hierarchies
3. Chunking (breaking pages up into clearly defined areas)
4. Clear indications (make it obvious what’s clickable)
5. Eliminate distractions
6. Format contents to support scanning

To help students thinking about usability, I assigned the following readings from Steve Krug’s Don’t Make Me Think, Revisited (3rd Edition):

• Chapter 3: “Billboard Design 101”
• Chapter 7: “The Big Bang Theory of Web Design”

With this redesign project, students had the complete freedom to rearrangement contents, add new features or omit unnecessary items. They just need to provide me the reasons for doing so. After conducting content inventory, they worked on the wireframes and moved into a design tool of their choice to create the mockups.

For class critiques, I experimented with a different approach. In addition of having a full group or smaller groups, students were required to write down their feedback. Each computer station was set up with a project. Each student then had a chance to sit down, check out his classmate’s work and wrote down comments on a piece of paper. Some students found this approach helpful, especially the ones that don’t like speaking in front of a class.

For online critiques, students engaged more with Disqus on the course site than the previous project. Students that didn’t like speaking out in class did much better in writing. Graduate students continued to provide much more feedback in group discussions.

For the final results, most students stepped up their game from the previous project. We had some very strong designs and concepts. One student took on the challenge of reworking the VOA News. At first I was a bit skeptical, but she did an excellent job of restructuring the hierarchy of the site and added a function to allow users to customize their news homepage. Another student came up with an imaginative redesign of an entertainment site that let users watch Asian movies and TV series online.

One particular student wanted to take on a challenging redesign so I suggested that she reworked the VOA web site and she did an excellent job. One student completely reimagined a web site that let users watch Asian movies and TV series. For more intriguing redesigns, check out my Pinterest board.

The second workshop for my class on Graphic Design History focused on using traditional relief printing techniques. Our assignment was simply creating an illustration with a word included.

For the materials, I used a Speedball Lino Cutter, a Speedy-Carve block, and a Speedy-Cut block. Because the printing process took place in class and we only had two times to complete the project, we didn’t have the time to test out our prints. The first attempt, I did Bird, which is a reinterpretation of Charlie Parker with Strings album cover. The final result didn’t have enough details; therefore, I tried something different.

For the second round, I chose Miles Davis’s iconic pose and placed type behind him. For the background I added lines to give the design more details. Because I couldn’t test out the print so I went on create another piece just incase the Miles piece didn’t workout.

For the third time, I used an existing illustration of a lady in ao dai (Vietnamese traditional dress). To make it different from the original, I did a reverse printout. The unintentional effect is the ink leaving white dots on the canvas, which look like stars.

I ended up submitting Miles Davis as my final piece because the details turned out well as I had expected. It was a fun workshop.

The first project in Experiential History of Graphic Design took us all the way back to ink and paper. Each student had to write a quote in Gothic and the challenge was to use illustration to illuminate the quote.

Although I am a graphic designer, I am horrible at drawing and writing with my hand. For this project I had to practice quite a bit. By the time I had to write the quote, I actually felt comfortable enough to do it.

The quote I selected was from Nas’s classic Illmatic: “I never sleep, cause sleep is the cousin of death.” For the illumination, I went from using Nas’s portrait to NYC (city that never sleeps) to a simple drop cap using the eye of horus to a tombstone with a cross made up of eyes of horus.

For the final design, I stripped the illumination down to just using the cross and eyes of horus. I also replace the first letter I with a more fancy drop cap. I made the I red as well as the eye’s iris red. I am happy with the outcome. I’ll definitely pick up calligraphy again just for fun in the future.

For the first project in Web Design & Usability, students were required to design a web site for smartphone devices only. The goal is to learn the process of creating a user experience within a constrained space. How would they handle visual layout, navigation, typography, images and user interaction on small-screen browsers?

For concept, I left it open so that students can come up with the type of projects they would like to execute. The minimum deliverables must include a homepage design, secondary design, a user-interaction design and another of their own choosing. Students may hand in screenshots showing how the pages work or a functional HTML demo.

For graduate students, they were required to design a tablet version in addition to their mobile site. Minimum deliverables must include a homepage design and another of their own choosing.

To help students thinking about their project, I assigned the following questionnaires:

1. What is the purpose of your web site?
2. Who is your user? (income, interests, gender, and age.)
3. What problems are you solving for your users?
4. Who are your competitors? (list 3)
5. What actions should users perform when visiting your site?
6. What features are important?

From my years of experience doing freelance design, contents had been the most challenging part to get from clients. I set out a deal with my clients that I won’t start the project until I get 75% of their content. I wanted to make that emphasis with students. Once they selected their project, I wanted them to focus on gather contents right away. Here’s a list of guideline I provided to them:

1. Site name: design a simple wordmark
2. Mockups: list out the four pages that they’ll design
3. Navigation: although they only create four pages, the navigation should be a complete representation of their site
4. Page contents: everything that goes on each page such as messages, texts, images, video, products, buttons and forms
5. Footer: ways to connect such as contact info and social media

To help students think about usability, I assigned the following readings from Steve Krug’s Don’t Make Me Think, Revisited (3rd Edition):

• Chapter 6: “Street Signs and Breadcrumbs”
• Chapter 10: “Mobile”

After content gathering, students worked on their wireframes. They have the freedom to create their wireframes in whatever tools they felt comfortable with. Even pen and paper were fine. I was more interested in the way they present the concept than their visual ability. Students then shared their wireframes with each other for feedback.

For their design mockups, students have the freedom to use whatever tools they like. Most used Photoshop, some used Illustrator and InDesign. My only restriction was that they have to fit their site in a 340-pixel width. Students then presented their mockups to the group for feedback. They also get individual feedback from me. Graduate students were more involved in the critiques than the undergrads. I am working on improving that in the next project. Furthermore, I incorporated Disqus to our course site for online discussion and posting class status. Although I am not getting much participation from the students, it’s a great tool for me to communicate with them.

For the final execution, most students did well. Some were struggling a bit, but they pulled through. I am pleased with what they have done. I put together a Pinterest board to showcase some of their works.

Last night, a student told me that she needs to work on her typography. She transferred to Mason from another school and wasn’t taught on the basics. She asked me what books should she read for learning typography. I immediately recommended Ellen Lupton’s Thinking With Type or Denise Bosler’s Mastering Type: The Essential Guide to Typography for Print and Web Design. In fact, read both because they are excellent.

I made it through the first week of teaching. On the first day, I introduced the syllabus and gave students an assessment on HTML & CSS. Out of 19 students, only one had 8/10 right. The majority of the class handed in blank. Although this is an upper level class, I understand why many of them don’t know the basics of HTML & CSS. The curriculum doesn’t put the emphasis on the technical aspect of it. I want to change that. To be in the web field, students have to know how to code or at least they have to understand the language to speak with the developers.

In order to get the students to learn HTML & CSS quickly, I am making the coding assignment as simple as possible. I want the students to learn the new HTML5 elements right away and not have to worry about supporting older browsers. (That should be the job of the front-end developer.) They just need to know the essential elements of web design. I am using my 13 years of experience in web design to provide them what they need to learn in one semester.

On day two, I showed the class HTML5 Boilerplate. I stripped the default template down to its core and walked them through line by line starting from the doctype. They seem to get it right away. For our first project, I asked them to design a web site specifically for smartphone devices only. When I send out my syllabus to have a few professors look at it, they warned me that I should narrow down the scope and give the students some limitations. I went ahead and kept it open. The result was that students came up problems that they want to solve. For instance, one mother came up with a concept of creating a site about food allergies because her two-year-old daughter has severe allergy reaction. I was thrilled that all 18 students came up with each unique concept. We’ll see how they’ll execute them.

As for my own class, I am taking Experiential History of Graphic Design, which is a “hybrid lecture/studio course provides a historical perspective of the evolution of graphic design and examines graphic design’s contribution to culture through writing and design projects.” We’re starting with calligraphy, something I have never done before. I am a bit worried about the midterm and the final exam. I have never done well on tests.

Meggs’ History of Graphic Design, the book I spent reading over the summer, turns out to be not the required textbook for this class. Graphic Design: A New History by Stephen J. Eskilson is the required book instead. Unlike Meggs’ which goes all the way back to how writing started, this book begins right on Johannes Gutenberg. It’s a good read so far.

I added an academics section to document my class projects for Master of Arts in Graphic Design and teaching. The new section allows me to separate my class projects from my professional projects. I’ll add more works as I am getting closer to finishing up my MA.

Starting next Monday, I will teach a course on web design and usability at the George Mason University’s School of Art. A fellow grad student approached me about the opportunity before I took off for our family reunion. I accepted the challenge last Tuesday when we were flying back to Virginia from Las Vegas. Since then, I only slept from 4:30 in the morning until 8 to prepare for the course. I only have a week and a half to develop a lesson plan, write the syllabus, design projects and create a course site. I am happy but exhausted to report that I almost have everything ready.

For this course, my ambition is to teach students not only the principles of web design and usability, but to learn to code basic but responsive web pages. I want students to have the foundation to make their own web site. I hope I can do it. I am very excited about this new adventure. I have a passion for teaching and have been wanting to give it a shot. Even though the opportunity came in at the very last minute, I couldn’t pass it up. I will be teaching 18 students including three of my grad classmates.

Because I wanted to continue my education and not slowing it down, I proposed using my teaching for a four-credit studio course. Even though I will be doing a whole lot more work as a teacher than a student, I think the experience is worth it. My wife also encouraged me to so. I am so glad to have her support because I can’t do it without her helping out with the kids.

I am also taking a required course on Graphic Design History. The good thing is that I already read the entire book over the summer. Obviously I wouldn’t remember everything, but I will read it again to refresh my memory. Looking forward to the starting school and class.

Last night’s portfolio presentation wrapped up the spring 2014 semester. Instead of doing an independent study for one credit, I opted in for a forth seminar. The focus on analog type turned out to fun even though I am horrible with doing crafts with my hands. The projects were somewhat challenging, but they gave me an opportunity to play. I had a blast handcrafting types.

The 4-credit Professional Design Practices turned out to be very useful. The class helped me improve my presentation skills. I am now more confidence in talking and showing my work to a small crowd. We also had lectures came to teach us speaking skills, inform us about the industry and share their experience in the work force. The professor was encouraging and sharing.

The workload was not so bad. Even though I enjoyed the classes, I am ready for the summer. We already have a few vacation spots planned. I can’t wait to spend time with my lovely girl and boys and catching up on readings.

This is a portfolio presentation for my final project in a class on professional design practices. I was not interviewed a for job at Big Spaceship.

Thank you for the opportunity to present my work. I have been a huge fan of Big Spaceship many years ago when Michael, the founder, came to Vassar to speak about his projects at the agency. I knew I wanted to work here one day.

To begin, I would like to share a fun app based on a project called Sketches of Miles. The intention of the app is to let users create their own artwork based on Miles Davis’s records. The app featured a straightforward, intuitive interface to let users play and share their sketches of Miles.

Vietjazz is a recording company I created for a branding class. The concept was to connect Vietnamese ballad with jazz. I designed the logo, stationery, and applications. I also developed a responsive web site for the brand guidelines.

For the movie poster, the goal was to redesign an existing piece using type and then redesign it again in the opposite genre. I selected Donnie Darko, which is a horror film. For the horror version, I chose Trajan Pro for its sharp serifs. For the comedy version, I chose the cherish Cooper Black.

The film ratings system is a redesign project to improve the visual information of the five major ratings. The new system uses visual progression to give viewers clear indication of each rating. I chose Adrian Frutiger’s Univers for its simplicity and legibility.

For motion design, I am interested in the storytelling aspect of it. Go the Fuck to Sleep is a story that I could relate to as a father of two toddlers. After hearing Samuel L. Jackson reading the story, I had to create a typographic motion piece based on his narration.

“Please Give Me” is a personal piece for me. Back when my wife and I were still dating, she sent me an article that talked about how the victims of Agent Orange, especially children, were forgotten. After reading the article, I wanted to create something to raise awareness of the forgotten victims. I reached out to photographer Justin Maxon, whose photos were featured in the article, to see if he would let me use his work to create a slideshow. He sent me a handful of hi-res images for me to use. For the music, I chose a particular singer not only because her emotional vocals, but because of her background. She grew up poor and has a facial disfigured because her family couldn’t effort the proper treatment. When she sang this song, I could feel that was living it. Let me give you a short translation of the lyrics:

Please give me mother’s embracing arms
Please let me hear the joyful sound of children’s footsteps
Please let my country has a peaceful sleep
I’ll love you from that moment on.
Please let me come back in one body
To let me hear nature’s songs
Please let me forget imprisonment
To let me be the bitter wine
Please give me the whole life
So one day when a child sings in his cradle
Please, just give me one day.