Form Follows Algorithm

Digital Basics, HBK Braunschweig, WS 2025/26
About

Wie sieht algorithmische Gestaltung aus? Welche Tools prägen unsere gestalterische Praxis? Wann wird Gestaltung interaktiv? Und welche Formen kann eine digitale Publikation annehmen? Die Digitalen Grundlagen bieten einen Einblick in die digitalen Dimensionen gestalterischer Praxis. Im Zentrum steht die Auseinandersetzung mit Design-Systemen, Tools und Interaktion. Dabei lernen wir gestalterische Prozesse mithilfe von Code, Algorithmen und Parametern systematisch wie auch experimentell zu denken und umzusetzen.

Wir erforschen den Umgang mit digitalen Tools – von klassischer Software über KI-gestützte Systeme bis hin zu selbst entwickelten Web-Anwendungen. Außerdem beschäftigen wir uns mit Interfaces und Interaktivität im Web und untersuchen Typografie im digitalen Raum. Im Rahmen von Übungen, Workshops und kollaborativen Formaten erproben wir unterschiedliche technische und gestalterische Methoden. Die Einführung ins Gestalten mit Code eröffnet dabei nicht nur neue Möglichkeiten, sondern lässt bewusst Raum für Bugs, Glitches und Zufall als Teil des kreativen Prozesses.

Theoretische Inputs – etwa zu Plattform-Ökonomie, Open Source oder Cyberfeminismus – eröffnen Perspektiven auf gesellschaftliche Fragen unserer digitalen Realität. Ziel ist es, die Potenziale von Vernetzung und Personalisierung gestalterisch zu erkunden und zugleich Phänomene wie Filter-Bubbles, Bias in KI oder Automatisierung zu hinterfragen – um digitale Technologien nicht nur zu nutzen, sondern kritisch zu reflektieren und mitzugestalten.

Bringt bitte einen Computer mit.

Daten

MONDAY
10:00–11:00 Tutorium
13:00–13:45 Lunch
13:45–17:00 Basics
17:00–19:00 Stammtisch

TUESDAY
09:00–12:00 Basics
12:00–13:00 Lunch
15:15–18:00 Basics

WEDNESDAY
10:00–12:00 Basics
12:00–13:00 Lunch
13:00–16:00 Basics


DEADLINES
Exercises: Upload the current status at the end of each session.
Semester project: Upload the digital drawing tool until SUN | 25.01. | 23:59.
Documentation: Upload the documentation until SUN | 08.03.

20.10.–22.10.*
03.11.–05.11.
17.11.–19.11.
01.12.–03.12.
15.12.–17.12.
12.01.–14.01.
26.01.–28.01.
02.02.–04.02.*

* shared start / end together with Luzia Rux

Assignment
Exercises: In the first sessions, we’ll start with small exercises to experiment with systematic design methods, by creating analog and digital shapes. We’ll also get to know the basics of coding (HTML / CSS / JS) on the way. Upload photos and screenshots of the created shapes as well as the code from the exercises at the end of each session.

Semester project: Eventually, the assignment is to create your own digital drawing tool or shape generator. You can build upon the previous exercises to make shapes interactive or variable. What parameters can you change? What does the form react to?

Documentation: As a documentation, create a website that showcases each session through photos / screenshots, embedded / linked code and personal reflections.

DEADLINES
  • Exercises: Upload the current status at the end of each session.
  • Semester project: Upload your shape generator or drawing tool until SUN | 21.12. | 23:59.
  • Documentation: Upload the documentation until SUN | 08.03. | 23:59 and send me a mail with the link and the Modulbescheinigungen / Bewertungsprotokolle.


Create a digital drawing tool or shape generator. What forms can you create with it? What parameters can you change? How does the user interact with it?

Documentation

Create a website that showcases each session. How do you navigate to the different pages? How does you documentation look like? Is it chaotic like a thought process or organized and systematic?



