Computer Graphic Design

In spring of 2010 I was assigned to teach as existing course called “Computer Graphic Design.”  The curriculum was open-ended—meaning, I was encouraged reinvent it. This was a fortunate opportunity to introduce information design and web development within the Graphic Design curriculum.

First assignment: Social Data
Students keep a diary for  72 hours of all their online and digital communication. Once they have gathered all the “data”, they choose 6 attributes or “buckets” in which to map their content. For instance: Location, Time, Person, Frequency, Mode of Communication, etc.

From the diary, students chart their content, and then map their charts into a visually dynamic, comprehensible diagram. Additionally, students distill their data into useful information. For instance, “Although 72% of my communication happened in my dorm room, only 20% of that communication was texting.”

Andrea mapped:
– Time (inner yellow-blue ring)
– Location (color, outer ring)
– People (initials)
– Incoming / Outgoing calls (stroke length)
– Duration of communication (stroke thickness)
– Communication mode (call or text)

---

Second assignment: enCode / deCode
This assignment introduces web development via a unique process of deconstructing printed works from masters of asymmetric typography. Students visually analyze selected works from Jan Tschichold and Herbert Bayer, and then reinterpret, or “encode” these works into Cascading Style Sheets (CSS) and XHTML for the web, creating as close a visual representation to the original printed counterpart, using only code.

First, students work in “split view” in Dreamweaver; making connections between their XHTML mark-up and visual content.

Second, students validate their pages through the W3C Validator to ensure their code is in compliance.

Third, students run their pages through browsershots to check for browser compatibility.

Lastly, students listen to their pages through the Mac’s Voiceover Utility to ensure their work can be viewed (and heard) by all.

Original: Jan Tschichold: “tsch” poster 1930

enCoded Version: XHTML / CSS

Original invitation notice for a lantern lecture (Jan Tschichold, 1927)

enCoded Version: XHTML / CSS

---

For more examples of original posters “enCoded” visit:
http://heathershawdesign.com/endecode.html