The growth of online learning provides many exciting opportunities as well as challenges to instructional, interface and web designers. Unlike the traditional, face-to-face classroom, in which the instructors have control of their environment, online classroom depends on the learning style, experience and discipline from the students.

As witnessed in our class discussion on various online learning web sites, each student has different learning styles. While one prefers watching video, the other prefers visual animation. While one prefers hands-on learning, the other prefers reading texts. The best way for me to learn is to turn my assignment into a real-world project. For example, when I wanted to learn MODX, a content management system, I did so with a client project. Reading online tutorials and books were informative, but I learned much more when building the site. Last semester, my classmates and I created marketing materials (posters, brochure, email newsletter and a landing page) to promote the graphic design graduate program at George Mason University School of Art.

The advantages of online education are instant access to resources and information. Learning is a collaborative effort in a student-teacher relationship rather than the teacher is the center of attention in a traditional setting. In contrast, the lack of face-to-face engagement puts a huge constraint of online education. In “Curtailing Dropouts at Online Universities,” Brian Burnsed cited:

A study released [in October 2010] by professors at Kennesaw State University in Kennesaw, Ga., indicates that online students that commonly used retention strategies such as friendly E-mails from professors aren’t enough to keep the students from giving up and dropping out. “Students’ expectations are misaligned with what online learning actually is,” says Elke Leeds, assistant professor of information systems at Kennesaw State and one of the study’s authors. “They come in thinking that it’s easier. While it can be more convenient, the truth is you have to be self motivated; you have to be dedicated.”

Without a doubt, effective online education depends on learning experiences. As designers, we play an important role in shaping the experience. We need to take usability, accessibility and content strategy into consideration. We need to present the information not only in a logical way, but also in an engaging way. Most important of all, we need to take ful advantage of the web’s capability to deliver our materials. For example, we should embrace the fluidity and flexibility of the web in designing our courses. Our contents should be accessibility not only on desktops and laptops, but also on mobile devices. Content strategist Karen McGrane has a great piece in A List Apart on content parity titled, “Windows on the Web.” She writes:

When people start a task on one device and then complete it on another, they don’t want different content or less content, tailored for the device. They want the same content, presented so they can find it, navigate it, and read it. They imagine that their devices are different-sized windows on the same content, not entirely different containers.

Our job as instructional designers is to provide a good experience in delivering our materials to students who want to learn or complete the assignments across multiple devices. That is the future of online higher education.

Responsive Web Design

With the rapid increase of new mobile devices hitting the market, responsive web design is here to stay. While responsive architecture is not the best solution for every project, it is one of the most reliable practices that meets the COPE (Create Once, Publish Everywhere) model.

Responsive design is a great skill set, if not required, to acquired for designers; therefore, I would like to propose making an e-learning course, for our advanced web design project, to teach the fundamental concepts through three core principles:

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

Web Accessibility

For web designers, making our web sites accessible is as important as creating beautiful visual design. All web sites should meet the Web Accessibility Standards specified in Section 508 of the Rehabilitation Act.

Web accessibility is a must-have knowledge for every web designers and developers; therefore, I would like to propose making an e-learning course on accessibility focusing on the implementation of ARIA (Accessible Rich Internet Applications) Landmark Roles such as banner, complementary, contentinfo, form, main, navigation and search.

In retrospect, design was not something I intended to do with my life. I actually didn’t even know what design was. When I started college, I picked the path my cousin thought I was good at. She sold me on communication major at La Salle University. In my mind, communication sounded cool and I would be controlling the board in a TV station or a music production. In my freshman year, reality struck. Communication was the least that I wanted to do. I hated public speaking. I still hate doing it now unless I have to.

After getting through the first year, I wanted out. I was going to switch to Computer Science, even though I didn’t have any passion for it. Ms. Cross at the Upward Bound Program got me into Millersville University with a major in Computer Science. I was ready to move back to my mom’s house, but then I heard about a new major coming out at La Salle called Digital Arts & Multimedia Design. The new major sounded way cooler than Computer Science so I decided to stay.

The very first class of the program was learning Photoshop and I was hooked. In my sophomore year, I landed a paid internship at Trump Maria as a graphic designer. I got to stare at a computer screen all day. I didn’t even know how to use Mac OS 9. I told my mentor that I had decided not to become a graphic designer. Not sure what prompted me to tell him that. Maybe it was out of frustration. It turned out to be a good decision. I was able to focused my time and effort on web design.

