Design and development of a web-based, interactive annual report for a NYC-based non-profit
Apex for Youth
Create an engaging web-based annual report for the 2014-2015 school year, to feature various photos, stories, and statistics in a shareable way.
This report uses Jekyll as a static page generator, SCSS for styling, and this Codyhouse pattern demo for an ajax-powered animated page transition.
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.
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.
Each of the programs has an associated quote that scrolls up on the related picture.
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.