2.17 | on-ground | bg img


Due Today:

  • Exercise – Menu (submit via D2L)
  • Warmup 4
  • Finish weekly readings assigned last class

For Today: Discuss: Background Images

  1. Background Images

Background Images

Class9_BgImgs

https://web.cassreese.com/wp-content/uploads/2024/02/image_insertion_exercise.zip

image_insertion_exercise

Background Images Resources 

Project 1: Typographic Storytelling -due 3.31

P1 Process – 2 Mind Maps: Explore 2 different potential content directions* by creating a mind map for each. Post images directly in Medium post. *Include a photograph of each mind map

2 Mood Boards (on 1 narrowed content choice) and post to same Medium post for Project 1 (resource: one page love)—remember to include typography and keywords!

Percy Houry Moodboard

 

Kaylee Rowland

18 Thumbnails: Draw 18 thumbnail sketches (6 desktop, 6 tablet, 6 mobile)

 

Preston Edmands

Paige Crawley


Examples:

“The right idea is often the opposite of the obvious.”
—Alex F. Osborn

source: Ellen Lupton, Graphic Design Thinking

Project 1 Timeline (tentative):

t 2.24 week 5 18 thumbs (6 mobile/6 tablet/6 desktop) + 2 mood boards (visual research) + 2 mind maps
tr 2.26
week 6 1 persona + storyboard + lo-fi mobile prototype for User Testing + identity sketches
t 3.3 week 6 2 style tiles
tr 3.5 week 7 mobile/tablet/desktop mockups (3 mockups total + must include logo) using selected style tile for homepage
t 3.17 week 7 revised mobile/tablet/desktop mockups + dev plan (wireframes)
tr3.31Final Project Due Date

Blog 2

10 pts – due March 3rd
Submit to D2L > Blog 2

We will introduce this during our Monday Weekly Review (view review video above for details)

As we begin Project 1: Typographic Storytelling, strong web design starts with intentional decisions, not decoration. This blog helps you narrow your project direction, analyze how content behaves on the web, begin thinking like a typographic storyteller, and identify areas that deserve your design attention.

Part 1: Content Direction (3 Points): Begin by narrowing your project focus. Address the following:

  1. Briefly describe 2 possible content directions for Project 1.
  2. Identify which direction you are currently leaning toward.
  3. Explain why this direction has strong potential for typographic storytelling.

    Consider: emotion tone, visual opportunities, narrative strength, audience engagement + demonstrate thoughtful selection (not random topic).

Example: If you’re choosing between “The Evolution of Jazz Music” and “Key Speeches That Changed History,” you might select the speeches topic because of its strong emotional tone and rich opportunities for typographic emphasis.

Part 2: Content + Message Analysis (4 Points): Now look more deeply at your chosen direction. Address the following:

  • Theme and Tone: What’s the overall theme? What tone should the design convey? (examples: restrained, energetic, contemplative, bold, quiet, etc.)
  • Key Messages: Identify 2-3 key messages your viewer should take away.
  • Audience Needs and Preferences: Who is the intended audience, and what will they likely need from the experience?

    Consider: reading behavior, attention span, emotional expectations, clarity needs. The goal is to show you are designing for someone, not just styling a page.

Example: For “Key Speeches That Changed History,” focusing on Martin Luther King Jr.’s “I Have a Dream” speech, the theme centers on equality and justice. An inspirational, purposeful tone would be appropriate. Key messages might include the power of peaceful protest and the enduring relevance of King’s words. The audience could include students, educators, and readers interested in civil rights history.

Part 3: Early Design Intent (2 Points): Based on your analysis, begin thinking visually. Address the following:

  • Typography: What kind of typographic voice might support this content? (not specific fonts yet… think qualities)
  • Imagery: What role do you expect imagery to play? Consider dominant vs. restrained, atmospheric vs. informational, supportive vs. primary storyteller
  • Design Attention Area: Identify one area you expect will require the most design care, such as: managing text density, balancing image + type, creating hierarchy, controlling white space, pacing the reading experience

Example: For the “I Have a Dream” speech, you might explore a strong, confident typographic voice to reflect the speech’s impact. Imagery could be used selectively to support key moments, while layout pacing could help emphasize important quotes.

Part 4: Web Inspiration Scan (1 Point): Visit OnePageLove.com and select one site that demonstrates strong typographic storytelling. In one focused paragraph, discuss:

  • How text and imagery are balanced
  • Whether imagery feels dominant or restrained
  • How white space is used to control pacing
  • Where hierarchy is especially clear (or unclear)

Focus on what the designer is doing intentionally, not whether you simply “like” the design. Goal: Strengthen your critical eye as you begin Project 1.

Note: The examples above model the level of thinking expected. Your topic and visual direction should be your own.

Content Direction – 3 pts
  • 3 pts: Two viable ideas + strong rationale + intentional thinking
  • 2 pts: Ideas present but rationale underdeveloped
  • 1 pt: Minimal or unclear direction
  • 0 pts: Missing or off-task
Content & Message Analysis – 4 pts
  • 4 pts: Theme, tone, messages, and audience clearly articulated with insight
  • 3 pts: Mostly clear but somewhat surface-level
  • 2 pts: Limited depth or missing one element
  • 1 pt: Minimal analysis
  • 0 pts: Missing
Early Design Intent – 2 pts
  • 2 pts: Thoughtful visual anticipation and clear design awareness
  • 1 pt: General or surface-level thinking
  • 0 pts: Missing or unclear
Web Inspiration Scan – 1 pt

1 pt: Specific, design-focused observation of selected site

0 pts: Vague, opinion-based, or missing

Due Next Class: Begin Blog 2 and P1 Process Work