Interactive Design/Project 2/Exercise 4
20/5/2025-22/6/2025
Cai Zihan/0378043
GCD 60904 / Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises 4
Instructions
<iframe src="https://drive.google.com/file/d/1cRM_m5eErYToYALYb7Dm0RNrArnWh8I-/preview" width="640" height="480" allow="autoplay"></iframe>
Lectures
<iframe src="https://drive.google.com/file/d/1dwhMV_qI0s4QBVP_FCzfERjAJkzMtzEN/preview" width="640" height="480" allow="autoplay"></iframe>
div (generic html element）
selector
p，h1，h2,h3
l1
property{ font-family;font }value
{ color,blue }
Exercise 4
Requirements：
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE link or as a DOWNLOADABLE file.
A brief writeup in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
Copy Prototype Link：https://www.figma.com/proto/9v9AV1hjRbI6d0SbNyzGHW/%E7%BD%91%E9%A1%B5?node-id=3-3&t=ICuINoZz7NdZamFZ-1
Copy Dev Mode Link:
Writeup:
Homepage:
This page mainly provides an introduction to the website. “SUZANNE COLLINS” is the main focus, introducing this person. There is a photo of the person on the left, which can be moved by scrolling with the mouse to interact with the user. At the top, there are Home, About, and Books buttons that can be clicked to jump to the corresponding pages and websites.
Page 2:
On the left is the author's photo, and on the right is some information about My Awards, My Books, and My Selected Books. Below that is a “Know Here” button. Clicking on it will take you to the right side of the screen, where you can see detailed information. The star icon at the bottom of this page will take you back to the home page. The “Back” button on the right side of the screen will take you back to page 2.
Page 3:
This page introduces the book. Click the “My Books” button to jump to the page listing all books by this author. Page 3 is sorted in chronological order. Click the book title to jump to the detailed introduction interface. At the bottom right of the page is a “Learn More” button, and the star button below it takes you back to the home page.
Page 4:
There are buttons for Latest Books, Audio Books, and Educational Resources. Clicking on a button will take you to a new web page/interface. I created an interactive animation for the Latest Books button, so that clicking on the image will cause the images to alternate.
Last page:
Each column will redirect to the corresponding interface when clicked.
Corrected
Home Page
After making corrections, I changed the homepage to look like this. After listening to the professor's advice, I looked up many websites about introducers online, and after viewing them, I was inspired to make this.
In particular, I added some text that I extracted from the original website and other sources, and refined it. I added buttons, and clicking on the buttons will open new pages.
This is a simplified version of the About and Books interface. Click to jump to the detailed page. If you need more content, click the About button at the top of the black section.
Next, there are some recent books and reader comments, and finally, the gray section is the contact interface.
About Page
Click the “About” button in the black box above to jump to this page, which contains information about the author.
Search page, where you can search for books.
Service Page
You can fill in your information on the service page to contact us.
The purpose of this webpage is to introduce Suzanne Collins as an author, so it is mainly aimed at Suzanne Collins' fans.
Feedback
Week 6：
This week, we learned how to use HTML and CSS.
Block elements
• Some elements will always appear to start on anew line in the browser window
• It is know as block level elements
• Example: <h1>, <p>, <ul> and <li>
<div> is a standard block-level element. Block-level elements start on a new line, and extends to the left and right as far as possible.
Inline Element
<span> is the standard inline element. An inlineelement can wrap some text inside a paragraph<span> like this </span> without disrupting theflow of that paragraph.
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 is a container, or box.
Each box has three layers surrounding its content. The order of the layers from inside to outside is:padding,border,margins
During the independent study week, the teacher gave us a quiz and asked us to correct it.
This was a very challenging task for me. This website for creating web pages was the first time I had used it, and I was unfamiliar with many of its features. So I spent a lot of time searching for tutorial videos elsewhere and familiarizing myself with it. The result may not be perfect, but I did my best.
Comments
Post a Comment