TIC assignment one

Identify technologies to be used in production, explore their function/technical makeup, and note relevant examples of the technologies in use, and latest evolution and developments.


1.1 Adobe Digital Publishing Suite (DPS)

1.2 Generative Typography

1.3 Conductive Ink



1.1 Adobe Digital Publishing Suite

Fig. 1: What is DPS (video) (Adobe TV, 2014)


Adobe Digital Publishing Suite (DPS) was developed initially as a suite of extensions and tools to ‘plug-in’ to Adobe InDesign, the industry-standard print layout software. The experiment began in 2010 when Adobe, in association with Wired magazine, developed the then unnamed DPS tools to deliver the Wired Reader app for iPad. DPS offered print designers unfamiliar with coding and programming a means to deliver digital content to mobile devices in the form of content-centred apps. It meant that traditional publishing houses could offer their print content digitally (originally to iPad only) without out-sourcing or needing to hire additional staff. As reported on Adobe’s blog at the time:

‘…because this Digital Magazine Solution from Adobe integrates tightly with Creative Suite 5, publishers can leverage their existing investment and designer skills to create these compelling experiences”. (Dickson, 2010)


Fig. 2: Transforming the Magazine Experience at Wired (video) (Adobe TV, 2010)


DPS has evolved into a set of turnkey hosted services that allow publishers to more easily create robust, interactive digital publications across iOS, Android and Windows. Their aim is to enable readers ‘to experience the design fidelity of a print magazine married with the interactivity of digital’. (Dickson, 2010)

Along with the traditional layout and typographic strengths of InDesign, DPS offers a number of features which support interactivity or interactive content in publications including: hyperlinks, buttons, audio, video, html overlays, multi-state objects, pan and zoom, panoramas, image sequences and scrollable frames (adobe.com, 2015).

Although used primarily to develop and publish magazine-style apps, digital publishing is beginning to emerge as a medium in its own right, as designers familiarise themselves with its tools to the point of co-opting them and recognise/exploit its strengths as an alternative story-telling medium.

The digital magazine DONE is the MA graduation project of Johannes Henseler at FH Düsseldorf. The interactive magazine was made for iPad and Android with Adobe’s Digital Publishing Suite for InDesign and enriched with HTML.

Fig. 3: ‘DONE — Explorations in Art, Crafts and Science’  (video) (Eckert, 2011)

Fig. 4: ‘Nil 06 Ticinese’ (video) (Lingua et al., 2014)

Although ‘NIL06 Ticinese’ is described as a digital magazine for iPad about a specific Milan neighborhood named Ticinese, it is essentially a non-linear documentary.


1.2 Generative Typography

Technology in this context refers to a procedure rather than a device or piece of software. In a video made for The Type Directors Club, Natasha Jen of Pentagram states that generative typography can “potentially expand the experience of reading” as it “merge(s) seeing and reading simultaneously, so information can become pictorial… (changing) the experience of understanding a particular piece of content” (The Type Directors Club, 2013).

Essentially, its principles are the same as those of generative art, whereby an element or elements (in this case typography) is manipulated by autonomous rules set by the designer to influence an evolving rendering of the type.

One of the fundamental differences between generative typography and kinetic typography would seem to be a reliance on data.

“Generative or “code-driven” typography is emerging as part of a new field of generative design, in which all aspects of on-screen design are becoming responsive to live streams of data. Generative typefaces can have “data embedded’ inside the letterforms, which govern responses to particular settings and interactions.” (Brownie 2015, p.62)

Fig. 5: On Generative Typography. (video) (The Type Directors Club, 2014).

1.2.1 Typography and Automation

In October 2012, Fabian Morón Zirfas of the University of Applied Sciences Potsdam, Germany, ran a two-week workshop entitled ‘Typography and Automation’.

“The goal was to learn the basics of JavaScript for Adobe applications to apply this in automated layouts and generative art. Bring raw text into shape by rules.” (Morón Zirfas, 2013)

Essentially ‘Typography and Automation’ is a hack of Adobe InDesign’s scripting feature, which is ordinarily used to automate tasks. JavaScript or ExtendScript (a scripting language developed by Adobe Systems, similar to JavaScript, intended for use with Creative Suite products) is used to create a series of rules to produce generative typographic layouts within Adobe InDesign.

Projekt_AUFMACHER_ZWIRBEL by Johanna Hoeflich

Projekt_AUFMACHER_ZWIRBEL by Johanna Hoeflich

 Fig. 6: Projekt_AUFMACHER_ZWIRBEL (Hoeflich, 2012)

Johanna Hoeflich studying on the masters programme at the Design Faculty of Potsdam, created a number of scripts, which concentrated on replicating and transforming typographic characters, including Projekt_AUFMACHER_ZWIRBEL.

“The script will generate an image of the character you are writing into the according line of the code. The typographic image is made by duplicating, moving and rotating your character.” (Hoeflich, 2012)


