Interactive Design/Project 2/Exercise 5
20/5/2025-9/6/2025
Cai Zihan/0378043
GCD 60904 / Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises 5
<iframe src="https://drive.google.com/file/d/1cRM_m5eErYToYALYb7Dm0RNrArnWh8I-/preview" width="640" height="480" allow="autoplay"></iframe>
Lectures
Most HTML elements are containers. Consider some of the
HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
• Each of these is a container, or box.
• Each box has three layers that surround its content. The layersare, in order from inside to outside:
• Padding
• Border
• Margin
Week 6_CSS Selectors
Exercise 5
Objective: The objective of this assignment is to develop a fully functional website (at least five (5) pages) based on the prototype created in the previous assignment, revitalizing your website redesign. The final product should reflect all design and user experience decisions made throughout the project, resulting in a polished and professional website. Assignment Description: Based on your redesign proposal and prototype, you are now required to develop the final functional website. The website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and user experience (UX) and accessibility best practices.
This is the website I have chosen to modify：http://www.suzannecollinsbooks.com/
Final Project link：
https://drive.google.com/drive/folders/1spzcUrTGh1uo9s65vQz3oimuqTwCpcT0?usp=drive_link
Live Site：caizihan-exercise3.netlify.app
I created a new server and a folder to store HTML code and images, and then created five HTML files.
Index
On the Index page, I added a navigation bar and search box at the top. The navigation bar has buttons for books, about, newsletter, service, and support.
This is the code for the navigation bar section.
The title section has been revised multiple times, including jump links, button names, and formatting.
On the index page, I also added a brief introduction to boos. Click on the boos button in the navigation bar at the top for a detailed introduction.
This is the code for this brief book introduction. I did not change the image names; I took screenshots of the original website images. I adjusted the size of the three images to ensure they were consistent.
 |
| Code for the books section |
Next, I added a “Stay updated” and “Contact” page below the Index page where you can write your contact information.
About
The “About” page is an introduction to Suzanne Collins. The location icon and writer icon below were created using ChatGPT. I added these small icons to my previous assignment, and I think they would be appropriate for this assignment as well.
These are all introductions to Suzanne Collins. The small button at the bottom of this page will take you back to the Index page.
I also made a character card introducing Suzanne Collins, which I added in the previous task, so I added it here as well. Below is the code for making the card.
I created two timelines. For the first timeline, I relied on ChatGPT because I didn't know how to draw a vertical straight line. For the second timeline, I followed the teacher's instructions and reviewed the previous class content and lesson plan to create it.
Newsletter
This page is relatively simple, consisting only of a page where fans can leave their contact information to subscribe.
Author's Philosophy and Inspiration Section
Combined with content from Suzanne Collins' official blog, excerpts from her explanations of core writing themes such as war, justice, and growth
Used a left-image, right-text layout to highlight the visual rhythm of the content
Challenge: Content structure was too simple in the early stages.
Response: Add sections for “Ideas and Inspiration” and “Upcoming Events” based on blog content to enrich the narrative of the webpage.
Service and Support
On this page, I added some comments from the author's fans that I found online, because this website is mainly aimed at people who want to learn more about Suzanne Collins or her fans. Adding these comments allows readers to learn more about the author from the perspective of her audience and fans.
This is the added “Contact Us” page. Since it is aimed at fans, they can send suggestions. These were created based on what the teacher taught in class, but some small decorations or logos were optimized using ChatGPT.
A brief report
Interface design:
Overall style: A simple and modern design style is adopted, which is in line with the aesthetic preferences of most users. Black and white tones are used to create a more simple and elegant look.
Target audience: People who want to learn about Suzanne Collins as an author, people who want to learn about her books, and her fan base.
Background and Objectives
This project aims to build a modern, visually clean, and content-rich official website for author Suzanne Collins, with a style inspired by minimalist aesthetics. The goal is to enhance the author's brand image while providing readers with a clear and efficient navigation experience, and to achieve user interaction and stickiness growth through a newsletter.
Overall page structure
1. Home Page
Introduction to Suzanne Collins' literary achievements, guiding users to browse her works and subscribe to her newsletter. The website has comprehensive features, including a contact function, and provides a brief introduction to her books and other works.
2.About Page
Provide a concise introduction to Suzanne's life, writing style, and achievements, using a multi-image layout to enhance the three-dimensionality of the character.
3.Newsletter Page
Add a “Subscribe to Updates” form to increase user conversion, showcase the author's ideas, writing inspiration, and creative stories, and introduce event previews and social media links.
4.Books Page
Provides detailed information about Suzanne Collins' books, accompanied by pictures and descriptions.
5.Service and Support
I found some reviews of Suzanne Collins' books online and created a contact feature with the aim of promoting user interaction and increasing user retention.
Reflection
Through this web development project, I not only strengthened my front-end development skills but also gained a deep understanding of the importance of visual design and content architecture in user experience.
During the content planning process, I conducted in-depth research into Suzanne Collins' writing philosophy and literary style, learning how to convey the author's personality through web language to the audience. Especially in the design of the writing inspiration and philosophy sections, I understood how to transform abstract text into visually rhythmic presentation forms.
Observation：
During development, I also faced numerous challenges. However, through modular design, manual information integration, and interaction optimization, I gradually overcame these limitations, enhancing my ability for independent development and problem-solving.
Findings：
Overall, this was not only a front-end development practice but also an exploratory process in creative expression and narrative design. I learned how to use code as a medium for cultural communication and gained valuable experience for future large-scale website projects.
Comments
Post a Comment