Responses by Matt Hickling, lead designer and Natale Catella, lead developer, Cygnus
Background: The new website was part of a wider agency rebranding and repositioning piece. We felt the previous website and brand didn’t represent our full-service offering and skillset within the agency. The website was scheduled to run alongside the launch of the new Cygnus movie ‘A day in the life,’ which was created to give existing and potential clients a real insight into the culture of Cygnus.
Highlights: The angular element of the new Cygnus brand represents the dynamic nature of the business and our ability to solve our client’s problems in unique and varied ways. It is a key animation feature, gliding in and out of each page on the load and scroll, creating key focal points for users throughout the website.
Challenges: The complexity of the design, the animations we wanted to introduce and how that impacted the development of the website, all while still being concise and consistent with the brand, design and code.
Favorite details: That we created a website that keeps users engaged with our content and messaging through subtle movements, dynamic animations and beautiful photography, while representing our new brand, our unique culture, our partners and the services we offer. We are proud of the final execution of those initial ideas and how they have come together in the experience.
Navigational structure: The navigation is clean, with a range of subtle interaction and animations to guide users. It’s designed to frame the content and page template throughout the website. The user interface allows users to make key selections, via the menu or righthand side links. The breadcrumbs guide users through their journey, highlighting key content and areas within the agency, while telling them where they are and what they have left to see.
Technical features: As part of the new site’s development, we used Greensock (GSAP), an animation platform and suite of tools for high performance HTML 5 animation. We also used SASS, JS, jQuery, ScrollMagic, Video JS, Bower, gulp, sage, Wordpress and PHP.
Alternative approach: If we were to do anything differently, we wouldn’t have run the website and brand identity development in tandem, as the brand continued to evolve during the development phase of the website, resulting to delays in the build phase.