Caltech “In Honor Of”
Reflecting on a rich history of achievement
Opportunity
I was contacted by Bravo Charlie Delta, a video agency for educational institutions and other non-profit organizations, to help conceive of, design and build a microsite to commemorate Caltech's “Break Through: The Caltech Campaign”. The project would be embedded in a larger, magazine-format website. As such, the site needed to be designed and developed as a single-page experience. It also needed to stand out as an interactive design.
Outcome
The final design was structured around an animated opening sequence, an interactive menu connecting users to the primary site content and a set of five page sections, each featuring an overview of the achievements and contributions of a distinguished Caltech alum. An emphasis was placed on clear way-finding, an editorial visual style, smooth, animated transitions between page sections and efficient site performance.
An Emphasis on Storytelling
The website opens with an animated introduction to the campaign intended to lend a linear storytelling feel. The fluidity of the opening sequence is extended into the main menu interactions as well as the transitions from one content section to the next.
The opening sequence was created using the Greensock animation library. The stability of the software allowed for precise timing as well as smooth playback. Additional animations and transitions were created using a combination of CSS transitions and jQuery.
Page Designs
Working in conjunction with members of the Caltech creative team, I designed and developed a set of color-coded page designs, featuring consistent typography to convey information hierarchy, a small set of image sizes to maximize page performance, fixed-background scroll effects and an alternate-design site menu at the footer of each page.
Responsive Layouts
Each of the site's layouts respond to mobile, tablet and desktop screen sizes.
