For my graduate course on Brand Identity Design (AVT 614), I came up with Vietjazz Records for my project. The reason is obvious. I am passionate about Vietnamese music and jazz and my goal is to connect and advance the two distinctive musical forces. The concept of Vietjazz had been on the back of my mind for a while and I have thought of creating a side project to highlight Vietnamese music sets in jazz arrangements. over the years, I have been collecting these type of tunes and I have over 100 tracks to listen to whenever I am on the road for a long trip.

What piqued my interest in Vietjazz was the first time I heard Tùng Dương’s debut Chạy Chốn. Both the bossa-nova flavor on title track and the country-blues feel on “Trăng Khát” hypnotized me. The way Tùng Dương bent the notes, changed the phrasing and played with the syncopation to get the Vietnamese lyrics to mesh with the jazz sound were quite inventive. On top of that, Trần Mạnh Hùng and Lê Minh Sơn played some of the best jazz and blues solos coming out of the Vietnamese music scene.

As a jazz fan with Vietnamese music in my blood, I love the marriage between the two distinctive musical landscapes and want to explore more in this direction. In my informal research, what I have learned is that most Vietnamese listeners aren’t familiar with the jazz sound. My goal for Vietjazz Records is to produce and promote Vietnamese music with jazz flavors. From signing artists to album concepts to art direction to distribution, Vietjazz will be involved in every aspect of crafting an experience.

Since the target is to reach Vietnamese listeners around the world, the web would be the best medium for the company. The web would give us the limitless possibility to create a true experience. Once the album is set to release, the customers would be able to get it immediate through our web site.

That was my pitch for Vietjazz and my professor approved the concept. During the course, I spent weeks developing the logo. I literally did a hundred variations before we came up with the final version. I am happy with the result. The logo consists of eight vertical bars, which could be interpreted as the piano keys. The slight tilting and offset of each bar conveys spontaneity. All the bars are in blue expect for the green accent on the letter “j” to signify syncopation.

After the logo, the next assignment was to develop the stationery, which included business card, letterhead and envelope. Designing and developing the three applications for the brand were the most fun part of the project. I chose the web site, the mobile app and the vinyl album cover for Vietjazz. Designing the vinyl cover were the most challenging one. I had to paid Goodwill a visit to see a a vinyl record were designed.

Even though I had a blast designing the applications, my favorite assignment for the course was the development of the brand guidelines, which was our final project. I had never done a branding guide before; therefore, I loved the new challenge and I could also pull everything together for a portfolio piece. While all of my classmates chose to do a book, I convinced my professor to let me do a web site. The reason was that my company is primarily online; therefore, it makes much more sense to go with a web version. In addition, the brand guidelines are constantly changing; therefore, the web could be much quicker to update and could save some trees. A third reason would be that people could download and use our logo and templates immediately.

I spent quite a bit of time researching big companies like Apple, Adobe and Facebook to see how they have created their brand guide. I also picked up some great tips from MailChimp and Squarespace. The Vietjazz Brand Guidelines turned out quite well. It’s responsive and intuitive. Even though I had spent quite sleepless nights working on it, I am very proud of the outcome.

The branding class is one of the best courses I have taken at George Mason. The professor is awesome. He has real world experience and his critiques were very constructive most of the time. From our interaction in class, he values simplicity and he is a typographic geek. One of the things that I learned from him in this class is that every design decision has to have a reason. You can’t just pick a color or a typeface simply because it looks right or feels right to you. Especially for a brand, you have to have a reason for it like Tiffany has its distinctive blue, Coca Cola has its red and Starbucks has its green. Overall, this semester has been quite rewarding for me even though I had my moments of stress and anxiety.

Without further ado, I am proud to present the Vietjazz brand guidelines.

Unitea is a fictitious tea company I developed for the final project of my graduate design seminar. The goal was to build a brand with a unique story. The concept behind Unitea is the playoff on the word “unity.” When we gather around drinking tea, we unite. Tea brings people together. In Vietnamese tradition, a marriage between two individual is started with tea. I can still recall the day I served tea to my in-laws to ask them permission to married their daughter.

The story of Unitea is that we’re passionate about pure, organic tea and the inspiration for the company came from our grandfather whose expertise taught us the art of growing and drinking tea. He used tea to serve, connect and unite his community and we want to take that approach in a much larger scale.

