Final Project
27 Nov 2025 - 11 Jan 2026 ( Week 10 - Week 14 )
Website Redesign Prototype
This project was based on my website redesign proposal for Kdramadiary.com, where the main goal was to transform an outdated and cluttered website into a modern, user-friendly, and visually appealing platform for K-drama fans. In my proposal, I focused on improving usability, visual design, navigation, and mobile experience while keeping the emotional and romantic vibe that represents K-drama culture. The development stage was about turning those design ideas into a real, working website that people can actually use.
At the beginning, I carefully reviewed my proposal to make sure I followed the original objectives. I had identified problems such as confusing navigation, inconsistent typography, dull color choices, poor mobile layout, and slow performance. So, my main direction during development was to create a clean layout, use soft pastel colors, apply consistent fonts, and make sure everything works smoothly on different screen sizes. I chose to use HTML, CSS, and Bootstrap because they allowed me to build responsive layouts more efficiently and helped maintain structure across all pages.
I started by organizing my project files properly. Each page had its own HTML file, such as Home, Reviews, Latest News, About, and Contact Us. This matched the assignment requirement of having at least five pages and also followed my proposal’s idea of clearer navigation categories like Reviews, Latest News, and About. I created a shared navigation bar so that users could move between pages easily. I made sure the logo always links back to the Home page, which improves usability and follows common web design standards.
Design consistency was a big priority. In my proposal, I mentioned using soft pastel tones like blush pink and lavender to reflect the emotional and romantic feeling of K-dramas. I applied this idea in the final website by using pink as the main theme color and balancing it with white and light grey backgrounds. This made the website feel light, calm, and modern. I also made sure spacing was consistent and that sections were clearly separated so the content would not look crowded.
Typography was another important part of the proposal. The original website had inconsistent fonts and small text that reduced readability. In my redesign, I selected specific fonts such as Baloo, Inter, Afacad, Aboreto, and Acme for different purposes. Headlines use more decorative fonts to match the K-drama aesthetic, while body text uses cleaner fonts for easy reading. I increased font sizes slightly to improve accessibility and made sure contrast between text and background was strong enough.
The layout design followed the wireframes and mood boards from my proposal. The Home page includes a “Preview for You” section, followed by Past Dramas and Upcoming Dramas, just like what I planned. The Reviews page shows detailed information including story overview, character relationships, review breakdown, and summary. This reflects my proposal’s goal of making the site more informative and structured. The Latest News page uses card layouts to present articles clearly, while the About page explains the purpose of the website and its services. The Contact Us page includes a form that allows users to reach out easily, which improves interactivity.
One of the biggest challenges was making the website responsive. In my proposal, I mentioned that the old website had a poor mobile experience, with overlapping elements and messy layouts. During development, I used Bootstrap’s grid system to make sure the website adjusts well on different screen sizes. However, I still faced issues where navigation items became hard to click on mobile, and some sections overlapped or became too large. Fixing this required careful adjustments to padding, margins, and element positioning. Testing on my phone helped me notice these problems early and improve the layout step by step.
Another major challenge was linking pages correctly, especially when uploading the site to Netlify. Sometimes my pages worked locally but broke online. This was usually caused by incorrect file paths, missing files, or folder structure issues. It taught me the importance of keeping file names consistent and using relative paths properly. Solving this problem was frustrating at first, but once I fixed the folder structure, everything worked smoothly. This experience made me more careful with file organization and deployment.
Navigation was another area that needed attention. In my proposal, I stated that the old website had confusing navigation and lacked clear categories. In my redesign, I created a simple navigation bar with Home, Reviews, Latest News, About, and Contact Us. I also added hover effects to make the interface feel more interactive. This small detail improved user experience and made the website feel more professional and responsive.
The filter system was inspired by my proposal’s idea of improving search and content discovery. I added filters such as Genre, Year, Actors, and Director to help users find content easily. This makes the website more functional and matches my goal of improving usability. Although this feature took time to understand and build, it added real value to the website and made it feel closer to a real entertainment platform.
Performance optimization was another important aspect. In my proposal, I mentioned that the old site had slow loading times due to large images. For my project, I resized and optimized images to reduce file sizes while keeping quality. This helped pages load faster, especially on mobile. I also avoided unnecessary elements that could slow down performance.
Testing was done continuously throughout the project. I tested the website on Chrome, Safari, and mobile browsers. I checked whether navigation worked, whether buttons were clickable, and whether layouts stayed consistent. When problems appeared, such as broken links or unclickable menus, I fixed them immediately. This testing process helped improve the quality and reliability of the website.
Overall, this project successfully brought my proposal to life. The final website reflects the goals I set earlier: a cleaner layout, better navigation, modern design, improved mobile experience, and stronger brand identity. It feels more aligned with K-drama culture, using soft colors, emotional imagery, and engaging content structure. Compared to the original Kdramadiary.com, my redesign is more organized, visually appealing, and user-focused.
This project also helped me grow technically and creatively. I learned how to turn design ideas into real code, how to solve practical problems like broken links and layout issues, and how important testing and organization are in web development. It was challenging, but seeing the final website live online made all the effort worth it.
.jpg)
Comments
Post a Comment