1.20 | on-ground | syllabus + intro

• Browsers | w3schools
• Jen’s Kitchen – Looking “under the hood”
• Try It – HTML Basic Document | w3schools
• History of Web Design Museum
• Web Design Inspiration
  • Color Monkey + CSS Design Awards
  • Ahadi Foundation + CSS Design Awards
  • Opium Wars + CSS Design Awards
  • Yorgos Lanthimos + CSS Design Awards

Blog 1: Learning to See Typographic Hierarchy

10 points  – due thursday 2.5 Peer commenting due: tuesday 2.9 Where? D2L Discussion Board Purpose: This first blog is a studio reflection, not a report. Before we write code or build layouts, designers need to recognize how hierarchy, structure, and typographic decisions guide attention and meaning. This assignment focuses on observation, vocabulary, and connecting design theory to real websites you already interact with.

1. 1. Part 1: Observing + Annotate – Visual Analysis (3 pts):

      Find one website where typography clearly organizes information (news/editorial/cultural/corporate/content-heavy sites work best).
      Include 1 screenshot (with source credit) and describe (1) What you notice first, second, and third. (2) How type size/weight/spacing/placement guides attention. (3) How hierarchy helps (or hinders) clarity and readability.

   2. Part 2: Vocabulary in Use (Naming What You See) (2 pts): Using course vocabulary (from videos, textbook readings, or class examples), describe how hierarchy is created. You might reference: Size and scale, Weight or contrast, Line length and spacing, Grouping or proximity, Alignment or rhythm. The goal here is not perfection, but practice: learning how to name design decisions rather than just reacting to them.

   3. Part 3: Connecting Structure to Meaning (Article Connection) (2 pts): After reading this UX Design article about the importance of semantic HTML, focus on one key takeaway or insight that resonated with you or influenced your thinking. In your own words: (1)  How does semantic structure support clarity or hierarchy? (2)  How might the website you chose benefit (or suffer) from strong or weak structure behind the scenes? You are not expected to understand all of the code yet … focus on conceptual connections, not technical details. Note: We are using this article because it connects semantic HTML… the meaning and structure of web content… to real user outcomes like accessibility and clarity, which directly supports your design thinking in this course.
   4. Part 4: Reflection & Application (2 pts): Reflect on how this exercise changed the way you look at websites. Consider: (1) Has this changed how you notice typography on the web? (2) Is there anything you now realize you’ve taken for granted? (3) What might you pay more attention to as you begin designing your own pages?
   5. Peer Engagement (1 pt). Share the blog on D2L Discussion > Blog 1. *Peer commenting is due within 48h after the blog is due (next Wednesday @noon). After submitting your blog, thoughtfully comment on two classmates’ posts. Focus on what you learned from their observations or how their example expanded your perspective.

evaluation (10 Points Total) 
Example Analysis (3 Points): Clear hierarchy analysis + screenshot w/source credit.
Vocabulary in Use (2 Points): Using course terms accurately (ex: scale, contrast, spacing, alignment, grouping)
Article Connection (2 Points): 1 takeaway + strong connection to structure/clarity/accessibilty
Personal Reflection (2 Points): Thoughtful reflection and how this will influence your design thinking.
Peer Commenting (1 Point): Engaging constructively with 2 peers' blogs within 48h.

All blogs must be a minimum of 250 words of your unique thought to receive credit, but may well exceed this minimum requirement. Include sources for any images or supporting information you reference from other locations. Blog entries are -2% for every 24 hours late. Incomplete blogs receive no credit.