In my junior year, I landed another paid internship at Unisys. Once again I was geting paid for doing nothing. I got bored, quit and joined my classmates at WePlayIt, a startup gig. We made the site and created some Flash comic strips. The site launched all of us was let go.

After graduation, I bounced around advertising agencies. They wouldn’t hire me fulltime. They just called me in whenever they needed me. I ended up working at Staples and Donnelley. One day I got a call from Vassar and that when design took off for me. I spent five years at Vassar working with a handful talent designers on both print and web. I also took on small freelance gigs on the side.

Then I moved to the George Washington University School of Business as a web developer. As my full-time job moved me further and further away from design, I took on more freelance projects to keep my design in the game. When I took on the web services developer at George Mason School of Law, I am moving even further away from design. In addition to maintaining the school’s various CMS, I am also responsible for server administration.

Then I learned about the graduate graphic design program at George Mason School of Art, I handed in my application and was accepted. Now I am back learning where I started in graphic design. I still have no passion for graphic design. It costs way too much money and papers. The design concept, however, would help me tremendously in my web design. I really hope that the Art School would include more web design classes in its curriculum. I will be taking advanced web design next semester. We’ll see how that goes.

In the second half of the graduate seminar class, we ditched the textbook and picked up a real design project. Between myself and three other graduate students, we decided on making a marketing campaign to promote the MA & MFA degree at George Mason School of Art. Right now the school has one MFA and four MA students.

After many brainstorm sessions, we came up with a tagline: “Real World Design.” Here is the message we want to send out to potential students:

Here at Mason, our design programs are taught by and for real world professionals. People who eat, drink and live this stuff. From websites to environmental graphics to ad campaigns seen by millions, a Mason MA or MFA in Design means your portfolio will be filled with real world work. Because it’s not just a design degree. It’s your profession.

Once we had that down, we agreed that featuring recent graduate students would be the best strategy. So we picked out two students and created our campaign around them. After we came up with the branding (look and feel, typography and images), we split up the work. One student created the posters. One created the brochure. One created an email postcard. I was responsible for the landing page.

We presented the project to the dean of the School of Art and she immediately wanted to use the materials to promote the graduate program. I am so glad that we got to do a real world design project in our class. So if you’re a graphic design and looking to get a master, join us!

Just wrapped up another project for my Advanced Typography class. I didn’t think I would like it, but the annual report turned out quite well. Accor was one of my selections, but I didn’t know why I picked it. Luckily it has many content I could work on. I focused on the sustainability theme and made it into a mini annual report. Here’s the original (PDF) and here’s my redesign version. Now I have three more projects for two classes to complete the semester.

In another update, I reworked my resume once again using san-serif typeface. I actually got a few calls from recruiters after the found my resume. Microformat seems to work well for findability. I encourage you to make a Microformat resume if you look for a job.

Just finished putting together the process book for my Advanced Typography project. We had to create a dining out guide to showcase the restaurants we picked. The guide (pdf) came out pretty nice. Each restaurant gets its own theme. The guide was created using Illustrator. I have been using Illustrator quite a bit for this class and I am loving it even though I am still suck at drawing and illustrating.

Introducing the new rating system is a project for my Advanced Typography class. It was quite challenging project. Although I had done twenty designs, I am satisfied with the final version. The flyer tells you a bit more about the thinking behind the rating system.

I have a horrible sense of direction; therefore, I don’t drive anywhere without my GPS navigation device. Prior to the GPS, I used MapQuest or Google Maps to get around. Even with turn-by-turn directions printed out on a piece of paper, the proximity of the distance always confused me. For instance, when the direction said drives 6.3 miles and makes a right turn on Main Street. Did I miss the turn? Had I gone too far? Why don’t I see the street sign? I either looked for road signs or found a gas station to figure out where I was. It just occurs to me now (as I am writing this essay) that I never used a map to orient myself because I also don’t have a good sense of using the maps. Somehow following a set of instructions always appealed to me over a map. Even with the GPS, I rather listen to the instructions than look at the map.

Because of my horrible sense of direction, I became a much better web designer. If I can’t figure my way around a website my users probably can’t either; therefore, I always try to make the site navigation as clear and simple as possible. In Inventing the Medium’s chapter six on “Spatial Design Strategies,” Janet Murray writes:

