Interactive Design | Project 2 : Working Web Page
Interactive design Project 2 / Website Redesign Prototype
24.04.2025 - .05.2025 (Week 06 – Week 08)
YANG YANG / 0363575
GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media
Project 2 / Website Redesign Prototype
Lecture:
Week 6 – Basic HTML Website
This week, Mr. Shamsul asked us to build a simple HTML page. I made a personalized version of the “Pacific Coast Fence” site based on what we learned in class and some references from w3schools.
I used semantic tags like <header>, <section>, and <footer>, and styled everything with external CSS. I added a nav bar, text content, a list of services, and a contact form. I also used Google Fonts, hover effects, rounded buttons, and a calm, Scandinavian-style color palette.
There’s also an “About Us” section with three images and short captions to balance the layout.
This task really helped me understand how to build clean and organized HTML & CSS, and how design choices affect the overall look.
Week 7 – CSS Box Model & Display
We focused on the CSS Box Model and the display property. Mr. Shamsul explained how every HTML element is like a box — with content, padding, border, and margin. He used diagrams and live coding to show how each part affects layout.
We also learned about different display types (block, inline, inline-block) and how flex and grid can help organize content. He showed us how to center things using Flexbox with justify-content and align-items.
This week made layout logic much clearer for me, especially when trying to space elements properly.
Week 8 – Interactive Buttons in Figma
In this tutorial, we used Figma to create a button with hover effects. We learned how to:
-
Build a button using Frames and Components
-
Add Variants to show hover states
-
Use Prototype mode with "While Hovering"
-
Apply Auto Animate for smoother transitions
We also reviewed homepage structure: logo, nav bar, hero section, CTA buttons, and footer.
It was my first time using Variants and Prototype properly. I really liked how easy it became to reuse and update components after this session.
Week 9 – Navigation with Dropdowns
We learned how to make a responsive navigation bar using HTML and CSS. I made a simple menu with items like Home, About, Services, and Contact. The “Services” item includes a dropdown list with 4 service links.
I used Flexbox to align the menu items and added hover effects. The dropdown was styled with position: absolute, z-index, rounded corners, and soft colors (like darksalmon and antiquewhite). I also used the Google Font Poetsen One to give the site a unique style.
This exercise helped me practice both layout and basic interactivity. The dropdown part was tricky at first, but I got the hang of it.
Reflection
Over these four weeks, I improved a lot in both web structure and interface design. I feel more confident working with HTML, CSS, and Figma, and I’m starting to enjoy putting both code and visuals together.
Instructions:
Final modified:
Prototype Design Overview and Reflection
For this project, I designed a website prototype for an animal farm, with the goal of promoting farm-related activities and creating a warm, friendly user experience. I started by using Adobe XD to build the first version of the prototype. Since I was not very familiar with the software at first, I looked up online tutorials and guides to help me understand how the tools worked. Exploring the features was quite enjoyable, and although I faced many challenges, I gained a lot of knowledge about layout design and user interface basics.
However, after presenting my initial design in class, Mr. Shamsul pointed out several serious issues, especially the lack of visual continuity and structure across the pages. My layout was inconsistent, and the overall design didn’t meet the standard for a smooth user experience. Based on his feedback, I decided to rebuild the entire prototype from scratch.
This time, I collected more references and supporting information before starting the design again. I also switched from Adobe XD to Figma, which is another powerful tool for UI/UX design. Because of the experience I gained from XD, learning to use Figma was easier, even though there were some differences in the interface and shortcuts. When I encountered problems, I asked classmates for help or searched online to find solutions.
The final prototype includes several key pages: Home, Meet Our Animals, Menu, Farm Rules, and Contact Us. Each page has a clear structure, and the design focuses on both functionality and visual appeal.
-
Home Page: Features a large header image of the farm and animals, with a festive title “Xmas Tree Farm” and a short introduction. A call-to-action button invites users to learn more.
-
Animal Page: Shows photos and short descriptions of farm animals like goats, horses, rabbits, and cows. A “Book now” button encourages users to plan a visit.
-
Menu Page: Displays seasonal snacks such as hot dogs, cake, and coffee, each with images and simple descriptions. There are "View Full Menu" buttons for further interaction.
-
Rules Page: Lists basic farm rules in a friendly and visual format, such as “Do not feed animals your own food” and “Do not chase or slap animals.” Icons and illustrations help make the rules more engaging.
-
Contact Page: Includes a simple form where users can enter their name, age, time, and message. There are "Clear" and "Submit" buttons for form actions.
For the visual design, I chose a warm color palette with soft greens, creams, and oranges to reflect the natural and cozy environment of a farm. I used a clean, rounded font to improve readability and make the website feel welcoming. Throughout all pages, I kept the button styles, text alignment, and layout structure consistent to improve the user experience.
This improved prototype achieves the three main goals I set out to accomplish: clarity in content, consistency in design, and stronger user engagement. Rebuilding the prototype after receiving feedback turned out to be a valuable step. It helped me understand the importance of structure, visual flow, and how small changes can impact the overall experience.
Through this project, I developed a deeper understanding of user-centered design. I became more confident in using both Adobe XD and Figma, and I also improved my ability to think critically about layout, interaction, and user needs. This experience has laid a strong foundation for more advanced design projects in the future.
Reflection:
Through the development of Project 2, I have gained a deeper understanding of the principles of web page layout, especially in the application of display properties, box model and Flexbox layout. The gradual transition from the initial proposal stage to interactive prototyping helped me to effectively apply the theoretical knowledge learnt in class to actual web design practice.
In this project, I first learnt to use Adobe XD to build the first version of a website design. After presenting it to my teacher, I received very valuable feedback. My teacher suggested me to reconstruct the overall layout of the website and enrich the use of fonts to enhance the visual presentation and unity of the page. I carefully absorbed and applied these suggestions in the next version of my prototype using Figma.
Over the next few weeks, I continued to improve my technical skills through classroom exercises. From writing basic HTML code in Notepad, to styling pages with CSS, to implementing basic interactive elements such as buttons and navigation bars, these step-by-step exercises gave me a clearer understanding of the front-end development process, and allowed me to gradually build up my technical confidence.
Although the current prototype has improved significantly compared to my initial design, I realise that there is still room for further improvement. In the future, my goal is to increase the consistency of the overall visual design and to ensure that the site responds and displays well on different devices and screen sizes.
Comments
Post a Comment