Interactive Design FINAL COMPILATION & REFLECTION
Interactive Design FINAL COMPILATION & REFLECTION
Zhang WanRu /0368214
01/10/2024--07/01/2025
Interactive Design / Bachelor of Design in Creative Media / Taylors University
FINAL COMPILATION & REFLECTION
Links to blog
INSTRUCTIONS
Task
Exercises 1-Web Analysis
1.The Monolith Studio（https://www.awwwards.com/sites/monolith-studio）
Purpose and Goals:
Fig 1.1 home page
Monolith Studio’s website conveys a
strong artistic vibe to users, featuring
unique artworks and creations. Its goal is
to attract customers interested in modern
and futuristic custom designs. The website
showcases professional functionality and
usability. With clear objectives, it
effectively shapes the studio's image for
its audience.
Fig 1.2 Item Display
The website features a strong visual
appearance, utilizing a black and white
background to attract users with engaging
pictures and videos. It perfectly complements
a modern, minimalistic design style. The
layout is clear and straightforward, enhancing
navigation and accessibility, making it easy
to understand. Each artwork is accompanied by
a clear description and explanation, with
clean typefaces that increase readability and
align with the minimalistic design. The
website also offers buttons to change the
color of the descriptions and easy access to
all pages and information, boosting
interactivity and accessibility. This enhances
the user experience while scrolling through
the site and provides more visible
descriptions for better understanding.
Fig 1.3 button
The website offers high accessibility. For
example, simply moving your mouse
automatically reveals the artworks’ content,
providing an easy and interactive teaser.
Users can also search through the search bar
for more artwork content. Additionally, the
site effectively showcases the studio’s
services and creations. It is well-optimized
for mobile devices, with good responsiveness
and functionality. However, a small portion of
3D animations and displays may perform slower
on a weak internet connection.
Fig 1.4 Web browsing page
In conclusion, Monolith Studio’s website
design demonstrates high creativity and
artistic value, effectively showcasing their
strengths to users. However, they should also
focus on improving the content flow by
minimizing animations to enhance the overall
user experience on the website.
2. Webby Awards（https://winners.webbyawards.com/winners/video?years=0&sort=0）
Purpose and Goals:
Fig 1.5 home page
The Webby Awards website features a clear and clean design that aligns with modern web design styles, emphasizing the awarded artworks. The layout is well-organized and tidy, enabling users to quickly access and choose different genres and years of awarded videos, along with important information and descriptions. The website is minimalistic and modernized, making it easy to understand, aided by bright colors in the typefaces. The color combinations create a fun appearance without being overwhelming, and the typefaces used are simple to read, as it matches with the overall layout. Moreover, the website provides high-quality videos and images that are visually appealing and attractive, enhancing users' understanding of the content. This indicates that the website performs well, providing HD quality videos for users. The labels section clearly showcases its functionality, allowing users to navigate the entire website effortlessly. Each award is accompanied by clear, informative descriptions, including the meaning of the videos and details about the awardee. It also provides related materials that users might be interested in, enhancing the overall browsing experience with just a click or touch.With recommendations, users are more keen to browse through the website with greater interests. However, the site has too much content, which can overwhelm users with information overload.
Fig 1.6 navigation page
Fig 1.7Search Bar
Fig 1.8 display
Overall, the responsiveness of the website is good for user experience, with no lagging issues. It serves as a helpful and informative resource, featuring a tidy, clear layout with high functionality for research, entertainment, and other purposes, despite the potential burden of information overload.
Exercise 2 - Web Replication
1.Bandit Running
Fig 1.9 Bandit Running page
Fig 1.10 Web Replication PDF (10/10/2024)
2. Ocean Health Index
Fig 1.11 Ocean Health Index page
Fig 1.12 Web
Replication PDF (10/10/2024)
Exercise 3 - Personal CV Page
Fig 1.13 Personal CV Page screenshot
Personal CV Page Netlify link:https://zhangwanru7.netlify.app/
Project 1
The Slide link:
https://drive.google.com/file/d/1mWrpVTr56Jj2Ffl8av7_eE_z2gPu-rwO/view?usp=sharing
Website Redesign Prototype link:
A Brief of my Prototype:
Main features of the prototype
My prototyping centered around creating a user-friendly and visually appealing interface, specifically optimized for the needs of older users. The overall color scheme adopts a simple style of black, white and gray. This minimalist design reduces visual interference and makes the interface clearer and easier to use, while retaining modernity and professionalism.
Font sizes have been significantly increased site-wide to ensure content is easier to read, addressing common visual issues among older users. The page layout focuses on clarity, with text and images arranged more concisely and orderly. For example, on the home page, important content is displayed prominently, the font size is increased, and the overall design of the page avoids clutter. To further improve usability, I also added easily identifiable symbols (such as shopping carts, category icons, etc.) next to important elements to help users understand the interface content more quickly.
Font sizes have been significantly increased site-wide to ensure content is easier to read, addressing common visual issues among older users. The page layout focuses on clarity, with text and images arranged more concisely and orderly. For example, on the home page, important content is displayed prominently, the font size is increased, and the overall design of the page avoids clutter. To further improve usability, I also added easily identifiable symbols (such as shopping carts, category icons, etc.) next to important elements to help users understand the interface content more quickly.
Design Approaches Used in Development
During the development process, I simplified the site’s navigation by creating a “fixed” navigation bar at the top of the page. This ensured that users could easily access key sections such as Home, Categories, About, and Contact without having to scroll up, improving usability and navigation clarity.
To improve content visibility, I removed unnecessary promotional ads and distracting elements, reducing cognitive load and allowing users to focus on important information. Complex visuals were replaced with intuitive icons to simplify interactions and enhance understanding.
In terms of interaction design, I implemented various interactive features, including responsive buttons, hover states, and form fields, to make navigation intuitive and user-friendly. For example, buttons provide visual feedback with color changes when hovered over, while form fields include helpful prompts to guide users through their tasks. These thoughtful interactions make the platform easier and more engaging to use, fostering a smoother shopping journey for all users.
Finally, the homepage content was streamlined by grouping options into category sections and highlighting the most important or popular items. The images chosen were in keeping with the overall black, white, and gray theme, keeping the visual consistency and appeal.
How the Prototype Achieves the Objectives Set in the Redesign Proposal
The Lazada prototype successfully achieves its redesign goals by prioritizing the needs of older users. The black, white, and gray color scheme ensures a clear, visually comfortable interface that reduces eye fatigue. Expanded font sizes and an organized layout enhance readability and navigation, making it easier for elderly users. Redundant ads have been removed, and intuitive icons added for clarity.
The redesign addresses navigation and layout issues of the original site. A fixed top navigation bar prevents overlapping images and text, providing quick access to key sections. Interactive elements like buttons, hover states, and form fields are thoughtfully integrated. Clear button feedback, hover color changes, and friendly form prompts contribute to a smoother user experience.
Overall, the redesign makes the website more intuitive and age-friendly, enhancing visual appeal and user experience. By addressing key issues, the prototype meets the needs of target users while maintaining the brand's professionalism and functionality.
Final Project
Final Website Netlify Link:
https://ladaza.netlify.app/?authuser=0
Brief report：
As a student, this is the first time I have completed a complete website development project independently. This project not only gave me a comprehensive understanding of the basic process of web development, but also gave me the opportunity to practice the knowledge learned in class, transform theory into practice, and apply Mr. Sha's classroom connections to this project. By developing this webpage, I have improved my technical ability, problem-solving ability, and independent thinking ability, and deeply learned the role of each code.
Development process
Lazada is the shopping platform I use here. After using it, I decided to design a shopping website to simulate a common e-commerce platform in real life. This website includes multiple modules: login page, product search function, shopping cart page, and purchase settlement function. My goal is to make this website not only practical, but also provide a simple and intuitive user interface. It is more conducive to the use of every visually impaired person, including color blind users. According to my project 2 UI design, go to construct. I used HTML to define the content structure of the page, CSS to adjust the layout and style of the page, and JavaScript to implement interactive functions. First, I created the HOME and login interfaces. The homepage is designed with a search bar and a navigation menu, while the login page includes an input box, a password display switch button, and links for "Forgot password" and "Register new account". These basic pages laid the foundation for the development of subsequent functional modules. Next, I developed the shopping cart page, which is the core part of the entire project. Users can view product information, adjust product quantity, and view prices in real time in the shopping cart.
Challenges encountered
During the development of this webpage, I encountered many challenges, which made me deeply realize the difficulty of completing a project independently, and also let me gain valuable experience in the process of overcoming difficulties. First, in terms of layout adjustment, I found that every change in the value will have a huge impact on the overall effect of the page, and the slightest carelessness will cause the page layout to be offset or disordered. As a beginner, I initially felt at a loss as to how to choose the right value. To solve this problem, I consulted a lot of CSS layout documents and tutorials, learned how to use tools such as Flexbox and Grid layout, and gradually mastered how to achieve responsive design through media queries. Although I felt very confused when debugging at the beginning, with continuous attempts, I was gradually able to optimize the page structure in an orderly manner. Secondly, when implementing the page jump function, I encountered the problem of path setting. At first, I was not familiar with the absolute path and relative path of the file, which caused the page jump to fail or link errors. In order to fix these problems, I re-planned the folder structure and carefully adjusted the hyperlink path of each page, and finally achieved smooth jumps between pages. In addition, managing the image format and size in the webpage also made me feel very difficult. Some images took up too much space on the page because they were too large, and some looked strange because of their uncoordinated proportions. I solved these problems by using the CSS `max-width`, `max-height`, and `object-fit` properties, and used online tools to compress the images to optimize loading speed. These attempts made me more aware of the importance of image optimization. In addition, when debugging, I found that the position of elements often changed when the page was loaded or refreshed, causing the entire page to look messy. To solve this problem, I learned the rendering mechanism of HTML and CSS, and greatly improved my development efficiency by fixing layout rules and using browser developer tools for real-time debugging. However, the most difficult moment was when I tried many methods and still couldn't solve the problem. I felt collapsed and wanted to give up. After calming down, I regained my confidence, continued to consult materials, watch tutorials, and seek help from friends. They not only encouraged me, but also personally demonstrated to me how to implement certain functions, which allowed me to gradually find solutions to the problem. I hope that web pages can present consistent and good effects on different devices (such as computers and mobile phones). However, due to the difference in screen size, I need to constantly adjust the CSS style to ensure that the layout and content will not appear messy due to the change in screen size. By using media queries and flexible CSS layout techniques, I finally achieved compatibility of web pages on multiple devices. These experiences made me realize that web development is not only the application of technology, but also a test of patience and perseverance. Through this challenge, I learned how to face complex problems calmly and solve them step by step through analysis and decomposition. These experiences have benefited me a lot and laid a solid foundation for future learning and project development.
How to overcome challenges
During the development process, it is inevitable to encounter problems, but I have successfully overcome these challenges through some effective methods. First, I made full use of online learning resources, such as W3Schools. When I encountered problems, I would first consult relevant materials, learn the concepts, and then debug and experiment with the code, which allowed me to gradually solve many technical problems. Secondly, I adopted a modular development approach, splitting the project into small functional modules and implementing them one by one, such as adjusting the photo format and frame size, and ensuring that each part is running properly before integrating them. This approach allows me to focus on specific problems while improving the clarity and maintainability of the code. In addition, I use the browser's developer tools to view page layout and style issues in real time, quickly locate errors and optimize the code. When faced with more complex problems, I will also record error messages, search for solutions, and seek help from friends or classmates. Their suggestions help me solve problems from a new perspective. Through these efforts, I not only successfully completed the project, but also improved my ability to solve problems independently, while accumulating valuable experience.Finally, I successfully completed the development of this webpage and implemented all core functions. The entire website has a simple interface and practical functions, which can simulate the real shopping process.
Through this independent web development project, I deeply experienced the challenges and fun contained in the whole process from design to implementation. Although I encountered many difficulties in the development process, such as layout adjustment, jump page implementation, and photo format adaptation, I gradually overcame these challenges by consulting materials, modular development, repeated debugging, and asking others for advice. Every time I successfully solve a problem, I feel extremely satisfied, and it also makes me realize the importance of continuous learning and trying new technologies. This development experience not only improves my technical ability, but also enhances my problem-solving ability and independent work ability. I also realize that optimizing user experience and improving web performance are the key points that need to be paid attention to in the future, such as trying to use modern front-end frameworks or adding more practical function modules. As a student, this project has allowed me to accumulate valuable experience and lay a solid foundation for my future career development. I will also take this as a starting point to continue to challenge myself and make continuous progress in the field of technology.
Reflection
This semester, I have conducted various studies and practices in the field of web design and development, including the completion of three exercises and three comprehensive projects. These tasks have significantly improved my web page analysis, visual design, interaction design and coding implementation, and also given me a deeper understanding of the complete process from design to development.
In the three exercises, I first mastered the basic principles of web page structure and functional design through web page analysis. This taught me how to observe the role of elements such as titles, images, buttons, and their importance in the user experience. Later, I further strengthened my understanding of web page layout, color matching, and typography aesthetics by copying web page content using Adobe Illustrator. In this final exercise, I coded and built a minimalist and functional bio page from scratch. Not only did this improve my proficiency with HTML and CSS, it also helped me learn how to turn ideas into reality through code.
The completion of the three projects was a comprehensive application of the skills I learned. In Project 1, I analyzed the strengths and weaknesses of the Lazada website and made suggestions for improvements by making PPTs, while optimizing the visual design of some pages. This made me realize the importance of designing based on user needs. In Project 2, I used Figma to visualize the suggestions in the first project, designed my ideal UI interface, and incorporated interaction design. This task made me more familiar with the use of UI design tools and deeply understood the significance of interaction design to user experience. Finally, in Project 3, I coded the design of Project 2 into a working web page. This process challenged my coding skills and gave me a deeper understanding of the complexities of front-end development and how to turn static designs into dynamic and interactive web pages.
Through this semester of study, I not only improved my technical skills, but also learned how to start from user needs, combine design and technology to achieve goals, and apply classroom knowledge to personal practice. At the same time, I also realized my shortcomings, such as responsive design and complex interactive function implementation that still need to be improved. In my future studies, I plan to learn more about front-end development technology and try more practical projects to consolidate my skills.
Overall, this semester's experience has given me a deeper understanding of the complete process of web design and development. It has also made me more confident and looking forward to future learning and growth.
Comments
Post a Comment