INTERACTIVE DESIGN: FINAL PROJECT
INTERACTIVE DESIGN: FINAL PROJECT
__________________
Final Project
DING JIAQI / 0379388
Interactive Design / Bachelor of Interactive Spatial Design
__________________
Introduction:
Fig1.1 Introduction
________________________________________________________________________
1. Project Introduction
This project is an official website designed and developed for the San Francisco Animal Care & Control (SFACC), primarily serving animal adoption information display and online user consultation. The website consists of five core modules: homepage, adoption guide, animal list, animal details, and contact page. The entire site is built with HTML5, CSS3, and vanilla JavaScript, without using any front-end frameworks.
Fig 2.1
2. Page Architecture Design
2.1 Directory Structure Planning
Project files are organized by functional modules under the code directory. Each page has its own folder (home, address, AdoptionPage, AdoptionPageOne, AdoptionPageTwo), containing page-specific HTML, CSS, and JS files. Shared resources like header and footer also have dedicated directories. Image resources are centrally stored in the img directory, categorized by page. This structure ensures clear module boundaries and facilitates team collaboration.
2.2 Stylesheet Organization
CSS adopts a "shared components + page-specific" layered approach. header.css and footer.css define site-wide navigation and footer styles, while business pages (home.css, address.css, etc.) only contain their unique layout rules. Additionally, modal.css manages popup styles, and fallback.css provides browser compatibility fallbacks.
3. Core Challenges and Solutions
3.1 Cross-Page Reuse of Shared Components
Challenge: The website has five independent pages, each requiring the same navigation bar and footer. Copying and pasting this code into every HTML file would mean updating five places for any single change during maintenance, which is error-prone and inefficient.
Solution: Extract the navigation bar and footer into separate HTML files (header.html, footer.html), and include them in business pages via iframe tags. The navigation iframe is set to fixed positioning at the top of the page, with the main content area reserving appropriate top margin to avoid being obscured. This way, only one component codebase needs maintenance, and all pages automatically sync updates.
Fig 3.1 Importing shared components via iframe
Fig 3.2 iframe positioning styles
3.2 Structured Display of Pet Information
Challenge: Each adoptable animal has numerous attributes (ID, name, gender, breed, age, weight, intake date, location, etc.). How to clearly display this information within limited card space while maintaining visual appeal and easy scanning for comparison.
Solution: Design a unified pet card component with a square-cropped animal photo on top (using aspect-ratio and object-fit), and an information list area below. Cards use CSS Grid for three-column equal-width layout, with spacing uniformly controlled via the gap property.
Fig 3.3 Pet card HTML structure
Fig 3.4 Card grid layout
3.3 Navigation Link Interaction Effects
Challenge: Plain text navigation links lack visual feedback, making it difficult for users to perceive their current hover position, resulting in a bland interaction experience. A hover effect that is both aesthetically pleasing and unobtrusive is needed.
Solution: Use CSS pseudo-element ::after to add an underline to navigation links, initially with zero width and positioned at the text center (left: 50%). On hover, transition animation expands the width to 100% while changing the left value to 0, achieving a visual effect that expands from center to both sides.
Fig 3.5 Expanding underline animation
3.4 User Feedback for Form Submission
Challenge: The contact page and subscription forms need to provide clear feedback after submission, but the browser's native alert popup has a rigid style that doesn't match the overall website design.
Solution: Design a custom modal component to replace the native alert. The modal is hidden by default and displayed when JavaScript validation passes upon form submission. The modal includes a success icon, prompt text, and confirmation button, with styling consistent with the website's theme colors.
Fig 3.6 Custom modal HTML
Fig 3.7 Form validation and modal control
4. Visual Interaction Design
4.1 Brand Color System
The website uses purple (#6B5CE7, #7B5BB8) as the primary color, running through navigation, buttons, headings, and links to establish unified visual identity. Background colors combine light purple-gray (#f5f3ff) and cream (#FFF8E7) to create a warm and friendly atmosphere.
4.2 Card Hover Effects
To enhance interactive perception, service entry images and pet cards float upward and display shadows on mouse hover, indicating clickable elements. Animations are implemented using CSS transition, with 0.3-second duration and ease timing function.
Fig 3.8 Hover floating effect
5. Development Insights
The biggest takeaway from this project is understanding what "no framework" means. When Vue's component system isn't available, iframe solves the reuse problem; without Sass variables, color values must be manually kept consistent; without a routing library, relative paths between pages must be carefully managed. These "inconveniences" actually helped me better understand what problems frameworks solve and how they work under the hood.
At the same time, the project proves that native technologies have far broader capabilities than imagined. CSS Grid and Flexbox can handle most layout requirements, transition and transform can achieve smooth interaction effects, and querySelector and addEventListener can handle common DOM operations. Mastering these fundamentals enables smarter technology choices when using frameworks.
__________________________________________________________________________
Website link:
Google Drive link:
Demo Video / Testing
Fig 4.1 Demo video_Desktop view
Fig 4.2 Demo video_Mobile & Tablet view
For final have to be 5 pages
ReplyDelete