DOCUMENTATION
For the documentation, create a website that showcases each session through photos / screenshots, embedded / linked code and personal reflections.

HOW TO DOCUMENT
  1. Exercise
  2. Idea
  3. Reflection (what worked well, what didn’t)
  4. Scans / Screenshots / Video
  5. Link to Code (we’ll upload our code to Github pages soon)

WHAT TO DOCUMENT
Document all exercises and assignments you made in the course (see list of tasks below).

1.1. Drawing Algorithms
  • Exercise: Drawing Algorithms
  • Exercise: Text Systems
  • Exercise: CSS Drawings
1.2. Variables & Parameters
  • Exercise: Morphological Box
  • Exercise: The Magic Triangle
1.3. Grids & Modules
  • Exercise: Grid-construction
  • Exercise: Grid-based type design
  • Exercise: CSS Grids
1.4. Digital Drawing Tools
  • Assignment: Digital drawing tools
1.5. Tools & Print
  • Assignment: Riso printing

DEADLINES
  • Documentation: Upload the documentation until SUN | 08.03. | 23:59 and send me a mail with the link and the Modulbescheinigungen / Bewertungsprotokolle.
Texts & Research
Where to start

Depending on your experience and preference, there are different points to start from:

Coding Resources
HTML
[References: HTML elements]
[Video: Basics of HTML by Laurel Schwulst]
[Web Essentials: HTML / CSS EinfĂĽhrung]
[CodeAcademy: Learn HTML tutorial]

CSS I
[References: CSS properties]
[Video: Basics of CSS by Laurel Schwulst]
[CodeAcademy: Learn CSS tutorial]

CSS II
[References: CSS Media Queries]
[References: CSS Animations]
[CodeAcademy: Learn indermediate CSS]

CSS Positioning
[Video: CSS Positioning]
CSS Flexbox
[Video: CSS Flexbox]
[References: A guide to flexbox]
[Game: Flexbox Froggy]
CSS Grid
[Video: CSS Grid]
[References: CSS Grid]
[Game: CSS Grid Garden]

JS
[W3: JS Intro]
[Codeacademy: JS Fundamentals]

ChatGPT
[ChatGPT: Study Mode]
[Research: ChatGPT May Be Eroding Critical Thinking Skills]
[Research: Gen AI Makes People More Productive and Less Motivated]

