You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
4.5 KiB
54 lines
4.5 KiB
2 years ago
|
+++
|
||
|
|
layout = "work/single"
|
||
|
|
theme = "light"
|
||
|
|
background = "#D9F5FF"
|
||
|
|
accent = "#546991"
|
||
|
|
text = "#404041"
|
||
|
|
title = "Open Technology Fund - Annual Report"
|
||
|
|
summary = "We designed the layout of the OTF Annual Report, creating a consistent visual language which emphasizes their motive, principles and style."
|
||
|
|
date = "2023-09-16 11:30:00 +0200"
|
||
|
|
images = ["img/work/otf-annual-report.webp", "otf-annual-report"]
|
||
|
|
tags = []
|
||
|
|
categories = ["Accessibility", "Layout Design"]
|
||
|
|
[links]
|
||
|
|
"Annual Report 2020-2019 PDF" = "https://public.opentech.fund/documents/OTF_Annual_Report_20192020_-_Final_v3.pdf"
|
||
|
|
"Annual Report 2021 PDF" = "https://public.opentech.fund/documents/OTF_Annual_Report_FY_2021_20_Jul_23_2.pdf"
|
||
|
|
+++
|
||
|
|
|
||
|
|
The Open Technology Fund (OTF) stands as a beacon in the world of tech innovation, funding projects that aim to create an open and accessible internet for all. Its Annual Reports are testimonies to OTF’s commitment to championing digital rights and internet freedom. These reports provide a transparent overview of the Fund's efforts, showcasing its achievements and the measurable impacts it brings about. With each report, open-source initiatives and the wider public are provided with a deeper understanding of OTF's vision and the tangible progress it encourages.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Recognizing the significance of these achievements and the need for precision in their presentation, OTF asked us to design their two latest annual reports: **OTF-Annual Report 2019-2020** and **OTF-Annual Report 2021**. This collaboration was an opportunity for us to further underscore the achievements of OTF through accessible and impactful design.
|
||
|
|
|
||
|
|
{{< figure class="with-js on-light" src="/img/work/otf-annual-report-cover.svg" alt="OTF Annual Report Cover" >}}
|
||
|
|
{{< figure class="with-js on-dark" src="/img/work/otf-annual-report-cover-dark.svg" alt="OTF Annual Report Cover" >}}
|
||
|
|
{{< figure class="no-js" src="/img/work/otf-annual-report-cover.webp" alt="OTF Annual Report Cover" >}}
|
||
|
|
|
||
|
|
## Mosaic of Pixels: The OTF Design Blueprint
|
||
|
|
|
||
|
|
Pixels are a basic element of digital design. In the OTF Annual Report, they take on a special significance. Combined with technology blocks, they represent the changing digital world. These blocks are like puzzle pieces, showing how different parts of the digital world can come together and change. Our design uses both pixels and technology blocks to tell a story about how the digital world is adaptable and how the OTF aims to connect in this changing environment.
|
||
|
|
|
||
|
|
{{< figure class="with-js on-light" src="/img/work/otf-annual-report-pattern.svg" alt="OTF Annual Report Pattern" >}}
|
||
|
|
{{< figure class="with-js on-dark" src="/img/work/otf-annual-report-pattern-dark.svg" alt="OTF Annual Report Pattern" >}}
|
||
|
|
{{< figure class="no-js" src="/img/work/otf-annual-report-pattern.webp" alt="OTF Annual Report Pattern" >}}
|
||
|
|
|
||
|
|
## Layout Design
|
||
|
|
|
||
|
|
Our focus for the layout was user-centric: to offer intuitive navigation and crystal-clear presentation. By adopting a structured, grid-based format, we guaranteed that the rich content was organized, inviting, and easy for readers to absorb. Each section is curated to guide the reader through the significance of every highlighted project.
|
||
|
|
|
||
|
|
{{< figure class="with-js on-light" src="/img/work/otf-annual-report-layout-design.webp" alt="OTF Annual Report Layout Design" >}}
|
||
|
|
{{< figure class="with-js on-dark" src="/img/work/otf-annual-report-layout-design-dark.webp" alt="OTF Annual Report Layout Design" >}}
|
||
|
|
{{< figure class="no-js" src="/img/work/otf-annual-report-layout-design.webp" alt="OTF Annual Report Layout Design" >}}
|
||
|
|
|
||
|
|
## Prioritizing Accessibility
|
||
|
|
|
||
|
|
Accessibility was a core requirement for this report. Given the fact that the report needed to be published as a PDF file, we ensured the file met the highest standards of accessibility. From text to structure, every PDF element is designed for compatibility with screen readers and optimized for effortless navigation.
|
||
|
|
|
||
|
|
## How we helped
|
||
|
|
|
||
|
|
- **Custom Visual Language**: Developed a unique blend of pixelated patterns and technology blocks, establishing a signature style for OTF.
|
||
|
|
- **User-Centric Layout**: Designed a structured, grid-based format ensuring readability and ease of navigation.
|
||
|
|
- **PDF Accessibility**: Met and exceeded the necessary standards, making the report accessible to all, especially screen reader users.
|
||
|
|
- **Consistency in Design**: Created a uniform visual language that can be carried forward in future branded media.
|
||
|
|
- **Collaborative Approach**: Worked closely with OTF to ensure the design truly represented their vision.
|