For the project, I designed a clean, classy logo using Baskerville typeface with the three leaves on the dot of the letter “i” to signify unity. To build a unique story about our brand, I developed a campaign web site to inform our customers the things that we care most about. The intention of the web site is to highlight the five core principles of our brand: clarity, connectivity, community, charity and creativity. I called them “The Five C’s of Unitea.”

One of the most challenging parts of the project has to be coming up with the writing for each individual component. I had to do quite a bit of research. Even though I am not a great writer, I enjoyed the writing process as much as the design process. Unitea is one of those class projects that turn into a portfolio showcase.

For the second project of our graduate design seminar, we are required to conceptualize a visual narrative based on a literary piece. Once I read the assignment, Jay Z’s “Somewhere In America” came to mind. What attracted me to the song are the witty references underneath the lyrics. For example, in the last lines he rhymes, “Feds still lurking / They see I’m still putting work in / Cause somewhere in America / Miley Cyrus is still twerkin’”. He used humor to comment on racism in America. In an interview with Elliot Wilson, Jay explains:

Yes, and that’s the thing, like reviews… think about trying to get that line. You hear that Miley Cyrus, you’re going to come to the wrong conclusion that you really understand the story. People are like, “why’s he saying ‘Miley Cyrus’ in the song?” Don’t you understand? It’s hard to understand the intention behind it. Again, it uses wit and it’s catchy, but the real story is about racism. The whole song is, somewhere in America, you can’t teach racism when your child is connected to the culture. It’s very hard to…

My original plan for the project was to create a poster with a map of America and then fill in all the visual images Jay Z mentioned in the song. The intention was to show the connection between the visual elements without words. Somewhere in America Miley Cyrus is still twerkin’. Somewhere in America Bun B is still rhyming about trill. Somewhere in America Frank Sinatra’s “My Way” is still playing in the Sonos. Somewhere in America, Jay Z is driving his yellow Lamborghini 135 miles per hour on the highway.

As I sketched out my design, I had a hard time deciding where the visual elements should be placed on the map since they don’t have to be in a specific location. The second important issue is that people who aren’t a fan of Jay Z and aren’t into hip-hop culture wouldn’t get the meaning behind the piece. As a result, I switched from a print piece to an interactive piece. The interactive piece solves the first issue because I don’t have to determine where to place the images. Users will get a random arrangement each time they visit the page. They can drag the pieces around and then click on a photo that they find interesting. Once the thumbnail is clicked, they get to see the entire image with the lyrics as well as the references Jay Z made.

I am really happy with the result and quite enjoyed working on this piece. This is one of the things that I love about school. I get to do fun and creative projects. Go ahead and play with “Somewhere in America.” I hope you enjoy it as well.

I would like to begin with Visualgui. Since this site showcases my work and personal exploration, I try to redesign it each year to improve the look and feel, tighten up the markups and incorporate the latest techniques I have learned. For the latest iteration, however, simplification was my goal. I wanted the site to have HTML5 markups, but not having to depend on JavaScript. I wanted to offer a user-center experience without depending on jQuery. I wanted to focus on readability and legibility across mobile devices.

The homepage is all about providing a reading experience. The body copy is set in Noto Serif. I chose Noto Serif for its legibility as well as its support for Vietnamese diacritics. I paid particular attention on the leading and line length, even on smaller screens, for readability. I am obsessed with typography. Even with the logo, I wanted to have real font, not just an image. The logo is set in Krona One, which is a beautiful, Swiss-inspired typeface.

Technically speaking, Visualgui is powered by WordPress with a heavy customized theme I have developed. It’s fairly stripped down to fit my needs. I only use the hooks that I absolutely need and nothing else. I am also using Sass to manage my CSS. I was a bit hesitated at the beginning, but now I don’t want to write CSS without Sass.

The second project I wanted talk about is the George Mason Law School. I have been with the Law School for two years now and I have learned so much from a developer standpoint. When I came to the Law School, my server admin skill was quite limited. Then I learned how to use Linux. I learned about Apache and I now love the command lines. I am basically responsible for everything from server administration to web site design/development to content management system.

The school main site is running on MODX. I didn’t know anything about MODX, but I began to love it as I started to work with it. It offers so much more flexibility than WordPress and Drupal. Within the first three months into my job, I was able to redesign the entire Law School site to bring the markup to HTML5 and made the entire site responsive. I was so amaze at the ability to pull off such a large site; therefore, I really like MODX.

