Type: Clone Practice Project Role: UI/UX Design, Frontend Development Contribution: 100%

📌 1. Overview

KTCU Clone is a desktop‑focused practice project created to study real‑world layout structure, spacing logic, and UI interaction patterns. The goal was to analyze the original website and rebuild its hierarchy, navigation flow, and component behavior using HTML, CSS, JavaScript, and jQuery.

🎯 2. Problem & Intent

This project was designed to understand how large‑scale institutional websites structure information and how their UI patterns support clarity and usability.

Key intentions:

• Study real‑world layout hierarchy
• Recreate spacing, alignment, and grid logic
• Understand interaction patterns (tabs, dropdowns, banners)
• Practice translating complex UI into clean, maintainable code

Unlike a redesign project, the goal was accuracy, structure replication, and behavioral consistency.

🔍 3. Process

📝 1) Original Site Analysis

• Reviewed layout hierarchy and spacing rhythm
• Analyzed navigation flow and content grouping
• Identified key UI components (tabs, banners, cards)

🧩 2) Wireframing

• Recreated the original structure in low‑fidelity wireframes
• Mapped out grid alignment and spacing rules