Editorial | 2015

Apex for Youth Annual Report

Design and development of a web-based, interactive annual report for a NYC-based non-profit


Apex for Youth

The Challenge

Create an engaging web-based annual report for the 2014-2015 school year, to feature various photos, stories, and statistics in a shareable way.

The Outcome

This report uses Jekyll as a static page generator, SCSS for styling, and this Codyhouse pattern demo for an ajax-powered animated page transition.

A dynamic annual report

The annual report is split into 5 separate page sections that can be quickly navigated through, lending itself to a more engaging experience than a typical static, print-based report.

Print-influenced layout

Given that this was an annual report, the layout harkens to print reports with the highlights of the photos. I chose a bright, schoolhouse-inspired color palette to reflect Apex for Youth's bright, student-focused brand and purpose and highlighted the children this organization serves with bright, colorful featured images.

Interactive quotes

Each of the programs has an associated quote that scrolls up on the related picture.

Ajax page transitions

Each of the sections loads as a slide-out transition while the content is updated using ajax instead of a page refresh, lending itself to a very integrated experience.