Strategy Four: Digital Tailoring
Workshop with Dan Michaelson
04 – 08 May 2015
The Brief
Start by considering a website 960 pixels wide. Imagine it’s divided into 3 columns, with 18 pixel gutters in between, and 18 pixel margins around the page. Thus each column is 296 pixels wide.
We will suspend a content management system from this scaffold. Students will organize into pairs of two. Each pair will invent one “module” for our content management system. Your module should have a width 1, 2, or 3 columns wide (296 pixels, 610 pixels, or 924 pixels). Its height may be fixed, or variable depending on its content. You may also allow authors to choose the width (1, 2, or 3 columns).
Your module should probably accept basic input from content authors. Within the module, you must define one or more fields (a “schema”) for that input. Each field may be one of the following content types:
– Text (single line, with Markdown formatting)
– Text (multi line, with Markdown formatting)
– Checkbox to turn an option on or off
– Radio buttons to Choose One Option
– Image upload (PNG with transparency, JPG, or animated GIF)
– Video upload (MP4, compressed for web)
– Audio upload (MP3)
In theory a module can have any number of input fields. In practice it should probably have just a few. Then again, it need not have any input fields at all. For example, your module might always present a solid black circle of fixed dimensions and that’s it. We could call it “Black Circle Module”. Or, it might have radio buttons that let users choose the color of the circle, from a palette you define. We could call it “Circle Module”.
The design of your module must be very simple, and easy to achieve with HTML and CSS! Because, I’ll be programming it for you. And I’m not a very good programmer.
(This is called “minimizing your technical debt”.)
Give your module a name. Content authors will be able to add any combination of modules to a page, and rearrange them in any sequence. And within each module, authors will be able to populate whatever content is permitted by that type of module.
Goals of the system
We’ll use this system to make a website that illustrates cities. New pages (new cities) may be added to our website over time. And we’ll begin with a page about New York. You may wish to use the language of New York’s various urban systems as inspiration for the visual design, and content schema, of your module. Or you may wish to use Lausanne’s language, or your home city’s, or a synthesis. Once it’s deployed, your module will be used not by yourself but by other authors (your classmates, and future authors), to describe not only New York but also other cities. It may be used once or many times on a page, or not at all on a page if a city’s page doesn’t need it.
Questions to consider
Considering New York City as a network, how can you translate your observations there – including your observations of various networked languages there – into the invention of a design language that can hold other content?
Explore the relationship between parts and the whole in a collaboration between multiple designers, content authors, and end users. How can we let the meaning of the whole evolve as we invent – and continually revise – a basic kit of parts?
Explore the relationship between designer, author, and user in a system engineered to grow and evolve over time. What is your role as a designer in such a system? And how much freedom do you want to give to authors?
Explore the relationship between a “schema” or data structure, and a visual design.
What are some casual or unofficial structures in the system we’re working on? What are some more rigid or official structures? Could you consider this system as a kind of republic, and if so, how can you influence the qualities of this republic?
Workshop Outcome
Directional Module, Jagoda Wisniewska
The Directional Module slideshow gives a sense of the New York City grid system. Depending on which area the image was taken in, the slideshow animates in a different direction. For example, if one image was taken in the south and the next in the north, it would animate to give you the feeling that you are moving up the grid. The colours correspond with the colours of the subway lines in anarea.
Fragments Module, Simon Mager
My module aims to echo textures and surfaces I collected during our trip to New York. It shows only a fragment of a picture, in a rectangular area, thus emphasizing the texture of the image. The user is invited to explore the different parts of the image through moving the mouse. This creates a new and unexpected way of experiencing images on a website, because they start moving as soon as one moves the mouse. In fact, users begin exploring before they are aware, as there is unusual movement on the page which takes them time to realise they can control.
Look Up/Down Module, Johannes Bauer
While in New York I photographed a series of details and textures looking up and down while discovering the streets of Manhattan. I wanted my module to reflect these discoveries on the website. My module is activated by clicking on the text located in the corners of the website, activating the slideshow. There are two modules, on at the top and one at the bottom of the page. These modules act as a metaphor for the entire city: you have the very tops of sky scrapers, and the pavement and below, and the rest of the website is everything else in between.
Pick 3 Module, Ana Cuba
Module is based on 24 key words/tags that relate to the images I shot while in New York. As a user, you can click on three words/tags, which then dynamically generate a selection of images in a slideshow.
