Do, re, mi
The three syllables DO, RE, MI are stacked in three rows. These are the first three sounds of the name and the sound with which the music begins. If you place three lines on the staff, the company name becomes the melody.
DOREMI ENTERTAINMENT · SINCE 2006The turquoise trapezoid in the logo is
light from a projector
16 DRAMAS · 18 OSTWith that light, we illuminated 16 dramas
and created 18 OSTs
WEBSITE RENEWAL Now on the homepage
It's time to turn on the lights
DOREMI ENTERTAINMENT · WEBSITE RENEWAL PROPOSAL
The wall where posters were hungInto a light-up theater
DOREMI ENTERTAINMENT Homepage Renewal Proposal
SCENE & SCORE · STORIES THAT STAY Two Directions
S#01 / OVERVIEWProject Overview
making a drama,
A company that adds music to the scene
DOREMI ENTERTAINMENT is a production company that has been producing dramas starting with SBS’s “Please Come Back, Soon-ae” in 2006. So far, I have personally produced 16 dramas and created 18 drama OSTs. I am also in charge of actor management and work marketing.
BlueCanvas proposed two directions for redesigning the company's website. SCENE & SCORE, which opens the scene with the light and music of a projector, and STORIES THAT STAY, which captures the lingering feeling of the story with movie-like images and deep teal and amber colors. This page summarizes the considerations and process that led to the two design proposals.
- 2006First work 〈Please Come Back Soonae〉
- 16Directly produced drama
- 18Drama OST produced
- 4Drama · OST · Management · Marketing
S#02 / CHALLENGEStarting point
- 1There are four menus: HOME, ABOUT, WORK, and PR.
- 2The first screen contains two lines of posters for the work.
- 3There is a SNS shortcut button next to the menu.
FOUR QUESTIONS
Renewal started with
Four Questions
- Q1Can you tell what this company does from the first screen?
We decided to show four scenes one by one on the main screen: drama, OST, management, and marketing.
- Q2Can you see the strength of making drama and music together?
For each work, the role of whether it was a drama production or an OST was written down, and a separate scene was given for the OST.
- Q3Is it possible to see at a glance the works accumulated since 2006?
The works by year were organized on a film strip for Proposal A, and in a history list for Proposal B.
- Q4Will the same atmosphere be conveyed on mobile phones?
Scenes that flow horizontally were changed to be swiped with a finger, and the font size and scene length were adjusted to fit the vertical screen.
S#03 / BRANDBrand interpretation
Within the name and symbol
there was already an answer
We re-read the current logo before creating a new emblem. The three-syllable name, the turquoise trapezoid, and the two-color logo tell the story of the entire website.
projector light
The turquoise trapezoid in front of RE comes from the company symbol. In the symbol, this shape is placed next to two film reels, forming the shape of a projector. The trapezoid is the light extending from the projector to the screen, and in the logo, RE stands in place of the projector instead of reel.
Light is a scene, sound is music
The light represents the scene on the screen, and the name of the scene represents the music that flows in that scene. The two things that Doremi does, drama and OST, are included in the name and symbol. The names of the first design, SCENE & SCORE, came from this interpretation.
dark blue and turquoise
There are only two colors used in the logo: #231F20, which is almost black, and #81ADA8, which is cyan. The palette in both designs started with this turquoise color.
S#04 / MOODBOARDMood Board
I took a picture of words as scenes
first
The words that came out of the brand interpretation were light, scene, score, stage, city, and film. I created an image of a scene that matches each word and used it as material for both designs. This is to convey the atmosphere of the drama production company even without photos of the actors.
-
01LIGHTLIGHTProposal A · First scene -
02SETOnsiteProposal A · Drama -
03SCORESheet musicProposal A · OST -
04STAGEStageProposal A · Management -
05CITYCityProposal A · Marketing -
06FILMFilmProposal B · First scene -
07SEOULAlleyProposal B · Scene change -
08GENREHistorical dramaGenre experiment -
09GENREThrillerGenre Experiment -
10GENRERomanceGenre Experiment -
11GENREFamily DramaGenre Experiment
S#05 / STRUCTUREVisitor and information structure
There were
four types of people who opened the homepage.
Not only viewers but also people who work with the production company often visit the website. Since each person visiting had different information they wanted to check, we first decided which scene each person would arrive at.
- 01Broadcasting company · OTT · Co-production company
Check which work was created and with which channel.
S#04 WORKS · S#06 HISTORY - 02Actor and aspiring rookie
Looking for management methods and audition news.
S#07 NEW FACE - 03Composer, singer, record label
Let’s take a look at what drama OSTs were made for.
S#05 OST - 04reporters and viewers
Find work news, press releases, and wallpapers.
S#08 PR ROOM
The homepage structure
was written like a script
The structure of four menus was divided into nine scenes. I started designing after writing down the location, time, and content for each scene like a scene list in a script. Below is the scene list of Proposal A SCENE & SCORE.
Existing menuHOMEABOUTWORKPR
New sceneS#01S#02S#03S#04S#05S#06S#07S#08S#09
〈DOREMI ENTERTAINMENT〉 HomepageScene ListProposal A SCENE & SCORE · Nine scenes
- S#01.THE BEAMprojection room / nightExisting HOME
The light of the projector turns on, the light becomes a staff, and the three notes do, re, and mi sound. SCENE & SCORE appears with the logo.
- S#02.ABOUTpapers up/downExisting ABOUT
The story from the first work in 2006 to the present is summarized in four numbers, followed by an introduction to the company.
- S#03.BUSINESSFilming location / nightExisting ABOUT
It shows the drama, OST, management, and marketing scene by scene.
- S#04.WORKStheater / nightExisting WORK
The 16 self-made dramas flow horizontally like a film.
- S#05.OSTRecording studio / dayExisting WORK
We introduce OST 18 between the notes and waveforms on the staff.
- S#06.HISTORYfilm storage room/nightExisting WORK
Works from 2006 to 2020 are placed on the filmstrip.
- S#07.NEW FACEempty stage / nightExisting PR
This leads to news of an audition looking for the next main character in an empty chair under the lights.
- S#08.PR ROOMData room / dayExisting PR
Organize press releases, announcements, wallpapers, and brand films into four cards.
- S#09.ENDING CREDITSending / nightnew scene
The site ends with company information and filmography posted like ending credits.
S#06 / COLORColor Chart
From one turquoise
to two palettes
Based on the logo's turquoise #81ADA8, I found the color by varying the brightness and temperature. If you turn it towards the light, it becomes mint in A, and if you turn it towards the film, it becomes deep till in B. Inside B, the amber color of tungsten lighting, which is the opposite of the turquoise color, was added to create the warmth of a theater.
CI Teal
#81ADA8Trapezoid in logo- Brightened toward the lightBeam Mint
#A6E3D9Teal illuminated by projector light · Proposal A - Down toward the shadeShade Teal
#3F6F69Accent color on a bright background · Proposal A - Down to the film baseFilm Teal
#0C292ARecords and inquiries Base of the scene · Proposal B - Opposite colorTungsten Amber
#EFB563Warm light of theater lighting · B
A · SCENE & SCORE
Darkness and light in the projection room-
Background · 60%This is the color of the projection room with the lights off. Most of the background is painted in this color so that the light and text can be seen most clearly.
-
Screen · 26%This is the color of the screen that the light hits. Like the company introduction and OST, it is written on the background of a bright scene and on the text of a dark scene.
-
Light of the logo · 7%The turquoise color is taken directly from the trapezoid of the logo. I only use it for logos and small accents.
-
Light on · 4%This is a color that turns cyan towards the light. Write small marks in the dark, such as timecode and scene numbers.
-
Light of the shade · 3%This is a color that lowers turquoise toward the shade. Write scene numbers and highlight letters on a light background.
B · STORIES THAT STAY
Film and tungsten lighting-
Chestnut · 46%It is black with a blue undertone. It is the foundation on which videos and photos are placed.
-
Film Base · 22%This is a color that reduces cyan to the depth of the film base. Records and inquiries write on the wide side of the scene.
-
Paper · 22%This is the basis for the gallery and history of the work. It reminded me of the paper in a theater program book.
-
Lighting · 7%This is the color of tungsten lighting, the opposite of cyan. Place only one word in the title and the button.
-
Lingering · 3%Color of auxiliary sentences and captions. I set the brightness to be readable even on a dark background.
Clicking on a color swatch will copy the HEX value. The numbers in the sample are the contrast in brightness with the color of the text above them.
S#07 / TYPOGRAPHYTypeface
Like the aspect ratio
characters that stretch
The English title of Proposal A was written in Archivo, which allows the character width to be changed from 62 to 125. If you widen the width as shown in the sample below, it will feel like the 4:3 screen is unfolding in cinemascope. Timecode and scene numbers were set to JetBrains Mono, and Korean was set to Pretendard. For Proposal B, I chose Barlow Condensed, which is narrow and tall, just like the title on the movie poster.
Archivo · Proposal A title
wdth 62SCENE & SCORE
JetBrains Mono · Timecode
EP / HH:MM:SS:FFEP.01 00:00:00:00
S#01 THE BEAM · S#02 ABOUT · S#03 BUSINESS
Barlow Condensed · Proposal B title
600STORIES
THAT STAY.
Pretendard · Korean text
400 · 600 · 800Even when the scene ends
the music remains.
Music is what makes you remember the emotions of a drama for the longest time.
S#08 / MOTIONMotion principles
Scroll
becomes the play button
Both designs treat scrolling like a video playhead. Lowering it moves the scene forward, raising it rewinds it. Because visitors set the pace, even long stories won't get boring.
Scrolling playhead
The projector light in the first scene of Proposal A draws 180 frames according to the scroll position. As you pass this card, the frames are passed in the same way.
Timecode and scene number
The timecode and scene number at the bottom of the screen tells you which scene you are currently watching. The table of contents bar below this page moves in the same way.
transition to light
In the business introduction scene in Proposal A, the photo opens with the light form of a projector. As a new scene appears, the trapezoid widens to fill the screen.
04 · SOUND ON DEMAND
Sound is turned on by the visitor
In the record scene in B, you must press the button for the ambient sound to play. Sound only comes out when the visitor turns it on.
Proposal A
SCENE & SCOREMusic flows in every scene
This is the direction to introduce the company using the light of the projector and the staff paper. On the first screen, the light becomes a staff, the three notes do, re, and mi light up, and then the logo appears. Nine scenes follow the time code at the bottom of the screen like a drama.
- The first scene where the light from the projector becomes a stave (180 frames are played by scrolling)
- A fixed stage where four things are done one scene at a time.
- 2006-2020 filmography on film strip
- Last scene ending with ending credits
Archivo · JetBrains Mono · Pretendard
DIRECTION NOTES
Among the scenes in Proposal A, I chose a moment that I put a lot of effort into directing. Click on the photo to see a larger view of each scene.
- S#01 · Light becomes a staff
The beam of light from the projector turns into a staff, and on it the three notes do, re, and mi light up in order.
- S#01 · 16 and 18
As the film rolls like a tunnel, the numbers 16 dramas and 18 OSTs come to mind.
- S#03 · Four things
The large letters on the left and the scene on the right change together to introduce four business areas one by one.
- S#04 · A work that flows like a film
When you scroll down, the 16 self-made dramas pass horizontally like films in a movie theater.
- S#05 · OST on the staff
Musical notes flow on bright paper, followed by a list of 18 OST pieces with waveforms below.
- S#06 Film Strip History
As the year changes, a large number moves along, showing works from 2006 onwards.
- S#07 · Chairs on an empty stage
An audition guide looking for new actors is placed on an empty, illuminated chair.
- S#09 · Ending credits
At the end of the site, the credits roll like a movie and the filmography is shown again.
Proposal B
STORIES THAT STAYEven though the story ends, the emotions continue.
This direction captures the lingering feeling of the work with movie-like images and deep teal and amber colors. When you scroll down, a 10-second brand video plays at that speed, followed by a night scene of Seoul, a horizontal art gallery, and a spinning record.
- 10-second brand video that plays at scroll speed
- The introductory sentence becomes brighter word by word and the night of Seoul spreads across the screen.
- Horizontally flowing art gallery and work details window
- Spinning records and ambient sound turned on by visitors
Barlow Condensed · Pretendard
DIRECTION NOTES
Among the scenes in Proposal B, I chose a moment that I put a lot of effort into directing. Click on the photo to see a larger view of each scene.
- 01 · STORIES THAT STAY
A large title is placed on the light-filled film. If you scroll down, the video will play forward.
- 01 · Sentences that become brighter word by word
Write down the power of stories that the company believes in in one sentence, and reveal each word at your reading speed.
- 02 · Night in Seoul
The night scene of Seoul, which was visible through a small window, expands to fill the screen as you scroll.
- 02 · Art Gallery
The poster flows horizontally, and when you press the card, the work details window opens.
- 03 · BEYOND THE FRAME
Drama, music, management, and marketing are spread out in large-letter accordions.
- 04 · PRESS FEEL.
Pressing the button next to the spinning record will play a short ambient sound.
- 05 · SINCE 2006.
The history goes from top to bottom, starting in 2020 and going back to the first work.
- 06 · WHAT’S YOUR STORY?
The final scene asks what next story we will create together.
S#11 / BRAND FILMBrand Film
For both designs
I made two short films
We created a brand film for each design proposal so that it could be used on the website's website and introductory materials. The A film is accompanied by a short piece of music tailored to the scene, and the B film is played according to the scrolling speed on the first screen.
This is a video in which the light from a projector becomes a staff line, and the three notes do, re, and mi lead to a scene in the film, and end with a logo.
This is a video in which the camera moves slowly over a light-filled film and the lighting changes. It plays repeatedly without sound.
S#12 / MOBILEMobile
Even in the palm of your hand
Same theater
Many people first check audition notices or project news on their cell phones. The gallery of works that flowed horizontally can be flipped with a finger, and the length and font size of fixed scenes have been adjusted to fit the vertical screen.
COMPAREHow are the two directions different
Two productions
introducing the same company
The two designs contain the same content, but the way they open the scene and the atmosphere are different. We've organized the differences so you can choose based on what your company wants to say first on the home screen.
SeparationA · SCENE & SCOREB · STORIES THAT STAY
Home pageMotion graphics with projector light as a staff10-second brand video that plays at the scroll speed
ColorBlack, ivory, teal with logoDeep teal, amber, paper color
FontArchivo · JetBrains MonoBarlow Condensed
How to show the work16 dramas that flow horizontally like a filmPoster gallery and work details window, DRAMA · OST filter
Way of showing musicNotes and waveforms on the staff, list of OST 18Rotating record and ambient sound
HistoryWorks by year on film stripSINCE 2006 History List
DirectionsTimecode and scene number (S#01 to S#09)Top menu and progress bar
Last SceneEnding CreditsWHAT’S YOUR STORY? Inquiry information
Place of weightUnraveling the company's name and symbol through a storyEmotions and atmosphere left by the work
WEBSITE RENEWAL PROPOSAL
- Client
- DOREMI ENTERTAINMENT
- Project
- website renewal proposal October 2026
- Research
- Company introduction, works, OST data summary
- Brand Reading
- Logo and symbol interpretation, keywords and mood board
- Structure
- Visitor definition, information structure written as scene list
- Direction A
- SCENE & SCORE · UI design, motion graphics, brand film
- Direction B
- STORIES THAT STAY · UI design, scrolling video, ambient sound
- Mobile
- Vertical screen scene reconstruction and inspection
- Typefaces
- Archivo · JetBrains Mono · Barlow Condensed · Pretendard
- Studio
- BlueCanvas
FILMOGRAPHY · 2006–2020
- Come back, Sunae.
- Kimchi Cheese Smile
- Knife Holder Oh Soo-jeong
- bad love
- queen of domestic affairs
- Stationery hit by lightning
- I hear your voice
- Heartless
- your neighbor's wife
- Some guy, some girl
- fall in love with innocence
- my beautiful bride
- Superhuman Family 2017
- A man who must die to live
- coffee of the day
- privacy
TO BE CONTINUED
THE NEXT SCENE
What scene is your company remembered for?
The website is where people who work with you first meet your company.
Let’s read again, starting with the company’s name and symbol.
other projects
-
Education · School
Gyeonggi Global School
A main-page renewal proposal for a Christian alternative school. Faith and the world are tied into one story, “From one point to the world,” with navy, gold and ultramarine colors, two proposals, LUMEN (light) and HORIZON, and scroll motion graphics.
-
Media · Publishing
Munhakdongne Publishing Group
A website renewal proposal for a publishing group. The brand reading starts from “dongne,” the word for neighborhood in its name. It includes colors from paper, ink and bookmark ribbon, four proposals, and experiences for browsing books and reading serials.
-
Global enterprise
Youngone Corporation
A website renewal proposal for a global OEM company whose name never appears on the label. It includes the brand reading “From the inside of clothing to the outside of the world,” a color system, a main-page proposal that begins on a snowy mountain, scroll interactions for the manufacturing process, and screens for the global network, materials and ESG.