INTERACTIVE DESIGN: Final Project
19 November 2024 - 17/ December 2024
FANG YAOYUE (0372006)
Interactive Design | Bachelor of Design in Creative Media | Taylor's University
Final Project
List
LECTURES
INSTRUCTIONS
FEEDBACK
REFLECTION
LECTURES
Through the last assignment, I have prepared the layout in figma, and now it needs to be implemented in DW. I think it is not difficult, but it will take a lot of time to do it well. Fortunately, I should have finished the framework last week, which will lighten my follow-up work a lot.
Final operating requirement
Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website based on
the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website
INSTRUCTIONS
In this assignment, we have the creative freedom to design and develop a single-page microsite centred around the theme of lifestyle. Our goal is to craft an immersive and visually appealing microsite that effectively communicates the chosen lifestyle theme and engages users through thoughtful design and interactive elements.
For visual inspiration, I turned to a variety of sources to find compelling examples of sports websites. I did extensive research, looking at a variety of design styles and layouts. I've collected a range of visual effects across many sports platforms that capture the energy and beauty of the game world. These references have informed my design approach and helped shape a website that is both visually appealing and user-friendly.
This project is more than just creating a website; It is also an opportunity to gain an in-depth understanding of web design principles and hone technical skills. By focusing on topics I'm passionate about, I aim to create an engaging online experience that resonates with sports fans.
Fig 1.1 These are the images that appear on the site
Fig 1.2 Reference case 1
Fig 1.3 Reference case 2
All pages
Fig 1.4 Directory field
In order to make the directory bar look more comfortable and the customer experience better, I set the hover color change, as soon as the mouse is placed over it.
Fig 1.5 Home Page 1
I put two very representative pictures on the home page, and scroll in turn, these two photos are the NBA logo and the picture of the basketball hollow in the net.
Fig 1.7 Web Layout 1
Fig 1.8 Web Layout 2
Fig 1.9 Web Layout 3
Fig 1.10 Web Layout 4
Fig 1.11 Web Layout 5
Fig 1.12 Web Layout 6
In Dreamweaver, I utilized the skills learned during practical classes to enhance my NBA website project. Here's a summary of the implementation:
Website report
1 External Style Sheet: I linked an external style sheet, , to the HTML page using the tag. This style sheet controls the overall design and layout, ensuring consistency across the website.final_styles.css<link>
2 Fonts: I incorporated several fonts from Google Fonts, such as Bree Serif, Exo 2, and Teko, to improve the visual appeal of the text. These fonts were chosen to match the dynamic and engaging theme of a basketball website.
3 Navigation Menu: The navigation bar () includes a list () of links that direct users to various sections of the website. The sections include "Home," "Buy Now," "Play Now," and other relevant links tailored for a game-focused site. This setup allows users to easily access different content areas.<nav><ul>
4 Content Sections: The page content is organized into distinct sections using the tag. Each section covers different aspects of the basketball website, such as game introductions, player reviews, tutorials.<section>
5 Footer: At the bottom of the page, a element includes an "Ask Me" interactive box and social media links. Some additional information on the website, but this is also closely related to basketball.<footer>
6 Images and Visuals: The tag is extensively used to display images, enhancing the visual engagement of the site. These images include basketball screenshots, promotional banners, and other visual content relevant to the game.<img>
7 Navigation and Structure: CSS controls the structure and layout, making the page easy to read and navigate. The design choices aim to provide a seamless and enjoyable browsing experience for users.
This time I just want to make a sports-related web page, based on the nike brand sports website in the last proposal, and the Tencent sports website this time, I will combine the two to produce the basketball theme website.
I have been an avid NBA fan since childhood, so I have made a lot of friends because of NBA, and I also like basketball friends. While watching basketball, I learn their culture and feel the happiness brought by basketball, which is rare in daily life. In this summer, I also met the famous star Paul George, and gave me his autograph and took a photo with him, which inspired me even more. I think basketball gives me not only physical exercise, but also mental exercise.I'm not just exercising physically, I'm exercising mentally.
Next, I would like to introduce the software, which is divided into six parts: Home page, team discussion, venues, news, about NBA and Contact Us. I have made a total of seven pages, in this page you can immediately inquire about NBA basketball-related information, such as the score of the last two teams, the total number of wins and losses in the season, or see which star injury or star transfer news, you can also receive today's game which rookie player played their own value.
You can also see the information of each team's arena, so that you can go to the arena to see a scene opposite the NBA game, the news does not have to say, the big things in the NBA in recent days or in recent years will be broadcast in class, even if the retired veteran for many years, such as Yao Ming, such as O 'Neill's recent updates will also be published on the above, you can easily understand the consultation through this website, This is a very comprehensive sports basketball website.
I think the most interesting part is this part, the team discussion is a very interesting part, while watching the football in China, you can score the players on the software Hupu, only for the performance of the game, I think you can also on this website, you can evaluate the history of the player, score the performance of the player, and publish. Let more people see, you can also support your favorite team with your fans and friends in the discussion group, but also in the discussion group and the other team's fans spray trash, this is an interesting point, but also the basketball culture, the fun of basketball, after the game all contradictions disappear. Both players and fans can shake hands and make peace, the last about us I think is necessary, you can enter your name and contact information to contact me, there is also a contact number, through this to tell me what needs to be improved, so as to make this website more perfect, more interesting, for the basketball we love.I enjoyed the process, the experience was good and the result was perfect.
And after testing, the website can be run under any browser, and can also be viewed on the mobile phone and computer side, so that it seamlessly ADAPTS to each screen size. I think it is better to browse on the computer side, because the mobile phone screen will make the website deformed, and the horizontal directory becomes the vertical display mode is not very comfortable. I also added a lot of details like scrolling, hovering and changing colors. This makes the whole site experience better.
(838 words in total)
HTML CODE
Home page
team discussion
venues
news
about NBA
Contact Us
CSS CODEstyle css
ionic css
transform css
bootstrap.js
mk-3Dcarousel
jquery.min.js
I ended up naming the site after myself, as my first full website, as a way of remembering that, which has always inspired me and kept me learning about interaction design.
Html & Css ：https://drive.google.com/drive/folders/1ApT_ya_5u-MFEvNNrwfRTlh82R0Pt-0q
FEEDBACK
Week 12
This week is the twelfth week, there is no compulsory line class, but if you need, you can go to the teacher to ask the teacher questions, I like this way of class, I think this kind of learning can exercise autonomy. I am very happy to learn the process of code alone, do not understand to find a tutorial, in the whole process, constantly modify, constantly innovate which let me learn a lot.
Week 13
Last week I have almost completed the website, this week is mainly to modify some footer layout, because I feel a little messy, but harmless, modified after more perfect, I am full of a sense of accomplishment.Making this website is my hope to improve my ability, while doing something I like, I love.
REFLECTION
This semester is coming to an end, thank you very much for Mr. Hamimi. This is also the first time for me to learn code typing, DW and FIGMA software. I think it is difficult to learn DW, but when I encounter difficulties, I will ask the teacher or consult the materials to overcome the problems. I like him very much, he often jokes with me, he is very humorous, I feel friendly.
The branch I choose is also UI/UX. I like the process of learning interaction design, which is an interesting branch. Just like this assignment, I can choose the field I like and am interested in to build a website belonging to me. To feel their charm, when you finish the website production, you will feel a sense of accomplishment, I combine basketball with life and interaction design, which is exactly what I like, I hope I can continue to work hard in the advanced interaction design.
评论
发表评论