Desing projects

As part of my HCI 472 course in the Master’s in Human-Computer Interaction program, I developed a responsive design system using Figma for a Bootstrap-based website. The project includes homepage and project page designs optimized for desktop, tablet, and mobile screens.

I incorporated grid systems, dimensions, and reusable components to ensure consistency and scalability across the design. This work demonstrates my ability to apply HCI principles to create structured, user-centered interfaces with a focus on visual hierarchy and responsive design.

Figma Design for Bootstrap-Based Website

User Interface Design System

As part of my HCI 472 coursework, I designed and built a Bootstrap‑based responsive portfolio website from the ground up and hosted it live on GitHub Pages. The site is organized into three core categories—Foundations (typography, color palette, logos, navigation), Components (navbar, footer, card modules), and Page Patterns (complete layouts and grid visuals for desktop, tablet, and mobile views of the home and project pages).

Built using HTML, CSS (with Bootstrap framework), and Git/GitHub for version control and deployment, this project highlights my ability to apply HCI principles through reusable components and a consistent design system. It demonstrates strong technical and visual design capabilities in creating scalable, user‑centered interfaces.