When we analyze what people see, we bring a perspective, in part based on where we are and what we do. Think about some bases for your perspective on the visible variables in presenting information, such as professional, cultural and biological.
When art critics get together they talk about Form and Structure and Meaning. When artists get together they talk about where you can buy cheap turpentine.
— Pablo Picasso
quoted by Steve McConnell, Code Complete (1993)
Modern philosophers have had little to say about the nature of aesthetic interest; … The concentration has been on the philosophy of art, and in particular on puzzles created by boring impostors like Duchamp: is this signed urinal a work of art? etc. This makes for an exceedingly dull literature, devoted to questions which can be answered in any way while leaving everything important exactly as it is.
—Roger Scruton, Modern Philosophy (1994), p. 589
Several famous pictures in the twentieth century illustrate the quest to depict the essence of things. The difficulty of doing so and the effort required to see the essence before depicting it can be found in a series of lithographs created by Picasso in a short period of time. There are essays about this series available online and many versions of pictures of them. This particular version is chronologically read first from left to right then top to bottom.
There are many ways to interpret the word essence in the above series and I leave that to the essays mentioned above, that discuss the bull as the essence of masculinity or of Spain itself. Let me just add this proposed Olympics poster, undoubtedly influenced by Picasso in particular and Cubism in general.
〈pause for color video〉
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.”
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).
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 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.)
Traditional typography for a given page of a book represents three widely recognized challenges, legibility (ability to distinguish each letterform), readability (of the entire page), and color (technical term used to mean ink density).
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.
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.
Let’s look at Pickering and Bell (2022) for layout advice, all web-based
Everything in web design is a box
Block elements \(\sim\) paragraph (takes all space)
Inline elements \(\sim\) word (takes only content space)
Eschew terms like “left” and “right” instead using start and end, e.g.,
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.
The web is responsive by default! Content makes
inline elements grow horizontally and
block elements grow vertically. Static representations are misleading!
makes calculating and anticipating box dimensions easier.
“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
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.”
Combining simple independent parts gives you more flexibility and leads to more efficiency than connecting everything through interitance to a shared origin.
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.
〈pause for illusion of life video〉
It’s all done with curves!
This slideshow was produced using
Fonts are League Gothic and Lato