The Community Science Museum's interactive website project aimed at engaging primary and middle school children, along with their families, has been successfully completed. This report outlines the creative and technical aspects of the project, adhering to design principles, project management, and HTML/CSS development. The website prototype (Figma), its design choices, technical considerations, and adherence to WCAG, SEO, and content management guidelines are discussed.
- Live Version of the Site: [Click Here] (https://science-museum-tau.vercel.app/)
- Site's Prototype: [Click Here] (https://www.figma.com/file/kusnZOE01yqN4pmiVdfmYj/Science-Museum?type=design&node-id=0%3A1&mode=design&t=ILJkCLCCdXDdI4Lf-1)
- Project Plan: [Click Here] (https://github.com/users/AbdullaAlHarun/projects/2/views/2)
- HTML
- CSS
- Java Script
- OSM Generator
- VS Studio: For HTML, CSS and JS
- Figma: For design
- Github and SourceTree
- FontAwesome:For fonts
- Adobe Photoshope: For Logo and Images re-size
- Freepik.com: For images
- Home Page (Under Home page there is more 5 post details page)
- Visit Page: (Under this page there is one more page is called payment page)
- Exhibitis Page
- Shop Page
- Contact Page
The Design Phase is dedicated to creating a visually appealing and user-friendly website. Using Figma, the design process progresses through low fidelity, mid fidelity, and interactive prototype stages. Each step is treated as a one-week sprint, with GitHub issues representing individual design tasks. Time schedules and priority levels are assigned to each issue to maintain a structured workflow.
The Coding Phase involves implementing the designed features using HTML, CSS, and JavaScript. GitHub project branches are created for each issue, facilitating parallel development. Upon completion, issues are merged into the main branch through pull requests. Post-sprint, bug fixing and responsive design adjustments are addressed, leveraging media queries for optimal cross-device compatibility.
I am delighted with the progress of the project, and I am eager to take it to the next level by enhancing the design further. Additionally, I plan to incorporate JavaScript to introduce functional elements to the pages, especially focusing on creating an interactive user experience.