UI
Design
I love creating dynamic web designs where illustration, animation, and responsive-coding seamlessly come together.
-
hourglass_top Video Loading...
Lottie Animation
Lottie is an animation file format based on JSON. These three scenes of animations implemented in the hero section are lighter than GIFs or MP4 and can scale responsively to any resolution without losing quality. To achieve a unique and authentic visual style, I crafted and animated the illustrations from scratch.
-
hourglass_top Video Loading...
GSAP Animaiton
I used GSAP, a powerful animation library, to create two synchronized animations. However, a plugin I used changed its licensing terms, so I had to replace it with JavaScript code. Thankfully, with the help of Gemini, I was able to seamlessly integrate GSAP's free plugins and vanilla JavaScript to play along.
-
hourglass_top Video Loading...
Foldable/Accordion Menu
Foldable section is great for hiding or showing extra content, such as filter options, menus, or details. By combining CSS and simple JavaScript, I created an interactive, accessible, and responsive foldable section. This allows you to make more space for products by folding them into a small icon.
-
hourglass_top Video Loading...
3D Animation
The use of 3D design elements in websites has become more and more popular in recent years, engaging users on a deeper level. 3D graphics can add depth to the visual and enhance user experience, which ultimately leads to an increased conversion rate. I rendered and animated a brief storytelling 3D-animation for the hero section.
-
hourglass_top Video Loading...
Charts using Chart.js
On this dashboard, I used Chart.js. Chart.js is one of the most popular charting libraries. I selected different chart types based on the data and modified various attributes of each to intergrate them into my layout and design harmoniously.
-
hourglass_top Video Loading...
Emoji Animation
To encourage users to participate in the survey, I incorporated lively animated emojis into the questions. These expressive, small, familiar faces are designed to draw user's emotional responses and capture the user's attention, setting a lively mood for participation.
-
hourglass_top Video Loading...
Design with Mode Toggle
The dark mode design style is considered to provide relief for strained eyes in a low-light environment. I implemented a dark mode feature that users can switch to any time and ensured legibility is prioritized in both dark and light modes. Furthermore, with well planned HTML and CSS structure I could acheive the mode transition by switching only one class name in the HTML.
-
hourglass_top Video Loading...
Animated Illustration
Vector illustration is a huge part of the UI/Product design. It can be used for website elements and marketing collaterals such as social media posts or videos. One piece of illustration can tell a compelling story, effectively conveying the intended message. Moreover, unlike raster images, vector illustrations can be animated in various ways without pixelation.
-
hourglass_top Video Loading...
Animated Icons
Well crafted icons are versatile, providing a concise yet powerful visual cue. Here is a tile design for a dashboard. Each tile only contains handful information, so I spiced them up with the animated icons designed to be triggered by mouse hover event.
-
hourglass_top Video Loading...
Charts using CSS/HTML
This dashboard is created using pure CSS. Since all the design elements are handled by CSS without using any JavaScript library, customization is virtually limitless. Additionally, it is lightweight and fast, offering endless possibilitis of various design styles.
-
hourglass_top Video Loading...
Motiongraphic for Mobis Campaign
This animation is created for Mobis Campaign. Using four given campaign phrases, I developed a story board for the scenes, designed and vectorized the characters and animated them. Animation was crafted using Macromedia Flash. And I vividly remember enjoying the process. :-)
-
NC Soft Groupware Illustration
This Groupware design was for NC Soft, the game compnay. I took the color and design motif from their logo and animated them with light tone to align with the entertainment industry theme. Although the final design underwent slight changes, this version remains my favorite. :-)
-
Hyundai Rotem HR system
For ERP, HR System is relatively more people-centric, and naturally I've always tried to add a little bit more human touch to the landing page, prioritizing it over a purely data-oriented design. This design is one of my design proposals for Rotem, and later on I replaced the photgraph on the hero section with another one due to a license-maintenance issue.
-
E-Learning Website
At one point in my career, I'd been working on e-Learning systems a lot. This project was one of them. Learning & Innovation, Inc. was a company that provided Learning Management Systems (LMS) to medium and large-sized corporations. As always, I handled design, motion graphics, publishing, and conducted cross-browser testing.
-
Hankook Tire HR system
This is the landing page of Hankook Tire HR System. Normaly HR systems don't contain a lot of information on their landing pages, and hero section sets the general tone of the site design. I proposed several options for the hero section. This is one of them. Later on, we replaced the photograph with an illustrated image.
-
Kyung Hee University website
In this project, I took charge of design, motion graphics, and collaborated with a publisher. This design was not the final version and even after handing over the design to the publisher, minor changes occured as usual, and I maintained close collaboration with publishers and developers to manage the changes. As a designer, keeping a good communication with other team is always crucial.
-
KITA - India Portal
This is a potal design for India Logistics Potal of Korea International Trade Association(KITA). I used Indian symbolic buildings and the national flag as the main design elements. The diagonal lines from the flag add a robust ambience on the page, symbolizing the healthy dynamic between the two countries.
-
University of Brain Education Website
Another project involved redesigning a University website. Although the design was not final, small tweaks and changes occurred throughout the process. Maintaining close collaboration with the development team was essential to finish this project on schedule. Effective communication with the client was as crucial as coordinating with other teams.
-
Inha university e-learning portal
This is the gate page of the e-learning Portal for Inha University. Inha University had a several systems associated with students' education and this is one of them. The design focused on seamless integration with existing university systems and tried to provide clutter-free, clear and relevant UI to show the content.
-
Smart Mortors Website
The homepage of this dealership features a dark theme. The dark theme used on this page is designed to make the car image stand out and grab the user's attention. Additionally, I added the lighting effects on the main phrasees and animated them accordingly with the product images.
-
KBS TV-Show: The Accidental Couple
When I worked on websites for the Korean Broadcasting System (KBS), they already had a CRM system in place. Therefore, I only needed to code the body of my design to integrate with the CRM, while the head section for the GNB and banner section were already in place. This homepage is for the TV show 'The Accidental Couple,' and as it was a romantic comedy, I utilized a bright color scheme and incorporated cute design elements.
-
KBS TV-Show: 1 vs 100
This is also body part of my design from KBS and the header and the banner(I blurred them) were already in place by their design team. 1 Vs. 100 was one of the Korea's famous TV shows. With lighting effect and spotlight elements to capture the general tension and stage ambience of the show.
-
Illustration for Umji-Soft
Among the various e-learning projects I was assigned, this one was specifically targeted for kids, allowing me to experiment with different design styles. Unlike many other works on Learning Management System (LMS) projects, I enjoyed the diverse tasks in this project, including character designs, content viewer design, and introductory animations for the software.