BaMa 21

Online ex­hi­bi­tion web­site for the 2021 graphic de­sign co­hort (BA and MA) at HS Mainz.

Browser screenshot showing degree show website

Design notes

The cen­tral piece of or­na­men­ta­tion on the site are these an­i­mated lines meant to evoke a cur­tain flow­ing in the breeze (the ti­tle of the show — Lüften — roughly trans­lates to let­ting in fresh air). I mod­elled these as fol­lows:

This recipe pro­duces a de­sign space with a huge num­ber of vari­ables. I tend to think the way to get a han­dle on a space like this is to build tool­ing to ex­plore it so I did. If you hit T on your key­board, you’ll see the lit­tle con­trol win­dow I used to find the set of pa­ra­me­ters that pro­duce the right ef­fect.

Browser screenshot showing control panel overlaid on website

I also built a page to pro­duce printed la­bels for the show. The la­bels are gen­er­ated from the same mark­down files as the rest of the site, so the two should al­ways be in sync. I got the idea from this from MoMa’s wall la­bel gen­er­a­tor. 1

The type­face is BW Modelica, by Alberto Romanos/Branding with Type.

Design by Thea Arndt, Lina Becker and Melanie Abaron. Supervised by Mareike Knevels, Marie-Theres Birk, Lilly Gothe and me, de­vel­op­ment by me.

Tech notes

The site is built with Eleventy and Netlify CMS. I set up a stag­ing en­vi­ron­ment on Netlify (the host­ing plat­form) so Netlify (the CMS) would work with min­i­mal setup. We used that to col­lect every­one’s in­for­ma­tion, and on launch day I just ran the build on my own ma­chine and FTP’d the re­sult up to our pro­duc­tion server. There was prob­a­bly a more el­e­gant way of do­ing that, but for a site I’m only go­ing to de­ploy a hand­ful of times, I don’t re­ally mind.

This is prob­a­bly the most ac­ces­si­ble de­gree show site I’ve built. It’s fully key­board ac­ces­si­ble, we re­spect prefers-reduced-motion, and we wrote real alt text for all ~250 im­ages on the site. Lighthouse scores it 100/100 for ac­ces­si­bil­lity.

View the live site at bama.hs-mainz.de/​sose21, and if you hap­pen to be in Mainz, Germany, be­tween 6th and 16th July, get tick­ets to see the show at ter­min­land.de/​HS­Mainz_Raum­buchung.

  1. I could­n’t find any tech­ni­cal in­for­ma­tion about the MoMa la­bel gen­er­a­tor, but my sense is it works sim­i­lar to mine - you get the in­for­ma­tion from some cen­tralised data­base, type­set it with HTML and CSS, and print it right from the browser. Rob Giampietro has a great long post about the MoMa re­design, in­clud­ing a sec­tion about the la­bels about halfway in. ↩︎