Premises
“Quando eravamo giovani” is a project I worked on in the years 2020-2024. It collects interviews with some Italian partisans that fought alongside Allies during the Second World War. This project is meant to be a reputable platform where people could read the interviews. In fact, footnotes and links to essays and documents integrate every interview.
From scratches to goal
The old website was created using a basic Wordpress layout. It did not follow any Design’s laws and heuristics. That’s why I planned a radical yet preserving redesign of it that could saves the goals and clear identity of it.
I identified many aspects I could work on to improve the whole website (and the user experience as well). I decided to work on accessibility and responsiveness as well.
Color palette
Red is the accent color of “Quando eravamo giovani” for many reasons. First of all, this color was a symbol during the Italian Resistance. In the Color Theory it’s also associated with courage, sacrifice and pride. I decided to keep it and use a darker shade of it to provide a better accessibility. After this, I completed my color palette with a warm shade of white and a dark grey.
For what concerns the use of colors, due to the clear and simple nature of the website, I opted to use the golden ratio: 60% white, 30% dark grey, 10% red.
Then I proceeded to check every combination of colors I would use for accessibility. They all passed the Web Content Accessibility Guidelines’ AAA test for both texts (both normal and large), for graphical objects, and user interface components.
Typography
When it comes to typography, the old website used a System Font. It had a great accessibility, but it did not convince me due to its lack of originality. I experimented with a lot of fonts and I ended up going for Lexend. It has a unique and contemporary look, while keeping being accessible.
Components & Inspiration
In the old website components were incoherent. They presented both rounded and sharp corners, since pre-made ones were used. To preserve the old identity and the serious tone I decided to use components with sharp corners. I took inspiration from a Einaudi essays collection about philosophy.
Media
One of the worst flaws of the old website was the total absence of images. I proceeded to add scans of documents and photos of some of the places narrated in the interviews. In this way I lightened up the website pages, giving them dynamic and creating interest.
From wireframes to responsive design
After this, I started to create my layouts on paper, with an eye on responsiveness. Then, I transferred everything to Figma and Framer. I improved the responsiveness and I kept iterating until the final results.
Since Framer do not permit to select fallback fonts, I tested the new website with some common fonts. I did this process with Helvetica, Arial, Times New Roman, and Georgia.
Final result and future
I achieved a premium-feel responsive website and I’m 100% satisfied with the final result. The content is now easier to read from all devices, allowing more people to discover the project. In the future there's room for new sections and new interviews. I also would to translate the content in English, so that even more people could have access to it.
