For the second project in Web Design and Usability, students chose a web site to redesign. To read the requirements, refer to last year’s post. Most students had done a good job of improving the existing sites they had selected. Two particular students, however, went above and beyond.

Tina took on the daunting task of redesigning the Periodic Table. When she showed me her early mockups, I suggested that she might want Univers by Adrian Frutiger for her periodic table. She took it and made a striking redesign using just type and colors. The new design is beautiful, clean, and user-friendly.

For Angela, she took on the challenge of redesigning VegWeb. Her first mockup was nowhere near her level of work, based on what she had done in the first project. I asked her to stepped it up and she did. She emailed me five, six of comps at one in the morning on Saturday. Although most of them were good, the editorial layout stood out to me. She was not sure if it was the right direction because she felt restricted to do more traditional layout for the web, but I encouraged her to push more into the editorial approach. Truth be told, web design these days is kind of boring. Most sites looks very similar; therefore, I wanted to see more breaking designs, especially from students. What she delivered I couldn’t be happier even though I knew it would be a huge challenge to turn her mockups into HTML and CSS. She did an amazing job with balancing big type and stunning photos. Her strong grid layout makes the pages look so damn good. She’ll have a great future ahead.

These type of works really make teaching rewarding. I will definitely miss it after this semester.

I have been working around the clock on my book, Vietnamese Typography. In addition to the website, which is now in beta, I am working on print materials for a gallery show with three other graduate cohorts. The show will begin on November 30.

Even though the website is the main focus, I am creating a print edition to complement it. I am experimenting with the trade book format and running a test print using both Blurb and Lulu. I wanted to make them at economical as possible so that I could distribute them at a low cost. I am also considering selling them. I need to see how they turn out first.

While waiting impatiently to see the proof copies, I am taking a break from this project to catch some sleep. I has made a living hell for myself working on the site, the book, and the posters. I have not done my physical activities to spend time on this project; therefore, I will be spending time with the boys this weekend to regain some energy.

The first project for Web Design & Usability in the Fall of 2015 has been completed. Students were assigned to the design a mobile web site. A few projects have been uploaded to Pinterest.

The Fall semester will be busy and exciting. I can’t wait to launch the final project for my MA. I will close out my chapter as a student and transform into teaching.

I will be teaching three different classes combined into one. Here’s the break down: 17 undergraduate students for Web Design and Usability (AVT 415), five graduate students for Web Design and Usability (AVT 519), and one graduate student for Advanced Web Design (AVT 619). With 23 students in three different classes seemed overwhelming, but I had figured out how to run the class after months of thinking and preparing for the course. I will have a teaching assistant to help me out so that will be good.

Because I have other things going on at work and in my personal life (more on that when the time comes), I asked to take off teaching in the fall, but they could not find a replacement. I didn’t want to see the class gets cancelled and let the students down; therefore, I decided to move forward with it. It will be a challenge, but I am looking forward to it.

The summer course, Introduction to Web Design, ended yesterday with students presenting their final project. The websites, in which they came up with the concept, designed, and coded, turned out well given that all six of them had no prior knowledge of web design.

My goal for the course, which was compacted into into eight  weeks, was to train students the foundation of HTML and CSS. In the first three weeks, I covered all the chapters in Jon Duckett’s HTML & CSS: Design and Build Websites. In each chapter, I selected the practical features that they would use the most in real-world projects. In addition to two exams, I created five exercises based on the code demo covered in class.

In parallel to learning HTML and CSS, students had to come up with the concept for their own site. They had to write a proposal, gather content, and create a sitemap, wireframes and mockups. The final website must be hand-coded, functional, and responsive.

Once we were done with with the book, they began to create the mockups and code their final site. The most challenging part of the course was coding; therefore, I only gave them one project to do and plenty of time to code. They struggled a bit, but everyone pulled through. I am happy with what they turned in. I hope that I had given them enough basic knowledge so that they will continue to improve their HTML and CSS skills after the intro course.

Here are a few mockups the students have created.

The first two days of Introduction to Web Design had gone well. The students seem to be interested in learning to code. Although most of them are learning HTML and CSS for the first time, they understand the concept very quickly. Because of the small class size I can work with each individually on the assignment. I am glad that the school did not cancel it. For a web design course, keeping it small should be the way to go. The students also came up with intriguing proposals for their project. Can’t wait to see the final results.

Starting next week, I will be teaching Introduction to Web Design. With only eight students signed up, I thought the class would get cancel, but I got the green light on Tuesday that the show will go on. As I was scrambling to prepare the lesson plan and the syllabus, I realized that the schedule, which will begin on June 2nd and end on July 23rd; is quite condensed. I have less than two months and I my goal is to teach the students the foundations of HTML & CSS. I ended up turning it into a hands-on training bootcamp. Everyday I will teach them how to code and give them assignments. They will have one project to do so that they’ll learn everything from creating a site map to wireframe to complete website.

One of the challenges of teaching an intro course is selecting the textbook. I had three choices: Shay Howe’s Learn to Code HTML and CSS: Develop and Style Websites, Thomas Michaud’s Foundations of Web Design: HTML & CSS, and Jon Duckett’s HTML & CSS: Design and Build Websites. I chose Duckett’s. Beside its beautiful design, the content seems to be easy for beginners to understand.

