2022-10-05

Week SEVEN

# lofi

## lofi from Buxton (2007)

My drawings have been described as pre-intentionalist, meaning that they were finished before the ideas for them had occurred to me. I shall not argue the point.

— James Thurber

• Color
• Typography
• Layout
• Animation

# Color

〈pause for color video〉

## Problem: App in video ceased to exist!

• Taken off App store
• Replaced with a paid website
• Seems to invalidate much of the reason for making it an iPad-only app
• I’ve written to the developers with no response

Color is an enormous concept, recently explored in the CHI community by Shugrina et al. (2019). It can be the subject of entire semester-long courses in several disciplines, including psychology, neurology, biology, and optical science.

I would like to limit my further discussion to two issues among the very many that should be of interest to you as designers. The first is education about color and the second is color words.

Josef Albers was without peer in educating art students about color in the twentieth century. His kit, often referred to as a book, is called Interaction of Color. Its most important sentence is perhaps “Color is the most relative medium.”

## Color word research

Following are quotations from color word research contributed by a previous student.

The website mentioned on the previous slide continued as follows:

A prominent doctrine in linguistics and anthropology holds that each language and culture expresses a unique world view by its particular way of slicing up reality into named categories. (See Sapir-Whorf hypothesis).

## Color names in computing

arstechnica on color name history ran a sad and funny article in Fall 2015 on the names of colors as used in computing, from the X Window System project in the eighties through contemporary CSS3.

# Typography

• You’re experiencing it right now!
• I’m using default typefaces!
• People have prejudices, e.g., Comic Sans, Papyrus
• It’s not just fonts!
• LaTeX and Adobe InDesign do the best spacing and line breaking

## How do people experience typography?

• Books
• Magazines
• Browser
• Apps
• All different! Yet much of typography is the same—defaults!

## Where does type come from?

• Designers with little typography education
• Software developers with no typography education
• Reading psychologists who do research

## Who can you rely on for advice?

Bringhurst (2004)

## Early Latin typography

Here is an example of type cut by Nicolas Jenson, a French typographer working in Venice, in 1469.

## Grand design

Third, Bringhurst begins with a Grand Design including some first principles that he summarizes as the services typography provides for the reader:

• invite the reader into the text
• reveal the tenor and meaning of the text
• clarify the structure and order of the text
• link the text with other existing elements
• induce a state of energetic repose, which is the ideal condition for reading

## Three concerns of typographers

• legibility: ability to read an individual letterform
• color: density / pattern of ink on the page

## typographic color

The start of Rutter’s last chapter!

## Changes in type over time

Typography began in earnest in the 1450s. (There had been typesetting in China 200 years before this but the art invented there was never communicated outside a small community and was not widely known until archeologists in the 20th century rediscovered the long-lost artifacts.)

## Bodoni stressed out the machine

This a sub-discipline of cognitive psychology that is the source for many studies of reading comprehension and comparisons of various contributors to reading comprehension, including typography.

In the film AI (2001), the character portrayed by Jude Law is invited to choose from a context sensitive menu by the holographic cartoon Dr. Know, as voiced by Robin Williams. When the Jude Law character asks about a concept, Dr. Know asks for the context in which he asks, since the concept has different meanings in different contexts.

art nouveau connotes fairy tales

basic writing connotes primal

small caps connotes officialdom

blackletter script connotes religion

## Chunking words, especially in menus

Hick’s law predicts the time it will take for a user to make a choice, given the number of choices. Hick’s law can be expressed similarly to Fitts’s Law as

$t = b \log_2 (n + 1)$

Here, $t$ is reaction time, $b$ is a constant to be found empirically, and $n$ is the number of choices with which the user is confronted. The extra $1$ represents the concept none of the above.

## The magic number seven ± 2

An important publication, Miller (1956), influenced thinking about appropriate chunk size forever after.

First, the span of absolute judgment and the span of immediate memory impose severe limitations on the amount of information that we are able to receive, process, and remember. By organizing the stimulus input simultaneously into several dimensions and successively into a sequence of chunks, we manage to break (or at least stretch) this informational bottleneck.

# Layout

• Layout on a twelve column grid
• Easy to reduce to 9,6 or 8,4 for responsiveness
• But Pickering and Bell (2022) advises against this
• They claim it’s too rigid
• Instead, they urge you to learn a dozen reusable components and endlessly combine them

