Digital Strategies
in Genre-Defining


What is Digital Strategies in Genre-Defining Magazines?

Digital Strategies in Genre-Defining Magazines is a research initiated by the Master in Art Direction at ECAL and led by Philippe Egger, Joël Vacheron and Luke Archer. The project took place over a series of workshops, conferences and interviews between the autumn semester of 2013 and the spring semester of 2015.

DSGDM starts out from the observation that magazine production has undergone unprecedented growth since the 2000s, particularly in niche topics. Many of these genre-defining magazines developed their own approaches to a digital counterpart of the printed version, which often vary vastly, sometimes being led by a photographic approach, sometimes a graphic approach or alternatively a user experience approach. DSGDM focuses on these strategies, with the aim of creating an overview of the landscape of digital publishing. It also tries to identify the various roles within this landscape so that students may better place their own practice in this complex field.

Furthermore, leading figures from within the field of digital publishing, each with a specific practice, were invited to work with the students to explore new digital strategies for genre-defining magazines and beyond. At once a research report, an educational tool and an experimental platform, this website highlights these different approaches while offering a range of resources and original strategies.

The context of this project, that of editing and designing magazines, stems from the fact that it best describes the multi-facetted fields explored within the Art Direction master. The term “genre-defining magazines” derives from the exhibition titled "Paper Weight: Genre-defining magazines, 2000 to Now" at Haus der Kunst, which was one of the first comprehensive and defining events to highlight the re-emergence of independent publishing in recent years.

Key goals

  • Establish an overview of the current state of digital publishing.
  • Introduce students to the main concepts, roles and approaches of digital publishing.
  • Open a dialogue with leading figures.
  • Explore and develop new strategies.

Guest Lecturers

Anthon Astrom
Laurenz Brunner
Jason Evans
Marc Kremers
Dan Michaelson
Alan Woo
Lukas Zimmer


Daniel Aires de Sena, Kim Andenmatten, Leonardo Azzolini, Sylvain Esposito, Maria Guta, Larissa Kasper, Laurence Kubski, Namsa Leuba, Eric Loizzo, Jessica Mantel, Jana Neff, Michaël Teixeira, Kyoungtae Kim, Maria Trofimova, Loris Olivier, Johannes Bauer, Sabina Vera Bösch, Christelle Boulé, Dmitry Bukreev, Ricardo Ferrol, Tobias Holzmann, Simon Mager, Charlotte Marcodini, Nicolas Polli, Jagoda Wisniewska, Heejae Yang


The programme is divided into five parts, each focusing on a different aspect of design, image production and user experience. These themes are explored through workshops, interviews and critical tools.


An introduction to seminal tools and many important ideas within the technological development of editorial design, and an exploration into ways of prototyping digital assignments without being UX or programming savvy.

Production, presentation, distribution, etc., the advent of new media techniques has had a significant impact on the ways photography and other imagery can be used to tell stories. Visual Narratives explores alternative approaches to the use of photography within digital editorial concepts.

Thinking outside the scope of any one particular digital platform, Future Interactions aims to rethink the anatomy of digital editorial design, and to explore new user experiences and ways of interacting with content.

Digital editorial design can not escape its printed history; although we are free from the constraints of the page, we are still tied to some standards and hierarchies. Bridging Conventions looks at approaches to editorial design that call into question the print-to-digital transition.

Content management systems, databases, and scalability have revolutionised the computing landscape. But these technologies and ideas don’t need to be exiled exclusively to the tech world. In Digital Tailoring we examine how a digital platform can be adopted for specific needs and can evolve smoothly over time in order support editorial design and content, rather than work against it.

Latest Resources

The Future of Browser History

About browsers history, and how we tend to browse nowadays.

Swiss in CSS

Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement.

Automatically art-directed responsive images

by Eric Portis


Businessweek, June 11, 2015
by Paul Ford

Interview with Tom Krcha, Adobe XD

Adobe released the first public preview of what the company is now calling Adobe XD, its their major new UX/UI design and prototyping tool.

Typography for User Interfaces