I built my lesson plan around the book and will cover only parts that the students will work with most of the time. My goal is to get them to get comfortable with HTML & CSS. They can learn more design in their upper classes. When I taught Web Design and Usability, which is an advanced class, last year, most students were struggling with basic coding. I want to change in the intro level. I truly believe that you can’t be a web designer, especially today, unless you can code the basics. They will have some work cut out for them.

The final grade is in and I couldn’t be happier: A+ for Practices in Graphic Design. I had accomplished what I set out to do with Professional Web Typography.

I am also glad to hear that some readers find this book useful.

Paul Bradley:

[A] succinct overview of web typography techniques.

Matti Besser:

[A] great resource for everyone doing typography on the web. Good read to gain and refresh knowledge.

Chris McElwee:

Thought you might like this; an awesome resource that will be a massive help to me.

Tomango:

Brilliant guide to web typography. Fantastic online resource.

Typewolf:

A comprehensive online book covering web typography.

Thomas Byttebier:

A book on professional web typography, published on the web. Definitely bookmarked.

I am thrilled to introduce the launching of my book titled Professional Web Typography. It’s a web-based book written part as an independent study for my MA in graphic design program, and part as an experiment in using web as a self-publishing platform. It is also an opportunity for me to share what I have learned about typesetting for the web.

When I set out to write this book, I have a specific audience in mind: web designers who want to step up their type game and print designers who want to step up their web game. The combination of the rich history of typography and the evolving of the web technology can be intimidating for beginners; therefore, I wanted to make the book as succinct and as approachable as possible.

My goal is to show that typesetting on the web is fun and rewarding—not intimidating. I begin the book showing various methods of delivering web fonts. Second, I break down font features and characteristics to look for when selecting body text. Third, I demonstrate the important of setting typeface in the browser. Forth, I examine the crucial elements when picking type for user interface. Fifth, I present ways of seeing typographic details. Finally, I encourage the practice of typography with various real-design examples.

Although the purpose of this book is to get a good grade for my independent study, I wanted to take it beyond the academic boundary. After all, with most of the projects I have done as a graduate student, I try to apply real-world use cases to them. This book is no exception, but I wanted to take it step further with an experiment in taking the web as a self-publishing platform. I wanted to deliver a quality level of writing that is the best from my ability and deliver a reading experience that is the best the web could offer at this time.

I spent every night, after my wife and kids went to bed, in the past three months researching and writing the content; I secured the domain name and paid for the hosting; I built the website and made all the illustrations; I hired a friend to do copyediting; I consulted acquaintances in the industry to look over the technical details; I reached out to a few people I admired in the web community for feedback.

I take on this project with deep passion and serious intention. I wanted you to enjoy reading the book and learning from it. If you find this book useful, consider paying for it. Although $5 to $10 is suggested, the price is up to you. You can support the book based on the value you think it deserves. Your contribution will help sustain the effort, allow me to update the content (especially the constant evolving CSS techniques), and let me do more independent projects like this in the future with resources to invest in copyediting and technical editing.

Writing this book was quite a learning experience and I would have not accomplished it without the help and support from family members, friends, and the web community. Many thanks to professor Don Starr for his support and counsel of writing this book as an independent study for my MA program in graphic design at the George Mason School of Art. I want to thank Linh Nguyen for her exceptional copyediting, Raymond Schwartz for his meticulous technical and editorial review, and Jim Van Meer for making my words clearer and stronger. My deep gratitude goes to Matthew Butterick for inspiring me to use the web as a book-publishing medium. My appreciation goes to the following prerelease readers: Tim Brown, Jeremy Keith, Chris Silverman, and Khoi Vinh. Special thanks to my wife Dana Nguyen for her love and encouragement. She booked an all-inclusive trip to Punta Cana, Dominican Republic so we could spend the days with the kids and I could write this book during the nights.

Although I don’t know how well this book will receive, I am very exciting to share it with you. I hope you can join me in a journey to explore this craft.

Presenting beautiful type on your website nowadays could not be easier. With popular web font services such as Adobe Typekit, Google Fonts, and Hoefler & Co.’s Cloud.typography, getting web-ready typefaces to display on a site is as simple as adding one line of markup. Unlike the old days of web design when all you had to work with were a handful of default system fonts (Arial, Verdana, Helvetica, Georgia, and Times New Roman), now you have thousands of fonts to choose from. However, with too many choices at your disposal, the process of selecting and combining typefaces can be time-consuming, overwhelming, and intimidating.

In this book, my goal is to prove that typesetting is fun and rewarding—not intimidating. Whenever applicable, I will share the process that helped me make the appropriate type selection for specific assignments in my work as examples for you to examine. Through my process, I hope to inspire you to discover your own. I will also cover CSS techniques that are related to typography and try to keep the technical aspects as simple as possible. You will have the chance to download all the example files, which I have uploaded to GitHub, to play with.

To be upfront, I am not a type expert. I learned typography through obsessive and extensive reading on the subject. I work full time as a web developer and designer at the George Mason University School of Law. Besides the free tuition, one of the perks of working at a university is having full access to the library. Mason has an excellent collection of books on typography and I have read most of them during the past three years. I even started acquiring my own collection with books that I want to keep for reference. Although most of the books I have read apply to print design, my true passion is the web. I started my web design profession early 2002, but the web has only made an exciting transformation within the past few years, thanks to the explosion of web fonts (and web font services to accommodate them). In spite of these fairly recent changes and emergences, typography remains a craft that is honed, nurtured, and acquired over time, with patience and practice. Join me in a journey to explore this craft.

Professional Web Typography will be launched next Monday.