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.

Course Overview

This online course will introduce the intermediate level designer/programming student to the wonders of the responsive website. Responsive websites have become almost a necessity, because websites are now being looked at on such a variety of screen sizes. No longer is it acceptable for a website to only look good on one screen size, and most companies don’t want to pay to have three unique sites designed. An affordable and increasingly popular option is to design one website that can comfortably scale from the widest cinema display all the way down to the smallest mobile phone display.There is a growing demand for designers who can create such sites, and students who take this course will be fully prepared to fend off job offers left and right.

Learning Outcomes

• The student will design and code a fully responsive website by the end of the class.
• The student will comfortable converting rigid pixel-based grids into percentage based grids.
• The student will understand the unique challenges of each size browser–mobile, tablet and desktop–and can design with them in mind.

Requirements

• Comfortable coding in HTML, CSS, and Javascript/JQuery
• Comfortable designing in a browser (designing on a grid, pixel based measurements, web-fonts, interactive elements etc)

Course Policy

Every student has 48 hours to complete their work. Any projects or assignments that are turned in late will be deducted an entire letter grade. Afterwards, half a letter grade will be deducted per day. If a student anticipates being late to their selected session time, they have the option to reschedule for another session, but points will be deducted for tardiness after 5 minutes. Failure to attend 3 classes will result in a full letter grade deduction. If the student misses any additional classes, they will be given an alternate assignment for whichever section to prevent them from finding answers off the original assignment. Any students who have attended all session will receive 5 bonus points awarded towards their lowest project grade.

There will be no make-up or alternates for late projects. Projects must be submitted online on the given due date. Any late submissions will not be accepted. If students anticipate an emergency, please provide necessary documents and file for an extension. Extensions should be requested 12 hours in advance. Work must be submitted within the next 24 hours.

Grading Policy

This entire course is weighed as followed:
Project 1 (20%)
– Authoring (10%)
– Design (5%)
– Process (5%)
Project 2 (20%)
– Authoring (10%)
– Design (5%)
– Process (5%)
Assignments (13 total – 6.15% each)
Total: 100%

A+ (100%-97%)
A (96%-93%)
A- (92%-90%)
B+ (89%-86%)
B (85%-83%)
B- (82%-80%)
C+ (79%-76%)
C (75%-73%)
C- (72%-70%)
D+ (69%-66%)
D (65%-63%)
D- (62%-60%)
F (under 60%)

Final grades will be posted within 24 hours after submitting your final project. Students who have filed for extensions will be given a grade of INC. Any extended projects that are not received within 24 hours will result in failure of that project. If a student has more than 3 extensions on their record, they must appeal to the course instructor.

Acceptable extensions: Family emergency, health emergencies, and court.

Gradebook

Grades for every project and assignment will be posted within 24 hours so that students have an idea of where they stand in the class. Midterm grades will be given halfway through the course before students can continue with the remaining half. Each graded work will have a provided link to the students’ submitted project and assignment to review their progress and errors.

Gradebook gives students a report of their progress while also giving them access to their previous work to reference for later projects and assignments. Students are encouraged to review them and ask questions and clarifications to the forum or live chat. While gradebook details the history of the students’ progress, it will also have a list of upcoming assignments and projects that are due along with due dates. Students will know what is due and when. This is also where they may file for extensions.

Comments Thread

Comments thread will help students find information before they refer to forums or live chat. The thread sets up comments that are rated the most by default. However, students may filter it through the search engine to find their answers quicker. The thread can also be sorted by: most helpful, least helpful, recent posts, and older posts. Under each comment, students can rate the helpfulness of the comment on a 5 star system. They can also make comments on them as well. This is encouraged so that students are able to review questions, concerns, and review of the course. It helps them engage in the material and for the designer and instructor to get feedback throughout the course on what is successful and what is not.

Students can also save comments they like so that they do not have to find it when they have to reference it. All favorited comments are added to the sort filter so that they can easily access it. These favorites will help the designer and instructor know how to revise the course so that it is more successful in the future. The comments thread, however, is separate from the forums and live chat, which is reserved for more in detail questions and concerns. Students are encouraged to use both functions.

WordPress

For our E-learning system, we will use WordPress to manage our content. WordPress gives us the flexibility to design the look and feel of our course. As a course management system, WordPress provides instructors the ease of preparing and crafting the materials. As an interactive tool, WordPress allows students to engage with their classmates and instructor.

Discussion Forum

In each lesson, we would use WordPress’s comment system as an online class discussion. Students could post their comments on the materials or ask questions if they need further assistance to understand the subject. The instructor and fellow students could reply to the comments in a threaded (nested) level.

Codepen & Browser

Codepen is a tool that allows users to “build, explore and teach the web, instantly.” Using Codepen students could write HTML, CSS and JavaScript to complete the class exercises; however, testing the codes in the actual browser is much better for responsive design. With the real browser, students can resize the window to see how their design changes in various widths. Ideally, student should test their design on real devices, but that could be expensive or impossible. An alternative solution is to use Responsive Design Bookmarklet.

Live Chat

One limitation of an online class is the difficulty in meeting fellow students. Frequently the only contact a student has in an online class is with their professor. Of course, in a traditional setting, most students ask their classmates a question first, and if they don’t know the answer, then they will ask the teacher. This encourages students to ask questions, because there is less risk involved in asking a fellow student, and if that student cannot answer the question, the original student has just built enough confidence to ask the teacher.