Tips for using ChatGPT
  1. Learn the basics first – without ChatGPT. You can only evaluate generated code, if you can read and understand it. Try things out and make mistakes.
  2. Learn how to debug independently. Read documentation, search Google/Stackoverflow, ask peers, log & inspect. Debugging is an important skill that has to be practiced.
  3. Ask for explanations instead of solutions. e.g. “Explain JS loops for a five-year old.”, “Can you guide me step by step with questions instead of just giving me the answer?”, “Give me three options with pros / cons, without implementing it. ”, “Can you give me hints about this error code, but don’t fix my code yet?”.
  4. Don’t blindly trust AI, reflect on bias and ethical implications. see [AI Myths] or [Data Feminism – Catherine D'Ignazio, Lauren F. Klein].

Contact
  1. Chat
    Here you can chat and ask questions.
    Slack
  2. GoogleDrive
    you can find the library and the starter kits here
    GoogleDrive
  3. NextCloud
    for uploading (assignments etc.) we use NextCloud [see Slack for URL]
  4. Sign-Up for Coding Support / Consultations
    consultations in case you need support with a coding problem or want to talk about your concept a bit longer
    GoogleDoc
  5. Contact
    Katharina Nejdl
    katharina.nejdl@googlemail.com
1.1. Drawing Algorithms
Monday 03.11.
Schedule subject to change, depending on group vibe. We can also agree on shorter days or cut some inputs. Let’s discuss!
13:45–16:00
13:45–14:00 | Intro
  • Check-In (name, pronouns, mood)
  • Course-Info
  • Topic-Info
  • Feelings & Code on paper / in the room
14:00–15:00 | Input: Sol LeWitt
Wall Drawing #46
Vertical lines, not straight, not touching, covering the wall evenly.

Wall Drawing #797
The first drafter has a black marker and makes an irregular horizontal line near the top of the wall. Then the second drafter tries to copy it (without touching it) using a red marker. The third drafter does the same, using a yellow marker. The fourth drafter does the same using a blue marker. Then the second drafter followed by the third and fourth copies the last line drawn until the bottom of the wall is reached.

Wall Drawing #295
Six white geometric figures (outlines) superimposed on a black wall.
[Geometric figures: circle, square, triangle, rectangles, trapezoids, parallelograms]


Further Readings
Sol LeWitt: A Wall Drawing Retrospective | MASS MoCA
Using ChatGPT to implement Sol LeWitt’s Wall Drawings

15:00–16:00 | Exercise: Drawing Algorithms
→ groups of 2
→ document all image / text versions

  1. draw an abstract shape [without showing it to your partner]
  2. write a description on how to draw the shape
  3. let your partner draw the shape from the description
  4. if the shape doesn’t match your drawing, change the description until it does
16:00–18:00
16:00–16:15 | Setup
  • Folder structure

Visual Studio Code Editor [Download]
  1. open folder in VS Code
  2. create index.html
    → write / select HTML5 structure
  3. open HTML page in browser
  4. edit, save & reload
Cheat Sheet: HTML
[Video: Basics of HTML by Laurel Schwulst]
[Web Essentials: HTML / CSS EinfĂĽhrung]
[References: HTML elements]
[CodeAcademy: Learn HTML tutorial]
  • file setup
    • structure: html, body, main, nav, ...
    • head (meta, title, css), js
    • HTML boilerplate
  • syntax
    <tag> content </tag>
  • hypertext
    <a href="http://link.com" target="_blank"> This is the hyperspace. </a>
  • tags
    • meta
    • div
      <div> The most used tag. </div>
    • content / semantics





    • inline text semantics






    • lists



    • media



      <img src="img_girl.jpg" alt="Girl in a jacket">
    • forms
      input, button, textarea, progress, select








      <input id="cheese" name="cheese" type="checkbox">
      <label for="cheese">Do you like cheese?</label>

      <button>Click here</button>
      <textarea placeholder="<Type here>></textarea>
      <progress></progress>

      <label for="pet-select">Choose a pet:</label>
      <select id="pet-select">
        <option value="cat">cat</option>
        <option value="dog">dog</option>
      </select>
    • properties
      e.g. class, id, src, alt, href, target, type, checked, placeholder, contenteditable
      <tag class="className1 className2" id="idName"> content </tag>
16:15–18:00 | Input: HTML
Create an index.html page and try out different tags. As a text you can use your drawing algorithm from this morning.

Starterkit
[Codesandbox: 01. Individual Paths / HTML]

18:00–19:00
18:00–19:00 | Stammtisch

Showcases
Hypertext Fiction: The Temple of No
Sebastian Ly Serena
Art References
Vera Molnár
Frider Nake
Reading List
Podcast: HTML energy
A Handmade Web – J.R. Carpenter
Laurel Schwulst’s Decade in Internet – RHIZOME

  • Game: Stille Post in Bildern
  • Check-out
Tuesday 04.11.
09:00–12:00
09:00–09:15 | Intro
  • Check-In
09:15–10:00 | Reading: Designing Systems

→ groups of 2-3
→ read & discuss one program [30min]
→ present program to group [15min]
10:00–10:15 | Setup II
Cheat Sheet: CSS I
[Video: Basics of CSS by Laurel Schwulst]
[References: CSS properties]
[CodeAcademy: Learn CSS tutorial]
  • HTML Recap
  • syntax
    div {
      color: red;
    }
  • where?
    • inline
    • inside style tag
    • external css file
  • .classes & #ids
    <div id="subtitle" class="text"> Some content inside. </div>
  • properties
    • color & size




      .container {
        width: 100px;
        width: 100%;
        width: 100vw;
      }
      .highlighted {
        background-color: red;
        background-color: rgb(100, 250, 0);
        background-color: rgba(100, 250, 0, 0.5);
        background-color: #0000FF;
      }
    • margin & padding


      body {
        margin: 0;
        padding: 10px 0;
        padding-left: 5px;
      }
    • border & shadows




      #left-container {
        border: 1px solid black;
      }
    • simple positioning




      #top {
        position: fixed;
        bottom: 0;
        right: 5px;
      }
    • text







      p {
        font-family: "Neue Haas Grotesk", Arial, Helvetica, sans-serif;
        font-size: 2em;
        text-align: justify;
        hyphens: auto;
        text-decoration: underline;
      }
    • :pseudo-classes

      div:hover {
        color: white;
        pointer: cursor;
      }
