Notes from Underground

A seven-week course to explore the versatility of HTML and CSS, critically analyze the unique characteristics of the web medium in comparison to print, and establish yourself as a thoughtful designer who considers ethics and sustainability.

Please arrive on time (13:30) for each course and get in touch as soon as you can to notify me of your absence or lateness

Course Overview

As a designer, I measure, translate, and produce. I’m guided by rules and restrictions. I reject speculation, interpretation, and self-expression. I am a designing machine.

Rebecca Wilkinson (2024), “The Designer as Machine“ on Perform—Produce. performproduce.com.

The rise of generative artificial intelligence, particularly marked by the release of ChatGPT in 2022, has fueled a growing disillusionment among designers. This sentiment stems from concerns about the determination of their real expertise and the looming threat of being gradually replaced by AIs in performing repetitive, tedious, and ultimately costly tasks that dominate their daily work.

Wouldn’t it be better if websites just made themselves?

The Grid website quoted in Silvio Lorusso (2024). What design can’t do: Essays on Design and Disillusion. Set Margins’ Publications.

Contemporary design is characterized by a division of labour and a reliance on monopolistic tools, which leaves designers dependent on an environment over which they have limited control. As cogs in an increasingly complex machine, designers must navigate the whims of a few major players in order to produce design objects (using tools like InDesign, Illustrator, or Figma) or promote them (via platforms such as Instagram or Behance). This situation has led to homogenization, where marginal, politicized, or countercultural forms of design risk becoming invisible.

Sure, “design is a job,” but one could convincingly argue that today the bulk of the designing is performed by casual users - who don’t even call it ‘design’! The increasingly common availability of digital tools has been crucial in this respect: not only did it create a more subtle awareness of design culture in the layperson, but it also altered the perception of the designers’ status and, in turn, their relationship to visual culture as a whole. When, in the late ’80s, the desktop publishing revolution took place, the designers’ reaction was mainly a defensive one against the new barbarians, that is, clueless non-professionals that were quickly catching up. “One of the great fears attached to the advent of the Macintosh and desktop publishing - explains Michael Rock - is that it has initiated others into our secret language; demystified our code of fonts, rags, picas, and leading.” This secret language was being converted into a function crystallised in software: (graphic) design had become semi-automated. With this shift, designers’ authoritativeness was partially eroded: the semi-automated designer also became a semi-professional one. Speaking about programmers, Ellen Ullman brutally describes the effects of professional demystification: “If regular people, called ‘users,’ can understand the task accomplished by your program, you will be paid less and held in lower esteem.”

Silvio Lorusso (2024). What design can’t do: Essays on Design and Disillusion. Set Margins’ Publications.

In response to these challenges, designers are compelled to create new creative processes that resist the technopositivism promoted by ultra-liberal structures. They are redefining their roles to attain greater autonomy and control over their work.

This path can be likened, in part, to that taken by writers, activists, and other artists, particularly between the 1960s and 1990s, who used the zine format to escape the constraints of institutionalized production. Zines provided a platform for expression, conveyed their concerns, and created independent spaces for community building.

In an era marked by the rapid centralization of corporate media, zines are independent and localized, coming out of cities, suburbs and small towns across the US, assembled on kitchen tables. They celebrate the everyperson in a world of celebrity. Losers in a society that rewards the best and the brightest. Rejecting the corporate dream of an atomized population broken down into discrete and instrumental target markets, zine writers form networks and forge communities around diverse identities and interests. Employed within the grim new economy of service, temporary, and “flexible” work, they redefine work, setting out their creative labor done on zines as a protest against the drudgery of working for another’s profit. […] I came to realize that, considered in their totality, zines weren’t the capricious ramblings of isolated cranks (though some certainly were), but the variegated voices of a subterranean world staking out its identity through the cracks of capitalism and in the shadows of the mass media.

Stephen Duncombe (2008). Notes from Underground: Zines and the Politics of Alternative Culture. Microcosm Pub.