1.2.2  Processing 2

Processing began as a project to help introduce programming skills in a visual way. According to its website, Processing is “a programming language, development environment, and online community…(with a view to promoting) software literacy, particularly within the visual arts, and visual literacy within technology.” (Processing.org, 2015)

As an open-source programming language and development environment (sketchbook), Processing is popular among practitioners in the visual arts and creative and new media fields interested in creating instantiations of generative art and design. The resultant programmes may be viewed through the Processing application itself, or in web pages through Processing.js (negating the need for plug-ins) using HTML5 Canvas and WebGL (Java Script API) for in-browser rendering.

Russian graphic design student, Vladimir V. Kuchinov used Processing to influence the typographic layout of ‘The Great Gatsby’, rendering the manuscript much like a musical score. In ‘Generative Gatsby’, Kuchinov (2013) took nine Jazz standards from the era, and assigned each instrument a typeface. He analysed each note for qualities such as pitch, duration, and length, and used this data to position each word of Gatsby’s nine chapters as an XY coordinate on the page (Brownlee, 2013).

Fig. 7: Close-up of cover of Generative Gatsby (Kuchinov, 2013)

Fig. 7: Close-up of cover of Generative Gatsby (Kuchinov, 2013)

Fig. 8: Close-up of text within Generative Gatsby (Kuchinov, 2013)

Fig. 8: Close-up of text within Generative Gatsby (Kuchinov, 2013)


Fig. 9: Generative Gatsby 3 (Kuchinov, 2013)

Fig. 9: Generative Gatsby 3 (Kuchinov, 2013)


Fig. 10: Generative Gatsby 4 (Kuchinov, 2013)

Fig. 10: Generative Gatsby 4 (Kuchinov, 2013)


Fig. 11: Generative Gatsby 5 (Kuchinov, 2013)

Fig. 11: Generative Gatsby 5 (Kuchinov, 2013)

For their international typography competition call for entries campaign (TDC60), The Type Directors Club commissioned Collins agency to create an ‘experiential campaign’ that would posit the future of typography.

“Our campaign blended information visualization, context-aware computing, co-creation, branded content, interactive projections, and some design philosophy to introduce the design community to typography’s future. In doing so, we hoped to challenge not only their visual understanding of typography, but their philosophical understanding of what typography is and what role it serves.” (Collins, 2014)

Through Processing, typography was made responsive to various environmental factors (data), which led to the text not only being generative typography, but, according to Prem Krishnamurthy, it became typography that possesses intelligence and a kind of consciousness (Type Directors Club, 2014).

 Fig. 12: Type Directors Club Experiential Campaign (video) (Collins, 2014)



1.3 Conductive Ink

In 2009 a conductive body paint was developed by Becky Pilditch, Matt Johnson, Isabel Lizardi and Bibi Nelson from the department of industrial design engineering at the Royal College of Art as part of their graduate project. It was made from a carbon-based, water-soluble formula, which can be brushed, stamped or sprayed onto the body.

“This project began as an experimental investigation of parasitic technology, and developed into an exploration of the possibilities for bridging the gap between electronics and the body. “Bare” is an innovative and unique material that allows users to interface with electronic devices directly through gesture, movement and touch… A thorough study of the history of body art and ornamentation led to the creation of an ink that humanizes wearable technologies and provides a sensuous method of applying electronics to the body through customized circuitry.” (Aec.at, 2009)

DJ and producer Calvin Harris collaborated on a project with Bare Conductive, with dancers whose movements triggered loops from ‘Ready for the Weekend’.

Fig. 13: Calvin Harris – Humanthesizer – the first human synth (video) (Bare Conductive, 2009)

Novalia, a company that specialises in combining “conductive print and capacitive touch to create smart surfaces that act as sensors and speakers” (Novalia.co.uk, 2015), used Bare Conductive Ink in their projects, most notably Novalia’s Drum Poster. Essentially, their aim is to bring some digital capacities to print and (mostly) paper interfaces. This tech is in its infancy and is primarily used to initialize audio files. There have been moves to introduce Wi-Fi capabilities, but until paper can display video or moving pixels, the likelihood of it becoming a ubiquitous medium is small. (There are moves to develop this kind of display in fields such as E-ink and OLED).

Fig. 14: Countours – MAK Fashion Lab #02: Scientific Skin (Bare Conductive, 2013)

‘Scientific Skin’ by Fabio Antinori and Alicja Pytlewska is an interactive installation, which invites viewers to approach and touch three interactive screen prints measuring over two metres in height. The piece was designed to explore the relationship between interface, interaction, printing and sound. The output of the interaction was a generative soundscape, which continues to evolve the more the piece is interacted with.

The work, which was commissioned and exhibited for three months in Vienna’s MAK Museum as part of the MAK Fashion Lab #2 Exhibition, hangs like oversized curtains that viewers can walk around or though. Rather than presenting viewers with an obvious button to press, the functionality of the piece is delivered by printed electronics, screen printed onto fabric using conductive ink, which connects to an Arduino compatible Touch Board that in turn initializes sound (Midi) files.