10:15–12:00 | Exercise: Text Systems
Download the starterkit and add css styling to the different text elements.

Starterkit
[Codesandbox: 02. Designing Programs / CSS]
[Github: 02. Designing Programs / CSS]

15:15–18:00
15:15–18:00 | Exercise: Text Systems
Download the starterkit and add css styling to the different text elements.

Starterkit
[Codesandbox: 02. Designing Programs / CSS]
[Github: 02. Designing Programs / CSS]
Showcases
→ Inspecting
On Practices / One

Wednesday 05.11.
10:00–12:00
10:00–10:15 | Intro
  • Check-In
  • Pick & sketch a shape
    (a face, an object, a room etc.)
10:15–12:00 | Exercise: CSS Drawings
Pick a shape and try to recreate it in HTML & CSS. (e.g. a face, an object, a room etc.)

Starterkit
[Codesandbox: 03. CSS Flower]
[Github: 03. CSS Flower]
[Reference: CSS Positioning]

Showcases
Rafaël Rozendaal
Painting with Pure CSS
13:00–16:00
Cheat Sheet: CSS II
[References: A guide to flexbox]
[Game: Flexbox froggy]
[CodeAcademy: Learn indermediate CSS]
  • HTML / CSS Recap
  • media queries
    when the browser is smaller than 800px (mobile / tablet):
    @media screen and (max-width: 800px) {
      .element {
        font-size: 18px;
      }
    }
    when the browser is between 600px and 1200px wide (desktop):
    @media screen and (min-width: 600px) and (max-width: 1200px){
      .element {
        font-size: 25px;
      }
    }
    when the browser doesn’t support hove (mobile):
    @media (hover: none){
      .element:hover {
        color: inherit;
      }
    }
  • advanced positioning
  • css-variables
    :root {
      --gapS: 5px;
      --gapM: 10px;
      --gapL: 20px;

      --highlightColor: #0000FF;
    }

    .element{
      color: var(--highlightColor);
      margin: var(--gapS);
    }
  • display
    .element {
      display: block;
    }

    .hidden {
      display: none;
    }
    see also [Reference: Display & Visibility]
  • transformation





    .element {
      transform: translate(50%, 50%);
    }
    .element {
      transform: translate(50%, 50%) rotateX(-12deg);
    }
  • transition & animation
    .element {
      width: 200px;
      transition: width 0.3s ease;
    }

    .element:hover {
      width: 500px;
    }
    .element {
      width: 200px;
      color: red;
      transition: width 0.3s, color 0.5s;
    }

    .element:hover {
      width: 500px;
      color: blue;
    }
    see also [Reference: CSS animations]
13:00–15:00 | Exercise: CSS Drawings
Pick a shape and try to recreate it in HTML & CSS. (e.g. a face, an object, a room etc.)

Starterkit
[Codesandbox: 04. Responsive Design / CSS]
[Codesandbox: 05. Animations / CSS]
[Github]

