At a Glance

Web development of the interactive and animated Future Blue Sky web app experience for JAXA (the Japan Aerospace Exploration Agency).

In Detail

JAXA and IDEO Tokyo collaborated on a future vision for the sky, resulting in an animated website of four key illustrated scenarios. Bento Graphics then worked with JAXA to deliver the web development, including UX enhancements for this animated and interactive web app experience.

©JAXA/IDEO

The web experience consists of 4 stories about four people of various ages and walks of life. Future Blue Sky is aiming to envision the future of aerospace, but at the same time emphasizing the human experience over technology. It does this by envisioning useful applications in the sky which improve human lives. The aim of the project is to inspire people to contribute and work with JAXA to shape the future of our skies.

Development & Technology

In a first phase the web layout and all pages were build using responsive web design with HTML5 and CSS3. In a second step the pages were integrated in a SPA (single-page application) via a Vue.js setup. This allowed for smooth page transitions, animations and interactions but at the same time retained unique and accessible URLs for every page. Animations were achieved with SVG/CSS3 and exact parameters extracted from AfterEffects demo animation files.

Technologies and features of the web app:

• Responsive HTML5/CSS3/PHP5 templates
• Vue.js-based project development
• Vue-router based URL structure
• Unique & shareable URLs
• Custom apache server directives
• D3.js custom animations
• HTML5 history mode
• SVG file conversions to data URIs
• SVG & CSS3 animations
• Multilingual set-up
• Extensive cross-browser and cross-device testing
• Internet Explorer 11 – full animation compatibility

Project Still Images