Definitions of zines vary, but most share common characteristics: they are printed, self-published booklets produced in small runs by one or a few individuals with limited resources. Their purpose is not commercial, and they are generally not available through mainstream distribution channels. Instead, they are often found in niche bookshops or circulated through word of mouth in small communities and underground networks.

The golden age of zines spanned from the emergence of the Xerox photocopier in the 1960s—which allowed anyone to reproduce documents without relying on a commercial printer—until the 1990s, with the rise of personal computers and the internet, which opened up new means of global communication.

Zines “carry a certain charge with them” that differentiates them from other artistic forms. The medium allows for greater immediacy, as zines do not go through an editorial process. They are prone to including things like typos, misspellings and handwritten interpolations that give them a raw, unfinished feel, and that often lends itself to the confessional and conspiratorial. These qualities make zines a place where artists can feel greater freedom to refine and hone their voices.

Veronica Esposito (2023). ‘Still a very alive medium’: celebrating the radical history of zines. The Guardian. theguardian.com.

This low-cost, homemade format gained popularity, particularly among marginalized or discriminated communities, such as feminist, LGBTQ+, and racialized groups, as well as alternative cultures like anarchist, revolutionary, punk, or rave communities. These groups found a means of expression away from commercial production, driven by either choice or necessity. This freedom of format, tone, and theme inspired artists and designers wanting to break free from more conventional professional expressions.

Zines, like other forms of alternative or radical print media before them, operate with the central objective of evading - and, as a result, subverting - the engines and processes of mass media.

Sheila Liming (2010). Of Anarchy and Amateurism: Zine Publication and Print Dissent. The Journal of the Midwest Modern Language Association. Vol. 43, No. 2.

Although zines have become less common in the 21st century, they remain a subject of interest that raises fundamental questions about the connections between production, publishing, distribution, and design. They invite us to rethink our methods of creation and sharing, particularly in an era dominated by GAFAM and Adobe monopolies and the professionalization of the design field.

Sometimes you don’t want a website that you’ll have to maintain. You have other things to do. Why not consider your website a beautiful rock with a unique shape which you spent hours finding, only to throw it into the water until it hits the ocean floor? You will never know when it hits the floor, and you won’t care. Thankfully, rocks are plentiful and you can do this over and over again, if you like. You can throw as many websites as you want into the ocean. When an idea comes, find a rock and throw it.

Laurel Schwulst (2018), “My website is a shifting house next to a river of knowledge. What could yours be?” on The Creative Independent. thecreativeindependent.com.

Drawing inspiration from zine-makers and their approach, you are asked over the coming weeks to create a webzine—essentially, a zine in the form of a website—on a topic of your choice, using only primary web languages: HTML and CSS.

Assignment Brief

You will each create a webzine (a zine in the form of a website) consisting of three different issues. You have the freedom to choose the content, themes, amount of content, number of pages, tone, etc., for each issue. However, you must define your webzine’s distinctiveness, detailing what connects and differentiates the three issues.

Each of the three issues in your webzine should have unique features. A first issue must include, but is not limited to, an interview where you either ask or answer questions. A second issue should not contain any readable text. A third issue must include, but is not limited to, a text written by an author of your choice.

Adding a homepage that provides access to the three issues or introduces your webzine, among other things, is advisable.

Your webzine should be no more than 2MB (2,000KB) in total size and should be created using only HTML and CSS (JavaScript is not allowed).

Step 1

Define the webzine’s themes, formats, audiences, and content, and outline its three issues. What connects these three issues, and what makes them distinct? Additionally, clarify your role in the editorial production of the three issues. Will you select existing content and copy it? Will you create original content? Or will you invite contributors? Consider the overarching narrative you will develop with and around this content.

Step 2

Produce the content for the three issues, taking into account the unique characteristics of the digital format and the size and technological limitations. How do these limitations affect the webzine and its formats? Think about how these constraints can inspire your webzine’s design.

Step 3

