We are pleased to announce our latest website launch, CorinneBaileyRae.com! The site was designed by Sadie St. Germain and developed by Aldo Adachi and Sarah Babski. It was developed in WordPress using PHP and a custom built theme.
Rae came to the team with a vision of the site emulating “inner madness.” She wanted menus and the site to open up to different spaces, so that navigating her site would be like exploring the labyrinth of Rae’s mind and her music.
“She [Rae] was interested in collage and having it be transformative, creating something that was almost mad,” Sadie explained. “I drew inspiration from these reflected landscape collages, that made me think of these scenes rotating and changing as well as these mixed media collages, which made me think that I could go through these portions and into another.”
This vision of madness came through with animated scrolling transitions throughout the entire website. When a visitor scrolls through the site, the images of Rae begin to transform, twist and break apart, until the image ultimately comes together as one.
While Sadie came up with the creative vision of these transitions, it was up to Sarah to make this concept a digital reality.
“My role on the project was to take Sadie’s creative vision of the portals and make them into a functional means of navigation through the site page templates, which were created by Aldo. Sadie designed geometric patterns and basic movements to suit photos from shoots with Corinne. I determined how best to animate them, while keeping them fully integrated within the page,” said Sarah.
The transitions were created with a HTML5 canvas, using height as the controller instead of time.
“Each shape has its own timeline and acts as an image mask for a separate instance of the image, so users can scale, rotate, and move each shape independently of each other, but also independently of the image it is masking. To keep it simple, I broke each animation into four main steps, then declared the position, size, and orientation at each step for all of the shapes,” explained Sarah.
Despite the site’s winding path, Sadie still wanted to depict the grace and lightness that comes with Rae and her music. Rae’s music is airy, acoustic and gentle; it almost transports you to a simpler place when you listen. Sadie recognized this, and wanted to make sure this was conveyed through the site’s design.
“I was hoping to achieve the aspects she asked for, but besides that I feel like Corinne and her music have a certain grace about them. Though I feel I met her request for madness, I also feel like the site still has a simplicity to it, a simplistic quality. I wanted it to feel light,” said Sadie.
Most importantly, the juxtaposition created with the beauty of the site against the rigid section transitions helps visitors realize that there’s more to Corinne and her music than what meets the eye (and the ears).
“I was hoping that the visuals and site function would speak to who Corinne is. She and her music are beautiful, but inside maybe things can be more than they appear and reveal her quirks and her ‘madness within.’ I would hope that it now more clearly displays her actual site content as well, making it much easier for users to explore her site and get to know her and her music.”
Sadie, who was a Corinne fan before the project began, says she is probably now a bigger fan now that the site is complete.
“I listened to her music for a good portion of time while designing the site,” said Sadie.
“I was sitting in a restaurant and her new song ‘Green Aphrodisiac’ came on in the background and I was so excited I completely halted. It’s great to hear Corinne back with her new album.“
If you would like to see the site for yourself, visit CorinneBaileyRae.com.