Typography

🌳 🌳 Prof. Ian Besler 🍂 🍂 🍂 🍂 RWU Graphic Design 🌳 🌳 DM+D+C 🌳 🌳

Agenda

  1. – Project 3 Final 🏔️ Project 4 Launch 🚀
    🚀 🚀 🚀
    Project 4: Interactive Digital Portfolio

    Professional Design & Creative Direction
    Portfolio Precedent 🤩 🤩 🤩

    Requirements (Minimum 16 Pages)

    1. Cover Page
    2. Design Statement
    3. Inspiration File
    4. Index
    5. Project 1
    6. Project 1
    7. Project 1
    8. Project 2
    9. Project 2
    10. Project 2
    11. Project 3
    12. Project 3
    13. Project 3
    14. Thumbnail Showcase
    15. Thank you!
    16. Copyright/Acknowledgements
      • ©2024 Your Name. All rights reserved.

      • DSGN.110 Introduction to Typography
      • Fall, 2024
      • Prof. Ian Besler
      • Graphic Design Program
      • Department of Media + Design + Communication
      • Roger Williams University
    Project 4 Launch
    📌 📌 📌
    Project 3 Design Critique Prep
    • Self-Reflection on Your Design Process 🤔 🤔 🤔
      • The concept theme for this project was:
        Syncretic Design Process
      • ↳ Combining strategies from multiple different creative disciplines and formal practices
    1. 💪 Strength – Identify an aspect of the project outcome that excites you
    2. 😓 Improvement – Identify an aspect of the project that you’d like to improve
    3. ⚠️ Resilience – Identify an aspect that project that demonstrates your resilience in the face of adversity
  2. – Project 3 Final Prep ✂️ 🖨️
    🦃 🦃 🦃
    Design Discourse Warm-Up
    1. “12 New Books Coming in November” The New York Times
  3. – Typographic Synthesis 🏔️ 🗺️ ⌨️
    Updated Project 3 Menu & Precedent Studies
  4. – Project 3 Launch 💥 🚀 🪐
    Fabrication Processes 🔨 🪛 🔧
  5. – Project 2 Final Deliverable 👏 👏 👏
    Bonus Demos 🎁 💐 🥳
    Raucous Cupcakes!!, by Ian Besler,
    RWU.DSGN Letter Puzzle, by Ian Besler,
    Breathing RWU.DSGN, by Ian Besler,
    Due : – Project 2 “Type/Trance”
    Design Brief

    Use open source creative coding techniques (HTML5 and CSS3) to create an asset package of three (3) different typographic motion design animations for the site-specific context of your chosen client.

    ✅ ✅ ✅ General Requirements
    • Submit one (1) ZIP archive folder with:
      • Three (3) root folders (i.e. “root1”, “root2”, and “root3”)
      • Each root folder must contain one (1) HTML file titled “index.html”
      • Each root folder must contain one (1) folder titled “css”
      • Each css folder must contain one (1) CSS file titled “stylesheet.css”
    • Minimum 60 (sixty) seconds animation duration, specified to loop forever
    • Refined looping animation (no jump-cuts or jarring transitions)
    🤖 🤖 🤖 Coding Requirements
    • HTML requirements:
      • Valid page structure elements <html>, <head>, <title>, <body>
      • <svg> for vector graphics
    • CSS requirements:
      • @keyframes Rule
      • animation property
    • Optional:
      • CSS :hover pseudo-class
      • CSS :nth-of-type() pseudo-class
      • CSS3 transition property
    ➔ ➔ ➔ Technical Resources
    • Technical Cheatsheet: CSS Web-Safe Fonts
    • Technical Cheatsheet: CSS Color Reference Guide
    • W3Schools: CSS Tutorial
    Assignment Submission Instructions
    • Use department naming standards for all of your work files and assignment submissions:
      • 24FA_DSGN110_01_Pr2_Lastname_Firstname.zip
  6. – SVGs and Animations
    🎃 👻 💀
    In-Class Demo: Bouncing Logo
    1. “The DVD Logo” The Office ()*
    2. Bouncing DVD Logo, by Tayeb Bayri
    3. Bouncing RWU.DSGN logo, by Ian Besler,
    Design Professional Engagement
    • Center for Book Arts, Small Press Incubator Lecture Series, Rachael Wilson (1pm - 2:30pm): ZOOM Link
    • Critical Making: Book Arts and Small Press Production
    🍂 🍂 🍂
    Design Discourse Warm-Up
    1. “21 New Books Coming in October” The New York Times
  7. : CSS @keyframes Rule and animation property
    In-Class Demo: Text Crawl 💬 💬 💬
    1. “RWU Text Crawl Marquee (Using SVG),” Ian Besler,
    2. “RWU.DSGN Text Crawl Marquee (Using CSS ::after),” Ian Besler,
  8. Week 8: Vectors, SVGs, and Code
    Lecture Slides 🛝 🛝 🛝 Vector Workspace, SVGs
    • Adobe Illustrator Basics
      • Raster/Bitmap workspaces, Vector workspaces
      • Type palette, Character palette, Kerning, Tracking
      • Selection, Direct Selection, Anchor Point Tool
      • Anchor Points, Paths, Bezier Curve Handles
      • SVG --> HTML
    Ian’s Type/Trance Project
    “Type/Trance (Arial),” Ian Besler,
    Work for Next Class Session (Due )
    Week 7: Fall Break 🍂 🎃 🍂
    Revised Mood Boards Due Next Class Session (Tues 10/15) 🏄‍♀️ 🏄‍♀️ 🏄‍♀️
    Combined Class Critiques
    • This is an opportunity to sharpen and clarify your Project 2: Type/Trance concept.
      • Market Sector 🏪 🏪 🏪: Identify the market sector for which you project is intended:
        • Activism, Awareness, Non-Profit Sector
        • Cultural Sector
        • Futurist/Fantasy/Speculative Sector
        • Hospitality Sector
        • Office/Professional Sector
        • Retail Sector
        • Spirituality/Faith Sector
        • Wellness/Health Sector
      • Passion Points ❤️‍🔥 ❤️‍🔥 ❤️‍🔥: Identify three (3) aspects of the project concept that are most interesting and exciting.
      • Pain Points ❤️‍🩹 ❤️‍🩹 ❤️‍🩹: Identify three (3) aspects of the project concept that are most challenging or anxiety-provoking.
      • Goals 🥅 🥅 🥅: Based on the market sector that you identified, clearly state one (1) goal of the project. What is most important for the communication to accomplish?
  9. Week 6: Coding for Vibes/Moods 😎 🐦‍⬛ 🌊
    Project 2 Design Ideation 🤔 💭 💡
    • Take twenty (20) minutes to brainstorm clients/sites that you might want to pursue for Project 2
    • Try to develop three (3) different project concepts across multiple different categories that we discussed:
      • Activism, Awareness, Non-Profit Sector
      • Cultural Sector
      • Futurist/Fantasy/Speculative Sector
      • Hospitality Sector
      • Office/Professional Sector
      • Retail Sector
      • Spirituality/Faith Sector
      • Wellness/Health Sector
    • Ideally this would be a place that you can visit within the next two (2) weeks to gather research and imagery
    • Search online to gather general history, brand assets, site plans, and other site-specific context that will be generative
    Download Sublime Text
    Lecture Slides 🛝 🛝 🛝 Web Browsers, HTML, Markup
    Coding for Vibes/Moods 😎 🐦‍⬛ 🌊
    “Type Motion Experiment #02 (Futura),” Ian Besler,
    Superb Bird-of-Paradise (Lophorina superba) “trance” dance, Cornell Lab of Ornithology,
    “13 perfect beach GIFs to calm you when you’re stressed,” Sammy Nickalls, Yahoo News,
    My Neighbor Totoro (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    Kiki’s Delivery Service (dir. Hayao Miyazaki, Studio Ghibli, Toei Company, Ltd.),
    Spirited Away (Susuwatari) (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    Spirited Away (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    The Wind Rises (dir. Hayao Miyazaki, Studio Ghibli, Toho Co., Ltd.),
    “After Dark 2.0,” (Berkeley Systems, Macintosh OS 7), , (Internet Archive)
  10. Week 5: Research Booklets
    Design News 🗞️ 📢 📰
  11. Week 4: Design Process Documentation 📸 📸 📸
    Step-by-Step Instructions: Animated GIFs 🎁 🎁 🎁
    Design Process Documentation 📸 📸 📸
    Printing in GHH G12 🖨 ️ 🖨 ️ 🖨 ️
    Due Thursday (9/19) Class Session ⚠️ ⚠️ ⚠️
    Design Methodologies: Page Layout 📄 📄 📄
  12. The Elements of Design ▢ ▣ ◩ 🌈 📏 🪨
    1. Field (Space) ▢
    2. Form (Shape, Line) ▣
    3. Value ◩
    4. Color 🌈
    5. Dimension 📏
    6. Texture 🪨
  13. Week 3: Critique & Design Research 🤔 💭 💬
    Book Binding 🧵 🪡 📚
    Due Tuesday (9/17) Class Session ⚠️ ⚠️ ⚠️
    The Elements of Design ▢ ▣ ◩ 🌈 📏 🪨
    1. Field (Space) ▢
    2. Form (Shape, Line) ▣
    3. Value ◩
    4. Color 🌈
    5. Dimension 📏
    6. Texture 🪨
    Book Cover Critique Activity 🤔 💭 💬
    “New Class, Who ‘Dis?” Presentations
  14. Week 2: Book Binding & Pagination 📑 🪡 📚
    Book Binding & Pagination 📑 🪡 📚
    • Book Binding & Pagination
    • As we look through the inspiration file above, I want to hear from each of you about your initial plan for Project 1 — what kind of binding methods, materials, sizes, or other considerations are you interested in pursuing for our first project?
    WARNING! GRADING! ⚠️ ⚠️ ⚠️
    • Grades and feedback will be posted on Bridges later today/tomorrow
    • Grades may be challenging ⚠️ ⚠️ ⚠️
    • I’m giving everyone the option to revise and resubmit Exercise 1.1 before next Thur. for a possible grade revision
    Digital Workflow
    • No PDFs larger than 10MB
    • Use department naming standard:
    • 24FA_DSGN110_01_Ex1_1_Lastname_Firstname.pdf
    Due Tuesday (9/10) Class Session ⚠️ ⚠️ ⚠️

  15. Participation Activity 1.1: “New Class, Who Dis’?”

    16. Tuesday, Week 2: Design Critique 📌 💭 🤩
    Group Critique 📌 💭 🤩
    1. Exercise 1.1: “See n’ Say”
    2. Design Critique is…
      • (Hopefully) Fun & casual
      • Never personal, never punative
      • Always respectful, always constructive
      • Tell us the story of your creative process
      • What’s working? What isn’t working?
    Design Research 🧐 🔬 🥼
    1. Type IRL (Arena Channel 🌀 🌀 🌀)
    2. Type IRL (Google Slides 🛝 🛝 🛝)
  16. Week 1: Introductions 👋 👋 👋
    Professor’s Greetings 👋 👋 👋
    Due Next Class Session ⚠️ ⚠️ ⚠️
    1. Exercise 1.1: “See n’ Say”
    Readings 📚 📚 📚
    1. “The Crystal Goblet, or Printing Should Be Invisible,” from The Crystal Goblet: Sixteen Essays on Typography by Beatrice Warde,
    2. “Why Typography Matters,” from Typography for Lawyers, 2nd Edition by Matthew Butterick, .
    Professional Designer Case Study 🧐 🧐 🧐
    • The World Through My Lens Series by Heejae Kim, -

Designers

Morning

Afternoon

Projects

  1. Project 1: “Type IRL” Research Booklet

    Design brief: Design a research booklet on the topic of “Type IRL”. This booklet will consist of photographs that you have taken from the local area, and additional research imagery, as well as typographic design studies derived from those photographs and images.

    Project Deliverable:

    • Printed and bound booklet
    • 32 pages (minimum)
    • b/w or color
    • Neatly and deliberately bound
  2. Project 2: “Type/Trance: Coding for Vibes/Moods
    Design Brief

    Use open-source creative coding techniques (i.e. HTML5 and CSS3) to create an asset package of three (3) different typographic motion design animations for the site-specific context of your chosen client.

    Project Deliverables

    Three (3) looping animations, 60 secs. each

    Client/site selection could include:
    Activism, Awareness, Non-Profit Sector
    • Pet rescue, pet adoption
    • Political campaign
    Cultural Sector
    Fantasy/Speculative Sector
    • The middle of nowhere
    • The moon
    • Mars
    Hospitality Sector
    • Restaurants, bars, lounges
    • Hotels
    • Cruise ships
    • Vineyards
    Office/Professional Sector
    • Airports
    • Corporate campus lobby
    Retail Sector
    • Dispensaries
    • Escape rooms
    • Pop-up boutiques (influencers, streetwear)
    Spirituality/Faith Sector
    • Church, mosque, temple, etc.
    Wellness/Health Sector
    • Gym
    • Hospitals, clinic, treatment centers
    • Pilates studio
    • Retirement facility
    • Spinning studio
    • Yoga studio
    • Hospice care facility
    Design Case Studies
    David Geffen Hall, 2x4, , Lincoln Center, New York City
  3. Project 3: “Type in Space”

    Project 3: “Type in Space”

    Design Brief

    Design a physical model at least 1 ft3 that embodies/critically interrogates advanced fabrication techniques and expert control of vector workspace components (anchor points, paths, and curve handles).

  4. Project 4: “Type in Conclussion”Interactive Digital Portfolio

Resources

Syllabus

Basic Course Information
Instructor Information
Catalog Description

This course introduces students to the fundamentals of typography, including letterform anatomy and structure, type classification, and communication in various contexts. The intellectual and psychological impact of typographic composition when presented alone or in combination with image is explored. Historical forces that motivated advances in typography are discussed. All projects are developed to industry standard presentation level with an emphasis on basic fabrication craftsmanship skills.

Delivery: Studio