UNSEEN × Berlin Marathon 50th Anniversary

Online magazine for a traveling photo exhibition about long distance running

About the project

UNSEEN Gallery is an international series of photo exhibition and panel talks about long distance running. Past events took place during race events, such as the Berlin Marathon, Bali Marathon, and New York City Marathon. For the 2024 edition the main topics were diversity and inclusion, as well as the 50th anniversary of the Berlin Marathon.

Briefing

We were tasked to translate the content of the physical magazine to a web-based format while maintaining the original design’s aesthetic. The magazine focuses on inclusion, so the online version naturally had to be accessible and user-friendly for all audiences.

Front and back cover of the magazine
Open magazine, showing one spread
The printed magazine

Design

The website design reflects the magazine’s color scheme, typefaces used, and the main key visuals, while transitioning it to a responsive design system that ensures the site displays correctly across various screen sizes. Instead of replicating the magazine’s side-by-side bilingual layout, the website features separate language versions to reduce visual clutter and enhance readability. The CMS was customized to offer editors a range of text–image layout options. This flexibility allows for greater editorial control, adapting the content to fit various formats as needed.

Two mobile phones, showing different parts of the website
A tablet, showing part of the website

Page performance

Given the image-heavy nature of the magazine, considerable effort was devoted to optimizing page performance. Techniques such as responsive images, lazy loading, asset pre-loading, caching, and efficient file formats were employed to ensure fast loading times and optimal image display, also in sub-optimal network conditions.

Easy navigation

Each page of the website includes a table of contents, which serves multiple purposes: It helps users visualize the structure of the content and facilitates navigation, particularly for those using keyboard-based navigation or assistive technologies such as screen readers. This feature is especially important for visually impaired users, as it provides clear and accessible navigation options.

Accessibility

The accessibility strategy was founded on well-structured, semantic HTML and careful element ordering, ensuring that content was logically presented for both visual users and assistive technologies like screen readers. The content was organized to support readability and improve accessibility for users relying on assistive devices.

Visualization of the focusable elements, numbered and connected by lines

Visualizing focus order during testing

Keyboard navigation in action

Another critical component was the consequent use of alternative text for images and visual content. The descriptive alt texts provide context and meaning for users who are visually impaired or rely on screen readers.

ARIA annotations were added where needed. ARIA landmarks and roles enhance interactive elements like navigation menus, tables of contents, and buttons, providing screen reader users with additional context for easier navigation and interaction with dynamic content.

The site also respects user settings such as prefers-reduced-motion, prefers-contrast, and prefers-reduced-transparency for some details, where the visual design and accessibility could not be fully reconciled.

All projects
Arts & Culture
Design tool for generating typographic posters and animations
Arts & Culture
Interactive, touch-enabled timeline exhibit for a city archive
Arts & Culture
Interactive archive of the activities of a Master’s programme
Arts & Culture
Data analysis and visualizations of one year worth of photos
Public Interest
User-driven online propaganda tool on the topic of net neutrality
Applied
Tools for analyzing, visualizing, and comparing formal characteristics of movies
Arts & Culture
UNSEEN × Berlin Marathon 50th Anniversary
Online magazine for a traveling photo exhibition about long distance running
Commercial
Type foundry website with integrated online store
Commercial
Web application for effective management and customization of legal document templates
Arts & Culture
macOS screensaver for collectors of Orb (lite) NFTs by Harm van den Dorpel
Arts & Culture
Web3 site for minting NFTs continuously generated by a live art installation
Commercial
Website that lets users virtually place the product into their physical surroundings
Commercial
Configuration and content scheduling tool for a generative media installation
Commercial
Configuration backend for an interactive in-store media installation
Commercial
Point-of-sale software for opticians to help customers choose the right lenses
Commercial
Bespoke website for the release of the Logical typeface by Edgar Walthert
Arts & Culture
Interactive animation for a music festival announcement page
Commercial
Website for a graphic design studio
Arts & Culture
Independent music publishing and streaming platform
Arts & Culture
Parametric typeface generator tool as part of a visual identity system
Public Interest
Graphical modelling tool for describing attack scenarios