Websites also create a sense of place, using consistency of style sheets to unite the page displays, and including the homepage as a landmark to which other pages are all related. When the space is well designed the organization is reinforced through the experience of navigation. Each time I go to a page I get a concrete experience of the relationship of one topic to another. Designers can reinforced the experience of an information space, and make it more memorable, by using clear labels and a navigation pattern that follows a logical information hierarchy. Creating a separate “site map” is poor substitute for creating a navigation menu that provides a clear, logical, and memorable map of the site organization.

While I agree with Ms. Murray that using clear labels and logical navigation patterns would make websites easier to use, I totally disagree with her that creating a sitemap is a poor substitution. In fact, I would argue that a sitemap is a design choice on the part of the creators to make the web site easier to use. A site map can’t replace an intuitive navigation system, but it could enhance the experience. For example, if users want to know everything on a particular web site and they don’t have time to navigation through the menu, the sitemap is a good place for them to see every page on the site. Furthermore, sitemap tells search engines like Google about the pages on the site they might not otherwise discover. Having a sitemap not only enhances the user experience, but also increases search engine optimization.

Design choices such as images, type and space make a web site welcoming. If the images are well designed, chosen and optimized, they can attract visitors and make them want to explore further. If the typefaces are legible and readable, visitors might want to stay and read. If the space is balanced with breathing room, visitors might want to learn more. The homepage is the space that could lure visitors into exploring the site; therefore, the space on the homepage has to be well executed. For example, the homepage of Apple.com uses big open space to promote the company’s latest product.

With social media sites like Facebook and Twitter, the virtual world is perhaps an improvement over reality. Facebook allows users to connect with friends and acquaintances from that past that might not be possible in the real world. If it weren’t for Facebook, I would never discover friends from middle school. As much as Facebook and Twitter would like their users to stay in their network, they can’t force them. The way that they signal users that they are leaving or entering their network is to make them sign in. Once inside the network, users can still leave to other sites by opening up a new window. For instance, I can view a YouTube video in Facebook or open up a new window on YouTube site.

(Fifth essay for Graduate Design Seminar)

Developed by Marco Arment, Instapaper is a simple application that allows users to save online articles and read them later at their own convenience. A year ago when I was still commuting everyday from Virginia into Washington DC using the Metro, Instapaper was my reading tool on my iPod Touch. Before heading to work or leaving work, I would save a handful of articles I want to read during the train ride.

One of the activities Instapaper deems important is downloading the main content of the articles on the web and presenting them in a way that is legible and readable on the user’s devices. Instapaper makes saving articles easy via “Read Later” bookmarklet. Once the bookmarket is on the browser’s bookmark bar, users can click on it when they are on a page or an article they want to read later.

One of Instapaper’s standout features is the capability to ignore related elements surrounding the article such as the navigations, sidebars and especially annoying ads. For example, reading an article on a web site like New York Times is quite distracting because of all the moving ads, sidebars, paginations (an article is broken down to several pages) and tiny fonts. Trying to read the New York Times on a small device like an iPod Touch is even worse. Users have to constantly zoom into the text to read. Instapaper changed all of that. By focusing on the main content and stripping away unnecessary elements, Instapaper makes reading much more pleasurable.

Instapaper defines the attributes of the information it process by saving the articles for the users. Before Instapaper, I collect my favorite online articles by printing them out and saving them. Instapaper allows me to save that paper-wasting process and have my favorite articles all in one place. Once my collected articles are saved and downloaded into Instapaper, I don’t need Internet access to read them. I can open up the app on my iPod and read the articles whenever or wherever I prefer. I can archive as many articles as I like and I can delete the ones that I don’t want to keep.

Sharing information is not important to Instapaper because its main service is to collect, but it does make sharing easy. Users can post a link to social networks including Twitter, Facebook, Tumblr, Pinboard and Evernote. Instapaper requires users to create a free account to archive all the articles. Since Instapaper only asks for email address and a new password to sign up for an account, maintaining users private information is fairly minimal. All the transactions of purchasing the software are done through Apple’s app store or Android’s app store. Instapaper generates its revenue by offering the service to users. While Instapaper has several competitors such as Readability and Pocket, its elegant design and continuous refinement make Instapaper a fine tool for reading online articles offline.

(Fourth essay for Graduate Design Seminar)

Added two movie posters I created for my Advanced Typography class. The assignment was to choose a horror or comedy film, design for one genre and then flip it for the opposite genre. Since this is a typography class, I can only use 10% illustration and 90% typography. I ended up redesigning Donnie Darko, which I started out with the horror version and then flipped it for comedy. Though the process was a pain, I like the way they turned out. Now I have to frame the print versions on mounting boards, something I had never done before.