Interactive Design - Final Project
.jpg)
TANG LILIN (0376668)
- INSTRUCTION
- PROGRESS
- BRIEF
- FINAL SUBMISSION
- REFLECTION
1. Basic Reset and Structure
A universal reset using * { margin: 0; padding: 0; box-sizing: border-box; } ensures consistent layout across browsers. Font families are defined using Google Fonts (Lexend and Montserrat) for modern and readable typography.
2. Modular Layout with Flexbox
Each section (navbar, hero, introduction, dreams, culture, faculty, contact, footer) is styled as an independent block, using flexbox for horizontal or vertical alignment.
3. Responsive Design
To support cross-device usability, two media query breakpoints (768px and 480px) were implemented. Design adjustments include:
-
Switching horizontal layouts to vertical stacksResizing fonts and containers for small screens
-
Center-aligning elements for mobile
Making navigation and form inputs mobile-friendly
These changes ensure a smooth experience on both desktop and mobile.
4. Visual Style Consistency
The site uses a primary blue (#012DA7) with white for contrast. Buttons share a consistent style, with variations like .btn, .btn-intro, and .btn-hero. Hover effects provide interactive feedback and reinforce the site’s visual identity.
5. Code Reusability and Maintenance
Common styles are modularized—for example, all buttons inherit from a base .btn style and extend as needed. Shared components like the navbar and footer use the same structure across pages, reducing redundancy and easing long-term maintenance.
Other pages also follow these to create.
Interactive Design Final Project Report
For my final project in Interactive Design, I developed a multi-page responsive website for The High School Affiliated to Renmin University of China (RDFZ). The site includes five core pages: Home, About, News, United Schools, and Contact. This report reflects on my development process, the challenges I encountered—particularly with text alignment and layering elements like images over rectangles—and how I overcame them through iteration and learning.
The first step was completing the remaining two prototype pages: News and Contact. I sketched basic layouts and referenced the visual direction established by the homepage and about page. I then implemented each page structure using HTML and styled them individually with custom CSS files to maintain visual consistency.
Each page followed a similar modular structure:
-
A banner section with a background image and overlay text (e.g., “NEWS”, “CONTACT US”).
-
A content section (e.g., cards for news articles, information boxes, or contact forms).
-
A shared footer for consistency and accessibility.
After completing the mockups in Figma (or using hand-drawn wireframes), I began coding directly in VS Code. I reused parts of the navigation bar and footer HTML across all pages to speed up development and ensure consistency. Then I wrote custom CSS for layout details and responsiveness.
During the coding process, I encountered several issues—some technical, others visual. Below are the most significant pain points I faced and how I addressed them:
On multiple pages (especially the
Hero sections
and
contact form),
aligning buttons and text in a clean, center-anchored way was
frustrating. Elements like
.btn,
.hero-text, or
.biao_title often
appeared slightly off on different screen sizes.
Solution:
I spent time refining the use of
flexbox and
margin: auto in
containers to better control vertical and horizontal alignment. I
also ensured consistent use of
box-sizing: border-box
across all components. Using
text-align: center
inside flex items also helped stabilize content.
Each page features a large banner image with overlay text (e.g.,
“ABOUT US”, “NEWS”). I needed to layer the text and a dark
translucent overlay (.meng) on top of the image, but initially, the text position broke in
smaller screens.
Solution:
I wrapped all banner elements in
.ban_box, used
position: relative
for the container, and
position: absolute
for the overlay and text layers. To solve mobile responsiveness, I
added media queries in each CSS file (e.g.,
@media (max-width: 768px)) to reposition
.ab_us text for
smaller screens. This made the layout stable across devices.
In sections like the
United Schools
page, I had to place school images within blue rectangular
containers (.b1_list). The challenge was keeping the images neat without overflow or
distortion.
width: 100% and fixed
height values,
combined with
object-fit: cover
when needed. This preserved image proportions while ensuring the
visuals stayed clean within the blue blocks. Padding and
gap in flex
containers also gave the layout breathing room.
As I coded multiple pages separately, it was easy for minor differences in margins, fonts, or button styles to creep in.
style.css file for
global styles (like the navbar and footer) and linked it across all
pages. For page-specific design, I used modular CSS files like
news.css,
contact.css, etc.
This allowed me to maintain consistency while also customizing
sections as needed.
One of the final interactive sections was the contact form. I
designed it with clean white input boxes over a darkened
background image. Getting the input fields, message box, and
submit button to line up nicely (especially inside
.baioge) was not
simple at first.
Solution:
Using
flex-direction: column
and gap for
vertical spacing in the container helped achieve a neat,
structured layout. I also added hover effects to the submit button
(.but_b) for better
user feedback.
Responsive design was essential for this project. I included media queries to:
-
Stack content vertically on smaller screens.
-
Resize fonts and move overlay text (like
.ab_us) to more readable positions. -
Change layout direction (e.g., from
rowtocolumn) in sections like.b1_box.
Testing on both desktop and mobile emulator views helped me fine-tune breakpoints for the best visual experience.
This project pushed me to balance layout design, user interaction, and responsiveness in a cohesive website. Although I had previous experience with HTML and CSS, implementing a multi-page site like this helped me practice:
-
Code reusability
-
Managing visual hierarchy
-
Debugging alignment and spacing issues
Despite some frustrations—especially around aligning images with text and dealing with unexpected spacing bugs—I now feel more confident writing structured, semantic HTML and clean CSS.
Experience
This final project was a valuable hands-on journey in developing a complete, multi-page responsive website. I started by refining the Figma prototypes and then gradually coded each section using HTML and CSS. Although I had basic knowledge before, this was my first time independently building and styling a website from scratch with multiple pages. One of the most interesting parts was seeing how small design decisions (like button placement or text alignment) significantly impacted the overall user experience. Throughout the project, I grew more comfortable with Flexbox, media queries, and the use of modular CSS across pages.Observation
During the development, I noticed that consistency was more difficult to maintain than expected. Even a slight change in margin, font weight, or image ratio could break the balance of the design. I also realized that designing for desktop and mobile simultaneously required continuous testing and re-adjustment. Especially when overlaying text on images or positioning forms, responsive layout issues often appeared. Debugging these issues taught me the importance of pixel precision and content hierarchy.Finding
From this project, I discovered how essential it is to plan for scalability and reusability in design systems. By separating shared components (like the navbar and footer) and writing modular CSS, I reduced repetition and improved visual consistency. I also found that even a small section like the Contact form involves thoughtful interaction design—from layout to hover feedback. Overall, this project sharpened my skills in responsive layout design, semantic coding, and cross-device optimization. It also made me realize how much detail and logic go into making a website both functional and beautiful.
Comments
Post a Comment