Heather Shaw
Assistant Professor, Graphic Design
Curry College
hshaw0609@curry.edu
heathershawdesign.com

Sarah Smith
Instructional Technologist
ssmith0707@curry.edu
almyraonline.com/blog

enCode / deCode / reCode
Intro. to Interactive Media Workshop

Home Workshop Schedule Part One: enCODE 01: Overview / Objectives
02: Lecture
03: Tutorials
04: Glossary
05: Poster Exercise
Part Two: deCODE Part Three: reCODE Workshop Resources

Monday July 19
Prepared for the Higher Education Press (HEP) Beijing, China

Part One: enCODE

Participants will 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.

01: Overview / Objectives

• history of the designers and typographic principles associated with their work
• application of structure, systems, asymmetrical and rules-based design
• competency with CSS, html mark-up
• use of language and vocabulary associated with Dreamweaver
• creation of concept from abstract content
• develop skills in formal principles of design: form, composition, hierarchy

02: Lecture Part One: enCODE

What can “Die Neue Typographie” (Jan Tschichold, 1928) can teach us about designing for various media today. Introductory lecture presenting a method for teaching web-based typography to undergraduate design students. Lecture covers the following topics:

• visual literacy for screen-based media
• designing with type for screen; legibility and accessibility
• web standards, why they exist, designing and developing for web standards
• overview of HTML and CSS, and their relationships to form and content
• validation, compatibility, and compliance

03: Tutorials

• overview of how XHTML and CSS work together
• HTML basics: type selectors and tags
• defining CSS rules and linking to XHTML file
• defining hyperlinks

• overview of Classes and IDs
• defining CSS rules for Classes and IDs

• overview of DIVs
• CSS box model
• formatting a page using DIVs
• setting up DIVs with Tags, IDs and Classes

04: Glossary

Selector	the element on the HTML page that is affected by the rule set
Declaration Block	defines the visual properties and values of a Selector
HTML Tags	defines the visual properties of text
Classes	applied to multiple things within an HTML document. Defined with a “.”
IDs	used only once within an HTML document. Defined with a “#”

Basic HTML Tags

05: Poster Exercise

The following exercise merges the learning of HTML and CSS, with elements of historically important typography and design. Poster below is an invitation notice for a lantern lecture (Jan Tschichold, 1927). Few graphics, horizontal typography, and sans-serif fonts allow the poster to be easily mimicked using web fonts. Design is also proportionate to a webpage.

» download poster exercise files here

As a class we will re-create this poster using HTML and CSS.