Interactive design-Project 2

Name: TANG YUYING

Student ID: 0370676

Programmed: Interactive special design

Module name: Interactive Design (202504-LLecture)

Project requirement:

In this assignment, we need to build on the proposal from Project 1 and turn it into a functional prototype using Figma. In this assignment, we must include:

• Home page (including navigation, hero section, and key content areas)

• Core Content Pages (content needs to be organized and presented)

• Contact Page (demonstrating how users can interact with forms or other contact methods)

Redesign web link:

The people's republic of China

Figma link: 

figma link

Tools Used:

• Google fonts
• Title: Merriweather
• Main text: Source Sans Pro
• Button: Montserrat
• Adobe color
• Icon website
• Figma

Working process: 

Home Page: 

During the production process, I first referred to the Figma tutorial video demonstrated by the instructor to determine the website dimensions (1280*). Then, I based my redesign on the sketches, colors, and fonts from Assignment 1.

First, on the Home page, I added a navigation bar, hero section, cards (to display multiple news items), and buttons to enrich the content of the page. At the same time, I removed some of the original Home page content and moved it to the appropriate pages. This made the Home page much cleaner and less cluttered than before.

Next, I changed the color scheme of the website to red, yellow, gray, and white. I chose these colors because they reflect the national flag of China, which makes the design more culturally representative for an official diplomatic website.

1.Home page—Navigation bar

   In terms of color, I used red as the main theme color, which is both eye-catching and consistent with the overall color scheme. I set the font to Montserrat with a white color, creating a strong contrast with the red background, allowing users to easily identify each section at a glance. Additionally, I added a hover effect to each navigation text area — “Home,” “Police,” “News,” and “About Us” — so that when the user’s cursor hovers over the text, it changes to black.

（Style display）

2.Home page—Hero section

    I added a hero section so that when users enter the page, they can immediately see the most important information of the day, making it easier for them to browse the site. This section includes "Learn more" buttons to guide users to click and read more details. For the title text, I chose "Merriweather", and for the body text, I used "Source Sans Pro".

3.Home page—Card

    I added the card section to improve the user's reading efficiency and reduce the issue of information overload that existed on the original website. This makes the page cleaner and more organized. I also added "Learn more" buttons to help users explore and understand the content further.

（The original website image contains too much information, which is cluttered and not easy to browse. ）

（After the revision: A card-style layout is used to make it easier for users to browse multiple pieces of information. ）

Content Page：

On the content page, I removed the original layout that simply listed titles and replaced it with a searchable format based on spokesperson and year. This allows users to quickly browse and locate news released in a specific year, or, if they know the name of the spokesperson, further narrow down their search. This avoids the need to scroll through the entire directory without knowing the exact policy name, as is the case on the original website, and greatly improves the speed of information retrieval.

At the top of the content page I designed, there is a hero section that displays the most recently released news to users. Below the hero section is the area for searching news and displaying news titles.

（It's very troublesome to search for news on the original website.）

（Updated: Search by news year and spokesperson. ）

At the beginning of the content page I designed, there is a hero section that displays the most recently released news to users. Below the hero section is the area for searching news and displaying news titles. In the top left corner, the label “15453” indicates the total number of news articles available.

Then, I adjusted the format of the news articles by using light red and white background colors to distinguish between the article content and elements like the title, spokesperson, and date. This makes it easier for users to browse the information.

About us page:

Originally, I planned to create a Contact Us page, but I found that the original website did not include this section. Therefore, I changed it to an About Us page to introduce China’s national conditions and culture to foreign visitors, which aligns better with the image of a diplomatic website.
In this page, I added a hero section and cards to enrich the content and make the information display more organized and structured.

（hero section)

(card+ footer)

Decision-making:

During the production process, I made some design decisions that did not fully follow the proposal from Assignment 1.

For example, I adjusted the overall color scheme. Originally, I planned to use red, blue, and white, but when I actually applied these colors in Figma, I found that the combination was not harmonious.
However, to align with the image of the government and the nation, I decided to use red, yellow, gray, and white instead. This choice was based on the colors of the Chinese national flag, which not only stays true to the national theme but also results in a more visually balanced palette.

I also added more white space. While working on the pages, I realized that filling them with too much content made the layout feel crowded and hard to read. In addition, I noticed that although certain complex layouts may look creative, if they lack proper white space or don't fit the theme, they can make the page look messy or unattractive.
So, I removed some decorative designs and increased white space to improve clarity and visual comfort.

Feedback:

• footer is not consensus
• Change:  I re-designed the footer section and made all the pages' footers the same size and color.
• button do not have stroke
• Change: Removed all the strokes of "buttons"

Reflection:

 

This project gave me a great opportunity to review some of the Figma knowledge I had previously learned, and also helped me understand the importance of sketching during the design process.
At the time of drafting the initial design, I didn’t think much about white space, which led to a layout that felt overly crowded and looked very unappealing when built in Figma.

It also helped me realize the importance of consistency in formatting. Although I did pay attention to unifying the sizes of buttons and navigation bars during the process, there were still some inconsistencies that I overlooked. Next time, I will be more careful with these details.

Another key lesson was about color usage. Once I started the actual prototype, I noticed that the color combinations I had imagined would look good were, in reality, quite unappealing. This taught me that color planning needs to happen before finalizing the design proposal — in the future, I will test the color scheme first, then proceed with the proposal.

Lastly, I learned how to use Figma to create a functional website prototype. This was a new skill for me and a valuable improvement. Personally, I really enjoyed the process — especially the satisfaction I felt when I saw the final result.