Hippo Studios
- Category: Web design
- Industry: Audio Production, Sound Recording
- Responsibilities: Design, XHTML and CSS page builds, Flash
- Launched: January 20, 2010
- View This Project: www.hippostudios.com
Project Summary
Hippo Studios is a longtime client of Envision Technology Advisors. Specializing in audio production, sound recording and voiceover work for radio, television and the Internet, Hippo came to Envision looking for a branding overhaul and a new website as part of their campaign to promote the studio. With an audience largely made up of marketing executives and creatives, Hippo wanted their new site to be smart, interactive and fun.
I actually did a pair of designs as part of this project, including one that focused on a campaign highlighted by the phrase, “We live in a world of words.” Focusing on the communication aspect of what the studio creates, the campaign featured words and letter in various forms, from alphabet soup, to a recording studio sound wave, to Shakesphere, to graphitti and more. The client loved the approach and we built on the concept of words and letters by adding samples directly onto the homepage, working them into the “the quick brown fox jumped over the lazy dog” phrase. This phrase features every letter in the alphabet, which allowed us to target specific samples to certain letters, like the “Pizza Fairy” clip from Ronzio Pizza for the letter “Z.” We intentionally hid the samples a bit, sort of as a reward for those visitors who decided to explore the site a little and uncover that functionality. That sense of discovery was important to the client and it made this a very enjoyable project to work on.
Around the time that I was building the XHTML structure and styling the resulting pages for this project, I was hearing alot about CSS3. My visit to New York for Future of Web Design 2009 further exposed me to the awesome that is CSS3, and I decided to experiment with some of those properties on this project. It certainly helped that the client used Safari as his browser of choice and that his identified audience was also largely Mac-based or, at the very least, using somewhat updated browsers (meaning not IE6), so the choice to use some CSS3 effects was a pretty easy one to make.
The site features some border-radius properties, but where I really had fun was with some of the CSS3 animation and transition techniques that currently only work on Safari and Chrome. Allowing text links to fade into their hover states, having some nice, almost Flash-like hover effects for the nav menu and experimenting with some rotation effects on the samples page really allowed me to come up with some real world examples of how I can start using CSS3 in my projects today.
All in all, this was an excellent project to be a part of. I was able to experiment a bit and have some fun working with a client who was really open to new ideas while having excellent ideas of his own to contribute as well.
One last fun little note on the project - the rotating images of ‘words’ on the homepage actually feature a little signature that I added in there. When selecting the images to use, one of the ones we choose was some children's puzzle-like foam letters. The image itself was fairly large, so I focused on two particular letters for the design, and those two letters just happened to be a J and a G, which are my initials. So the homepage of the site bears my signature - kind of.
You can check out the new site at www.hippostudios.com and if you are in the market for heavyweight audio production, be sure to contact Martin at Hippo and tell him I sent you!