Interactive Design：Project 2

  28.05.2025 - 14.06.2025 (Week 6 - Week 8)

SUN JIAYUE (0376224)

GCD60904 / Interactive Design / Bachelor of Design ( Hons) in Creative Media /Taylor's University

Project 2

---

INSTRUCTION

---

Project 2:

Function Description：

The web page I designed added a clear navigation bar. Since the web page I modified and designed was for purchasing picture books, I enriched the content area through the characters and related content that appeared in the picture books. I added multiple designs of jump pages, and the logic of the jump design was reasonable. I added jump and button hover Settings in the page, as well as the font and color design of the web page. The main color tone is blue, followed by light blue, with many pictures added to attract the reading interest of children and parents.

Regarding the design of the navigation bar, I have studied it from many related picture book websites. Eventually, I chose the simplest and clearest one, which is to place it at the top of the web page without adding any decorations. I also added promotional activities and a reader reading evaluation column to my web page Settings, which enables people viewing the web page to understand the content of this book more intuitively. More web pages adopt the card-style layout; I designed the size of the buttons and the hovering speed, greatly enhancing the overall smoothness of the user experience. The style of the entire webpage is themed around cuteness and childlike fun, which can better attract the interest of children and parents.

The original website didn't have a navigation bar. I added a navigation bar to it and added appropriate redirects to make the logic more complete. In terms of color, the contrast is not very obvious. This is mainly to enable readers to better capture the necessary information. At the title position, the font size is slightly increased, and then in the main text part, the font size is basically moderate, and the button size is moderate. According to the reading sequence, I added the page for joining the car purchase, and the logic is reasonable. It can quickly jump to the checkout page, which is more convenient.

Production process：

Fig 1.1 Design page

Fig 1.2 Jump page design

Comparison of navigation bar designs：

For the design of the navigation bar this time, I searched many picture book web pages and observed them. I found that different web pages would choose different design methods, mainly the cute, dreamy and minimalist style. Among these styles, I prefer the minimalist style. Therefore, when designing my navigation bar, I used a relatively simple style to better provide more convenient assistance for readers.

Fig 1.3 Website example（Up）One's own design（Down）

Registration page：

I think the registration website is very important. A darker color should be used as the background, which can fully display it. I designed it based on my wireframes and also searched for many picture books. Compared with my previous web pages, the colors designed now are more uniform, and the style of the picture books designed is more childlike and can better attract the attention of children and parents.

Fig 1.4 Wireframe diagram（Up）One's own design（Down）

Reader's Comment：

The website I chose is a picture book website. Therefore, I think the comments given by readers are indispensable in the web page, so I designed my web page. Meanwhile, I also studied many web pages to provide assistance for the design of my reader reviews. When designing the reader reviews, I chose to use relatively cute photo frames, added the names and photos of the readers, and also added photos of the characters in the book to carry out a relatively rich design for this page.

Fig 1.5 Wireframe diagram（Up）One's own design（Down）

Final design：

---

Reflection

Experience:

In this project, I gained a lot. When completing this task, I made a completely wrong design. But I discovered this problem later, so I wasted a lot of time in the early stage. As a result, I spent more time on design when making the final completed task. Therefore, before designing and making, it is necessary to have a full understanding of the content. Otherwise, it will be very troublesome in the end.

Observation:

In this Project, I searched for many related picture book web pages. In Project 1, through careful analysis, I identified the problems of my web pages and then drew wireframes. In project 2, I still delved deeply into the web pages of picture books and then made detailed observations of the pages I needed. Analyze where the advantages of their design lie and how I should design my page.

Discovery：

When carrying out this project, you will find it really difficult. If you want to design a perfect web page, it is actually a very hard thing to achieve. Designing one is very simple, but to have complete functions and diverse design styles, this requires our own proficient use of software and a full understanding of web design. Only in this way can we design a satisfactory one with good interaction. A good web page with high usage rate.