I took what I have learned about MODX at the Law School and worked on a freelance project. Poplar Springs is a family-owned property spread over more than 200 acres of rolling countryside in northern Virginia’s wine country. When they approached me, I knew immediately that I needed to get them on board with me and get rid of its Flash-powered site. Then when it came to the content, they weren’t able to bring it all together so I suggested to them to hire a former colleague of mine who is a fantastic writer and editor. Working with a content strategist was such a pleasure. Together we delivered a brand new site that is clean, inviting and responsive. Their only booking jumped up to 300% with the new, mobile-friendly design.

The last project I want to show you is a personal one. I love jazz and a huge fan of Miles Davis. Three years ago, I created Sketches of Miles. At the time, HTML5 was so new to me and I wanted to learn it. At the same time CSS3, which offers the ability to use types beyond the web safe set. Google was also just offering its web fonts. If I remember correctly, it had about 75 fonts in its collection.

At the time I also heard about Stacey, which is a lightweight CMS that requires no database setup and installation files. It also gives you the ability to customize individual pages. With all the right tools available at my disposal, I wanted to create an art-directed site that combines Miles Davis’s album and web typography. After purchasing The Complete Columbia Album Collection of Miles Davis, I would go through and listen to each album, review it with one sentence and build the page using that one sentence review for each week. I had a lot of fun doing it and I learned quite a bit as well.

I asked professor Cui to allow me to move my presentation up to today because my focus is on literary storytelling and I thought it would be beneficial to our second project, or at least would give you another perspective on it.

After seeing the examples that George and Melody had shown us, I knew I needed to step up my game. As I was thinking about my topic and scouring the web to find examples, I realize that I have done quite a bit of literary storytelling for personal and professional work; therefore, I am just going to show you some of them and talk a bit about the process behind them.

The first piece is typographic treatment of Adam Mansach’s Go the Fuck to Sleep. It’s a satire children book that I instantly connected with when I first read the story. I spent so many nights trying to get my son to sleep and understood exactly what the author went through. The concept for this piece is very simple. I used type as visual and combining it with Samuel L. Jackson’s narration to tell the story.

For the second piece, I was commissioned by a Vietnamese-American photographer who puts out a calendar each year showcasing Vietnamese traditional long dress. All the profits he made would go to the orphanage in Vietnam. When he approached me to create the slideshow, he gave me access to all of his photos and the complete creative freedom to work on the piece.

As I went though his photos, I noticed similar patterns in his work. The way that the traditional long dress wrapping around the body created beautiful forms, shapes, lines and curves. The models were very relaxed as if they were in a sleeping mode. Then immediately a song from an independent singer at the time came to mind. It’s a simple folksy song, more like a lullaby, but set in an electric guitar backdrop. The lyric is about a mother singing her kid to sleep. As we watch “Ao Dai Trang A Oi,” notice how the fingerpicking guitar matches with the forms and the curves.

Comparing this piece with the first piece, you can see the different in parenting approach between a mother and a father. A mother would sing you the whole lullaby until you fall asleep. The father would just like, “go the fuck to sleep.”

The third piece titled “A Few Gifts for My Homeland” is a very controversial song about the Vietnam War. Even though many singers have covered the tune, the one that struck me the most is from this one pop singer. You could tell that she meant every word she sang. In some ways, the song reminds of Billie Holliday’s “Strange Fruit.” The power that these singers connected to the lyrics is amazing. They were not just singing it. They lived and breathed it. I am just going to show a short part of it.

The final piece is Jay-Z’s “Picasso Baby.” What’s interesting about this piece is they way Jay-Z connects art with hip-hop. As he explains in the beginning of the video how art and hip-hop was one. They were outcasts and they aren’t allowed inside the gallery. Then art got into the gallery and hip-hop disassociated with it. Now he’s just bringing it back together. Let’s watch the performance.

The graduate design seminar for this semester focuses on storytelling. For our first project, which due on Thursday, we need to use data to tell a story. I picked my subject matter on color blindness because the topic interested me after reading Geri Coady’s Colour Accessibility. I designed a poster using data to explain color blindness. The feedback from my professor and classmates have been positive. I really enjoyed creating this project. In addition to Coady’s book, I found a few great resources including “Prevalence: Color Blindness by Inheritance” and “New Outlook on Colorblindness” on WSJ.

By the way, I also reworked the graphic section of the site.

