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.

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:

• Carly Peak
• Ogo Batzorgig
• BeBe Ragsdale
• Neha Sohail

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.

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.