SI26 Declarative companions

From XPUB & Lens-Based wiki

This page develop an exercise started on the first day of the Declarations special issue.

Prompt, part 1: Describe

Describe in English a chosen companion object - an object that accompanies you in your daily life, in your practice, in your social life, that you cherish; or a space; This description must be:

  • Short, between 8 and 12 simple sentences, using simple words
  • Formal, describing the formal characteristics of the object (the shapes of its various parts; its uses; its possible movements; its sensitive ergonomics: hardness, texture, smell, weight, etc.)
  • Sensitive, talks about the personal bond we have with the object

etherpad of our descriptions

Prompt, part 2: Draw

Each CSS “sentence” - technically a pair of a property and a value inside a selector - is called a declaration.

Like the choice of words we decide to use to tell a story, these declarations can speak to our intentions and the narrative we place on the things we make on the web.

Starting with a description of a companion object written by someone else, draw the object in CSS.

  1. create an empty HTML document on your computer
  2. copy paste the description of someone else inside of the body
  3. you're allow to add as many HTML tag as you want, to break the text into different part, or add element, but the description have to keep the same order
  4. you have to style the description, using CSS, by using the description itself as design instruction
  • we don't guess and illustrate the object, but interpret one by one the descriptive phrases in CSS.
  • we play with metaphors and symbols, a single words can lead to a graphical principale, we don't have to translate everything.
  • we try not to do a mock-up, but to take it as a writing (CSS) exercise, embracing the declarative approach and to articulate form & content in new ways

here's a list of questions that can help

  • which element ends up inside which? (nested structure)
  • does movement become scroll, or cursor?
  • which part interact, which one are fixed?
  • what is soft, what is hard?
  • how things flow, like a river, like a grid?
  • does touch become click, or cursor?
  • does brilliance become color play or animated gradients?
  • does warmth become luminosity?
  • what is the heaviness of a website?
  • what is its speed?
  • what is its texture?

Ressources

Here some ressources on learning the basics of HTML & CSS

Drawing with CSS, by drawing what i probably mean is an articulation of form and content that can not be untangled easily: where CSS becomes content or HTML becomes forms

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=SI26_Declarative_companions&oldid=285778"