Showcases
“Pixel” – Responsive Illustrations
Little Fragments
AUX
15:00–16:00 | Plenum
  • Document & Upload
  • Present
  • Check-out
1.2. Variables & Parameters
Monday17.11.
13:45–17:00
13:45–14:00 | Intro
  • Check-In

Readings
Jacques Bertin
Jacques Bertin, Semiology of Graphics, 1967
  • [Book: Are visual systems a new thing? | Flexible Visual Systems – Martin Lorenz]
  • [Book: Parameterize | Form+Code – Casey Reas et al. ]
  • [Book: Nea Machina – Thomas & Martin Poschauko]
  • [Programme entwerfen – Karl Gerstner]
14:00–15:30 | Exercise: Morphological Box
Make your own morphological box:
  • Pick three parameters, like shape, amount and color.
  • Then pick three values for each of the parameters, for example: Shape: Circle, Triangle, and Square / Amounts: 3, 6, and 9 / Color: Red, Green, and Blue
  • Pick one of each parameter and combine them to create a shape. Repeat this until you have nine designs.

Further Readings:
[Flexible Visual Systems – Martin Lorenz]
The Morphological Box by Fritz Zwicky
Out of the Box with Karl Gerstner
A Box for Flexible Visual Systems

15:30–17:00 | Exercise: The Magic Triangle
Pick three parameters and produce ten designs. The parameters could be a color scheme, a type of (image) material, and a tool that helps you to cut out the (image) material. Which tool you use is completely up to you. You can use scissors, you can tear them up by hand, you can use photoshop or processing.

→ The Magic Triangle
17:00–19:00
17:00–19:00 | Stammtisch

Reading List
[Discourse: Weltentwerfen – Einordnung von Design Systemen in den politischen Kontext]
Book: Nea Machina – Thomas & Martin Poschauko

  • Game: Creating posters together (adding layer only)
  • Game: Association drawings
  • Check-out
Tuesday 18.11.
09:00–12:00
09:00–09:15 | Intro
  • Check-In
  • ChatGPT
09:15–12:00 | Exercise: Form follows interaction
Add variables to your CSS shape. How can the user interact or change the parameters?

Starterkit
[Codesandbox: 06. Interaction / JS]

Showcases
Hallo Festspiele 2017
Times New Arial
Talia Cotton

Debugging
  • Is your syntax correct? Check your browser’s console.
  • Error messages are your friends. Read them carefully, because usually they tell you where the problem is.
  • The console.log() is your friend. Log everything to make sure you have the right element / value / etc.
  • Try to run your code step by step (optimally logging all of them), to make sure things you think are working are actually working and to isolate the bug.
  • Did you save? Is your live-server working?
  • Try inspecting, googling or ask a friend.
