Interactive Design: Project 2- Prototype
.jpg)
TANG LILIN (0376668)
Interactive Design
Project 2- Prototype
28/5/2025 - 18/6/2025 （ Week 6 - Week 9 ）
Bachelor OF DESIGN (HONERS) IN CREATIVE MEDIA
LIST
INSTRUCTION
PROTOTYPE
BRIEF (527 Words)
Main features of the prototype
 |
| fig 1.1 Layout of the WIreframe |
The redesigned page uses a blue, white and gray color scheme to highlight the school's professionalism and gain the trust of potential customers. The high-contrast blue is to increase the readability of the font and strengthen the modern, international image. All the text on the page uses sans-serif fonts with contrasting thickness to build a clear visual hierarchy.
The grid layout ensures clear layout of the page. The homepage uses a full-width banner of the school image to powerfully showcase the school's style. The ABOUT page uses a simple blue rectangle with pictures and timelines to introduce the school's mission, timeline and characteristics. The "Contact" page uses a two-column design, integrating contact information and user forms, and adding identity fields (such as "I am a parent/student...") to better segment potential customers.
Design decisions and development process
The prototype was developed based on the wireframes created previously. The wireframe redesigned the structure of the original website. Since the original website was just an old-fashioned picture with text layout, the wireframe added a modern and clearer structural design.
 | |
|
A more difficult problem is that the original pictures of the original website rarely have high-definition pictures. So I carefully selected new pictures to correspond to high schools, and tried to ensure that all pictures have the same style.
 |
| fig 1.3 Colors I Uesd |
For colors, the colors I chose in the proposal are not completely used in the prototype. In order to make the page concise, modern, and in line with the school's goals and background, I only chose a blue as the main color, and the other colors are black, white, gray, and light blue to maintain overall unity.
| fig 1.4 Icons I Found and the Process of Coloring |
In addition, in order to enhance the attractiveness of the website, icons downloaded from Huaban.com were added to the contact page and about page. Better support the content visually.
 | |
|
After completing the page layout and color matching, I followed the tutorial video on figma released by Mr Shamsul to make the navigation bar and button step by step, as well as the interactive design of the textbox for the feature in the contact page. Change the color according to the overall style and establish a jump link.
For the footer part, I made several adjustments. Since I used gray rectangles to replace most of the text content in the wireframe part, I spent some time to make it in the prototype part. Adjust the distance between its layouts several times. And download social media icons from Huaban.com for use. Finally, according to Mr Shamsul's feedback, I added the school logo and placed it in the lower part of the footer to complete the structure.
How the prototype achieved the redesign goals
 |
| fig 1.6 Resign Goals in Proposal |
Improved user experience: a logical and clear navigation structure (Home / About / News / Contact) and clear subcategories ensure that users can quickly find the information they need.
Modern visual identity: a unified color scheme, eye-catching fonts and high-quality media content reshape Renda High School into a modern, global and technologically advanced image.
Optimized information structure: redundant and scattered content is reclassified and divided into clear sections, such as "Topics", "Timeline" and "Principal and Faculty".
FEEDBACK
Mr. Shamsul told me that the layout is good, but there are still some details in the prototype that need to be modified.
2. All body fonts should be the same size
3. Add a box to the form. Put all the content in the box
4. The SCHOOL AREA, GRADUATES, and FACULTY parts in the ABOUT page are relatively plain, and you can add some other things.
5. The social media part of the CONTACT page is missing
6. The style needs to be unified in all interfaces. If you use rectangles, use rectangles for everything, and don't use bevels
7. Add the school logo to the footer
REFLECTION
Experience
In this project, I redesigned the official website of the Renmin University of China Affiliated High School (RDFZ) with the goal of improving the user experience, reshaping the school's visual image, and optimizing the overall information structure. The redesign process began with the wireframes I had developed previously, which served as the basis for the prototype. The design approach I followed included layout structure, visual consistency, interaction enhancement, and content optimization.
One of the most challenging aspects was dealing with the low resolution and outdated visuals of the original website. To maintain visual credibility and atmosphere, I carefully selected high-quality online images to reflect the modern look and feel of a first-class high school. I also explored hover and scroll effects based on Mr. Shamsul's tutorials and adjusted the interaction style to match the blue theme of the website.
Observation
When making a page, you first need to formulate margins and strictly enforce them. All distances need to be patiently and strictly adjusted multiple times to make them visually comfortable,
Finding
A well-organized layout, paired with modern fonts and visual rhythm, can immediately enhance users' trust in the school - this is especially important for schools with international reputations.
Replace mismatched or poor quality images with unified, high-resolution images to make the interface more cohesive, immersive, and emotionally engaging. Good images can communicate the school’s values before users even read the text.
Small interactive details, such as hover color changes and subtle effects, can enhance the overall quality of a site and reflect the care put into the user experience design, even if they seem insignificant on their own.
Comments
Post a Comment