DTE Climate - University Politehnica of Bucharest

 2023  ✦  View website

Landing page of the DTE website created in Figma

 

Background

At Eau de Web I was tasked with the design for DTE Climate, a project focused on building resilience by 2030 across at least 150 European communities and regions. The Polytechnic University of Bucharest (UPB) coordinates the implementation to establish a center of competence in climate-change adaptation.

First I had limited background on the project, just a short overview and a few guidelines. I was told that content would be minimal, so the mockups needed to address that gap. Photos would be used minimally, and if used they would be of low quality. The lack of clear information and direction for the landing page was a major challenge, so I took the initiative to develop concepts for the main platform pages. Feedback on both intermediary and final deliverables was positive.

Image
mobile mockups dte
Mobile mockups

 

Approach

Overcoming the lack of available content was one of the main challenges. The solution was to introduce bold, prominent headings, a nature inspired color scheme (with climate in mind) and interactive gradient elements to bring additional visual interest.

For typography, I selected Montserrat because it is readable and it scales well across screen sizes. It manages to works consistently in both headings and body text, free available for download and use, which made it a practical choice.

The color palette was straightforward and while drawing inspiration from nature, I used a brighter grass green alongside a blue color tone, with a yellow accent color applied sparingly to emphasize certain parts without overpowering the design. 

For the remaining pages (eg. the news section), I followed a familiar layout approach. Content was left-aligned to allow space for a compact sidebar, while the hero area retained the same design language as the landing page in order to keep the experience cohesive.

 

The design system

For this project a design system was necessary to keep visual choices consistent and keep ongoing maintenance easier, most importantly when incorporating feedback from client.

Image
components dte

Reusable components created in Figma

 

Final outcome

Image
landing page dte

Landing page

Image
tablet mockups dte
Tablet mockups