EPFL Graphic Generator

EPFL wanted to provide organizers of events and conferences on its campus with a tool allowing them to create rich and vibrant posters.

Banner image

UX and Design




Hundreds of conferences, seminars, exhibitions and gigs take place every year on the sprawling EPFL campus, hosted by students, staff, faculties, start-ups, research partners and so on. Organisers charged with promoting events have, until now, been left to their own devices.

MediaCom, EPFL's marketing department, would like to encourage some change, so they charge Cruncher and :ratio with creating an easy-to-use design tool that will empower promoters to make communications that conform to their brand guidelines.

Sitting down to discuss the UX, it quickly becomes clear that to make a tool that feels familiar (and so easy-to-use), we need an editor environment that behaves somewhat like a desktop application, with objects that can be selected, and then modified via context-aware edit panes. Rather than having moveable objects we opt for a collection of design templates where editable objects have defined positions, a colour scheme selector where colours are drawn from brand colours, and a font selector with a curated list of fonts. This all helps to keep the resulting visuals on-brand.

Technically, we choose SVG as the 'native' format of the editor, where HTML would have caused text rendering discrepancies between browsers and <canvas> would mean resolution dependence and implementing a mouse-pointer-to-object detection layer. This does cause a small problem. Images must be exported to PNG format. While with a <canvas> that could be performed in-browser, with SVG it cannot. So we write a server-side micro-service that takes an SVG and returns a PNG file. Now we must make sure that fonts available in the browser are also available on the server.

To build the interface we used our in-house (and open-source) dynamic templating library Literal.

Version 1 (our 'MVP') exports to 3 formats:

Have us build your app

Email hello@cruncher.ch Telephone +41 21 546 68 00

Other projects

Générateur de graphiques EPFL
EPFL Graphic Generator
Galerie 1 2 3 Galerie 1 2 3
Galerie 1 2 3
Site internet de l'ECAL
Swiss Typefaces Swiss Typefaces
Swiss Typefaces
EPFL Newsletter EPFL Newsletter
EPFL Newsletter
Nendaz Nendaz
Touring Machine
Touring Machine