Selected Works & Case Studies

Sharp visuals for an organised chaos.

X-Wife

A website for a music band.
Done in February 2011.

In between moving from Lisbon to London, I collaborated with the talented designer David Carvalho to create a new website for the rock band X-Wife.

Just in time to promote the launch of their fifth album, we designed and built a website with sharp and well-defined visuals inspired by the band and the chromatic style of the late 70’s punk rock.

Using an unusual two-dimensional scrolling pattern for the content and other subtle animations, the website features the band’s bios, upcoming gigs, discography, marketing materials and news updates pulled in from the band’s Twitter feed.

To create a bit of organised chaos on the website, we decided to add a full bleed background with stylized video and images collected from marketing materials, band fans and Flickr, displayed in randomised sets.

And it would be a proper band’s website if it didn’t allow to hear their music, so we also included a custom music player with a strong visual component.

To support the website’s lifecycle, we also integrated it with a custom content management system.

As a result, this promotional platform helped the band increase the media coverage and over 700 new mailing list subscribers within the first months.
And as a bonus for us, the website won a Silver Award at CCP Festival in 2012.

Technical

Back then, it was already possible to build the website relying only on HTML5 features. But due to time constraints, we decided to build a hybrid piece, based in HTML and enhanced with Flash. This way Flash did the heavy load, handling media assets like sound and video, used in the background and the music and video players.

To support the frontend I built a custom PHP backend API and CMS. The backend keeps the news updates in sync with the Twitter feed and also supports SEO by allowing search engines to index the website contents, even with dynamic frontend built in Javascript.

The custom Javascript MVC frontend controls the displayed content and enhances the experience with CSS3 little animations.

Credits

UI design by David Carvalho



Need help with your idea?

If you have an idea for a digital product, no matter how big or small,
I would really love to hear from you.

Even if it’s still very abstract, a little chat won’t hurt.

Let’s get in touch