Week 7

October 12

Donald Judd. Study for Otterlo Show Wall Sculpture. 1976.

Sketch review

We’ll start off today by looking at your Project 2: Spread sketches from last week. We’re going to break up into smaller groups again, so find your partner and group below and then… spread out around the room:

You will (now co-) present your project to your group, as before. Each group will have about 30 minutes among themselves, and then around 15 minutes with one of us (your instructors).

Your 30 minutes will give each project/pair about 10 minutes. Talk through your project—introducing your reading and then your design responses—and leave a few minutes for feedback from the other teams. Both partners should speak/present, for each project. Mind the clock!

Seeing everyone’s screen was a challenge last time—with fewer people in each group—so Slack each other links to your Figma documents and follow along with whoever is presenting on your individual laptops. We should see all your little cursors in there!

We will be moving from group to group, again. Have each other’s Figma documents up before we get to your group. When we get there, each project/pair will (briefly) show us their work and we’ll give feedback, with about 5 minutes for each team. Our goal again is to see everyone’s sketches!

We should wrap this up around 10, optimistically.

We’ll take our break here, after we’ve gotten around to everyone.

Flexbox!

We’ll get into some more modern (less frustrating) CSS layout:

Finally, flexbox

Let’s try it out

We’re going to recreate a classic Holy Grail layout together with flex—but also make it responsive.

Let’s start with this DOM, to get us going:

<!DOCTYPE html>
<html>
	<head>
		<title>Spread</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://typography-interaction.github.io/assets/styles/reset.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<header id="top">
			<h1>Spread</h1>
			<a href="https://typography-interaction.github.io">Typography and Interaction ↗</a>
		</header>
		<nav>
			<ul>
				<li><a href="#first">Producing meaning</a></li>
				<li><a href="#second">Cultural authenticity</a></li>
				<li><a href="#third">Performance spectre</a></li>
			</ul>
		</nav>
		<article>
			<h2 id="first">Producing meaning</h2>
			<p>Sustainable authoritarian institutional historical mass-produced intuitive utopia collage dogmatic. Ethnicity intimate art gender cultural authenticity the Canon consumer politics fragments interplay. Male gaze contemplation gendering consumerist memory pop art fabrication. Internal construct observers loss R. Mutt digital manifesto material. Performance consumption political interpretation authoritarian relational body art male-dominated.</p>
			<p>Homogenized media revelatory street art existence experimental phenomenon. Imitation graffiti displacement bodily experience repurposed materials navigate natural. Collective historicizing dogma violence .net art industrial translates displacement. Zine filmic male gaze disrupt martyr modern gallery space universal experience ethnography.</p>
			<h2 id="second">Cultural authenticity</h2>
			<p>Meditate sustainable social justice female form appropriate Marina Abramovic subculture tokenism. Sentient kitsch boundaries alienation psychic sensuality ethnicity. Poetic non-white absence utilitarian revelatory gallery space meta chaos. Emerge self-identify process lived experience collaborative popular culture blurred viewpoint new technologies.</p>
			<p>Heritage nothingness experiential body art politics blurred utopia. Duchamp cliché postmodern modern process erotica virtual reality reclaiming history. Experiential destabilize ritual utilitarian Fluxus ghosts horror. Imagination figment social dynamic contrast transformation normative real progress.</p>
			<h2 id="third">Performance spectre</h2>
			<p>Memory ethnicity community engagement revelatory impulsive handmade cliché inclusive artifacts. Consumerist outsider subversive mythology genius form poetic. Discipline embodiment pastiche mind's eye digital origin ethnicity cabinet of curiousities community engagement. Trans institutional chaos navigate consumerist mythology fetish eroticism utopia.</p>
			<p>Re-purposed materials normative mind's eye everyday explore love reclaimed materials observe awareness. Producing meaning conformity ready-made globalization spiritual misappropriated man-made interpersonal. Difference contrast producing meaning artifacts meta bespoke Glitch Art. Digital hyperspace loss conventional criticizes contemplation institutional Fountain.</p>
		</article>
		<aside>
			<h2>Institutional narrative</h2>
			<p>Internet explore gendering destabilize alternative individual sexist. Institutional narrative authentic blurred individual new media pop art. Psychic Keith Haring appropriate abstract Fluxus plurality interactive revelatory interrogates. History cultural authenticity contemplation future seeing technology street art sexual politics represents. Fountain misappropriated controversy existential racial politics universal unique perspective sensuality.</p>
		</aside>
		<footer>
			<p>© 2022 Experimental Phenomenon</p>
			<a href="#top">Top</a>
		</footer>
	</body>
</html>

We’re going to do this “live” (so we won’t write out all the steps), but here is our agenda:

  1. Start a new, shared repo

  2. Set up basic styles (mobile first)

    • Variables for type size/spacing on :root
    • Use for padding/spacing on the children
    • Differentiate link color/decoration
    • Scale our headings from base type size

  3. Flexbox pass (desktop)

    • Push header / footer links apart with space-between
    • Start with flex-wrap and widths for second row
    • Add main as container in the middle
    • Switch axis for body / main (column/row)
    • Use flex-grow / flex-shrink on article block
    • Force footer to bottom (for a short page)

  4. Limit layout width (very large screens)

    • Add containers for centered max-width, with flex
    • main / non-semantic div for header/footer
    • Use shared class across the three instances

For next week

Session recording

Session recording