做、再、我
三个音节 DO、RE、MI 叠成三行。这些是名字的前三个声音和音乐开始的声音。如果您在五线谱上放置三行，公司名称就会成为旋律。
DOREMI ENTERTAINMENT · SINCE 2006徽标中的绿松石梯形是
来自投影仪的光
16部剧·18部OST用那道光，我们照亮了16部剧
创作了18部OST
网站更新现在在网站上
是时候开灯了
DOREMI ENTERTAINMENT · WEBSITE RENEWAL PROPOSAL
挂海报的墙变成灯光剧场
DOREMI ENTERTAINMENT 首页改版提案
场景与配乐·两个方向的故事
S#01 / 概述项目概述
制作戏剧，
一家为场景增添音乐的公司
DOREMI ENTERTAINMENT是一家从2006年SBS《回来吧顺爱》开始制作电视剧的制作公司。迄今为止，我个人制作了16部电视剧，创作了18部电视剧OST。我还负责演员管理和作品营销。
BlueCanvas 提出了重新设计公司网站的两个方向。 SCENE & SCORE，用投影仪的灯光和音乐拉开场景；STORIES THAT STAY，用电影般的图像和深青色和琥珀色捕捉故事的挥之不去的感觉。本页总结了导致这两项提案的考虑因素和过程。
- 2006年首部作品〈请快回来〉
- 16直接制作的电视剧
- 18制作电视剧OST
- 4戏剧·OST·管理·营销
S#02 / 挑战起点
- 1有四个菜单：主页、关于、工作和公关。
- 2第一个屏幕包含两行作品海报。
- 3菜单旁边有一个SNS快捷按钮。
FOUR QUESTIONS
续订从
四个问题开始
- Q1你能从第一个屏幕看出这家公司是做什么的吗？
我们决定在主屏幕上一一展示四个场景：戏剧、OST、管理和营销。
- Q2你能看到戏剧和音乐一起制作的力量吗？
每部作品都写下了是电视剧还是OST的角色，并为OST提供了单独的场景。
- Q3是否可以一目了然地看到2006年以来积累的作品？
方案A的作品按年份排列在电影胶片中，方案B的作品排列在历史列表中。
- Q4手机上也会传达同样的氛围吗？
水平流动的场景改为用手指滑动，并调整字体大小和场景长度以适应垂直屏幕。
S#03 / BRAND品牌诠释
在名称和符号中
已经有了答案
在创建新标志之前，我们会重新阅读当前标志。三音节的名字、绿松石色的梯形和双色的标志讲述了整个网站的故事。
投影仪灯
RE前面的青绿色梯形来自公司标志。在符号中，该形状放置在两个胶片卷轴旁边，形成投影仪的形状。梯形是从投影仪延伸到屏幕的光线，在标志中，RE代表投影仪而不是卷轴。
光是场景，声音是音乐
灯光代表屏幕上的场景，场景的名称代表该场景中流动的音乐。 Doremi 所做的两件事，戏剧和 OST，都包含在名称和符号中。第一个提案的名称“SCENE & SCORE”就来自这种解释。
深蓝色和绿松石色
徽标中仅使用两种颜色：#231F20（几乎是黑色）和#81ADA8（青色）。两个提案的调色板都以这种绿松石色开始。
S#04 / MOODBOARD情绪板
我先拍了一张文字作为场景的照片
首先
品牌诠释出来的词语是光、场景、乐谱、舞台、城市、电影。我创建了一个与每个单词相匹配的场景图像，并将其用作两个提案的材料。这是为了即使没有演员的照片也能传达出电视剧制作公司的氛围。
-
01灯光灯光方案A·第一个场景 -
02SET现场方案A·戏剧 -
03SCORE乐谱方案A·OST -
04阶段阶段方案A·管理 -
05城市城市方案A·营销 -
06电影电影方案B·第一个场景 -
07首尔胡同方案B·场景变换 -
08类型历史剧类型实验 -
09类型惊悚片类型实验 -
10类型浪漫类型实验 -
11类型家庭剧类型实验
S#05 / 结构访客和信息结构
打开网站的人有
四种类型。
不仅是观众，制作公司的工作人员也经常访问该网站。由于每个来访的人想要检查的信息不同，我们首先决定每个人将到达哪个场景。
- 01广播公司·OTT·联合制作公司
检查哪些作品是通过哪个渠道创作的。
S#04 WORKS · S#06 HISTORY - 02演员和有抱负的新人
寻找管理方法和试听新闻。
S#07 NEW FACE - 03作曲家、歌手、唱片公司
我们来看看电视剧OST是为了什么而制作的。
S#05 OST - 04记者和观众
查找工作新闻、新闻稿和壁纸。
S#08 PR ROOM
网站结构
像脚本一样编写
四个菜单的结构分为九个场景。我在像脚本中的场景列表一样写下每个场景的地点、时间和内容后开始设计。以下是 Plan A SCENE & SCORE 的场景列表。
现有菜单首页关于工作公关
新场景S#01S#02S#03S#04S#05S#06S#07S#08S#09
〈DOREMI ENTERTAINMENT〉 首页场景列表 计划A SCENE & SCORE · 九个场景
- S#01.THE BEAM放映室/夜间现有住宅
投影仪灯亮，灯变成五线谱，同时发出do、re、mi三个音符的声音。 SCENE & SCORE 与徽标一起出现。
- S#02.ABOUT上/下 9 篇论文现有关于
从2006年第一部作品到现在的故事用四个数字来概括，然后是公司的介绍。
- S#03.BUSINESS拍摄地点/夜间现有关于
它逐个场景地展示了戏剧、OST、管理和营销。
- S#04.WORKS剧院/夜现有工作
16部自制剧如电影般横向流动。
- S#05.OST录音室/天现有工作
我们在五线谱的音符和波形之间引入 OST 18。
- S#06.HISTORY胶片储藏室/夜间现有工作
2006年至2020年的作品被放置在幻灯片上。
- S#07.NEW FACE空旷的舞台/夜晚现有公关
这导致了关于在灯光下的空椅子上寻找下一个主角的试镜的消息。
- S#08.PR ROOM资料室/天现有公关
将新闻稿、公告、壁纸和品牌影片整理成四张卡片。
- S#09.ENDING CREDITS结束/夜晚新场景
该网站以公司信息和电影作品结尾，就像片尾字幕一样。
S#06 / 颜色色卡
从一块绿松石
到两块调色板
根据标志的绿松石#81ADA8，我通过改变亮度和温度找到了颜色。如果你把它转向光，A会变成薄荷色，如果你把它转向胶片，它会变得深沉，直到B。在B内部，添加了与绿松石色相反的琥珀色钨丝灯，营造出剧院的温暖感。
CI 青色
#81ADA8梯形徽标- 向光方向变亮光束薄荷色
#A6E3D9投影灯照亮的青色 · 方案A - 向下朝向阴影青色阴影
#3F6F69明亮背景上的强调色 · 方案A - 深入影视基地电影青色
#0C292A记录与查询场景基地·方案B - 相反颜色钨琥珀
#EFB563剧院灯光的暖光·B
A · SCENE & SCORE
放映室的黑暗与光明-
背景·60%这是投影室关灯时的颜色。大部分背景都涂成这种颜色，这样可以最清楚地看到光线和文字。
-
屏幕·26%这是光线照射到的屏幕的颜色。与公司介绍和OST一样，它是写在明亮场景的背景和黑暗场景的文字上的。
-
标志的浅色·7%绿松石色直接取自标志的梯形。我只将它用于徽标和小装饰。
-
光照 · 4%这是一种向光变成青色的颜色。在黑暗中写下小标记，例如时间码和场景编号。
-
阴影浅色·3%这是一种将绿松石色降低到阴影的颜色。在浅色背景上写下场景编号并突出显示字母。
B · STORIES THAT STAY
电影和钨丝灯-
栗色·46%黑色，底色为蓝色。它是放置视频和照片的基础。
-
胶片基底·22%这是一种将青色降低到胶片基底深度的颜色。记录和查询写在场景的宽边。
-
纸·22%这是画廊和作品历史的基础。这让我想起了一本戏剧节目书中的论文。
-
照明·7%这是钨丝灯的颜色，与青色相反。标题和按钮中仅放置一个单词。
-
缠绵·3%辅助句和标题的颜色。我将亮度设置为即使在黑暗背景下也可读。
单击色样将复制十六进制值。示例中的数字是其上方文本颜色的亮度对比度。
S#07 / 版式字体
就像长宽比
拉伸的字符
Plan A 的英文标题是用 Archivo 编写的，它允许字符宽度从 62 更改为 125。如果如下例所示加宽宽度，感觉就像 4:3 屏幕在影院中展开一样。时间码和场景编号设置为 JetBrains Mono，韩语设置为 Pretendard。 B方案我选择了Barlow Condensed，又窄又高，就像电影海报上的标题一样。
Archivo · 方案A 标题
wdth 62SCENE & SCORE
JetBrains Mono·时间码
EP / HH:MM:SS:FFEP.01 00:00:00:00
S#01 THE BEAM · S#02 ABOUT · S#03 BUSINESS
巴洛浓缩版·方案B标题
600STORIES
THAT STAY.
假装·韩文
400·600·800即使场景结束
音乐仍然存在。
音乐是让你最长久地记住戏剧情感的东西。
S#08 / MOTION运动原理
滚动
变成播放按钮
这两个提案都将滚动视为视频播放头。降低它可以使场景向前移动，升高它可以使场景快退。因为游客决定了节奏，所以即使很长的故事也不会变得无聊。
滚动播放头
方案A第一个场景中的投影灯根据滚动位置绘制了180帧。当您传递这张卡时，帧也会以相同的方式传递。
时间码和场景编号
屏幕底部的时间码和场景编号告诉您当前正在观看的场景。此页面下方的目录栏以相同的方式移动。
过渡到光
A方案的业务介绍场景中，照片以投影仪的灯光形式开启。当新场景出现时，梯形会变宽以充满屏幕。
04 · SOUND ON DEMAND
访客打开声音
在B的录音场景中，必须按下按钮才能播放环境音。只有当访客打开它时才会发出声音。
方案A
场景和乐谱音乐在每个场景中流动
这是利用投影仪的光和员工纸介绍公司的方向。在第一个屏幕上，指示灯变成五线谱，三个音符 do、re 和 mi 亮起，然后出现徽标。九个场景像戏剧一样遵循屏幕底部的时间代码。
- 第一个投影仪的光变成五线谱的场景（滚动播放180帧）
- 一个固定的舞台，一次在一个场景中完成四件事。
- 2006-2020 电影胶片上的电影作品
- 最后一个场景以片尾字幕结束
Archivo · JetBrains Mono · Pretendard
DIRECTION NOTES
在方案A的场景中，我选择了一个我花了很大力气导演的时刻。单击照片可查看每个场景的大图。
- S#01 · 光变成一根棍子
投影仪发出的光束变成了一根五线谱，上面的do、re、mi三个音符依次亮起。
- S#01 · 16 和 18
当电影像隧道一样滚动时，我脑海中浮现出16部电视剧和18部OST。
- S#03 · 四件事
左边的大字和右边的场景一起变化，一一介绍四个业务领域。
- S#04·像电影一样流动的作品
向下滚动，16部自制剧就像电影院里的电影一样横向滚动。
- S#05 · OST 工作人员
音符在明亮的纸上流动，后面是 18 首 OST 片段的列表，波形如下。
- S#06 电影地带历史
随着年份的变化，大量作品不断移动，展出 2006 年以来的作品。
- S#07 · 空荡荡的舞台上的椅子
寻找新演员的试镜指南被放置在一张空的、有照明的椅子上。
- S#09 · 片尾字幕
在网站的最后，片尾字幕像电影一样滚动，并再次显示电影作品表。
方案B
留下的故事即使故事结束了，情感仍在继续。
这个方向以电影般的图像和深青色和琥珀色捕捉了作品的挥之不去的感觉。当你向下滚动时，一段 10 秒的品牌视频会以该速度播放，然后是首尔的夜景、水平的艺术画廊和旋转的唱片。
- 以滚动速度播放的 10 秒品牌视频
- 水平流动的艺术画廊和作品细节窗口
- 访客打开旋转唱片和环境声音
Barlow Condensed · Pretendard
DIRECTION NOTES
在方案B的场景中，我选择了一个我花了很大力气导演的时刻。单击照片可查看每个场景的大图。
- 01 · STORIES THAT STAY
充满光线的胶片上放置了一个大标题。如果向下滚动，视频将向前播放。
- 01·逐字逐句变得明亮的句子
用一句话写下公司所相信的故事的力量，并以您的阅读速度揭示每个单词。
- 02 · 首尔之夜
透过小窗户可以看到首尔的夜景，当你滚动鼠标时，首尔的夜景就会扩大到充满屏幕。
- 02 · 美术馆
海报水平流动，当您按下卡片时，作品详细信息窗口将打开。
- 03 · BEYOND THE FRAME
戏剧、音乐、管理和营销都在大字母手风琴中展开。
- 04 · PRESS FEEL.
按下旋转唱片旁边的按钮将播放短促的环境声音。
- 05 · SINCE 2006.
历史从上到下，从2020年开始，回到第一部作品。
- 06 · WHAT’S YOUR STORY?
最后一个场景询问我们将共同创造下一个故事。
S#11 / 品牌影片品牌影片
我们为这两个提案制作了
两部短片。
我们为每个提案制作了一部品牌影片，以便可以在网站和介绍材料上使用。 A片伴随着一段为场景量身定制的短音乐，B片根据第一屏的滚动速度播放。
在这段视频中，投影仪发出的光变成了五线谱，do、re 和 mi 三个音符引出了电影中的一个场景，并以徽标结束。
在这段视频中，摄像机在充满光线的胶片上缓慢移动，灯光发生变化。反复播放，无声音。
S#12 / 移动移动
即使在你的手掌中
同一个剧院
许多人首先在手机上查看试镜通知或项目新闻。水平流动的作品画廊可以用手指翻转，固定场景的长度和字体大小也已调整以适合垂直屏幕。
比较两个方向有何不同
两部作品
介绍同一家公司
两份提案内容相同，但开场方式和情绪不同。我们对差异进行了整理，以便您可以根据您的公司首先想在主屏幕上显示的内容进行选择。
分离A·场景和分数B·留下的故事
主页以投影仪灯光为参谋的动态图形以滚动速度播放的 10 秒品牌视频
颜色黑色、象牙色、带徽标的青色深青色、琥珀色、纸色
字体Archivo · JetBrains MonoBarlow Condensed
如何展示作品像电影一样横向流动的16部戏剧海报库和作品详细信息窗口、戏剧·OST过滤器
展示音乐的方式五线谱上的音符和波形、OST 18列表旋转唱片和环境声音
历史电影片段中按年份排列的作品自 2006 年以来的历史列表
方向时间码和场景编号（S#01 到 S#09）顶部菜单和进度栏
最后一幕片尾字幕你的故事是什么？查询信息
重地通过故事揭开公司的名称和象征作品留下的情感和氛围
WEBSITE RENEWAL PROPOSAL
- Client
- DOREMI ENTERTAINMENT
- Project
- 网站改版提案 2026 年 10 月
- Research
- 公司介绍、作品、OST资料汇总
- Brand Reading
- 标志和符号解释、关键词和情绪板
- Structure
- 访客定义，信息结构写成场景列表
- Direction A
- SCENE & SCORE · UI设计、动态图形、品牌宣传片
- Direction B
- 留下的故事 · UI 设计、滚动视频、环境声音
- Mobile
- 竖屏场景重构与检查
- Typefaces
- Archivo · JetBrains Mono · Barlow Condensed · Pretendard
- Studio
- BlueCanvas
FILMOGRAPHY · 2006–2020
- 回来吧，苏奈。
- 泡菜奶酪微笑
- 刀架吴秀晶
- 坏爱
- 内政女王
- 文具被雷击中
- 我听到你的声音
- 狠心
- 你邻居的妻子
- 一些男孩，一些女孩
- 爱上纯真
- 我美丽的新娘
- 超人家族 2017
- 一个必须死才能活的人
- 当日咖啡
- 隐私
TO BE CONTINUED
THE NEXT SCENE
您的公司因什么场景而被人们铭记？
该网站是与您共事的人第一次认识您的公司的地方。
让我们再读一遍，从公司的名称和符号开始。
其他项目
-
教育 · 学校
Gyeonggi Global School
基督教另类学校首页的改版提案。我们用“从一个点走向世界”的故事连接信仰与世界，内容包括藏青、金色与群青的配色，光（LUMEN）与地平线（HORIZON）两个方案，以及滚动动态图形。
-
媒体 · 出版
Munhakdongne Publishing Group
出版集团的网站改版提案。品牌解读从名称中的“dongne（街区）”一词出发，内容包括取自纸张、墨和书签带的配色、四个方案，以及找书与阅读连载的体验。
-
全球企业
Youngone Corporation
一家名字从不出现在服装标签上的全球 OEM 企业的网站改版提案。内容包括“从衣服的内侧，到世界的外侧”的品牌解读、色彩系统、从雪山开始的首页方案、制造工序的滚动交互，以及全球网络、材料和 ESG 页面。