Design the issues without using graphic design software. The zine format is inherently amateurish and seeks to break free from the constraints of professional publishing. What methods can you apply to reflect the graphic style of your issues? How do these methods affect your creations? HTML and CSS are recommended for use at this stage. Consider how the graphic layout of your content relates to the web medium. How does printed zines’ DIY, handcrafted appearance differ when presented online?

Step 4

Develop your webzine using HTML and CSS without Javascript or external libraries. Keep in mind that the entire website must be 2MB at most (2,000KB). While responsive design is not the primary focus, ensure your website is functional across different screen sizes. Think of the website as an interactive entity and consider how to guide visitors through the material you present. Remember that even an amateur website is fundamentally a graphic artefact; therefore, pay attention to microtypography and consider how your interface influences the reading and understanding of your content.

Learning Goals

  1. Develop a contemporary and critical understanding of the web and technology by exploring new and non-normative theories.
  2. Deepen technical and conceptual knowledge of the web and design through a disruptive, critical and experimental approach.
  3. Explore web tools and their unique constraints, and enhance understanding of the structures and paradigms specific to this medium.
  4. Overcome constraints by pushing the limits of what is possible, without fear of failure.
  5. Develop an open and generous attitude towards your fellow students, and approach design work in a collaborative manner that fosters mutual help.
  6. Propose innovative, creative, and unique design solutions that adhere to ethical, social, and sustainable principles.

Readings

You will be expected to read three texts during the block. During small group and individual talks, we will discuss and reflect on these texts in relation to your concepts, process and experiments in development.

  1. Ruben Pater (2021). Chapter “The Designer as Amateur” in Caps lock: How Capitalism Took Hold of Graphic Design, and how to Escape it. Valiz. Download the PDF.
  2. Michela Zoppi (2022), “Start Small to Touch the Wider” on Source Type, sourcetype.com.
  3. Rona Akbari (2018), “How to make a zine” on The Creative Independent. thecreativeindependent.com.

Schedule

Block 2 (3A)

04.11.2024

13:30

Introductory workshop “In Holland There Is a House“

05.11.2024

13:30

Lecture Introduction to the assignment

15:00

Individual talks How do you feel about coding, particularly for the web? Are you interested in or fascinated by digital culture? (all students, 5 minutes per student)

For week 2

Outline the editorial features of your webzine and create a content production schedule. Write a short piece (~200 words) describing one idea you have in response to the assignment, and how you think you can meet the technical constraints of the assignment.

11.11.2024

13:30

Lecture How to create a clean coding environment?

14:00

Lecture On feedback

14:30

Peer feedbacks Present your idea to your peers and share ways of improving it through collective talks

12.11.2024

13:30

Lecture What is image compression?

14:00

Group talks Clearly present your idea and emphasize the key points of your webzine, using the text you have written as a foundation (all students, 8 minutes per student)

For week 3

Read the three required texts from Caps Lock, Source Type and The Creative Independent. Refine one idea and produce visuals with HTML and CSS that provide a basic representation of the look and feel of your website.

18.11.2024

13:30

Lecture What is the web?

14:30

Open discussion How can I organize myself for working more efficiently?

15:00

Anonymous peer feedbacks Display the visuals you prepared to a group of students without providing any additional explanations, and provide feedback on the other students’ work

19.11.2024

13:30

Lecture Why shouldn’t I use “position: absolute”?

14:00

Group talks Present your visuals and indicate how you respond to the feedbacks you received from other students. Additionally, discuss any challenges you anticipate encountering during the coding of your website (all students, 8 minutes per student)

For week 4

Prepare a 8-minute presentation outlining your research and experiments. You will need to present visual materials and/or coded prototypes illustrating your idea and discuss the next steps in your process.

26.11.2024

9:30

Midway presentations Stan, Olivia, Alessia

10:45

Midway presentations Csenge, Yin, Feyo

12:00

Midway presentations Panna, Zoe, Dasha

13:30

Midway presentations Jasper, Dragos, Jae Hyun

14:45

Midway presentations Alexandre, Jeremy, Eva

16:00

