A food festival website built for CarnavalDeSol community, showcasing various vendors from South America
This project was the final project for my university Information Design course. CarnavalDelSol is a microsite for the Carnaval Del Sol food festival, showcasing South American food vendors. The original festival’s website lacked vendor details, missing an opportunity to engage visitors. This microsite bridges that gap by providing an engaging and informative platform.
To kick off the project, we researched festival websites and Latin American culture themes. Our team studied design patterns and user flows to ensure an intuitive and engaging experience. We also analyzed the festival's theme to create a design that visually represented Latin American culture.
The countries page, featuring flags rotating around the sun, underwent several iterations based on feedback about its theme, colors, and responsiveness. Early designs lacked contrast and failed to adapt well to different devices. I built and refined the page through multiple iterations, addressing feedback from instructors at each step to improve functionality and visual appeal (Image 1)
As the primary developer, I translated our designs into a responsive and functional microsite. I ensured that every element, from the rotating flags to the sun, worked seamlessly across devices. Special attention was given to responsiveness, particularly for complex layouts like the countries page. The final design successfully balanced aesthetic with technical functionality, highlighting the diversity of the represented countries. (Image 2).
One of the biggest challenges was ensuring the countries page maintained its visual integrity across varying screen sizes. Initially, the rotating flag layout broke on smaller devices, disrupting the user experience. To address this, I implemented CSS media queries to scale the sun larger and hide half of it, creating space for other flags. These adjustments created a cohesive and responsive design that worked seamlessly across all devices.
My heavy use of custom SVG assets caused slower load times. Although performance optimization wasn't a course requirement, it highlighted areas for improvement. Future enhancements could include compressing SVG assets, implementing placeholder or lazy-loaded images. These changes would ensure faster load times without compromising the visual quality of the design.