“We wanted to explore how we could create graphics which were referential to, but not dominated by, the underlying technology. While refining various ideas we realised that we could print Electric Paint onto a fabric and allow visitors access to both sides, hopefully creating an interface that would defy belief.” (MAK Fashion Lab #2: Scientific Skin, 2013)

This is one of the most successful pieces of digital/electronic art I have seen using printed electronics. A reason for this success, I think, lies in the virtual invisibility of the interface. The ‘visible’ technology comprises of fabric and paint – not very Hi-Fi, but the result is one of wonder, for the user, at a truly innovative interface.



adobe.com, (2015). Digital Publishing Suite Help | Supported interactivity features. [online] Available at: http://helpx.adobe.com/digital-publishing-suite/help/supported-interactivity-features.html [Accessed 3 Jan. 2015].

Adobe TV, (2010). Transforming the Magazine Experience with WIRED. (video) Available at: http://tv.adobe.com/watch/digital-publishing/transforming-the-magazine-experience-with-wired/ [Accessed 3 Jan. 2015].

Adobe TV, (2014). What is DPS. (video) Available at: http://tv.adobe.com/watch/learn-digital-publishing-suite-enterprise-edition/what-is-dps/ [Accessed 3 Jan. 2015].

Aec.at, (2009). » Human Nature Exhibition Human Nature – Ars Electronica Festival 2009. [online] Available at: http://www.aec.at/humannature/en/category/human-nature-exhibition [Accessed 4 Jan. 2015].

Bare Conductive, (2009). Calvin Harris – Humanthesizer – the first human synth. (video) Available at: https://www.youtube.com/watch?v=f06aZ0yoJv8 [Accessed 4 Jan. 2015].

Bare Conductive, (2013). Countours – MAK Fashion Lab #02: Scientific Skin. (video) Available at: http://vimeo.com/79980783 [Accessed 4 Jan. 2015].

Brownie, B. (2015). Transforming Type New Directions in Kinetic Typography. London: Bloomsbury.

Brownlee, J. (2013). The Great Gatsby, Redesigned To Reflect The Jazz Age. [online] FastCoDesign.com. Available at: http://www.fastcodesign.com/1673118/the-great-gatsby-redesigned-to-reflect-the-jazz-age [Accessed 4 Jan. 2015].

Collins, (2014). Type Directors Club Experiential Campaign. [online] Vimeo. Available at: http://vimeo.com/88660117 [Accessed 4 Jan. 2015].

Collins, (2014). Type Directors Club Experiential Campaign. (video) Available at: http://vimeo.com/88660117 [Accessed 4 Jan. 2015].

Dickson, D. (2010). Introducing WIRED Magazine on iPad. [Blog] Adobe Digital Publishing. Available at: https://blogs.adobe.com/digitalpublishing/2010/05/introducing_wired_magazine_on_ipad.html [Accessed 3 Jan. 2015].

Eckert, J. (2011). DONE — Explorations in Art, Crafts and Science. (video) Available at: http://vimeo.com/27034806 [Accessed 3 Jan. 2015].

Hoeflich, J. (2012). Projekt_AUFMACHER_ZWIRBEL. [image] Available at: http://fabiantheblind.github.io/Typography-And-Automation/johannahoeflich.html [Accessed 3 Jan. 2015].

Kuchinov, V. (2013). Close-up of cover of Generative Gatsby. [image] Available at: http://i.huffpost.com/gen/1303096/thumbs/o-GEN-GATSBY-900.jpg?5 [Accessed 4 Jan. 2015].

Lingua, L., Santomasi, G., Savini, A., Sbarra, C. and Terruzzin, C. (2014).  Nil 06 Ticinese. (video) Available at: http://vimeo.com/58694524 [Accessed 3 Jan. 2015].

MAK Fashion Lab #2: Scientific Skin. (2013). [Blog] Bare Conductive. Available at: http://www.bareconductive.com/news/mak-fashion-lab-2-scientific-skin/ [Accessed 4 Jan. 2015].

Morón Zirfas, F. (2013). Typography And Automation. [online] Fabiantheblind.github.io. Available at: http://fabiantheblind.github.io/Typography-And-Automation/ [Accessed 3 Jan. 2015].

Novalia.co.uk, (2015). Novalia. [online] Available at: http://www.novalia.co.uk/ [Accessed 4 Jan. 2015].

Processing.org, (2015). Processing.org. [online] Available at: https://www.processing.org/ [Accessed 3 Jan. 2015].

The Type Directors Club, (2014). On Generative Typography. (video) Available at: https://www.youtube.com/watch?v=YCKbl7tv6As [Accessed 3 Jan. 2015].

One Comment

  1. Pingback: Chain Story | Scribes as Designers

Leave a Reply