Midway presentations Nikki, Federico

For week 5

Consider the feedback received during the midway presentation and continue coding your website, focusing on the overall structure and the key elements that highlight each issue’s uniqueness.

03.12.2024

9:30

Lecture What is a “brutalist” website?

10:00

Individual talks Present your website in its current coded state and discuss the obstacles faced, as well as potential solutions moving forward (9 students, 12 minutes per student)

13:30

Lecture How can the web be ethical?

14:00

Open discussion Where can I get assistance for coding issues, and how can I share my knowledge with fellow students?

14:30

Individual talks Present your website in its current coded state and discuss the obstacles faced, as well as potential solutions moving forward (8 students, 12 minutes per student)

For week 6

Refine your coded website. Follow the advice given during the first lecture on Week 2 and clean up your files. Additionally, select one coding issue to be discussed during individual talk.

09.12.2024

13:30

Lecture How to make my coding files smaller?

14:00

Individual talks Present what is one problem you don’t manage to solve and why (9 students, 12 minutes per student)

10.12.2024

13:30

Lecture How to publish a static HTML website?

14:00

Open discussion How can I enhance my presentations and what aspects should I concentrate on when presenting a website?

14:30

Individual talks Present what is one problem you don’t manage to solve and why (8 students, 12 minutes per student)

For week 7

Publish your website online and share me the link and a folder with your full website that shouldn’t be bigger than 2MB (2,000KB). Prepare a ten-minute final presentation of your work, focusing on your process, your research and your experiments. Fill in the Self-assessment form, based on the criteria listed below.

16.12.2024

13:30

Final presentations Alessia, Feyo, Jasper

14:30

Final presentations Csenge, Stan, Federico

15:30

Final presentations Dragos, Panna, Zoe

16:30

Final presentations Jeremy, Olivia, Guro

17.12.2024

13:30

Final presentations Jae Hyun, Nikki, Eva

14:30

Final presentations Alexandre, Yin, Dasha

15:30

Results and discussion

Assessments

Skills assessment constitutes a vital element of the Bachelor in Graphic Design’s Coding programme, meticulously crafted with consideration of its diverse objectives. Throughout the course, students experience the assessment process in various formats, each serving distinct purposes. These assessment phases can be categorized into three groups: Assessment as Learning, Assessment for Learning, and Assessment of Learning.

It is important to highlight that the foremost category, Assessment as Learning, holds the greatest significance, which may challenge conventional perceptions. The programme intends to equip students with the necessary tools to adopt a critical lens towards their own practices as well as those of their peers. The curriculum incorporates numerous opportunities for students to participate in self-evaluation and peer assessment, fostering mutual support and encouraging a culture of introspection.

The second category, Assessment for Learning, is primarily facilitated during individual talks and the Midway presentation. This process includes providing constructive feedback on students’ work while clarifying the tasks that remain to meet the learning objectives established at the outset of the block.

Finally, the third category, Assessment of Learning, is generally associated with the concept of evaluation. This category entails a comprehensive assessment of the student’s work relative to the previously outlined learning objectives. It is essential to note that this assessment focuses on the student’s response to a specific assignment rather than a judgment of the individual themselves.

The final assessment occurs following the submission of a self-assessment form and a 16-minute individual presentation, which includes a 10-minute presentation followed by a 6-minute discussion. The objective is to ensure accuracy and transparency regarding the criteria for assessment. To maintain neutrality and genuineness, the evaluation strictly relies on the content presented during the individual presentation, making it a decisive factor in determining the assessment outcome. Moreover, this evaluation process is inherently individual, aiming to appraise each student’s response to a specific task in a distinct context, guided by clear and established criteria, rather than facilitating comparisons between students or passing judgment on their personalities.

Outlined below are the various criteria that will be utilized in the final assessment of this assignment, categorized by competency.

Creative Ability

Capacity for Critical Reflection

Capacity for Growth and Innovation

Organizational Ability

Communicative Ability

External Awareness

Capacity for Collaboration