My branding class got canceled today. The professor had an unexpected business trip and had to be out of town. Part of me was happy because I could use the time to spend with the kids, but the other part of me was kind of missed it. I was looking forward to getting feedback on the final logo for my project.

Even though I started the graduate program in fall 2012, I was not into it until this semester. My whole goal had been to just get the paper. I worked hard, but my heart was never quite into it. The previous two semesters were quite stressful for me. I gave up the time with my family and the time to freelance to make extra money for schooling. I was also under anxiety and fear because I was clueless about graphic design and I was not sure what the program could do for me. I whined to my wife quite a bit. Although she is getting sick and tire of hearing me, she is still very supportive. Obviously I couldn’t do this without her support. I can’t thank her enough for that.

This semester things have changed for me. I put a lot of thoughts into the projects making sure that I would do something I feel passionate about. Although I am still in it for the paper, my attitude have changed. I am in it to learn. The professors are fantastic and I am really liking the classmates that I have met so far. We’re helping out each other and pushing each other forward. I could not make it through the advanced typography class in the first semester without the help of my classmates. I had no idea how to mount a poster and I had no idea how print worked.

As a part-time student, I still have a long way to go, but I no longer worried. If I can make it through the end, that’s great. If not, I am still learning so much without spending a dime. I have nothing to lose. As long as I could stay humble, keep my ego down and my mouth shut, I’ll go as far as I can and I’ll work as hard as I can. That’s my new goal.

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.

The app becomes an educational resource on its own in addition to being complementary to the board game. Here’s the snapshot of The Jazz Board Game and here’s the actual working app.

The current Law Library web site, which is under the Law School’s umbrella, has quite a bit of information. For the last few months, I have wanted to create a simple app that would allow students to complete a certain tasks quickly on their digital devices without going through the entire site.

I spoke to the librarians who are also my colleagues to find out what the students want to do with library services in the mobile setting. They provided me valuable information on the things that students often do such as searching for law-related books, getting access to the databases, finding out the library hours and asking the staff questions.

Last Sunday, I attended the Computer in Library workshop on “Building a Simple Mobile-optimized Web App/Site Using the jQuery Mobile Framework” and I was inspired to develop a simple web for the Law Library. Although I am building the app based on the contents of the Law Library, this is not a work-relate project. I just want to build the app to learn jQuery Mobile and not having to jump through hoops or the approval process.

The primary functionality would be to provide a set of basic information for the users. The search engine with be connected to Mason’s inPrimo, which “searches hundreds of millions of scholarly items simultaneously, including Mason’s library catalog and digital collections.” The “Ask a Library” would used a chat app, in which I am just presenting the prototype for this project. The most creative feature in this app would be the ability to locate a book in the Law Library. Once a user entered a book into the search field, it would pop up a photo and the exact location of the book. It would be very useful to include in the app.

Jason Santa Maria is a graphic designer living in Brooklyn, New York. He recently co-founded Editorially, a collaborative writing application that “fully respects the actual writing process.” He is the co-founder of A Book Apart that “publishes highly detailed and meticulously edited examinations of single topics.” He’s also responsible for all of its beautiful book design. He’s the founder of Typedia, “a shared encyclopedia of typefaces online,” and a former creative director for Typekit, “the easiest way to use real fonts on the web.”

Jason is one of those few designers who could walk the line between print and web. Even though his design sensibilities are drawn from print design and a deep love for typography, he applies his vast knowledge of type equally well on both printed materials and web interfaces and his style strikes a balance between usability and readability.

In the previous version of his blog, he experimented with online art direction. He wrote:

Professionally, I’ve recently become a bit disillusioned with my design work because it feels static. I design a site, and regardless of the content, it’s usually dropped into a template, reducing the design to more a bit player rather than a worthy partner to that content. In other media, the design adapts to support different kinds of content and themes in order to play a supportive role. So when I decided I wanted a change, instead of designing one look for a site, I designed a system.

Jason proved that with CSS and HTML skills, web designers could break out of the static template and create a unique reading experience. In addition to his work, he also shares his knowledge on web typography. I can’t wait to cop a copy of his upcoming book for A Book Apart. In the meantime, his speaks at An Event Apart and Build Conference are must watch.

Learn more about Jason and his work at Jasonsantamaria.com and a great interview at The Great Discontent.

This is a preparation for my graduate seminar presentation on a designer I admired.