Bengaluru DeSci World
Overview
The Bengaluru DeSci World website was created to promote and showcase an event held in Bengaluru, India, focused on decentralized science (DeSci). The primary goal was to develop a site that reflected both the global aesthetics of DeSci World and local Indian cultural elements. To achieve this, I designed a theme toggle feature, allowing users to switch between DeSci World’s color palette and a vibrant Indian-inspired theme. The design heavily incorporates CSS animations to bring the page to life and enhance user engagement.
Goals
- Create a visually engaging event site that combines DeSci World's aesthetics with local Indian cultural elements.
- Develop a theme toggle feature that allows users to switch between global and Indian-inspired themes seamlessly.
- Use CSS animations to make the website dynamic and visually interesting without heavily relying on JavaScript.
- Ensure the website is responsive and accessible across various devices, from desktops to mobile.
Key Features:
- Dual-theme toggle to switch between DeSci World aesthetics and Indian-inspired colors, enhancing the site’s cultural relevance.
- CSS animations throughout the page to add movement and visual interest, creating a dynamic experience for users.
- Responsive design to ensure the site looks and functions well across all devices, from desktops to mobile.
Challenges and Solutions
Challenge - Blending Global and Local Aesthetics: Combining the futuristic, tech-focused aesthetic of DeSci World with Indian cultural elements was key. I addressed this by implementing a theme toggle that allows users to switch between these two styles, while maintaining cohesion across the design.
Challenge - Adding Interactivity with Limited JavaScript: The goal was to create a visually engaging site using primarily CSS and minimal JavaScript. I achieved this by leveraging CSS animations and transitions to add visual elements, keeping the code lightweight and maintainable.
Solution - CSS-Driven Animations and Cohesive Design Elements: By focusing on CSS animations, I created a lively, engaging site without heavy reliance on JavaScript. This kept the site fast, visually appealing, and in line with the event’s modern yet locally inspired theme.
Learning Outcomes
Designing for Cultural Relevance: This project taught me the importance of understanding and incorporating local aesthetics, especially for events with a strong cultural connection.
Advanced CSS Techniques for Animation: By focusing on CSS animations, I improved my skills in creating engaging, interactive visuals without needing complex JavaScript solutions.
Balancing Aesthetics and Functionality: Creating a theme toggle that works across different aesthetics while maintaining a cohesive design strengthened my understanding of user-focused design and responsive theming.
Final Thoughts
The Bengaluru DeSci World project was a unique opportunity to blend modern tech aesthetics with cultural elements, creating an engaging site that captures the essence of both DeSci and Bengaluru. This project highlighted the power of CSS in building interactive designs and reinforced the importance of cultural adaptability in web design.