Pretendard
把愿望变成现实，把等待变成喜悦。
标题和正文。对于粗细为 650 的标题，字母间距缩小至 -0.035em，以整齐地组合柔和的圆形字母。
Yonsei Fertility ClinicYonsei Fertility Clinic
圆环打开的 六天
我们做了一个主页，用滚动翻看胚胎在培养室里生长的六天。随后发现，最后那个画面和医院的标志很像。
- DAY 0受精
这是卵子与精子相遇的瞬间。受精困难时，会把一个精子直接注入卵子。
- DAY 1原核确认
如果受精后第二天可见两个原核，则认为受精正常。
- DAY 24细胞期
细胞分裂成两个，然后分裂成四个。分裂的速度和形状被仔细记录。
- DAY 38细胞期
检查八个分裂的细胞是否生长均匀。
- DAY 4桑葚胚
细胞彼此紧密粘附并形成一个团块。
- DAY 5囊胚
内部产生一个空的空间，将成为婴儿的细胞和将成为胎盘的细胞被分开。
- DAY 6孵化
胚胎打开透明带的一侧钻出，准备着床。
DAY 0受精前受精原核期2细胞期4细胞期8细胞期桑葚胚囊胚孵化
01 / OVERVIEW简介
六天
守望着的医院
Yonsei Fertility Clinic 是位于京畿道安山、诊疗试管婴儿、人工授精与生育力保存的不孕不育专科诊所。它是保健福祉部指定的胚胎生成医疗机构与不孕治疗医疗机构，从取卵到培养、移植、冷冻，都在院内的不孕医学研究所连续完成。医院还同时运营附设的 Korea Sperm Bank。
打开这家医院网站的人，大多是为这一刻等了很久的夫妻。等检查结果，等胚胎长大，移植后再等两周。所以我们把主页设计成一段等待的时间。首屏用滚动翻看培养室的六天，画面越往下，越从黎明亮向早晨。
6天
在培养室里守望胚胎的时间从受精那天（Day 0）到孵化那天（Day 6）240
我们亲自渲染的胚胎影片帧WebGL2 体积渲染 · 桌面 1400px · 手机 820px3
最初探讨的方向六天的影片 · 早上八点 · 一粒种子20
重新整理的公共菜单主页 1 · 医院与诊疗 7 · 运营指南 5 · 公告栏 5 · 外语 2
- 2026.10阅读当前网站NOW
我们读了二十个公开菜单、五类公告栏和常见问题，再决定主页上先放什么。
- 2026.10三个方向ROUND 1
我们从“培养室的六天”“早上八点”“一粒种子”三个方向绘制了情绪板与首屏。
- 2026.10胚胎影片渲染ROUND 2
我们把一个从受精长到孵化的胚胎，直接渲染成 240 帧的影片。
- 2026.10主设计方案ROUND 3
从以影片开场，到握住婴儿的手收尾，一共接了十一个场景。
- 2026.11这份记录
我们重新读了标志，画下等待的时间，也整理了三个方向合成一个的过程。
02 / THE NAME读名字
-
01 · NAME
十个字的医院名称正中间，藏着「아이」（孩子）和「소망」（愿望）。
-
02 · QUOTE
愿等待孩子的夫妻的“孩子愿望”成真，Yonsei Fertility Clinic 与您同行。
现在主页上的医院介绍文案
-
03 · SLOGAN
希望→现实
等待→喜悦
医院的那句话「愿愿望成为现实，让等待化为喜悦」，两遍说的都是盼望已久的事终于实现的瞬间。所以我们把主页的主角定成等待的人，而不是医院。
-
04 · 願
这篇记录标题里写的「원」，既是标志里的那个圆，也是「愿」（愿望）。圆环打开的那天，就是愿望实现的那天。
03 / THE MARK读懂标志
果实里的
打开的圆环
我们没有重新制作标志。我们把现在使用的标志放大，一笔一笔重新描过，在里面找到了故事。
- 01 · FRUIT果实
黄绿色的果实不是一个闭合的圆。从顶部中央起笔的一画绕行一圈，最后钻进起笔处的内侧收笔。
- 02 · GAP缺口
因此，果实的顶部会出现一条细小的缝隙。这是整个标记中唯一开放的位置。
- 03 · LEAF叶子
叶子就从缺口正上方朝右上方冒出。像是有什么东西从打开的地方长出来。
- 04 · SEED黄色胎儿
果实里的黄色形状，是蜷着身体的胎儿，也是果实里的种子。标志中最温暖的颜色只出现在这里。
果实·叶子
#C2D236
黄色胎儿#FCD70C与显微镜下的第六天
叠加对照
显微镜下看到的第六天胚胎也是同样的结构。圆形的透明带里有胚胎，透明带一侧打开后，囊胚朝右上方钻出。方向与标志里果实缺口和叶子的位置相同。
我们无从知道标志最初是否就是在画胚胎。但正因为这份相似，首屏胚胎影片结束的那一刻，才能与标志相接。
显微镜
标识
- 黄绿色果实的圆环↔透明带
- 果实顶部的缺口↔开始打开的透明带
- 朝右上方冒出的叶子↔钻出的囊胚
- 黄色胎儿↔内细胞团
04 / THE WAIT等待的时间
一个周期的大部分时间都是
等待
IVF 一个周期通常要 4~6 周。其中需要到医院做点什么的日子只有几天，其余时间都在打针等待，或在等待结果。
主页不只是就诊前才读。等待的时候，人们会一次又一次重新打开它。所以每个场景，我们都先想：此刻这个人处在哪一段时间里。
-
01
首次咨询/原因检查
周期前
夫妻一同前来更好。在月经开始后第 2~3 天来，可以当场做基础激素检查。
网站的作用把电话预约、KakaoTalk、在线咨询三个窗口放在首屏与最后的场景，并把第一次就诊要带的东西写成清单。
-
02
促排卵
约10-14天
这是用打针和超声让卵泡长大的阶段，需要经常往医院跑。
网站的作用诊疗时间与当前是否在诊疗，在主页上就能直接确认。工作日和周六都在上午 8 点开门。
-
03
取卵 · 受精
Day 0
在同一天取卵并受精。受精困难时，采用卵胞浆内单精子注射(ICSI)。
网站的作用首屏影片的 Day 0 字幕里也加了同样的说明。
-
04
培养
Day 1~5
胚胎在培养室里生长。夫妻两人无法亲眼看到这段时间。
网站的作用我们做了一部首屏影片，用滚动翻看看不见的六天。方式与时间延时培养箱相同：不必取出胚胎，就能一直观察。
-
05
胚胎移植
Day 3~5
选择生长良好的胚胎并将其植入子宫。
网站的作用用 Day 5 的字幕“决定移植还是冷冻的那一刻”来说明决定发生的时刻。
-
06
移植后2周
约14天
这是感觉最长的时间。结果尚不清楚。
网站的作用这段时间需要的画面，文案先于信息。在黎明的光线影片之上放院长的问候，再接上治疗费用支援与常见问题。
-
07
怀孕确认
移植后2周
验血可以确定您是否怀孕。一个周期通常需要4至6周。
网站的作用最后一个场景里，婴儿的手握住大人的手指，以「直到等待化为喜悦的那一天」这句话收尾。
周期依照主设计方案的常见问题与现在网站的说明（促排卵约 10~14 天、胚胎培养 3~5 天、移植后约 2 周抽血检查），并因人而异。
05 / WORDS数字与文案
数字
与标准同行
不孕不育诊所的主页上有很多数字。评估等级、从业年限、支援比例、治疗次数。同样的数字，怎么用，有时读起来是事实，有时读起来像承诺。
医疗广告不能使用保证治疗效果或与其他医院比较的说法。所以我们把常见的说法放在旁边，把同样的内容改写成标准看得见的文案。
-
01
常见的说法
怀孕成功率一级医院主设计方案的文案在保健福祉部的不孕治疗医疗机构评估（2019、2022、2025）中，人工授精与体外受精两项评估指标都获得一级。该评估并非怀孕成功率排名。
我们把评估在量什么一并写上。评估看的是设施与设备、专业人员、质量管理状况。
-
02
常见的说法
用最新设备获得确切结果主设计方案的文案六个独立的腔室为每个胚胎分别营造培养环境，内置摄像头连续记录发育过程。
我们没有写设备能保证结果，而是写设备做什么。
-
03
常见的说法
靠政府支援，毫无负担主设计方案的文案健康保险自付比例为 30%；符合保健所支援条件时，可获得全额自付部分 90% 的支援。支援标准每年可能依公告变化。
我们在每个数字旁，附上它的条件，以及它可能变化这一事实。
-
04
常见的说法
谁都可以重新开始主设计方案的文案先找原因，再选与之相符的治疗。根据检查结果，共同决定治疗方式。
不用承诺，而是把诊疗的次序写成文案。
挑选文案的五条标准
- 01不写成功率与排名
评估等级与评估所关注的项目一起写入。
- 02给数字加上标准
在“连续 3 次”旁边写上 2019 · 2022 · 2025，在“30%”旁边写明这 30% 指的是什么。
- 03设备按其用途进行解释。
我们不写“最新”这种说法，而是写看得见的事实：六个腔室、连续记录。
- 04展示过程，而不是治疗经历
主页上没有列出治疗经历，而是用图片展示了从第一次咨询到确认怀孕的过程。
- 05会变的，就写成会变
在同一画面上写明：支援制度与次数可能依公告变化。
“常见用语”并非该医院的句子，而是行业内经常使用的用语示例。
06 / COLOR · TYPE颜色 · 字体
在显微镜下
找到的颜色
标志的黄绿色与黄色明亮鲜艳，但放在白底上很难当作文字色。所以我们保留标志的两种颜色，其余颜色到显微镜下寻找。
我们在胚胎影片的 1400px 帧上逐日测量细胞质的颜色，六天里琥珀色一点点变淡，到孵化那天又变深。首屏背景定得像培养室一样暗，影片结束后的场景定得像早晨的纸一样亮。
#8C7450
#8A734F
#887250
#927B56
#9C865F
#B8A985
#685D45- Incubator Night
#0B0E0B像培养室一样暗的首屏背景色
- Zona Pearl
#BCC0BC影片中透明带的光，细线与圆环
- Cytoplasm Amber
#8C7450Day 0 细胞质的琥珀色，照片的暖色调
- Leaf Lime
#C2D236标志的果实与叶子，只用在需要按下的地方，作为一种信号
- Seed Yellow
#FCD70C标志中的黄色胎儿，画面里的一个小点
- Morning Paper
#F3F5EE影片结束后变亮的场景背景色
- Ink Green
#13201A亮背景上的文字色，掺了绿的墨色
- Lime Deep
#55700C亮背景上用来代替黄绿色的文字色
黄绿色只占画面的 1.3%
我们把主设计方案 30 张 PC 画面上每个像素最接近的颜色数了一遍。标志的黄绿色只用在电话预约按钮和进度条这类需要按下或盯住的地方。
- 亮背景62.0%
- 影片 · 照片25.8%
- 深色背景9.6%
- 黄绿色1.3%
- 文字1.3%
字体颜色与背景颜色对比
| 组合 | 对比 | 结果 |
|---|---|---|
| 奶油色 / 夜首屏的标题与正文 | 17.29:1 | 小字也可用 |
| 黄绿色 / 夜夜景中的按钮与进度条 | 11.61:1 | 小字也可用 |
| 墨色 / 黄绿色黄绿色按钮上的文字 | 10.05:1 | 小字也可用 |
| 黄绿色 / 纸亮背景上不用作文字色 | 1.52:1 | 不可用于文字 |
| Lime Deep / 纸亮场景的小号强调文字 | 5.15:1 | 正文可用 |
| 黄色 / 纸只作为画面中的一个小点 | 1.28:1 | 不可用于文字 |
| 墨色 / 纸亮场景的正文 | 15.29:1 | 小字也可用 |
Geist Mono
DAY 3 · 064h
影片的时间显示与场次编号。数字等宽，所以从 0h 数到 150h 时文字不会晃动。
07 / DIRECTIONS三个方向
分成三个方向，
编织为一个整体
起初，三个方向是以同等的分量画的。展示培养室六天的暗色影片、早上 8 点开门的医院的早晨，以及用标志的果实与种子做的明亮图形。
把三者并排放在一起，标准只有一个：这是只有这家医院才能呈现的场景吗？早晨的阳光和种子，别的医院也能用；但在院内研究所守望胚胎的六天，是这家医院的故事。
A · EMBRYO FILM
六天的影片
用滚动翻看胚胎在黑暗培养室里生长的六天。
这个方向直接把医院最擅长的事呈现出来。我们把院内不孕医学研究所守望胚胎的时间搬到了首屏。
就这样连接起来它成了主设计方案的骨架。首屏影片、时间显示、显微镜画面都出自这个方向。
B · AM 8:00
早上八点
它描绘的是工作日和周六都在早上 8 点开门的医院的早晨。
像激素检查这样需要早上做的诊疗不少，也有很多夫妻上班前来一趟。这个方向先用温暖的晨光和日晷显示诊疗时间。
主设计方案中保留下来的黎明光线影片之上的问候、夫妻的照片，以及“现在正在诊疗”的提示，都放进了主设计方案的后半部分。
C · SEED
一粒种子
标志的果实、叶子与种子，直接用作图形体系。
这是一个明亮而坚定的方向。只是与不孕不育这个沉重的话题相比，画面可能读起来偏轻，也容易变成哪家医院都能用的图。
主设计方案中保留下来的黄绿色留在了按钮、圆形进度指示，以及每种诊疗收进圆环里的显微镜画面上。
B、C 方向的首屏与情绪板照片，是为比较方向而摆拍的画面。画面中的电话号码已换成其他号码。
08 / THE FILM胚胎影片
把六天
渲染出来
真实的胚胎影像是患者的医疗信息，而能拿到手的影像每个场景都是不同的胚胎，无法连成一段。所以我们从头做了一个胚胎从受精长到孵化的画面。
我们用浏览器的 WebGL2 搭出把细胞画成半透明体积的体积渲染场景，再用浏览器的 GPU 输出 240 张 1400px 帧。主设计方案的首屏就随着滚动翻这些帧。
001
011
021
031
041
051
061
071
081
091
101
111
121
131
141
151
161
171
181
191
201
211
221
231
- 01黑暗中的边缘
按照看的角度分配光线，正对镜头的细胞膜几乎看不见，只有边缘发亮。看起来像暗场显微镜下的胚胎。
- 02光在内部扩散
通过添加在细胞膜内扩散的散射光，细胞看起来会从内部发出柔和的光芒。
- 03纹理无条纹
我们把生成细胞质感的噪声放在旋转过的坐标里读取，避免出现与屏幕轴重叠的条纹。
- 04打开的透明带
Day 6 时在透明带的一侧开一个缺口，让囊胚从缺口钻出。
09 / PLATES显微镜画面
每种诊疗，
一张显微镜
诊疗卡片没有放人物照片，而是放相同放大倍数的显微镜画面。我们从与首屏影片相同的场景文件里，另外渲染了八张亮背景、明场的静止画面。
八种治疗收进同一个圆环里，看起来就像一家人；翻卡片的时候，会再次想起首屏的那六天。
-
Infertility Work-up
不孕不育检查
大约40%的不孕原因是男性。如果夫妻一起接受检测，可以更快地找到原因。
-
IUI
人工授精
根据排卵日，选择活动力良好的精子放入子宫。
-
IVF
试管婴儿
收集到的卵子在培养室中受精，发育良好的胚胎被植入子宫。
-
ICSI
卵胞浆内单精子注射(ICSI)
选择单个精子并将其直接放入卵细胞质中以帮助其受精。
-
IVM
未成熟卵体外成熟(IVM)
收集未成熟的卵子，在体外成熟，然后受精。
-
Fertility Preservation
生育力保存
卵子、精子、胚胎均在-196℃冷冻，需要时使用。
-
Korea Sperm Bank
Korea Sperm Bank
同时提供本人精子保存与捐赠精子咨询。
-
RIF / RPL
反复着床失败
从免疫学与遗传学角度查找反复发生的原因，并一并考虑辅助孵化。
10 / STRUCTURE结构
二十扇门
十一个场景
现在主页上的公开菜单连主页在内共二十个。医院与诊疗七页、运营指南五页、公告栏五类，另有英语和日语各一页。菜单数量保持不动，重新定了主页上先给人看什么。
按主题数了一遍常见问题，关于试管婴儿和医院介绍的超过一半。所以我们把诊疗流程放在主页前面，把诊疗时间与来院路线放在后面。
常见问题77
- 试管婴儿23
- 医院信息20
- 不孕疾病 · 检查9
- 费用 · 政府支援8
- 人工授精7
- 卵子冷冻·精子库6
- 选择医院 · 转院3
- 治疗期间的生活1
截至 2026 年 11 月，网站上的常见问题
主设计方案的十一个场景在 1440 × 900 屏幕上测得的高度 22,954px
“黎明·问候·指定状态”将黎明场景与数字卡合二为一。
- SEO每种诊疗都有不同的标题
每个诊疗页面，例如试管婴儿、人工授精和生育力保存，都有独立的标题、描述与正文标题，让搜索结果中能区分。
- AEO划分问题和答案的结构
常见问题分开问题与答案，加上主题标题和相关诊疗页面的链接，整理成搜索与问答服务容易读取的正文。
- GEO医院信息集中在一处
把医院、诊疗时间、位置与研究设施信息整理成结构化数据（MedicalClinic），并让内容与画面上显示的正文一致。
11 / MAIN DRAFT主设计方案
主设计方案 · 六天的影片
EMBRYO TIME-LAPSE FILM以胚胎影片开场、以婴儿的手收尾的十一个场景
在像培养室一样暗的首屏上，胚胎生长六天；画面转白变亮，接着是黎明的问候与诊疗指南。
- 随滚动翻看的胚胎影片 240 帧与时间显示
- 收录八种诊疗的显微镜画面卡片
- 按首尔时间显示的“现在正在诊疗”提示
- 手机版是 240 张竖幅帧，加一条单手就能按下的快捷联络条
Night · Pearl · Lime · Paper
- 首屏影片
随着滚动，胚胎一点点生长，下方的进度条从 Day 0 填到 Day 6。时间显示从 0h 数到 150h。
- 黎明时的问候
影片转白变亮后，院长的问候接在窗边黎明光线的影片之上。
- 指定现状与数字
把 30 年、连续 3 次一级、韩国首家、6 家合作医院做成卡片，并附上一句评估并非成功率排名的话。
- 显微镜卡
八种诊疗做成横向翻看的卡片，每一张都放入了相同放大倍数的显微镜画面。
- 不孕医学研究所
从时间延时培养箱到冷冻保存室，随滚动切换展示五台设备。
- 诊疗流程
把从初次咨询到确认怀孕的五个步骤接成一条曲线，旁边放上第一次就诊要带的东西。
- 治疗费用支援
用 30%、25 次、90% 三个数字概括支援制度，并附上一句标准可能变化的话。
- 诊疗指南
按首尔时间告诉您现在是否在诊疗、什么时候再次开诊。
- 婴儿手
最后以滚动翻看婴儿的手握住大人手指的画面收尾。
录制画面中院长的照片与胚胎师的照片，都换成了同尺寸的另一张照片；院长的姓名、电话号码、地址和营业信息也用其他文字替换或做了遮挡。
12 / DETAIL细节
为等待的人准备的
小小的装置
主设计方案里有几处不显眼的装置：告诉您现在是否可以打电话的诊疗时间文案、第一次就诊要带的物品清单，以及把支援制度缩成三个数字的卡片。下面可以直接动手试试。
01 · NOW OPEN
现在正在诊疗吗？
现在正在诊疗。中午 12:00 到下午 1:30 是午休时间。现在正在诊疗。诊疗到下午 4:30。现在正在诊疗。周六没有午休，诊疗到下午 1:00。现在是午休时间。下午 1:30 重新开始诊疗，这段时间电话较难接通。尚未开始诊疗。上午 8 点开始诊疗。今天的诊疗已结束。明天上午 8 点重新开始诊疗。今天的诊疗已结束。周一上午 8 点重新开始诊疗。周日休诊。明天上午 8 点开始诊疗。
工作日上午 8:00 ~ 下午 4:30（午休 12:00 ~ 下午 1:30），周六上午 8:00 ~ 下午 1:00（没有午休），周日 · 公休日休诊。主设计方案按首尔时间计算。
02 · FIRST VISIT
第一次就诊时请带上
0 / 3准备好了。夫妻一同前来更好。
在列表正上方写一句提示：在月经开始后第 2~3 天来，可以当场做基础激素检查。
03 · SUPPORT
用三个数字概括支援制度
30%
健康保险自付比例无论年龄大小，都适用相同的比例。25次
每次分娩可以获得的治疗次数把 20 次体外受精与 5 次人工授精合在一起计算。90%
全额自付部分支援符合保健所支援条件时可获得的比例。
在同一画面上写明：支援标准可能每年依公告变化（以主设计方案为准，2026 年 10 月）。
13 / RETROSPECT回望
把看不见的时间
展现出来的工作
我们从三个方向出发，做出了一份主设计方案，并把子页面与搜索设置等改版范围一并整理。这些方案并未进入最终选择。
即便如此，把培养室的六天放在首屏这个判断，现在重新做一次也会一样。因为医院最擅长的事，和患者等待最久的时间，就在同一个画面里。
- Round 1三个方向
培养室的六天、早上八点、一粒种子，以同等的分量画出，并排放在一起。
- Round 2六天的影片
我们自行渲染了胚胎影片，并把从“早上八点”和“一粒种子”里选出的内容接到影片之后的场景里。
- Round 3主设计方案
我们分享了十一个场景的主设计方案，并把子页面与搜索设置等整体改版范围一并整理。
- 01把看不见的东西展现出来
患者看不到培养室里面。代替他们展现那段看不见的时间的画面，最简单地说明了医院的专业性。
- 02找到一个已经存在的形状
我们没有重新制作标志，而是用标志里本就存在的开口圆环和叶子，把影片与品牌连了起来。
- 03数字与标准同行
评估等级、支援比例这类数字，写明它在量什么，读起来才可信。
14 / CREDITS制作信息
YONSEI FERTILITY CLINIC · MAIN PAGE RENEWAL
圆环打开的六天
用滚动翻看培养室六天的首屏来做主页改版提案
| Client | Yonsei Fertility Clinic · 安山不孕不育专科诊所 |
|---|---|
| Scope | 主页改版提案 · 读懂标志 · 文案标准 |
| Period | 2026 年 10 月至 11 月 |
| Directions | 六天的影片 · 早上八点 · 一粒种子 |
| Film | 胚胎影片 240 帧（WebGL2 体积渲染）· 8 种显微镜画面 |
| Identity | 现在的标志 · Night #0B0E0B · Lime #C2D236 · Seed #FCD70C · Paper #F3F5EE |
| Tools | GSAP · ScrollTrigger · Lenis · WebGL2 · Canvas |
| Typeface | Pretendard · Geist Mono |
| Studio | BlueCanvas |
NEXT为等待已久的人打开的首屏，我们一起设计。
SIX DAYS, ONE OPEN CIRCLE
为等待已久的人打开的首屏，
为等待已久的人打开的首屏，
我们一起设计
从标志中的小形状和培养室的六天出发，
我们要做一个值得信赖、可以放心打电话的医院网站。
其他项目
-
医院 · 乳腺甲状腺
Dr. Choi’s Breast & Thyroid Clinic
从系在标志字母 U 上的粉红丝带，到超声的扇形与蝴蝶形甲状腺，用三种形状解释医院的品牌解读；从检查到结果电话，对准患者等待的七个瞬间所做的页面设计；改写 2014 年那句承诺疗效的话之后定下的医疗广告文案标准；以及夜晚的 Ribbon Motion Film 与白天的 Lens & Bloom 两个方向的方案——一家乳腺·甲状腺外科诊所的主页改版提案过程
-
医院 · 皮肤增强剂
CellREDM
皮肤增强剂广告落地页的制作过程。我们从厂商广告视频第一个镜头里的锁孔与 IRERAUM 诊所内饰的拱门属于同一结构出发解读造型，以产品之夜与诊所之昼划分梅子色 · 香槟色 · 象牙色的色彩标准，并写下不承诺效果、只讲如何选择的医疗广告文案。内容包括三个首屏方向、三个广告方向和修改到第七版的广告视频，直到完成十五个场景的落地页与咨询管理界面。
-
生物/眼科
ReGenTreeReGenTree
从两家公司的名称和徽标中相同曲率重叠的两条弧线开始的品牌诠释，从眼科检查的白色、钴蓝色、荧光绿和琥珀色中选择的颜色标准，从眼睛到分子按比例编织的故事序列，直接绘制覆盖伤口原理的实验室，以及包含三项提案的眼科新药，包括1月的8个草图、2月的CLINICAL WHITE和10月的SURFACE OF SIGHT。公司网站改版提案流程