A recap of how far type in UI has come, where it’s going (VR) and what to look for when choosing a workhorse for your next interface. (via

Typeface As Programme: Glossary

A glossary of tools and technologies mentioned in Typeface As Programme.
by Jürg Lehni

Declarative Design Tools

Our brains and computers are fast; our hands, mice and keyboards are slow.

Roger That: Emoji Overdrive

A font that turns the 2,000 most used English words into emoji.

Layout in Flipboard

Flipboard Pages, a layout engine that turns web page articles into magazine pages for the iPad.

Use Your Interface

UYI, is a place documenting the uprising of motion based interface patterns.

Google Fonts

Google’s new site for Web fonts.



New Yorker cover comes to life

Malika Favre’s illustration for this week’s New Yorker magazine has been brought to life by French animator Mathieu Maillefer.

Google Design

Google Design is a cooperative effort led by a group of designers, developers, writers, and UX advocates at Google whose goal is to capture and share their work and ideas with the user.

Color Library

“Color Library” is a database of color profiles for artists, designers and printers who are looking for a novel yet professional color management solution. These new tools can convert images for printing devices using two, three, four or five spot colors. It offers a large variety of combinations, from basic colors to metallics, neons and pastels.

Abstract Browsing

Digital artist Rafaël Rozendaal is turning the internet inside out with an exhibition at Steve Turner Los Angeles.

Writing Space: Computers, Hypertext, and the Remediation of Print

Reflecting the dynamic changes in electronic technology since the first edition, this revision incorporates the Web and other current standards of electronic writing. By J. David Bolter.

As We May Think

As Director of the Office of Scientific Research and Development, Dr. Vannevar Bush has coordinated the activities of some six thousand leading American scientists in the application of science to warfare.

The Web Time Forgot

In 1934, Paut Otlet sketched out plans for a global network of computers (called “electric telescopes”) where “anyone in his armchair would be able to contemplate the whole of creation”, By Alex Wright

Natural User Interface

In computing, a Natural User Interface (NUI) is the common parlance used by designers and developers of human-machine interfaces to refer to a user interface that is effectively invisible, and remains invisible as the user continuously learns increasingly complex interactions. The word natural is used because most computer interfaces use artificial control devices whose operation has to be learned.

Graphical user interface

In computing, a graphical user interface (GUI, sometimes pronounced “gooey” or “gee-you-eye”) is a type of interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, as opposed to text-based interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on the keyboard.

Parallax scrolling

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.
Web designers began incorporating parallax scrolling in 2011, using HTML5 and CSS3. Websites with parallax backgrounds are becoming an increasingly popular strategy, as advocates argue it is a simple way to embrace the fluidity of the Web.


A Web Graphics Library (WebGL) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.


A Twitterbot is a program used to produce automated posts on the Twitter microblogging service, or to automatically follow Twitter users. Twitterbots come in various forms. For example, many serve as spam, enticing clicks on promotional links. Others post @replies or automatically “retweet” in response to tweets that include a certain word or phrase. These automatic tweets are often seen as fun or silly. Some Twitter users even program Twitterbots to assist themselves with scheduling or reminders.


User experience moment.


Usability refers to how easy it is for a visitor to your site to use your site in its intended manner. In other words, are navigation, content, images, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.


Short for “permanent link.” Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.


A pageview is a request for an entire web page document from a server by a visitor’s browser. In other words, for each page view your site had, someone (or a search engine spider) looked at that page.

Meta data

Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. The information contained in the meta data isn’t viewable on the web page (except in the source code). Meta data is contained within meta tags.


Hypertext is any computer-based text that includes hyperlinks. Hypertext can also include presentation devices like tables or images, in addition to plain text and links.


A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the “hyper” part of “hypertext.”


Contrary to popular belief, a hit does not represent a single visitor to a website. A hit is actually a request for a single file from your web server. This means one page can actually generate multiple hits, as each page generally has more than one file (an html or other base file, a css file, multiple images, etc.) and each one is requested from the server whenever the page is loaded. Some marketing people like to quote hits to unknowing consumers as the number makes their site sound like it’s getting a whole lot more traffic than it actually is.

Focal Point

The focal point of a web site is the spot on a web page that they eye is naturally drawn to. This could be an image, a banner, text, Flash content, or just about anything else. You want to make sure that whatever is acting as your focal point is the most important part of your site.

Fixed Width Layout

A fixed width layout has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.

Elastic Layout

An elastic layout is one that uses percentages and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed. It’s ability to flex to accommodate the browser width and reader’s font preferences are where it gets its name.

Cascading Style Sheets

Also referred to simply as CSS, Cascading Style Sheets are used to define the look and feel of a web site outside of the actual HTML file(s) of the site. In recent years, CSS has replaced tables and other HTML-based methods for formatting and laying out websites. The benefits to using CSS are many, but some of the most important are the simplification of a site’s HTML files (which can actually increase search engine rankings) and the ability to completely change the style of a site by changing just one file, without having to make changes to content.


Cached files are those that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.

Bounce rate

A website’s bounce rate is the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages. This can be a good indicator of how good a website’s navigation is, as well as an indicator of the quality of the site’s content (a very high bounce rate doesn’t bode well for either of those things).


Stands for Asynchronous JavaScript and XML. AJAX is typically used for creating dynamic web applications and allows for asynchronous data retrieval without having to reload the page a visitor is on. The JavaScript on a given page handles most of the basic functions of the application, making it perform more like a desktop program instead of a web-based one.