To imitate this dynamic, we will include a live-chat feature in our e-learning environment. There will be an indicator saying how many students are online at the time and what their names are. As long as you are enrolled in the course, you can initiate a chat with any of the online classmates. Additionally, the teacher herself will also show up in this list whenever she is online. This will encourage active class participation and mitigate any possible confusion regarding assignments.

Student Work Gallery

Similar to the structure of AVT 420, there will be a student work gallery on the website. Each student will be required to create a course page and publish their assignments on the course page. The student gallery will be where students can go to look at their fellow classmates’ work. This will be square thumbnails of the students websites, to highlight the visual design of each students’ site.

Example of Class Materials

Creating a Flexible Grid

Many graphic designers use a grid system to begin making their layout. 960.gs is one of the most popular systems for creating web layout because it fits nicely on a 1024px screen resolution. Here is an example of a 960-grid layout.

While fixed-layouts give designers the illusion of pixel perfect control, they also pose many limitations. Nowadays, users come to the web with different devices; therefore, a fixed width doesn’t scale to fix all. Accord to Ethan Marcotte who coined the term responsive web design, “Our canvas, the browser window, can bend and flex to any shape or size, whether changed at the whim of the reader, or fixed by the phone or tablet they’re using to view our content.”

The layout of design.gmu.edu is divided into two areas. The main content area is 700px. The navigation is 220px. The gutter between the two areas is 20px. The padding on both sides is 10px each.

So here’s the breakdown of 960px:
700px (main area)
220px (right navigation)
20px (gutter)
20px (padding)

Our markup would be something like this:

Our CSS would be:

#page {
margin: auto;
padding: 10px;
width: 940px;
}

.main {
float: left;
width: 700px;
}
.menu {
float: right;
width: 220px;
}

To convert our CSS from pixel to percentage, we use the following formula:

target ÷ context = result

Think of context is the whole layout, in this case is 940px . Target is the specific width for each section. In our example, the main target is 700px. So let’s do the math.

700 ÷ 940 = 0.74468085

Let’s round that up to 74.5%

Let’s do our menu as well:

220 ÷ 940 = 0.23400255

Let’s round that up to 23.4%

Here’s our new flexible CSS:

#page {
margin: auto;
padding: 10px;
width: 100%;
}

.main {
float: left;
width: 74.5%;
}
.menu {
float: right;
width: 23.4%;
}

Now our layout is stretch to 100% width. On large monitor, the text could become hard to follow if the width is too wide. So if we want the page to stop expanding when the browser is wider than 1024px screen, we could but put a max-width on the page. Like this:

#page {
margin: auto;
padding: 10px;
max-width: 940px;
}

With just these simple conversions, you have created a fluid, flexible layout.

Conclusion

This e-learning website will be responsive, and the students themselves will be learning the intricacies of a responsive website. We hope the students will learn more than just code and design, but also how to think critically about what type of website fits the needs of the client best.

Objectives

Students will learn how to build a complete responsive web site from scratch. The course will focus on planning, workflow and implementation. By the end of the semester, students will have a responsive web site to add to their portfolio.

Required Text

• Implementing Responsive Design by Tim Kadlec
• Content Strategy for Mobile by Karen McGrane
• Mobile First by Luke Wroblewski

Prerequisites

Sufficient skills of HTML and CSS are required. If you need to catch up on HTML and CSS, read HTML5 for Web Designers by Jeremy Keith and The Book of CSS3 by Peter Gasston.

Requirements

• Access to a web server
• Text Editor such as Dreamweaver, Coda, BBEdit, Sublime Text or simple TextEdit for Mac or NotePad for PC.

Week 1: Why Responsive Design?

• History: “The Dao of Web Design”
• The rise of mobile devices
• Progressive enhancement
• Web standards
• The way forward

Week 2: Planning

• Context: Different devices; different environments
• Content negotiation: Structuring contents on various devices
• Time investment: Responsive design takes more time
• Content audit

Week 3: Web Site Proposal

Students will present their ideas to class on the responsive web site they would like to build. The presentation will take place on Google Hangout.

Week 4: Content Strategy

• Appropriate: Right for the user
• Useful: Specific purpose
• User-centered: Meet real user needs
• Clear: Easy for the user to understand
• Consistent: Consistency of language acts as a consistent interface.
• Concise: Omit needless content

Week 5: Workflow

• Wireframes
• Mockups
• Style guides
• Responsive structures

Week 6: Web Site Mockup

Students will present their mockup to the class using the browser. Students will also get feedback from their classmates and instructor. The presentation will take place on Google Hangout.

Week 7: Mobile First

• Why mobile first?
• Screen size
• Constraints
• Capabilities
• Touchscreen

Week 8: Layout

• Flexible grid
• Flexible typesetting
• Convert pixels to percentages
• Creating a flexible grid
• Flexible margins and paddings

Week 9: Media

• Flexible images
• Flexible SVG
• Flexible Video

Week 10: Media Queries

• Viewports
• Structure
• Order
• Breakpoints
• Navigation
• IE supports

Week 11: Design Critique

Students should have a working site that is closed to the final product for review and critique.

Week 12: Preprocessors

• Why preprocessors
• Sass
• Compass
• LESS

Week 13: Pollyfills

• Modernizr
• Response.js
• CSS3-mediaquery.js

Week 14: Performance

• Images
• JavaScript
• CSS

Week 15: Final Project Due