Art — Technology — Education

UX, UI & HCI Principles Across These Projects

The projects in this portfolio are not just beautiful screens—they are built around concrete UX, UI, and HCI principles that support learning and clarity.

User-centered & context-aware

I start from who the learners are (CS majors, non-majors, educators) and what they find difficult. Algorithmic structure, visual representation, and instructional pacing are shaped by their goals and prior knowledge.

Progressive disclosure & scaffolding

I break complex topics into small, sequenced steps: one operation, one visual change, one caption at a time. This appears in the algorithm animations, Dijkstra case study, and Boolean operations projects.

Visual hierarchy & layout

I use consistent grids, typography, and color to guide attention to the next important action or idea—titles, active steps, and key values stand out, while supporting text stays quiet in the background.

Accessibility & clarity

I favor high contrast, readable type, clear labels, and captioned animations so learners can follow along even when they are tired, new to the topic, or viewing on smaller screens.

Feedback, state, and “what happens next”

I highlight active nodes, edges, or regions; use simple transitions to show what just changed; and keep controls obvious so learners always know where they are in a process.

Iterative, HCI-inspired design

Many projects went through sketch → prototype → test → refine cycles, influenced by what I learned in Usability Engineering, HCI, and Software Engineering. I treat each piece as a small experiment in making abstract content feel more human and learnable.

Scaffolding in my work

For me, scaffolding means using visual motion to bridge the gap between a student’s confusion and their understanding. I create temporary “visual maps” with animation to show how parts move and connect, so learners can eventually see the logic in their own minds. Once the concept is understood, the animation has done its job and the learner can carry that knowledge forward on their own.

How This Portfolio Applies UX, UI & HCI Principles

This portfolio is structured using core UX and HCI concepts such as user-centered design, clear information architecture, progressive disclosure, and visual hierarchy:

• User-centered design: Pages are written and structured for learners, reviewers, and faculty—focusing on clarity, context, and what they need to see first.
• Information architecture: Projects are grouped into clear categories in the left navigation (Visual Algorithms, Web Design & Development, Multimedia, UX Research & Concept Design) so it’s easy to find related work.
• Progressive disclosure: Each project page reveals information in layers—title → short overview → visuals → deeper process notes—so viewers aren’t overwhelmed at once.
• Visual hierarchy: Headings, spacing, and color emphasize what’s most important (project titles, roles, outcomes) while supporting text is lighter and secondary.
• Scaffolding: Many projects (like algorithm visualizations) move step-by-step, helping beginners follow one change at a time instead of seeing everything at once.
• Feedback and system status: Active links, hover states, and consistent layout give clear cues about what is clickable, where you are, and what content just loaded.
• Affordances and signifiers: Buttons, icons, and thumbnails are designed to look “clickable” and are labeled in plain language (e.g., “View UX/UI Projects,” “View Journey”).
• Accessibility: I use readable typography, strong contrast, descriptive headings, and captions or alt text where possible so content is usable across different screens and abilities.