ESERO

A website I designed and developed for ESERO
(European Space Education Resource Office), a program of the
European Space Agency (ESA).

This new site replaces their old one, offering a fresh, modern experience.

The Challenge

I'm being honest, I have a huge affection for this project. It's officially the first website I've designed from scratch, and it's currently in the front-end development phase.

For those who aren't familiar with it, ESERO (European Space Education Resource Office) is a program of the European Space Agency (ESA). It supports national and international education by using space as a tool to inspire students to pursue careers in science, technology, engineering, and mathematics (STEM). ESERO provides educational resources, organizes initiatives and projects like the CanSat micro-satellite competition, and collaborates with local partners, such as Ciência Viva in Portugal, to promote student interest and awareness of space programs.

The challenge here was multi-faceted:
First of all, it was an existing website with thousands of pages already in circulation on the web.
Second, it's a complex site with a lot of information that needed a light, clean image so as not to overwhelm the user with so much content, but it also had to have a dynamic and animated layout appropriate for a school context from the 5th to the 12th grade.

It was indeed a challenge, but one that got me hooked, and I loved doing it.

When it came to the color palette, it was also a challenge (everything in my work is a challenge—amazing! 😂). The colors for the site itself are easy, but ESERO has 7 different school projects, each with its own color (some projects have two different aspects—for basic and secondary education—and each aspect has its own color too) that absolutely do not match the ESERO colors.

How did I get away with this?
Spoiler alert: I created a common page for all of them, where I do a soft introduction of each project's colors and a brief explanation of the project. (How did the page not end up looking like a rainbow? Well, you'll have to take a look when it's launched.) Then, each project's individual page takes on only that project's colors, leaving the ESERO colors aside (a bit like what ESA does with its projects). And when I say it takes on only the project's colors, I mean it takes them on for everything—including the header, footer, and so on.

I'm leaving the color palette here for you to visualize the challenging rainbow I faced.

ESERO colors:

Projects Colors:

Spoiler

I can't reveal too much information (even though I'm dying to share this 🤭), but to give you a small idea of the scale of this website: I had to design 79 different pages, five of which will serve as templates for many more.

The homepage will have a killer 3D parallax effect at both the beginning and the end. (By the way, I designed all the visuals myself with my partner, Adobe Illustrator, especially the ones for this effect, which I just love.)

Also, a dynamic menu was created to help users with navigation. For those who don't know what I mean, let me explain: Every website has a header (the bar at the top with links to all the pages). Given the complexity of this website, we needed to create a second menu that changes and adjusts from page to page, presenting relevant links that are within the same context as the page the user is on. This improves site navigation, makes it easier to present pages and the connections between them, and, most importantly, gives the user a tool that provides maximum available access, minimizing the "page hunting" that sometimes leaves them unable to find what they were looking for.

Nowadays

The project is currently in the front-end programming phase, which I am doing myself. It will then be passed on to my back-end colleagues before it goes live. For now, you can take a look at the current ESERO website to get a slight idea of the massive difference between the before and after.