Galaxy Garden Community Museum

The aim: Modern, Exciting, and Educational

A responsive website aimed at primary and middle school children (ages 7-15) and their families.

  • HTML, CSS (BEM Methodology)
  • Responsive Design
  • Accessibility Standards (WCAG)
  • Figma (Design)
  • GitHub (Version Control & Projects)
    • Galaxy Garden Community Museum Hero Section showing the modern design aimed at children and families.
    A screenshot of the exhibitions page featuring upcoming events and detailed information about available exhibitions.

    My Role in the Project

    The Galaxy Garden Community Museum project was developed as part of my Semester 1 project for FED Year 1. The goal was to design and develop a responsive, modern website that appeals to children and families without being too childish. I was responsible for every aspect of the project, including:

    • Design and Branding: I used Figma to create high-fidelity wireframes and establish a visually engaging design language that balanced playfulness with professionalism.
    • Front-End Development: I implemented the entire front-end using HTML and CSS, ensuring a clean and responsive layout optimized for all device sizes, from mobile to desktop.
    • User Stories and Structure: Based on the user stories, I built multiple pages, including home, contact, contribution, exhibitions, and legal documents, ensuring each view met accessibility standards and delivered a seamless experience.

    • Testing and Accessibility: Extensive testing was done across various browsers and devices to ensure a smooth, responsive, and accessible user experience. I followed WCAG guidelines and ensured ARIA attributes were used where appropriate.

    • Deployment: The project was deployed using GitHub Pages with version control managed through GitHub.

    This project allowed me to practice managing a full development lifecycle, from planning and design to implementation, testing, and deployment.

    Technical Challenges

    • Responsive Design Across Devices: One of the biggest challenges was ensuring a layout that worked seamlessly across all devices while keeping it playful and engaging for the target audience.

    • Accessibility and Testing: Ensuring compliance with WCAG standards and making the site accessible for all users was a key focus, especially given the range of potential visitors, including children and those with disabilities.

    • Designing for a Younger Audience: Balancing a design that would appeal to children without being overly childish required a delicate balance of colors, typography, and imagery.

    • No JavaScript Usage: Following the project limitations, I had to creatively implement all functionality using just HTML and CSS, which pushed me to maximize the potential of both for interactivity and responsiveness.

    The contribution page with details about how visitors can support the museum, displayed in an engaging, responsive layout.

    Features

    Interactive Exhibitions Page: Features upcoming events and exhibitions, with details tailored for children and families. Users can explore the museum’s offerings easily.

    Contribution Page: Encourages visitors to learn how they can contribute to the museum’s future. Information is presented in a way that feels approachable and informative.

    Contact Form and Legal Pages: A simple, accessible contact form allows visitors to reach the museum easily, while legal documents such as the privacy policy and terms are available in a clear format.

    Responsive Design: The site is optimized for all devices, providing an engaging user experience across mobile, tablet, and desktop views.

    What I Learned

    • Responsive Design: I deepened my understanding of creating layouts that work across a range of devices, specifically balancing design elements for young audiences without overwhelming them.

    • DRY CSS: Following the DRY principle in my CSS helped make my code more efficient, reducing repetition while improving maintainability.

    • Testing and Debugging: I learned to test rigorously across different devices and browsers, ensuring consistent performance and accessibility for all users.

    • Accessibility Focus: By following WCAG standards and focusing on ARIA attributes, I gained valuable experience in making my designs more inclusive for all users, including those with disabilities.

    Screenshot of the home page showing playful design elements aimed at young audiences.
    The contact page showing a clean, easy-to-navigate form for visitors to reach out to the museum.

    Future Improvements

    • Adding Interactive JavaScript Features: Once I’m allowed to use JavaScript, I plan to add interactive elements like games or quizzes to make the site more engaging for children.

    • Refining the Design: I plan to continue fine-tuning the design based on user feedback, improving accessibility and responsiveness wherever needed.

    These improvements reflect my commitment to refining both the design and functionality of the Galaxy Garden Community Museum.

    Explore Galaxy Garden

    View Live Github mark logo in black

    Check out the live version of the Galaxy Garden Community Museum or explore the source code on GitHub to see how it's built.

    A Figma wireframe showing the layout and design approach for Galaxy Garden Community Museum.