Project 3/ Final Project
19.06.25 - 27.07.25/ Week 8 - Week 14
Sara Patel/ 0362876
Interactive Design/ Bachelors of Design in Creative Media/ Taylors University
Project 3/ Final Project
INSTRUCTIONS
CLASS ACTIVITIES
For this week tutorial we practiced different elements to layer the informations using html and css on Adobe Dreamweaver, which gave us a start idea on how we can proceed on creating our final project.
TASK
For the final assignment, we were asked to create a fully working website with at least five pages based on the prototype we designed in the previous project. We were asked to develop the website using HTML, CSS, JavaScript or other helpful tools like Bootstrap or W3School. The final site had to match the design created before, including the layout, colors, fonts and images. We had to design it to be responsive so it works well on all sorts of devices. Once the website i designed according to the prototype and feedbacks, we had to host it online using platform like GitHub Pages or Netlify.
Google Drive: Link
Drive Link for the project files: Finals
Original Site: SpaceJam
Recreated Website Link: https://s-spacejam.netlify.app/
This website was designed as a modern and engaging recreation of the original site of Space Jam, aiming to reintroduce its nostalgic values. It consists of six fully designed and functional pages: Home, Content, Character, FAQ, Contact and Games. Each page was designed interconnected to each other, with proper navigations, buttons, flashcards, slideshow, dropdown, etc. The site is built using HTML and CSS on Adobe Dreamweaver, focusing on structure, responsive design and smooth user interaction.
Home Page
This Page is designed as the main page of the site which has a hero banner featuring a full-screen background image of the movie with a prominent Call-To-Action (CTA) button which navigates to the official trailer of SpaceJam on Youtube. This navigation enhances emotional engagement of the site, as video is one of the most powerful storytelling tools and it allows fans to revisit the excitement of the film or get to know about the movie if they are a new user, while making the site more interactive and memorable. The layout ensures that the user’s focus remains on the trailer without other distractions. Other than that other flashcards for different pages of the website, making the navigation easy to understand and convenient for the users. For the header navigation panel which was consistent throughout the site, I added the dropdown menu which had a proper hover effect but only 3 panels are functioning to a new page of the site (character, games, support). This helps users quickly access any page of the website without needing to scroll throughout or waste time searching for buttons to navigate from one place to another. Additionally other buttons were added such as home and about which navigated to different pages, allowing easy movement between pages. All the buttons are designed with bright backgrounds, bold text and hover effects to guide the user easily. The entire layout is responsive, ensuring elements stacking vertically when switched on smaller devices like phones.
Characters & Content Page
Next comes the Characters Page which can be accessed from both the dropdown and the flashcard. It is structured in a clean and responsive display of all main characters of the cartoon. Each character is represented with a button labeled with their name (e.g., Bugs Bunny, Daffy Duck, Porky Pig, Taz, etc.) with hovering effect,which creates an interactive response. One of the character buttons is also internally linked to another page with character images in a manual slideshow and a short description of the character. The layout ensures visual balance on different screen sizes and devices. This page not only celebrates the nostalgic characters but encourages great interaction and allows users to learn in detail about the characters, making it the most engaging for fans and new users. For the Individual Character Page which is navigated from the Daffy Duck button demonstrates how dynamic functionality can be achieved with just html and css without other advanced programming languages. The slideshow displays four images of the character, one at a time with left and right arrow buttons on either side. Each image is set inside a flex container that centers the content both vertically and horizontally. Additionally the navigation arrows are styled to match the cartoon theme and respond to hover actions encouraging interactivity. The slideshow is fully responsive and this feature enhances the visual storytelling of the site.
FAQ
For the next page I created the FAQ Page which helps guide visitors by addressing possible doubts or curiosities. It answers commonly asked questions while each question is clearly marked and followed by short, helpful answers. This builds trust and clarity, especially for new users or those unfamiliar with fan sites. The layout structure of these questions improves readability and ensures users can read through easily. I have also avoided using paragraphs of details so that it's easier to understand and no one gets bored reading paragraphs of texts. This can be navigated from any page as there is a hovering button at the bottom of each individual page which navigates to this FAQ page.
Games & Funs
For the next page I created the games and fun page, which can be navigated from the games panel in the dropdown menu of the header or from the games and fun flashcard in the home page. This page is designed very simple as there are three games in different flashcards with an image related to the game and also a short description about the game to make it easier for the users to understand the game. This is one more interactive part of the website which allows the users to interact with the elements and gives it a dynamic structure.
Contact Page
Lastly, there is the Contact Page which is like an end page for the users journey in the website. The contact form layout is a very useful feature as it allows users to easily get in touch with the website owner without having to leave the site. Directly on the webpage, users can fill in their name, mail and the message they want to ask or say something also with that there is a click to submit the message button. This makes communication faster, easier and more convenient for the owner of the website and the users. It also gives the website a more professional look and shows that the website is open to feedback, questions or support if needed. It also makes the website more user-friendly, organized and trustworthy by giving users an easy way to connect.
Technical Implementation and Tools Used
Programming Languages: HTML and CSS.
Cross-Browser Tested: Chrome, Firefox, Edge, Safari (including mobile versions).
Deployment: Website deployed via Netlify for fast hosting.
Why is it better than the existing original SpaceJam website
This recreated website is better than the old 1996 Space Jam website as it is made using modern design, updated features and elements that works well on all types of different devices like phones, tablets and laptops. The old website uses many images, buttons and links that are broken or do nothing in specific. It was maybe fun in the 90s, but now it feels outdated, difficult to use, difficult to navigate, difficult to communicate and visually disturbing. Also, it is not responsive when opened on a phone. The new website which i have recreated looks visually attractive and is much easier to use and understand. The layout is neat and clean, with clearly labeled pages and proper header and footer to help interact quickly and easily. It also uses a better color palette, better cartoon themed font, better navigation with prominent hover effects and better relatable pictures. It doesn’t look boring anymore as it keeps the fun vibe of Space Jam with smoother functions and navigations. The navigation is also simple for users of all age groups to easily access. Users can click buttons and go from one page to another easily and quickly. It also adds an additional feature of feedback and questions through the faq and contact page which is not there in the existing website.
REFLECTIONS
As a design student learning how to build a website using programming languages like html and css for the first time seemed really challenging as I have always tried running away from coding as I found it difficult to understand. I had never worked with HTML, CSS, or any coding tools in such detail before, so everything felt very new and confusing even after having several activities and tutorials in class, I still was not that confident in the start. When we were told we had to make a full working website with at least five pages, I honestly was really scared, I didn’t know where to begin, what if I fail, how will I get through this in time and even if I do get through it what if it's not up to the mark. Apart from all these questions in mind one of my biggest challenges was to understand the layer. It was helpful that we did come up with the prototype before in the previous project so we had an idea what design, layout, color and elements i want to include in the new website. When I initially started working on it, I often made small mistakes like forgetting to close a tag or using the wrong class name or when I would preview the code it would look all messed up. Trial and errors throughout this project was frustrating, but over time, I started learning how to spot the problems and fix them easily. The prototype did help understand the layout but was also challenging to get practically what we thought of in mind in the prototype. Few things like navigation I figured out really easily but few things like consistency or applying few elements as per expectations took me really long to understand and fix.
Despite all these challenges, I learned so much from this experience that now I understand the basics of web development, how to create a clean structure using HTML, how to style the content with CSS and how important it is to test the website on different browsers and devices. I also learned how to use Adobe Dreamweaver, which was really helpful for the first timer as they detected errors and helped us fix it and a lot of features in this app makes it easier to code. One of the best things I learned was how to create interactive elements like buttons, slideshows, dropdowns and forms as I always thought it was impossible for me to get through all this before. I felt really proud when I made the slideshow work, as I have struggled with that a lot. I gave 3/4 days just to make the slideshow working with just HTML and CSS.
Overall this project taught me that learning something new always comes with challenges, but if we don’t give up, we can overcome them and achieve something great. I have cried alot, faced alot of challenges, fixed alot of major issues in the site but finally I’m actually really proud of how much I’ve grown as a designer in such a short time as it made me confident about something I already kept running from. Lastly, weekly feedback and tutor's feedback and guidance helped me a lot throughout the module to stay motivated and get the projects done within the given deadline.
Comments
Post a Comment