Cheat Sheet: JS I
[References: JS intro]
[CodeAcademy: Introduction to Javascript]
  • where?
    • inline
    • inside script tag
    • external js file
  • logging
    console.log('hi');
  • variables modern JS: const / let
    const message = 'hello';
    console.log(message);
    let counter = 1;
    console.log(counter);

    counter = counter + 1;
    console.log(counter);
    old JS: var
    var message = 'hello';
    console.log(message);

    var counter = 1;
    console.log(counter);

    counter = counter + 1;
    console.log(counter);
  • data types
    const number = 1;
    const string = '1';
    const boolean = false;
    other data types in JS are e.g. undefined, null or objects
  • get elements by Id / className / ...
    const logo = document.getElementById('logo');
    const text = document.getElementsByClassName('text')[0];
  • change style / class with JS change style in JS:
    const logo = document.getElementById('logo');

    logo.style.backgroundColor = 'blue';
    add / remove / toggle classes in JS:
    const logo = document.getElementById('logo');

    logo.classList.add('hidden');
    change css-variable:
    let root = document.documentElement;

    root.style.setProperty('--highlightColor', 'red');
  • timeout function
    setTimeout(function(){
      console.log('Finally here!');
    }, 500);
  • innerHTML
    const heading = document.getElementById('heading');

    heading.innerHTML = 'New Heading';
  • eventListener: CLICK
    in JS:
    const logo = document.getElementById('logo');

    logo.addEventListener('click', function(){
      console.log('the user clicked on the logo');
    })
    in HTML / JS:
    <button onclick="myFunction()"> Click me! </button>
  • eventListener: MOUSEMOVE / TOUCHMOVE
    mousemove (desktop):
    const circle = document.getElementById('circle');

    document.body.addEventListener('mousemove', function(e){
      const mouseX = e.clientX;
      const mouseY = e.clientY;
      console.log(mouseX, mouseY);

      circle.style.top = mouseX + 'px';
      circle.style.left = mouseY + 'px';
    })
    touchmove (mobile):
    const circle = document.getElementById('circle');

    document.body.addEventListener('touchmove', function(e){
      const touch = e.touches[0];
      const touchX = touch.clientX;
      const touchY = touch.clientY;
      console.log(touchX, touchY);

      circle.style.top = touchX + 'px';
      circle.style.left = touchY + 'px';
    })
    link mouse position to css-variable
    const root = document.documentElement;

    document.body.addEventListener("mousemove", e => {
      root.style.setProperty('--mouse-x', e.clientX + 'px');
      root.style.setProperty('--mouse-y', e.clientY + 'px');
    });
15:15–18:00
15:15–18:00 | Exercise: Form follows interaction
Add variables to your CSS shape. How can the user interact or change the parameters?

Starterkit
[Codesandbox: 07. Shape Slider / JS]

Showcases
Pedagogy and Computation
Nam Huynh

Cheat Sheet: JS II
[References: JS Guide]
[CodeAcademy: Learn intermediate javascript]
  • functions
    function logHello() {
      console.log('Hello World!');
    }

    logHello();
    function with parameters:
    function logSomething(params) {
      console.log(params);
    }

    logSomething('Ciao World!');
  • if / else
    const number = 5;

    if(number < 5){
      console.log('smaller than five');
    } if else (number === 5) {
      console.log('equals five');
    } else {
      console.log('higher than five or undefined');
    }
    [Reference: Comparison & Logical Operators]
  • arrays
    const fruits = ['banana', 'apple', 'pear'];
    console.log(fruits[0]);
    const textElements = document.getElementsByClassName('text');
    console.log(textElements[0]);
  • for loops
    • for loop
      for (i = 0; i < 10; i++) {
        // do something
      }
      const fruits = ['banana', 'apple', 'pear'];

      for (i = 0; i < fruits.length; i++) {
        const fruit = fruits[i];
        console.log(i);
        console.log(fruit);
      }
    • for...of loop
      const fruits = ['banana', 'apple', 'pear'];

      for (const fruit of fruits) {
        console.log(fruit);
      }
    See also forEach and for...in:
    [Reference: for...of vs. for-loop]
    [Reference: forEach vs. for...in vs. for-loop]
  • objects
    const person = {
      firstName: "Jane",
      lastName: "Doe",
      age: 25,
      eyeColor: "brown"
    }; console.log(person.firstName);
  • JS libraries
Wednesday 19.11.
10:00–12:00
10:00–10:30 | Intro
  • Check-In

