Youth Without Shelter Impact Report

November 2014

Animated 2013-14 Impact Report for Youth Without Shelter.

After falling in love with Faren Agency’s print design for the 2013-14 Impact Report, Youth Without Shelter came back with a request for a digital version – as quickly as possible.

The design remains pretty close to the printed brochure, though updated for browser strengths and adapted to a single page layout. The animation, however, was a big, new feature. Each page segment is set with JS-triggered CSS animation, timed to play out as the reader continues down the page.

With boundary-pushing CSS to accomplish the eclectic layout, responsive structuring was no small feat – but one always worth tackling.

Cover Section - On first loading the page, the user is treated to timed CSS animation, leading through each section of the report, to carry the content story.

For more on the design concept, check out the case study on Faren Agency's site.

Visit the impact report on YWS's site