Have an idea?
We can help you bring it to life!
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 ManagementUX & UI DesignFrontend Development
Technology
ReactNext.js
Challenge
Project Goals
Create a straightforward website that presents the importance of seagrasses and macroalgae, the objectives and projects that are being developed.
Design
Design Elements
Color Palette
We combined blue and green tones to represent the project’s area of intervention: marine forests.
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.
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.
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.
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.
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.