Expectation-Managment
Simple Complicated
Process Output
Prototype Code Perfect Wireframes / Design
Fun Frustration
10:30–12:00 | Wireframing
Draw a wireframe of a tool. [5min for each round]

  1. My tool is a ... generator. A generator for visuals, posters, illustrations, type, words etc.
  2. It is a tool for ... me / us / kids / professionals / ...
  3. The tool makes ... easier / harder. everything / one specific thing / drawing / decisions / ideas / working / napping ...
  4. What shape(s) do you see on the website? Do you see typography or a photo, do you see simple shapes (circle, square, triangle) or complex ones (organic, fractal, composite), do you see a brush or a grid?
  5. What variables does the tool have? / What rules does the shape follow? Try sketching the logic (e.g., "if x then y") alongside the shape. Is the rule visible to the user or hidden behind the form?
  6. How can I change the shape? What is the role of the user? Does it respond to sliders, user input, time of day, random chance, sensor data, or network activity? Is it generative, interactive, participatory? Is the user a co-creator, a manipulator, or just a spectator?
  7. How does the shape look on mobile / desktop?
  8. What emotions, associations, or references does the tool create? What does it communicate? Does it feel playful, chaotic, meditative, structured?
  9. What is the role of randomness vs. control? Which parts are deterministic and which are unpredictable?
  10. What happens when the shape breaks the rules? Imagine a glitch, error, or exception in the algorithm.
    How does the wireframe represent failure, randomness, or overflow?

→ One-Sentence-Concepts
13:00–16:00
13:00–15:00 | Input: Creative coding with p5.js
Download the starterkit and try to change the code. Read the documentation if you want to know more about p5.js.

Starterkit
[Codesandbox: 09. Drawing with p5.js / JS]

References
[p5.js Examples]
[p5.js References]
[Codeacademy: Learn p5.js]

[Youtube: The Coding Train / P5.JS]
[Youtube: Creative Coding with Patt Vira]
[p5.js: Tim Rodenbroeker Courses]

Debugging
  • Is your syntax correct? Check your browser’s console.
  • Error messages are your friends. Read them carefully, because usually they tell you where the problem is.
  • The console.log() is your friend. Log everything to make sure you have the right element / value / etc.
  • Try to run your code step by step (optimally logging all of them), to make sure things you think are working are actually working and to isolate the bug.
  • Did you save? Is your live-server working?
  • Try inspecting, googling or ask a friend.
15:00–16:00 | Plenum
  • Document & Upload
  • Present
  • Check-out
1.3. Grids & Modules
Monday01.12.
13:45–17:00
13:45–14:00 | Intro
14:00–15:30 | Input: Analyse Grids
Collect and analyse grids:
  • Find grids in your environment (print, web, architecture, nature, etc.) and document them (photo, sketch, screenshot, etc.).

Further Reading
[Grid Systems in Graphic Design, pp. 158–172 – Josef Müller-Brockmann, 1981]

15:30–17:00 | Exercise: Grid-construction
Create your own grids, stencils or modular shapes:
  • What are they based on?
  • What’s the level of complexity?
  • What are the variables and parameters?
  • Is it based in the analog or digital?
17:00–19:00
17:00–19:00 | Stammtisch
Tuesday 02.12.
09:00–12:00
09:00–09:15 | Intro
  • Check-In
09:15–12:00 | Exercise: Grid-based type design
  • grid construction
    laser-cutting, stamps, cardboard, etc.
    analog / digital
  • → groups
15:15–18:00
15:15–18:00 | Exercise: Grid-based type design
  • letter construction by using the grids, stencils, stamps etc.
    digital / analog
  • → digitize letters

References
Full Auto Foundry
[References: The Template – FVS]
[References: The Construction Kit – FVS]

Digitizing analog typefaces
Calligraphr
Handwrite
Glyphs Trial
Wednesday 03.12.
10:00–12:00
10:00–10:15 | Intro
  • Check-In

10:15–12:00 | Exercise: CSS Grids
Cheat Sheet: CSS Positioning
CSS Positioning
[Video: CSS Positioning]

CSS Flexbox
[Video: CSS Flexbox in 100 Seconds]
[Reference: A Complete Guide to Flexbox]
[Game: Flexbox froggy]

CSS Grid
[Video: Build a Classic Layout FAST in CSS Grid]
[Reference: A Complete Guide to Grid]
[Game: Grid Garden]

