p2 ~ performance 🎭
prompt ✏️
in the first project, we explored how type and code work together to create a unique digital fabric. in our second project, we’ll introduce a new process that brings that fabric to life:
type + code = performance
villagers in animal crossing are non-playable characters that live in your town.
there are a lot of villagers. but despite their differences, they share a cohesive art style.
one of the ways the animal crossing achieves this consistency is by having villagers of the same species share a common body shape. individualized decorations are placed on top of this frame.
here are birds.
and here are dogs.
dingbat fonts are like this. they feature a series of illustrations that are visually cohesive but distinct. the most famous example of one such font is wingdings.
but this goes as far back as 1983 (and even further than that), to susan kare’s work for the original macs.
with modern technology (a.k.a. variable fonts), we can bring these fonts to life.
examples:
- →
- →
- →
- →
- →
technical requirements ⚙️
font 🔠
create a variable dingbat font in glyphs using components.
your font needs to contain the following glyphs:
- →uppercase letters
A–Z
note: these glyphs should NOT be actual letters! instead, you should be designing component illustrations in place of each glyph.
add at least one variable axis and font master to your font. modify your component shape on the second font master to turn your font into a variable font.
give your variable axis a meaningful name! it should have a plain-english name (like Transformation) and a four-letter, all caps code (like TRAN).
website 🌐
create an animated performative website using your dingbat font. your website should make use of each of the following CSS features at least once:
- →
:hoverand:activestates, combined with thetransitionproperty - →
@keyframesanimations - →
@mediaqueries, combined with thetransitionproperty
code your website either in demoland↗ or visual studio code↗.
publish your website via github pages↗.
the use of ai is not permitted for this assignment and will result in automatic failure.
JAVASCRIPT IS NOT ALLOWED FOR THIS PROJECT!!
creative challenges 🎨
develop a cohesive dingbat illustration system. 🦇
you are creating a series of unique illustrations, but they should feel cohesive in some way.
- →what is the system behind your font’s design?
- →what makes each glyph similar but different?
- →how do the glyphs transform in the second font master?
- →how are the transformations thematically related across all glyphs?
use the web as a digital animation tool. 🏃
use html and css to bring your font to life. think of the web as a performance space.
- →how are you staging your glyphs? (think composition, color, scale, etc.)
- →how are you choosing to animate your glyphs?
- →what is the meaning behind animations that are automatic and animations that are interactive?
- →what is the meaning behind the web performance? why does it exist (beyond the scope of this assignment)?
grading 💯
This project is worth 15% of your grade, so it’s graded out of 15 possible points. Here’s how that breaks down:
| category | points | assessment |
|---|---|---|
| font completion | 5 |
|
| website completion | 5 |
|
| critical review | 5 |
|
timeline ⏳
project kickoff
font due
🚫 Indigenous Peoples’ Day, no classes
website due, 🏆 crit!
revisions due