KATAPULT-Magazin & KATAPULT-Verlag

During my first weeks at KATAPULT, the freshly printed copies of the current issue were delivered to the office – back then, rented rooms in the Biotechnikum Greifswald. Every KATAPULTi pitched in: magazine and shipping slip into an envelope, envelopes tied into bundles with string, bundles onto the pallet. By the end of the day, a dozen pallets stood in the foyer.

That is how I got to know KATAPULT and its magazine, which explains the world in maps and infographics. Benjamin Fredrich had founded it in 2015. I looked after the shop through the agency I worked for at the time. There was no job posting. I heard about the position at KATAPULT through Benni.

I was the first frontend developer at KATAPULT. There was no design system, no components, not a scrap of reusable CSS. To me that was an exciting starting point: no legacy to work against. My first project came in my first week – a donation page for the KATAPULT forest. It was also the occasion to write styles that would hold beyond that one page.

From Print to Web: The Design System

The style I wanted to translate to the web was one KATAPULT had worked out in print: eight colors, Oswald in the headlines. On paper it was established, but there was no equivalent in the browser.

So I translated the magazine’s vocabulary into design values and centralized them: thirteen JSON files holding colors, typography, spacing, and breakpoints. A generator turned them into SCSS maps, CSS custom properties, JSON, and JavaScript. The base font size lived there too: 16 pixels at a viewport width of 320 pixels, 18 at 1280, linear in between – and because every measurement was in rem, the layout scaled along with it.

With every website – the donation page for the forest, a Linktree for Instagram, later the publisher’s site – came building blocks I did not want to build twice. Under the hood, the vocabulary grew into a framework: buttons, tables, accordions, forms, a layout grid of containers and columns, plus utility classes for the fine-tuning – Sass modules that compiled into a single CSS file.

The eight KATAPULT colors existed there exactly once. Change one, and every website followed.

The Book Publisher for Nonfiction, Novels, and Translations

In September 2020, KATAPULT founded its own publishing house. I built the website for it from the same design system: the catalog with the covers on the left, descriptions and order buttons on the right. It looked like KATAPULT from day one – katapult-verlag.de.

The New Magazine Website

Replacing the old website was my main goal from the start. It ran on TYPO3 – or more precisely, two websites, one for mobile devices, one for the desktop, so every article had to be written twice. None of it was tailored to the editorial team. The design system was in place by then; all that was “just” missing was the new website – migrating the content, designing it, building the whole thing.

To me, a good CMS for an editorial team comes down to one thing above all: editor experience. A CMS like that is made for the people who create articles, place images, and rework text every day. Kirby CMS can be shaped around exactly that.

About half of the development time went into the migration. Every article had to move from TYPO3’s WYSIWYG field into Kirby’s block format, and what had grown in there over the years took every conceivable shape: nested tags, half-closed HTML, the same markup arrived at several different ways. With regular expressions I collected the cases one by one until the conversion ran clean – for roughly 1,200 articles, the oldest from March 2015. Old links had to keep working; I wrote redirects for articles, categories, and images.

The greatest challenge was at the same time the greatest joy: the design. Finding the balance between the KATAPULT style and a modern online magazine took time. Once I hit my flow, the layout came together in about two weeks.

There were no mockups. Benni and I chose an agile design-driven development approach: the technical prototype grew into the finished product through feedback cycles. That I got to work this way was down to Benni – he gave me the freedom to decide autonomously, and he trusted me and my abilities.

One detail especially close to my heart was the typeface for body text: Spectral, an elegant and highly readable serif. In the end it carried every KATAPULT website.

Accessibility was not an afterthought. Alongside the eight KATAPULT colors, the design system held a second, contrast-corrected set of the same colors, switchable as a theme. And the website showed the focus outline only to those navigating by keyboard.

An Instagram bio allowed only one link. So I built katapult.link, a small Linktree alternative in the KATAPULT design: a square grid of tiles. It ran in the same Kirby installation as the magazine – the article form carried a toggle labeled “On katapult.link,” on by default. That way every published article appeared as a tile automatically. Alongside them, you could add your own posts for anything that was not an article.

In May 2021 the new website went live, a few months before I left KATAPULT with a heavy heart. The nonprofit gUG had since become a gGmbH with over thirty people, and a regional newspaper and a café had come along with it. The printer had long since taken over shipping – the print run had grown too large for everyone to pitch in at the office.

My Only Photo of Angela Merkel

On February 4, 2020, Chancellor Angela Merkel laid the cornerstone for the Center for Life Science and Plasma Technology in Greifswald – right next to the Biotechnikum, where KATAPULT had just moved into its offices. On that occasion she also visited a few companies in the neighborhood, KATAPULT among them.

Benni presented her with the first KATAPULT book, “100 Karten, die deine Sicht auf die Welt verändern” (100 Maps That Will Change Your View of the World). I was standing right there – and took my only photo of the then-Chancellor.