CSS 3D Perspective
[Reference: CSS 3D]
13:00–16:00
10:15–12:00 | Exercise: CSS Grids
15:00–16:00 | Plenum
  • Document & Upload
  • Present
  • Check-out
1.4. Digital Drawing Tools
MON / TUE / WED15.–17.12.
  • Working on your own digital drawing tools or shape generator.
  • Upload the digital tool until SUN | 21.12. | 23:59

Discourse: Breaking the grid
Vom “Design Methods Movement” der 1960er-Jahre (dem Beginn der Systematisierung des Designs) über die Postmoderne der 1970er-Jahre (die diese Systematisierung in Frage stellt) bis zur heutigen Zeit:
Nachdem wir den systemisch-systematischen Charakter von Design untersucht und verstanden haben, dass ein System keineswegs statisch ist, sind wir «in der Postmoderne angelangt, einer Periode der Desillusionierung». Wir wollten uns von der rebellischen Energie der ‹Nach›Moderne inspirieren lassen, die «einer Zeit außergewöhnlichen Vertrauens in die von Wissenschaft und Technologie versprochene strahlende Zukunft»[1] folgte.

Junge Designer:innen warfen Regeln über Bord und provozierten die funktionalistische, systemliebende Tradition der Moderne mit Spaß und Ignoranz: «Das einzige Prinzip, das den Fortschritt nicht behindert lautet: Alles ist möglich»[2]. Intellektuellen Rückenwind erhielten sie nicht zuletzt durch die philo-sophischen Diskurse über Dekonstruktion (Jacques Derrida), Autorenschaft (Roland Barthes) und Design (Katherine McCoy).

Paradoxerweise waren es gerade die ‹neuen Technologien›, mit denen sich auch Frauen (Zuzana Licko, April Greiman) emanzipierten, selbst in die Maschinenräume krochen und Impulse gaben, die heute wieder von Designer:innen wie Moniker und Anja Kaiser aufgenommen werden: «Wir müssen lernen, unsere Werkzeuge selbst zu gestalten. Schließlich ist der Computer genau das: Ein Werkzeug zum Entwickeln von Werkzeugen»[3].

Offensichtlich verliebte sich die nächste Generation in Technologien, die sie jedoch als einen offenen Werkzeugkasten im Sinne des kollektiven Widerstands verstand: «‹Wenn du eigenes Videomaterial zusammen mit dem Material eines anderen schneidest›… sieht [man] dann nicht mehr das fremdgesteuerte Individuum. Man sieht eine komplexe und widerständige Vielfalt.»[4]

[Express your self – Heike Grebin]

Discourse: Tools as a playgrounds

As designers and creatives, we all use the same or similar tools to create. Why? Convenience? Ease? Automation? At what point does the tool hinder creativity and thinking? How much of the tool creates the work and how much do we create the work? Do we lead the tools or do the tools lead us?

How can digital tools encourage play? How can code be used for expression? Can code be used in an organic way? Can digital tools encourage us to be more human?

As designers and creatives, we all use the same or similar tools to create. Why? Convenience? Ease? Automation? At what point does the tool hinder creativity and thinking? How much of the tool creates the work and how much do we create the work? Do we lead the tools or do the tools lead us?

When it comes to composition David Carson advocates for abandoning all grids in favour of making your own choices: “NEVER snap to guides.”

As AI and prompt-based creation becomes more widely accepted, questions of authorship arise, but have these questions always been relevent with the use digital tools and creative automation?

Are we working with or against the tools? Are the tools an extension of us or are we becoming extensions of the tools? Do we guide the tools, or are the tools guiding us? If we create the tools are we the complete authors?

INTL. Playground

References
1.5. Tools & Print
MON / TUE / WED12.–14.01.
  • Input: create your own collection of shapes, objects, etc. (e.g. from shapes from the form archive)
  • Exercise: sort, remix or combine your collection to create a composition
  • Output: Riso printing
1.6. Field Trip
MON / TUE / WED26.–28.01.
Infos coming soon!