The purpose of Butterfly’s new website was to create an exciting and visually energetic website that connects with present and past clients, inspires new clients and makes competitors go ‘wow’. It aims to present Butterfly as a leader in the digital space, with a personal approach and cutting edge processes and skills.
Using the recently released Drupal 8, the mission was to experiment with and challenge this new CMS, expanding internal knowledge and exploring the possibilities of using Drupal in new and innovative ways. Due to the fact this is a new release, Butterfly custom developed their own form builder, which they will make available to the Drupal community in coming weeks.
To take advantage of the recent inclusion of HTML 5 across browsers, Butterfly wanted to demonstrate exactly what video can do for a website to engage and inspire an audience.
The use of video in new and unusual ways is on the rise and something we are set to see more and more of in the near future. In this case, a high frame rate video has been included as a highly conceptual banner that creates intrigue and mystery when a user first lands on the homepage. It is eye-catching and makes you take pause before going in and exploring the site. It also sets up the theme seen throughout the site, of a small ‘Butterfly effect’ creating a big impact, with wide spread results.
Technically, the site is extremely polished, with animations and transitions creating a seamless flow from section to section. For example, each case study previews the following case, and loads up instantly, using a slide in transition. The content layout is designed to move the user through each section - services or cases - deeper into the site and get a clear understanding of the service offering and process, as well showcasing the achievements of previous work. In presenting the content using this method, Butterfly are actually educating their clients on the website creation process.
Of course the site is responsive, with a 100% fluid template that smoothly adapts to any size screen. As mobile devices won’t play videos automatically, Butterfly converted the background video to a gif, which gives the same feel to the user, without the need to click.