Responses by Miguel Trias, creative designer and producer.
Background: The purpose of this website was to feature and support the launch of a pioneering sustainable initiative from Iberostar Group, called Wave of Change, to reduce the use of plastics in its hotels, and to promote responsible consumption of seafood and improve coastal health. Its target audience is pretty wide—as with all sustainable issues, it concerns everyone, from the usual guests to the scientific community.
Design core: I think the power of this website is based on its simple yet effective visuals, combining a strong graphic style of huge serif-sans typography and differentiated colors with super-smooth animations to explain the concept.
Process: Creating this website was like being on a fun playground, where I had the freedom to experiment with different animation techniques and navigation features. The most challenging parts were animating the SVG graphics since everything is code-based. That ends up being a trial-and-error process until the animations look great.
Navigation structure: The navigation of the website was one of the first things we discussed. We needed it to be as simple as possible while enabling the users to dive in if they wanted to know more, but simultaneously making that an optional thing—not imposing a specific navigation funnel.
We ended up going for a bidimensional-navigation style (vertical and horizontal.) It was important for users to be able to glance at the project through the simplest and most intuitive interaction of all: a vertical-axis scroll—which is also a common thing through all devices. And if they wanted to learn more, they could by sliding to the right on a horizontal axis for each chapter.
Technology: The website was built in HTML5 and then transformed to PHP for the dynamic parts, like news from the blog and common navigation elements. For the animation part, the main library was GSAP, which is superfast and a true Swiss Army knife for these kinds of things, combined with ScrollMagic. Many animations were also handled in pure CSS3 keyframes. Regarding back-end features, probably the most challenging part was the news archive, which is fed with WordPress; however, the navigation and logic were built from scratch, using native AJAX for a dynamic and smooth experience.