Unit 01: 24T4 ~ Responsive Page

24 Typefaces, Talents, Terms and Tech Companies every student should know.

Students will learn to code by creating a long responsive webpage divided into horizontal “sections” for each of the terms. Sections Include: Term, Term Application, Technology, Technology Significance, Talent Quote, Talent Bio, Typeface, Type On-Screen “rule”, Typeface footer credits for whole page.

Assignment:
Each student will choose one of 24 talent/term/technology pairings, research them and then pulling from the best of on-screen typography develop a one page programmed page beautifully illustrating each.

TERM must be defined clearly
TYPEFACE must establish a family of typefaces (at least 3 fonts) for this assignment

  • Display Font
  • Body Text Font
  • Subhead Font style
  • Quotation style
  • Credits style
  • Footnotes style
  • Headline style

TECHNOLOGY / TECH COMPANY — must include either screen grab or logo from site. Must write a paragraph about the significance/contribution/value of this in screen-based design. Must include a hypertext link to site.
TALENT – Must include a photograph, a quote about or from person. Must include 500 words about person and significance to design

Typography must follow best practices including proper quotation marks, special characters, indentations, letter and line spacing, ligatures, dashes, must have at least 1 Google Font, at least 1 @font-face call
Must be all programmed in HTML, CSS — code needs to be clear and easily understood, must include at least one downloaded and converted font; files need to be organized correctly following file naming, folder organization/naming and CSS guidelines
All images need to be properly optimized
Must include proper references, citations and credits for all art, text, imagery, video or sound.
Each “section” must also be marked with an Anchor tag for easy navigation
Page must have a menu bar at the top
Css must use custom rules so not to conflict with rules other students may use

CODE Readings & Resources:
CSS3: The Missing Manual
http://www.w3schools.com/
https://www.codecademy.com/

Typographic exploration

UNIT 1 BEGINS:

Type on Screen: A Critical Guide for Designers, Writers, Developers & Students, and
a comparison of Robert Bringhurst’s The Elements of Typographic Style – but applied to the web in
The Elements of Typographic Style Applied to the Web by Richard Rutter

Ellen Lupton is a writer, curator, and graphic designer. She is director of the Graphic Design MFA program at Maryland Institute College of Art (MICA) in Baltimore, where she also serves as director of the Center for Design Thinking. As curator of contemporary design at Cooper-Hewitt, National Design Museum since 1992, she has produced numerous exhibitions and books, including Mechanical Brides: Women and Machines from Home to Office (1993), Mixing Messages: Graphic Design and Contemporary Culture (1996), Letters from the Avant-Garde (1996), and Skin: Surface, Substance + Design (2002).
Type on Screen is the definitive guide to using classic typographic concepts of form and structure to make dynamic compositions for screen-based applications. Covering a broad range of technologies—from electronic publications and websites to videos and mobile devices—this hands-on primer presents the latest information available to help designers make critical creative decisions, including how to choose typefaces for the screen, how to style beautiful, functional text and navigation, how to apply principles of animation to text, and how to generate new forms and experiences with code-based operations. Type on Screen is an essential design tool for anyone seeking clear and focused guidance about typography for the digital age.
Emily’s website: www.elupton.com

Websites
http://theuniversaltypeface.com/explore/gender/female
http://mckl.webtype.com/
http://whatacharacter.info/
http://practicaltypography.com/

Signups:
24 Typefaces, Talents, Terms and Tech Companies every student should know.

Terms: Talent: Technology/Org

  • CMS _Matt Mullenweg www.wordpress.com WYSIWYG 1/13
  • CSS _Rachel Nabors www.webanimationsweekly.com 1/20
  • Human-Centered Design _Greg Gibilisco www.maya.com 1/25
  • Design Thinking _Fred Dust www.ideo.com 1/25
  • Behavior design _Susan Weinschenk www.theteamw.com 1/25
  • Webfonts _Jeffery Veen www.Typekit.com 1/27
  • Responsive Type _Richard Rutter www.webtypography.net 2/1
  • Universal Typography _Tim Brown www.nicewebtype.com 2/3
  • Multisensory Type _Sarah Hyndman http://www.typetasting.com/ 2/3
  • Information Architecture _Chris Risdon www.adaptivepath.com 2/8
  • Data Visualization _Lev Manovich www.manovich.net 2/15
  • Design Strategy _Michael Rock www.2×4.org 2/17
  • User Interface (UI) _Jongmin Kim Form Follows Function 2/22
  • Prototyping _Clark Valberg www.invision.com 2/29
  • Wireframes 2/29
  • Personas _Taras Wayner www.rga.com 3/2
  • Style Tiles _Samantha Warren http://styletil.es/ 3/7
  • Responsive Design _Vitaly Friedman www.smashingmag.com 3/9
  • Media Queries _Phil Hawksworth www.rga.com/ 3/9
  • Patterns _Brad Frost https://bradfrost.github.io/this-is-responsive/ 3/14
  • Mobile First _Luke Wroblewski www.lukew.com 3/14
  • Material Design_ John Wiley design.google.com/videos/palette-perfect 3/16
  • User Experience (UX) _Josh Payton www.huge-design.com/ 3/30
  • Digital Product Design _Hans Neubert www.frog.com 4/4
  • CMS _Matt Mullenweg www.wordpress.com 4/11
  • Transmedia Design _Ian Adelman www.nytimes.com/projects/2012/snow-fall/ 4/13
  • Google Cardboard _David Coz 4/18