Restoring The Forgotten Forests In Our Ocean

In order to achieve a solid design layout, we used a simple 12 column grid with a 20px gutter. This allowed us to place text, images, and functions in a consistent way throughout the design, for all viewport sizes.

Once we defined the project’s design elements, we created the design system: the set of reusable components that could be assembled together like puzzle pieces to build new, consistent looking pages within the same style.

Since the homepage is the portal to the project’s website, it was crutial that it clearly laid out SeaForester’s mission and their plan to achieve it. We kept it colorful with the ocean tones and we made sure it had the right amount of interactive elements, which captivate visitor’s interest and propels them to learn more about SeaForester throughout the other website pages.

The key goal for this page was to inform and sensitize users on this important topic without overwhelming them. We managed this by creating a dual page that starts by presenting the existing deforestation problems and then, by switching a toggle in the page’s header, it shows us that there is hope with SeaForester’s solutions to recover maritime forests. These two phases are visually distinguished by the contrast in the green and blue elements.

This page provides an in-depth explanation of the important work that SeaForester does and how they share it with their community. Its written content is supported by illustrations and images for a richer, more interesting user experience.

While all website pages serve an important purpose, the projects page is where users get a real feeling of which SeaForestation efforts are being done and where they are being made. From Research and Innovation projects, to hands-on work and much more, user can filter the projects by category, select them directly from the page’s interactive map and even use the search input to quickly find the project they are looking for!

We tell SeaForester’s history through a dynamic timeline that is presented as the user scrolls down the page. Afterwards, we meet the SeaForester team: all members photos, names and roles are immediately shown but users can then click on each member if they wish to learn more about them. Lastly, each project partner and contributor gets a dedicated space.

It’s easy to stay on top of the project’s most important news with this header section of featured articles that precedes the global news listing. To ensure the best possible reading experience, the news article content is presented via different elements such as: block quotes, several images with subtitles, sliders, videos and clean typography. In the article pages users have the option to navigate to other articles and/or share the news without having to return to the news listing page first.

A simple, yet unique idea was defined for the error page: the website’s main graphic element, seaweed, is found moving in a slow animation that mimics movement at the bottom of the ocean.