+++
layout = "work/single"
theme = "dark"
featured = true
background = "#000067"
accent = "#009ACE"
text = "#FFFFFF"
title = "PrototypeFund - Virtual Demo Week"
summary = "We developed a virtual demo week experience to enable projects from Rounds 7-10 of the German Prototype Fund to showcase their work in a virtual setting."
date = "2023-03-11 18:45:00 +0200"
images = ["img/work/demoweek.webp", "demoweek"]
tags = []
categories = ["Branding", "Interaction Design", "Web Development"]
[links]
    "Website" = "https://demoweek.prototypefund.de"
[sources]
    "GitHub repository" = "https://github.com/prototypefund/demoweek-archive"
+++

At the height of the Covid pandemic in 2020, we were approached by Prototype Fund to help them with shaping their traditional Demo Week virtually. Usually Projects would meet in Berlin for a day and present their work. As in-person events were not an option anymore, we needed to come up with an alternative.

---

{{< figure class="with-js" src="/img/work/demoweek-logo.svg" alt="Prototype Fund Demo Week Logo" >}}
{{< figure class="no-js" src="/img/work/demoweek-logo.webp" alt="Prototype Fund Demo Week Logo" >}}

Prototype Fund is a public funding program in Germany that supports individuals and small teams working on open source software, digital infrastructure, and civic tech projects. The program provides funding of up to €47,500 per project for a period of six months, as well as mentorship and networking opportunities. The aim of Prototype Fund is to enable innovative ideas to be quickly prototyped and tested in a low-risk environment, and to foster a culture of open source and collaboration in the German tech community.

{{< figure src="/img/work/demoweek-screenshot.webp" alt="Prototype Fund Demo Week Website Screenshot" >}}

## Stereoscopic Visuals

The Prototype Fund branding offers a lot of creative freedom, playing around with stereoscopic imagery and text which transforms. Many brainstorming sessions were spent exploring synth-wave, cyberpunk and similar visual styles to aid the content.

<div class="d-flex justify-content-between align-items-center">

<div class="demoweek-blue-banner text-center">

<div>Demo</div>

<div>Week</div>

</div>

<div class="demoweek-pink-banner text-center">

<div>Demo</div>

<div>Week</div>

</div>

</div>

## Accessibility

While the stereoscopic style was very engaging, it also had accessibility issues as part of it. We introduced a new extended color palette based on the Prototype Fund style to offer enough color contrast with existing.

{{< figure class="with-js" src="/img/work/demoweek-colors.svg" alt="Demo Week color palette" >}}
{{< figure class="no-js" src="/img/work/demoweek-colors.webp" alt="Demo Week color palette" >}}

Moreover, we recognized that accessibility is crucial for creating an inclusive user experience. To ensure that our stylistic choices were aligned with accessibility best practices, we chose a dark style that provided a high level of contrast and made the colors feel like neon lights across the site. 

This choice was not only visually appealing but also ensured that the site was accessible to all users, including those with visual impairments.

{{< figure src="/img/work/demoweek-highlight.webp" alt="Prototype Fund Demo Week Website Screenshot" >}}

## How we helped

- A new refreshed brand identity to provide a more accessible web experience.
- Designing and building the new Prototype Fund website accommodating 95 projects across 4 rounds.
- Support the Prototype Fund team with deploying and testing the new website