Course Dropped

The Advanced Web Design class I spent months and some sleepless nights to prepare had been dropped. The number of student registered fell from 9 to 6.

Although I had invested a tremendous amount of time crafting the web site and the projects, I understand the situation. I also get a sense of the way the school operate. They can cancel the course anytime despite it’s less than a week before the starting date. I apologize to the 6 students who wanted to take the course.

Now I just need to sign up for a class to take instead. My only options are Mobile App Design and Mixed Media. I am kind of interested in the former and waiting for the professor to let me in. I have no idea what Mixed Media is even though I read the course description. It would be my last resort.

Preparing for Advanced Web Design

Crafting the course for advanced web design has been a challenge. I started in November and kept on revising it. On one hand, I don’t want to overwhelm the students with too many projects. On the other, I don’t want to give them an easy ride. Finding the balance to fit into the schedule is not an easy task.

Last night, I made my final decision to drop four projects to three, which will give them a bit more time to work on the coding. The focus will be on HTML and CSS. I will also introduce Sass since it is becoming a standard practice. I leave JavaScript as an option for the students to explore. Once they meet the requirements for the project, they could use JavaScript to enhance the interactive experience. I might introduce some basic PHP to make their work easier.

In addition to design and technical, content is an important part of web design. One of the required readings is Nicely Said: Writing for the Web with Style and Purpose by Nicole Fenton & Kate Kiefer Lee. The other required book is Sass For Web Designers by Dan Cederholm. I also recommend Learning Responsive Web Design: A Beginner’s Guide by Clarissa Peterson and JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett.

As for the projects, students will learn to create an online editorial experience, digital brand guidelines, and an entire design project from start to finish. For the design project, students will work together as a team to come up with everything from proposal to pricing to design to interacting with the client. It will be a fun semester.

Post Binding

For the final project in Experiential History of Graphic Design, we had to do a post binding with all the class workshops (calligraphy, relief printing, photogram, letterpress, paste-up, screen printing) we had done and our research paper.

Even though the professor had gone through the demo in class and we watched a very useful instructional video, I was extremely nervous. We only had one shot and I am still terrible with handcrafting design. I had to take three days off work before Thanksgiving to focus on this project. The entire process went better than what I had expected. The book was not as perfect as I wanted to be, but it met my satisfaction. I am proud of the final result.

Colophon

The body text in this book is set in Sabon designed by Jan Tschichold. The headings are set in Clarendon designed by Robert Besley. The captions are set in Univers designed by Adrian Frutiger. The book is made by Donny Truong under the guidance of professor Don Starr. The publication is produced in the fall of 2014 as a final project for a course titled Experiential of Graphic Design at The George Mason University’s School of Art.

Adjunct Faculty

I received an offering letter today from the College of Visual and Performing Arts for the position of adjunct faculty. According to the letter I will be teaching Advanced Web Design in the spring of 2015. I took the opportunity to not only updating my online resume, but also recoded the whole page. I scrapped the entire microformats for a much simpler, semantic markup. The whole focus is on typography and hierarchy. I also use Adobe Text Pro and Futura PT Condensed to be consistent with this site. Check it out.

Students’ Portfolio Project

The final project for Web Design & Usability required students to design and code their own portfolio site. The goals were to learn HTML, CSS and responsive design. The final site needed to be fully functional across multiple devices. Minimum deliverables should include a homepage, an about page, and a portfolio section with at least four projects to showcase.

To help students put together their portfolio site, I gathered the following questions:

  1. What’s the purpose of your portfolio? (Get hired, showcase your work, get freelance projects, get to know you, gain reputation, communicate)
  2. Who is your portfolio for and who is not for?
  3. What type of work would you like to focus on?
  4. Does your portfolio showcase the type of work you want to do?
  5. Does your work present design as a problem-solving methodology?
  6. Does your work reflect strategic thinking regarding the chosen subject?
  7. Does your work demonstrate high level of typographic execution?
  8. Does your work tell a story?

With this project, the concentration is on coding. We zipped through the mockups and jumped right into the coding. I planned out plenty of studio time for students to work on in class. Because I had 19 students, I allowed them to work on their own if they felt comfortable with the codes. That way those students needed help could come to class so I could work one on one with them. In the last few weeks, we stayed until 11pm (an hour over the regular class time) to code. I was glad that they were passionate about the project.

Start simple was the key element that I kept reminding students. They needed to create clean HTML5 markups with ARIA roles and clear CSS. Once they get the basics, they could add JavaScript or more fancy interactivity. Some students started out with frameworks and jQuery. Once they were stuck on something and weren’t able to customize the codes to get what they wanted, they had to start over from scratch. Doing so taught them the important lesson of progressive enhancement.

At the end, many students didn’t get as far as I would like them to be, but they managed to create fully responsive functional web site for their portfolio. My hope is that they could take what they have learned in class and continue to improve their project.

Here are some of the students’ sites available online:

Neha’s project was different from the rest of the students. She is more advanced in front-end development. Since she already had a portfolio and didn’t to redo it for the class, I suggested that she put together a site that showcase all of the students’ site. I gave the complete freedom to develop the site. She ended up using way too much JavaScript and jQuery for a simple page, but she was able to apply some nice interactivity.

Final Thought

Teaching this course had been a learning experience for me. There are things that I can improve. Even though I detest quizzes and exams myself, I should have incorporate them into the course to make sure that the students read the book and understand the codes. I could spend more time doing workshops and demos to help them learn. The first two projects, which focused on design and usability, went quite well. The third project, which included coding, were stressful. If given opportunity, I will teach again.

Students’ Redesign Project

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.

Relief Printing for Graphic Design History

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.

My First Calligraphy

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.

Web Design & Usability: Mobile Web Design

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.

Typography Books for Beginners

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.

Info