We teamed up with Mule Design to redesign Stanford's main website, Stanford.edu. For more details about the process and their role in the project, you can refer to the excellent write-up on their site.
The Curtain Reveal
I used the waypoints.js library to choreograph multiple scroll waypoints to achieve the curtain reveal effect.
As the user scrolls, the Wordmark first fades from the splash image, then reappears in the brand bar. Further down, the bottom navigation menu sticks to the brand bar, and finally, the curtain locks into place and the rest of the page scrolls along with it.
The biggest challenge here was ensuring the animations happened smoothly and felt natural.
Responsive Layout Challenge
It's important that our homepage feels like it's designed for whatever device you happen to access it with.
Mule delivered us excellent desktop and mobile mockups, but I wanted to ensure the in-between sizes got some extra attention as well.
This involved experimenting with layout and finding several variations that would still treat the featured story as special, while maintaining content hierarchy and filling the available space gracefully.
Often times, it's the details that make a site feel finished. We spent some time making sure hover effects felt natural, adding meaningful interactions, and dialing animations back to where they felt unobtrusive.
For the stanford report form, we spent some extra time making sure the labels were accessible, and that meaningful labels appeared when inside the text field.
A challenge was differentiating "Story cards" from "Highlights". We used motion and content hierarchy to do this. For story cards, the image and the link both go to the same place, while for highlights, the image is illustrative, and the link is treated differently.
Another fun microinteraction is the hover effect for the navigation menu. Getting the timing to feel natural was a challenge, especially since it's easy to go overboard and get in the user's way.