Hero
Hero
Hero

BLUEFORESTS

Rebuilding Portuguese marine forests

The BlueForests project seeks to advance the science and test technological innovations to rebuild Portuguese marine forests and to value their ecosystem services.

Client

BlueForests

Year

2022

Services

Project Management UI/UX Design Frontend Development

Technology

React NextJS

Challenge

Project Goals

Create a straightforward website that presents the importance of seagrasses and macroalgae, the objectives and projects that are being developed.

Project Goals
Project Goals

Design

Design Elements

Project Colors

Color Palette

We combined blue and green tones to represent the project’s area of intervention: marine forests.

Project Typography

Typography

We chose Restora as the main font family due to its title’s organic strokes and serif that blend so well with the maritime theme. Combined with a simpler font, we aimed to bring elegance to an already minimalist website that has great readability.

Project Illustrations

Illustrations

Graphically, we chose to adapt some ​​illustrative elements of seaweed that the client provided to reinforce the project’s core concept.

Design

Components

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.

Components

Design

Grid System

We decided to make a simple grid, a 12-column grid with 20 gutters for desktop and then adapt it to the rest of the devices.

Grid System

Homepage

We chose to make an immediate impact on the user by communicating the BlueForests’ mission straight away. To give even more emphasis to the projects area of intervention, we highlighted its keywords "marine forests" and "ecosystem services", and added animated bubbles that convey the idea of being underwater.

Topics

Each topic has its own modals: the user can navigate between them by using the arrows on their keyboard, which simplifies the navigation experience.

News

To make the listing page more dynamic, we highlighted two featured news articles at the top that are followed by the remaining news articles. For an improved navigation experience, the user has the possibility to navigate between the individual news pages without having to return to the list.

New Website

Mobile

All pages were designed and implemented to be fully responsive so that users in different devices all have the best possible experience.

Mobile

Feedback

“Concealed provided an excellent delivery of the website according to our communicated objectives and budget. We were very pleased with their workflow and timely execution of tasks as well as their enthusiasm of working on a website with an environmental focus. Concealed developed a design and functionality to effectively communicate the project’s objectives to a wider audience and thereby contribute to increasing ocean literacy.”

Pål Bakken, CEO-Founder, BlueForest

New Website

Outcome

A simple, yet creative website that showcases the BlueForests project and its work to investigate and test technological innovations that rebuild the Portuguese marine forests and value their ecosystem services.

Outcome

Have an idea?

We can help you bring it to life!