## CSS

Let’s look at Pickering and Bell (2022) for layout advice, all web-based

Everything in web design is a box

## Chrome paragraphs

p {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

## Chrome unordered lists

ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

## Display property

Block elements $\sim$ paragraph (takes all space)

Inline elements $\sim$ word (takes only content space)

## Logical properties

Eschew terms like “left” and “right” instead using start and end, e.g.,

.icon {
margin-inline-end: 0.5em;
}

## Formatting contexts

display: flex or display: grid causes a <div> to continue to behave like a block, but changes its child elements’ behavior. Now the flow direction changes from vertical to horizontal, as the child elements distribute themselves horizontally. Composite layouts consist of nested formatting contexts.

## Content in boxes

The web is responsive by default! Content makes inline elements grow horizontally and block elements grow vertically. Static representations are misleading!

## Box sizing

* {
box-sizing: border-box;
}

makes calculating and anticipating box dimensions easier.

## Exception

* {
box-sizing: border-box;
}
center-l {
box-sizing: content-box;
}

## Lesson:

“Dimensions of elements should be largely derived from their inner content and outer context. When we try to prescribe dimensions, things tend to go amiss. All we should be doing as visual designers is making suggestions as to how the layout should take shape. We might, for instance, apply a min-height or proffer a flex-basis.

The CSS of suggestion is at the heart of algorithmic layout design. Instead of telling browsers what to do, we allow browsers to make their own calculations, and draw their own conclusions, to best suit the user, their screen, and device. Nobody should experience obscured content under any circumstances.”

## Composition over inheritance

Combining simple independent parts gives you more flexibility and leads to more efficiency than connecting everything through interitance to a shared origin.

## The wrong way: inherited properties

.dialog {
/* ... */
}

/* ... */
}

.dialog_body {
/* ... */
}

.dialog_foot {
/* ... */
}

## Why?

Because with the .dialog classes, you’ll have a lot of repeated code—CSS bloat.

But with the same layout primitives, you can build other structures.

• The stack
• The box
• The center
• The cluster
• The sidebar
• The switcher
• The cover
• The grid
• The frame
• The reel
• The imposter
• The icon

## Example: The stack

Problem

p {
margin-bottom: 1.5rem;
}

Solution

.stack > * + * {
margin-block-start: 1.5rem;
}

# Animation

## Twelve Principles of Animation

1. Squash and stretch
2. Anticipation
3. Staging
4. Straight ahead action and pose to pose
5. Follow through and overlapping action
6. Slow in and slow out
1. Arc
2. Secondary action
3. Timing
4. Exaggeration
5. Solid drawing
6. Appeal

〈pause for illusion of life video〉

## Things you can animate

• Position
• Scale
• Rotate
• Origin
• Opacity

It’s all done with curves!

# References

Bringhurst, Robert. 2004. The Elements of Typographic Style, Version 3.0. Point Roberts, WA: Hartley & Marks.
Buxton, Bill. 2007. Sketching User Experiences: Getting the Design Right and the Right Design. San Francisco: Morgan Kaufman.
Goldschmidt, G. 1991. “The Dialectics of Sketching.” Creativity Research Journal 4 (2): 123–43.
Miller, George A. 1956. “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information.” The Psychological Review 63: 81–97.
Pickering, Heydon, and Andy Bell. 2022. “Every Layout: Relearn CSS Layout by Example, 3rd Ed.” https://every-layout.dev.
Reinhart, Alex. 2015. Statistics Done Wrong: The Woefully Complete Guide. San Francisco, CA: No Starch Press.
Rutter, Richard. 2017. Web Typography. Brighton, UK: Ampersand Type.
Shugrina, Maria, Wenjia Zhang, Fanny Chevalier, Sanja Fidler, and Karan Singh. 2019. “Color Builder: A Direct Manipulation Interface for Versatile Color Theme Authoring.” In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, 1–12. CHI ’19. New York, NY, USA: Association for Computing Machinery. https://doi.org/10.1145/3290605.3300686.
Wass, John A. 2015. “Book Review: Statistics Done Wrong.” Scientific Computing.

END

# Colophon

This slideshow was produced using quarto

Fonts are League Gothic and Lato