Project Overview
This project was originally developed for my Intro to Interactive Media course, where the objective was to create a functional and aesthetic website under 30KB per page. Beyond the class requirement, I saw this as an opportunity to challenge myself—exploring how far I could push a low-bandwidth design while maintaining my creative vision.
- Project Type: Interactive Web Experience
- Goal: Maximize performance while maintaining a modern, minimal aesthetic
- Tools Used: HTML, CSS, JavaScript, Photoshop, GitHub
- Live Project: View Website
- GitHub Repo: View Source Code
Defining the Problem
Designing Within Constraints
This project was an exercise in limitations—how do you create a multi-page, interactive experience under strict bandwidth constraints? The challenge wasn't just reducing file sizes, but doing so while preserving visual quality, sound design, and usability.
Process
How I Built It
1. Designing the Structure
I started by creating a Photoshop mockup of the site’s layout, ensuring a balance between aesthetics and functionality. The interface was completely original—rather than following conventional web navigation, I implemented:
- A two-button navigation system for secondary pages
- A sidebar with tabbed navigation for tertiary pages
This allowed users to explore content efficiently while keeping each page load as minimal as possible.
2. Managing Assets & Bandwidth
With 12 pages and multiple graphic and audio assets, file size management became a major focus. To meet the 30KB per page limit, I optimized assets by:
- Using CSS-based visuals wherever possible to eliminate unnecessary images
- Compressing images extensively while balancing quality
- Encoding and compressing audio files to their smallest possible size
3. Development & Testing
Since this was my first full web project, structuring multiple pages, handling assets, and maintaining a consistent experience across the site were key learning experiences. I also tested performance using Google Lighthouse to ensure load times stayed minimal.
Final Outcome
What I Built
The final website successfully met the low-bandwidth challenge while maintaining a functional, aesthetically cohesive design. The site:
- Loads in under 100ms, even with multiple assets
- Maintains a structured, engaging layout despite strict file size constraints
- Includes compressed sound design within bandwidth limits
Reflection
What I Learned
This project pushed me to think critically about optimization, performance, and prioritization in web design. It helped me develop:
- A better understanding of efficient asset management
- The ability to balance performance with design
- Experience working with multi-page site structures
The project exceeded my expectations—especially considering it was my first full website build. It reinforced important fundamentals in HTML, CSS, and JavaScript, while also demonstrating how constraints can lead to innovative solutions.
Next Steps
- Implement SVGs instead of raster images for better optimization
- Refine visual design elements for improved aesthetics
- Conduct usability testing to enhance navigation and user experience
While this was a class project, it was a valuable experiment in performance-focused web design, and I plan to carry these principles into future projects.