alternative

Programming and Graphic Design

Code 〈–〉 Graphic design
>A ten-year relationship Written by Julie Blanc and Nolwenn Maudet
(Auszug: Seite 22- 28 aus: GRAPHISME EN FRANCE 2022, CREATION, TOOLS, RESEARCH)

The ethics of free and open source software, a profound transformation of practices All of these programming practices have a certain ethic in common, a programming culture that is not solely technical. The place occupied by programming in the field of graphic design today cannot be fully understood without understanding its connection to the culture of free software that originated in computing. In his 2012 text, Kévin Donnot already mentioned free software and hacking as a noteworthy aspect of programming. Ten years later, one can see that free and open source culture has spread widely through the world of digital graphic design.
One of the most important aspects of free software culture is the possibility of having access to the code of the program or software one is using. This implies a simultaneous rejection of tools and software whose mechanics cannot be inspected for the purposes of understanding both their potential and their limitations.
Thus graphic designers who work with programming often seek to use free and open source software, i.e., software whose license allows the inspection, modification, and duplication of the code On her website, graphic designer Amélie Dumont explains, for example, that she has “a very special interest for […] experimenting with code” in her projects, and that she has “only been working with free software since 2016”, as these two things go hand-in-hand. (https://www.amelie.tools/). This aspect, although fundamental, is not the only role played by open source culture, which has also impacted ways of working by encouraging collaboration.
In a graphic design environment that is extremely connected to the notion of the author, open source culture has encouraged the development of collectives.
We have already mentioned a number of them: Open Source Publishing (OSP)—a pioneer of open source graphic design, already mentioned ten years ago in Graphisme en France—is certainly one of the most familiar. Though its members have evolved in the meantime, the collective is still active and continues to pursue its approach. Other collectives have also emerged, such as Bonjour Monde, and Luuse. The use of programming facilitates both collaborative and simultaneous work, in particular through the use of Git version management software .
In computer science, version-control software allows to store files and all of the modifications that have been made to them. These are very efficient tools for managing the collaborative writing of source code, which, although not really adapted to graphic work .
Anthony Masure, “Visual Culture. Open Source Publishing, Git et le design graphique”, strabic.fr, 28 November 2014, http://strabic.fr/OSP-Visual-Culture, greatly simplifies collaboration. This facilitation is all the more surprising as the classic Adobe suite still struggles to allow collaborative editing of documents. At the same time, the open sharing of source code for projects created by graphic designers on platforms such as GitLab, or GitHub, clearly shows a willingness to be adopted and modified by others. For example, the typeface Avara, initially created by Raphaël Bastide, was explicitly designed to be reworked.
The possibilities of versioning, simultaneous work, and reworking of source code used in programming are then new approaches for graphic design. They can influence ways of working, and even graphic forms themselves, which are impacted by the possibility of observing the work of others at different moments in the design process.
Today, in the field of graphic design, the amount of resources available and shared under open source licenses on the Internet is considerable, ranging from pictograms to illustrations. However, it is more specifically the field of typography that has contributed primarily to the spread of free and open source culture among graphic designers, mainly in France and Belgium. Many typefaces are distributed under a free license, just like open source software, that allows them to be reused and modified Frank Adebiaye, “Licencier ès lettres”, Back Office, nº 1, Paris, Édition B42 and Fork Éditions, 2017. The adoption of royalty-free typefaces has thus strongly developed in schools and in professional practices, especially since 2010 and the foundation by Frank Adebiaye of the now-famous Velvetyne foundry. Nevertheless, it is regrettable that this enthusiastic use often occurs in the context of a consumer relationship, where fonts are chosen because they are freely available, without any real understanding of the issues at the heart of free and open source culture. This question is similar to the ones that are quite familiar, and widely discussed throughout the programming world, and that are unavoidable for graphic designers: though many consume open source software, the number who actively contribute to it is much smaller; what then of the spirit of community and autonomy of production advocated by free culture? This culture, with its strong ethical dimension, also raises other questions.
The rejection of non-open source tools can sometimes reach the level of mimicry when it comes to the culture of certain programmers, to the point of a paradoxical rejection by graphic designers of graphic interfaces.
Eric Schrijver, op. cit., and thus DTP software. Among other things, this contributes to aggravating the rupture between graphic designers who program and others who don’t. It is utopian to imagine that every graphic designer could code, despite the issues of open source culture being increasingly present in educational discourse. It is still necessary to invent a repertoire of intermediary tools that incorporate various modes of interaction (textual and/or graphic) Alexandre Leray and Stéphanie Vilayphiou, “About: Alan Kay, ‘A User Interface: a Personal View’”, Considering your tools. A reader for designers and developers, 2013, online, http://reader.lgru.net/texts/about-alan-kay-a-user-interface-a-personal-view/, and that make it possible to respond to the development of increasingly hybrid practices.

The Web introduces specific issues for graphic design It now seems that the Web, in its hybrid position of both publishing tool and medium, sits at the junction of specific issues that exist within a landscape of graphic designers who have adopted coding practices, and yet, at the same time, this is rarely the subject of discussion.
Over the last ten years, the increasing diversity of digital devices has led to the multiplication of both sizes and types of screens upon which web pages can be displayed (computers, tablets, smartphones, but also projectors, televisions, etc.). The conditions of consultation of any given site therefore vary considerably from one reader to another. One of the main characteristics of the design of a website is to adapt the design (functionalities, interactions, and layouts) to the different parameters or characteristics of the device on which the site will be displayed, as well as the environment in which it will be consulted.
The most familiar principle is the need to adapt the graphic design to the size of the screen, but it is theoretically possible that readers themselves could define their own display styles, something that has been possible since the early days of CSS. Thus, readers now have some control over the display of content, if only by changing the window size or by setting a “dark” mode on browsers. While graphic designers have become accustomed to having complete control over the final printed form, these different points mark a radical change in their approach to their discipline.
Miriam Eric Suzanne, CSS is Rad. Resilient design on an infinite canvas, 2020, online, https://www.miriamsuzanne.com/ speaking/css-rad/. In order to respond to this multiplicity of displays, the Web is based on a principle of separation of content and form between HTML and CSS, which we have already mentioned. Elements coded in HTML do not change, and it is in CSS that the way they are displayed according to the size of the screen is defined.
The same information is consulted from one device to another, but its formal components are organized differently so as to make navigation ergonomic, and reading optimized, in all circumstances. Design is now marked by a paradigm shift for graphic designers who must describe the possible behavior of elements using a range of principles proposed in web languages: templates, contextual style sheets, semantic structuring, the notion of flow, etc. However, the tools available today for designing visual prototypes for publication (Sketch, Figma, Adobe XD, Webflow) lack most of these principles because they are too closely modeled on DTP layout software dedicated to print and/or fixed media. Only the mastery of the technical aspect of the Web, and thus of these languages, makes it currently possible to understand its potential, and propose adapted and creative graphic forms.
Graphic designers must therefore accept a certain lack of control over the forms they produce in order to suit the intrinsically fluid and open character of the Web.
This design of graphic formatting, which forces one to think outside the limits of the page format, has profoundly transformed recent practices, while at the same time reviving ways of working on formatting that predate the appearance of DTP software, where graphic designers could only work from templates and style sheets. In a recent article published in the magazine Design Arts Médias, this hypothesis was formulated as follows:

“The notion of style sheet that gave rise to the name CSS is defined as ‘a set of rules that associate properties and stylistic values with the structural elements of a document, thus expressing the way in which the document is presented’. Håkon Wium Lie, Cascading Style Sheets, doctoral thesis, University of Oslo, 2005, p. 77. This is a definition that is entirely compatible with the production of printed books. It reminds us that before the advent of DTP, the work of designers and typographers consisted in providing the printer (lead typesetting) or the operator (phototypesetting) with a set of stylistic rules and constraints that defined the template of a book and the characteristics of the blocks of type. Coding in CSS consists of providing this same information to the web browser”. Julie Blanc, “Si Jan Tschichold avait connu les feuilles de style en cascade : plaidoyer pour une mise en page comme programme”, in Kim Sacks and Victor Guégan (dir.), Design Arts Medias, “Systèmes : logiques, graphies, matérialités”, August 2022, online, https://journal.dampress.org/issues/systemes-logiques-graphies-materialites/ si-jan-tschichold-avait-connu-les-feuilles-de-style-en-cascade-plaidoyer-pour-une-mise-en-pagecommeprogramme. In a second article in this same publication, we argued that in this sense, the DTP era was ultimately just a parenthesis in the history of graphic design, a specific moment during which there was no longer a strict separation between page layout and text layout. Nolwenn Maudet, “Une brève histoire des templates, entre autonomisation et contrôle des graphistes amateurs”, in Sacks and Guégan (dir.), ibid., https://journal.dampress.org/issues/systemes-logiques-graphies-materialites/une-breve-histoiredestemplates-entre-autonomisation-et-controle-des-graphistes-amateurs. Current programming practices, particularly when it comes to web technologies, therefore invite us to write a new page in the history of graphic design, rooted in the long history of its technical evolution. Gitlab profile, directories of the source codes of the works, design: Bonjour Monde.

Whereas ten years ago, code practices were relatively rare in the landscape of graphic design in France, they are much more present today, focusing on specific registers. Some of the projects cited in this text have now formed a school of thought, and the practices of OSP, LUST, and G.U.I. are widely cited by art school students as references. Thus, in recent years, a community and a culture of graphic design who use programming has formed, one that is relatively specific to Western Europe, with a real and growing synergy between France, Belgium, Switzerland, and Holland. While they experienced difficulties when it came to establishing a place in this landscape, web design and web-to-print now find a particular echo in these communities, forging a movement recognizable by its attention to “artisanal” practices supported by the challenges of open source culture, and those specific to the fluidity of the Web. So graphic designers code in order to be closer to the mediums for reading and communication with which they work. They contribute to extending the field of practices of graphic design, pursuing a movement that began in the era of phototypesetting and that already signaled “the gradual enlarging of [the typographer’s] prerogatives far beyond the simple management of the typographic sign, to the very extensive field of graphic design, associated in the second half of the century with a global mastery of visual communication, and the multiple forms of encounter between text and image”.
Olivier Lugon, “Le graphisme, ‘activité totale’: typographie, photographie, exposition”, in Collectif, Design graphique, les formes de l’histoire, Paris, Éditions B42 and Cnap, 2017, p. 79. At the same time, these coding practices contribute to overcoming approaches arising from graphic interface software, which led graphic designers to adopt computers as their main tool in the early 1990s. However, outside of the Web, this culture of programming in graphic design is struggling to develop, as it has a very limited audience. Apart from the aforementioned examples of Prototypo and TexTuring, programs and tools dedicated to a specific project or task are difficult for non-programmers to appropriate, as they remain attached to the direct manipulation that graphic interfaces allow. In order to open up digital culture to a greater number of graphic designers, it is therefore necessary to consider hybrid approaches that allow the relationships between code, tools, and graphic design to be understood in a collective manner.