We designed the first website of UVDRK, a medical aesthetic brand that started with melting thread lifting technology. We summarized the process of interpreting the name and story, establishing rules for color and movement, and verifying the direction in three designs.
01 Overview
UVDRK is a medical aesthetics brand established in July 2026. The company may have just opened, but the brand's roots are traced back to the meltable thread lifting technology pioneered by Ultra V and to the doctor who started it. It's in Kwon Han-jin's experience.
So this website had to show both things at the same time. It is the trust that comes from long-proven experience and the will to go back to the beginning and start again.
Ultracall, thread lifting, RF equipment, and infusion pumps are all medical devices. In this field, the more you talk about effectiveness, the less trust you have, so quality had to come from moderation, not the size of expression.
The heritage of Ultra V and Dr. Kwon Han-jin's leap forward comes together in one name: UVDRK. However, we had to keep the boundaries of the narrative so as not to mix the individual's career with the history of the new corporation.
From a single strand of thread to RF equipment, skin boosters, and daily cosmetics, each product line has a different personality. We needed a visual convention to tie these products together with a single tone.
02 The Name
The first question I had was, ‘How can someone who sees these five unfamiliar letters read them for the first time?’
This means that we inherit the technology and experience that created the category called melting thread lifting.
It contains the meaning that the person who started Melting Thread Lifting is starting again under his own name.
Two names come together and become one beginning. All design decisions on this site start from this statement.
03 Motion Language
The brand story in the plan was divided into five chapters, and the core values were organized into succession, relaunch, and expansion. We have translated these sentences into the four states that a melting thread undergoes.
01TWIST · Succession
Ultra V's accumulated technology and experience are depicted in eight strands of light. The more the strands are twisted, the more they become one solid thread.
02DISSOLVE · Dissolvable thread
The essence of melting thread lifting has been transferred to movement. The disappearing scene was not the end, but the beginning of the next scene.
03EXPAND · Expansion
The product line, which expands from thread lifting to Ultracall, TRIDERM, skin booster, and cosmetics, is expressed as particles spreading out.
04RETURN · Back to the beginning
A circle is both a starting point and a completed form. In design number 1, the logo appears inside this circle and the first scene ends.
This is a 168-frame motion graphic used on the main page of design number 1. Instead of letting the video play, each page is drawn according to the scroll position, so the visitor sets the pace of the story.
04 Color
The draft brand guide we received suggested 70 white, 20 navy, and 10 gray, and the visual direction document used 60 navy, 27 white, 9 silver, and 4 gold as the standard. Instead of randomly choosing one side or the other, we screened both ratios and compared them.
It is light with wide margins and the information is easy to read. However, the first impression of the brand weakens and it becomes difficult to distinguish it from other hospitals or cosmetics brands.
It gives a deep and solid impression. Instead, long text and tables are difficult to read on the dark side, so you should set aside a light side.
The conclusion was to share scenes and information. Scenes that create an impression of the brand were placed on the navy side, and introductions and visions that require a long read were moved to the bright side to give them a breather.
The background of this page you are currently viewing is navy 0%, light side 0%.
#004E97
RGB 0, 78, 151
This is the color of the provided logo. It does not change arbitrarily.
#586164
RGB 88, 97, 100
The color used in the logo symbol and text is gray.
#0E1B2B
RGB 14, 27, 43
This is the background color of the scene showing the brand.
#08121E
RGB 8, 18, 30
It is the deepest background on which motion and photography lie.
#C9CFD6
RGB 201, 207, 214
It is a secondary color that resembles metal and light.
#2B333D
RGB 43, 51, 61
This is the text color of the text on the bright side.
#B89A64
RGB 184, 154, 100
Write only one line and one dot.
#FFFFFF
RGB 255, 255, 255
This is where information that needs to be read for a long time is placed.
The standard value is #004E97, but the most used blue in the provided PNG was #094E96. We didn't recolor the files, we just put them on a checklist to check the final values when exporting them for the web from the vector source.
Gold is used only on one line under the title and on one point to emphasize.
Repeating the gold border and box makes decoration appear more important than luxury.
05 Typography
Again, with the same feelings as before
IBM Plex Sans KR Light · Visual direction recommended
Again, with the same feelings as before
Pretendard · Web Body
For visual direction, Montserrat was recommended for English and IBM Plex Sans KR for Korean, with Pretendard as an alternative. On the web, Pretendard, which has a wide range of Hangul thickness levels, is used in the main body, and in design number 2, a subset web font is created that selects only the letters used on the screen to reduce the size.
06 Layout
The layout formula for visual direction was created for social media posts. We reapplied this formula section by section of the web. Only one scene was placed on each screen, and changing scenes was left to scrolling.
Repetition of gold borders and boxes
Gold wrote only one line under the title and one point of emphasis.
Fake medical device image
All products, from Ultracol vials to TRIDERM equipment, are based on actual photos.
Excessive 3D rendering, excessive use of skin close-ups
The atmosphere was created using light, metal, glass, and curved materials. 3D was tested only on the shape of the yarn in design 2.
List English words such as INNOVATION and PRECISION
I chose to write one meaningful sentence out loud.
EST. Made-up years like 198X
I wrote only the confirmed history and divided it into personal experience and corporate history.
07 Material
I first decided on the materials to use for photos and graphics. Instead of flashy decorations, we decided to create a feeling of luxury through differences in the way light hits and the materials.
08 Exploration
We re-created the images for the main visual and scene transitions several times. Both what was adopted and what was eliminated served as the basis for the decision.
01Initial draft main
Hundreds of silvery fibers form a single ring. This is the first image metaphorizing the heritage of thread lifting.
02Design No. 1 adopted
This is the background that supports the thread lifting section and the first chapter of the brand story.
03Design No. 1 adopted
This is a bright transition scene that supports the brand introduction paragraph.
04Design No. 1 adopted
This is the dawn light used in the ‘And, here we go again’ scene.
05Design No. 1 adopted
This is the stage where TRIDERM stands. I posted actual photos of the equipment.
06Design No. 1 adopted
This is the background for Skin Booster’s transparent texture.
07Design No. 1 adopted
This is the bottom light of the Idebenone cosmetic rail. Gold was left with only light.
08Replacement
The details were so tight and sharp that I saw the picture before the product.
09Replacement
This is a plan that replaces flowers with soft curves. We tested the green tone in design number 2 together.
10Excluding
It was warm and beautiful, but far from the medical brand of understatement. After review, I changed it to a photo of the actual product.
09 Structure
In the first plan I received, GNB's product menu and main product card were divided into different standards. To ensure that visitors can find the name they saw on the menu again on the main page, we first suggested meeting the two criteria when sending out a quote. Afterwards, with the addition of two types of equipment, six main cards and six product menus were organized in the same order.
UVDRK
main card
We compiled data on product lines and materials by comparing thread catalogs. For both designs 1 and 2, you can immediately find the product line you want using the material filter. Try pressing it yourself.
13 product lines
10 Design Drafts
The day after receiving the data, we created three directions with the same manuscript and the same product data. For each design proposal, we asked one question and found an answer.
Initial exploration plan
This is the first draft that applies the colors and fonts of the visual direction. The main page opened with a silver filament image, the brand story was shown in a ring motion that rotated with a scroll, and the products were shown as a horizontally flowing collection. This structure later became the basis for the second design.
Design number 1
The main page was opened with 168-frame motion graphics, and the meaning of the name, six product lines, and five brand stories were laid out sequentially on one page. This plan is most faithful to the visual direction's ratio of navy, silver, and gold. The original logo was placed only on a white background.
Design number 2
Chrome filament, drawn in real-time 3D, rotates and splits as you scroll. I changed the color to deep green and cream, and added six product films, an RF mode controller, and an editorial design history. Since we didn't go as close to the 3D that the guide warned about, 3D was only used for the shape of the yarn, not the product.
Move the handle left and right to compare the first screen of design 1 and design 2.
11 Details
The letters glow one after another to explain the meaning of UV and DR·K.
Use the material filter to instantly find PDO, PCL, and PLCL product lines.
The equipment comes on stage and the three modes appear one after another.
I linked the click and scroll to point to the same mode.
Only the selected video is downloaded, and playback stops when it goes off the screen.
It shows the individual's career history and the establishment of a corporation in 2026.
12 Devices
I checked it myself for each major screen width, from 320px to 1440px. On low-height screens, the fixed presentation is released to allow natural flow, and visitors who have reduced motion turned on are shown the same content as a still screen.
13 Guardrails
It is as important for a medical aesthetics brand's website to be flawless as it is to look good. We adhered to the following principles from the design stage.
In Design 2, we tested the dark header by changing the logo to white. Once you receive your approved inverted logo, replace it with that file.
Product names scheduled to be changed will be used as they are now until they are confirmed. Once the name is decided, we created it so that only one place of data needs to be changed.
We decided to only use authentication phrases and badges that were currently confirmed to be valid, and removed items that had not yet been confirmed from the screen.
Products with unconfirmed introduction materials were placed as ‘in preparation’ and no performance description was provided.
The history is Dr. Kwon Han-jin's career and the establishment of UVDRK in July 2026 are described separately.
For news and job postings, only spaces were created to be filled with actual text, and example cards showing the screen composition were marked as ‘example posts’.
All products, from Ultracol vials to TRIDERM equipment and cosmetics, are photocopies of what was delivered.
Skin boosters and cosmetics only introduce major ingredients and do not include expressions of efficacy or functionality.
14 Process
We reviewed the plan and references and sent a schedule and estimate. A proposal to match the standards of the menu and main card was also included.
We received 23 plans, original logo, draft brand guide, visual direction document, and 578 files of product materials.
We organized the differences between the two brand documents and the items that needed to be confirmed, and created an initial search plan and design proposals 1 and 2.
In design number 2, the lime green band was changed to navy and the magnolia image was replaced with an actual product photo. Six product films were gathered on one stage.
Based on the finalized design proposal, we develop and open product detail pages and news, inquiry, and recruitment management functions.
The beginning, reimagined.
BlueCanvas reads manuscripts and materials first before drawing the screen. If you are preparing the first website of a new brand, we will start by organizing the materials you have now.
Architecture · Interior
ZIUMN
The build process of an architecture brand website, from the brand’s attitude to its olive color and typefaces, four proposals and scroll interactions.
Brand · Esports
Hyundai N Virtual Cup 2026
An esports tournament website that connects event information, sign-up, entry, record submission and the leaderboard.
Public institution
Korea Drug Development Fund
The build and renewal process of a public institution’s website, from user analysis and CI interpretation to nine main-page proposals and pipeline visualization.
Contact
Tell us where you are and what you want to achieve. We’ll outline a practical scope, process, and estimated budget.
DIRECT
Your inquiry has been received. We will reply within one business day with a scope and an estimate.