让第一屏
一句话说话
在当前主屏幕上，首先可以看到弹出窗口和幻灯片横幅。我们重新定义了第一屏的作用，让第一次来的人可以用一句话了解培训中心是做什么的。
第一屏幕上显示了一句介绍培训中心的句子。
KOREAN EDUCATION CENTER IN MALAYSIA · WEBSITE RENEWAL PROPOSAL
4,600 公里，一口气。
马来西亚韩国教育中心网站改版提案
Cheonjiin·珊瑚之旅，两个方向
01 / 概述项目概述
马来西亚
第一个学习韩语的地方
马来西亚韩国语教育中心是韩国教育部于2020年12月30日在吉隆坡设立的海外教育机构。我们开设居住在马来西亚的任何人都可以参加的韩国语课程，支持教授韩国语的中学和周末韩国语学校，并指导包括政府学者（GKS）在内的学生在韩国留学。
当前网站的创建者 BlueCanvas 提出了重新设计第一屏幕的两个方向。根据韩文的三笔画原理连接两个国家的“天地院”，以及讲述人们彼此变得更加亲近的场景的“珊瑚之旅”。本页记录了导致这两个提案的考虑因素和过程。
- #海外教育机构
- #韩国语课程
- #韩文原理
- #天地院
- #课程申请流程
- #韩语·英语
- #动态图形
- #滚动交互
- #响应式
培训中心的覆盖范围首先是按数量来组织的。
2020
培训中心开业年份
2020年12月30日注册为教育机构
11处
设有普通韩语课程的中学
65个班级约1,500名学生学习
8处
教育学院支持的韩语学校
从槟城到亚庇
4,600km
从吉隆坡到首尔
两城市直线距离
号码来源：马来西亚韩国教育中心网站（2026年10月验证）。网站上提供的中学数据截至 2021 年 4 月。
02 / THE QUESTION
韩语 韩语 连字母 不知道 致对方， 在培训中心 网站是什么 什么 第一次问候 我应该给
答案就在培训中心教授的信中。
03 / 阅读重新阅读当前网站
ANALYSIS
信息已经足够了。
信息已经足够了。
所需要的只是订单。
教育中心需要分享的信息，包括通知、课程信息、收养学校、韩语学校、留学信息等，都已经在网站上。我以第一次访问者的视角重新阅读了主屏幕，并将从第一个屏幕到课程申请的顺序分为三个部分。
让第一屏
立即注册课程
对于想要学习韩语的游客来说最重要的是报名课程，该课程位于菜单的第二层。两个提案都在标题、主屏幕和课程介绍的末尾放置了具有相同名称的按钮。
在任何屏幕上单击“申请课程”一次让培训中心的范围可见
学院的工作遍及马来西亚各个角落，包括11所中学、8所韩语学校、以及赴韩国留学。这个范围在主屏幕上只用三张卡片介绍，决定通过数字、地图和行程来显示。
数字·地图·4,600公里旅程我首先画了打开网站的
四个人。
人们出于不同的原因访问该学院的网站，从想要第一次学习韩语的公民到韩语教师、准备出国留学的学生以及海外韩国人的家庭。我们划分了访客来的原因，并决定每个人应该首先看到哪个屏幕。
Is the class free?
When does it start?- 课程水平和学费
- 上半年、下半年开盘情况
- 申请课程
在提案中，标题中的课程注册和步骤 1 至 6
在哪里可以找到教科书和培训新闻？
- 收养学校支援详情
- 教师培训和活动
- 公告
在提案中，有关教育中心业务的卡片和通知列表
我如何准备 GKS 奖学金
？
- GKS 流程和优势
- 韩国留学博览会
- 出国留学材料
在提案中从吉隆坡到首尔的旅程
我们附近有韩国语学校吗？
- 按地区划分的韩国语学校
- 海外同胞国内邀请培训
- 韩国学校
在提案中，马来西亚地图上的韩国学校
04 / BRAND THINKING
我在教育中心传授的信件中
我在教育中心传授的信件中
找到了答案。
该研究所所做的一切都从韩文开始。因此，该品牌的语言也可以在韩文的创建原理中找到。韩文的元音由点（·）（仿天）、横（ㅡ）（仿地）、竖（ㅣ）（仿人）组成。
THREE STROKES
一点两条线
一点两条线
连接两国。
- ·ㅡㅣ天、地、人
训民正音创造了天、地、人之后的元音基本笔画。韩文学习者第一次遇到的所有元音都来自这三个笔画。
- ㅏㅓㅗㅜ三笔划在一起发出声音
根据你放置三个笔画的位置，它们会变成ㅏ、ㅓ、ㅗ和ㅜ，当它们遇到辅音时，它们就会变成字母。它类似于教育中心的工作，一个人的第一堂课扩展到学校和地区，然后通往韩国留学。
- KUALA LUMPUR ↔ SEOUL横笔变成连接两个城市的水平线。
如果将类似陆地的水平笔画延长，它就成为连接吉隆坡和首尔的水平线。 Cheonjiin提案将这一场景在第一屏幕上制作成动态电影，而Coral Journey提案的第一句话是“从韩文开始的新世界”。
BRAND STATEMENT
我们与朝鲜文建立联系，
通过学习变得更加亲密。
Connected by Hangeul, closer through learning.
教育中心的口号“学习韩国语，用韩语交流”是两个提案中的一个提议句子。
第一句话很容易写。
为了让不懂韩语的游客也能了解培训中心的工作，第一屏幕上的句子被缩短，并包含英文字幕。
您可以一次性申请该课程。
最重要的操作（课程注册）位于标题、第一个屏幕和课程介绍末尾的相同名称下。
它显示了两国在一起。
通过吉隆坡和首尔、文化节和沙龙玫瑰、《阿帕卡巴尔》和《你好》等两国共同出现的场景来表达交流。
05 / TWO DIRECTIONS
我
我
在两种温度下画了同一个句子。
A·天地院夜的笔画，用字母说话
深邃的夜空上画着金色的一笔，展示了韩文的诞生过程。我们是第一个传达我们作为韩语教学机构的身份的人。
B·珊瑚之旅白天谈话，当面说话
从人们一起学习的场景开始，经过最初的问候、第一句话，以及通往韩国留学的旅程。
06 / COLOR SYSTEM夜空的金色和
夜空的金色和
两国花朵的红色
天地院的提案用金色照亮了海军蓝色的笔画，就像吉隆坡的夜空一样。珊瑚之旅提案将取自两国国花的珊瑚和类似热带树叶的深绿色放置在韩纸象牙之上。
SHARED ROOT
武雅拉雅和沙龙玫瑰
武雅拉雅和沙龙玫瑰
它是同属沙龙玫瑰属的花。
马来西亚的国花Bunga Raya和韩国的国花沙龙玫瑰都属于木槿属。就像Bungah Raya 的红色花瓣和沙龙玫瑰中心的红色单心一样，两种花的红色都转移到了珊瑚上。
天地院的提案在培训中心的介绍旁边附上了这个故事的照片。这就是再次说出那句话，通过色彩和照片将两国联系在一起。
A·Cheonjiin夜空和光的笔触
Night#060B1CRGB 6 11 28
夜空
是支撑首屏和大部分场景的基础。我选择了金色笔触最清晰可见的深度。
- 白色字母
- 19.6:1 AAA
- 海军字母
- 1.0:1 相同颜色
Deep Navy#101B3ARGB 16 27 58
深层
与卡片和地图一样，它写在比背景高一层的表面上。
- 白色字母
- 16.9:1 AAA
- 海军字母
- 1.2:1 未使用
Stroke Gold#F2C45CRGB 242 196 92
光的冲程
仅使用影片的笔划、课程注册按钮和当前位置的指示。
- 白色字母
- 1.6:1 未使用
- 海军字母
- 12.0:1 AAA
Amber#E5A23ERGB 229 162 62
夕阳光
这是当黄金广泛传播时使用的辅助颜色。在地图上写下路线和数字单位。
- 白色字母
- 2.2:1 未使用
- 海军字母
- 8.9:1 AAA
Hanji#F3EEE3RGB 243 238 227
韩国纸
深色背景上的字体颜色。它比纯白色更温暖，因此与金色很相配。
- 白色字母
- 1.2:1 未使用
- 海军字母
- 16.9:1 AAA
B·珊瑚之旅两国的韩纸和鲜花
Ivory#F5F2EARGB 245 242 234
韩国纸
这是基本背景。照片和卡片放在上面。
- 白色字母
- 1.1:1 禁用
- 精美的字母
- 10.6:1 AAA
Pine#173E35RGB 23 62 53
树叶和松树
它是在文本和横向流动的故事部分的基础上编写的。它读起来比黑色更柔和。
- 白色字母
- 11.8:1 AAA
- 精美的字母
- 1.0:1 相同颜色
Coral#F14D34RGB 241 77 52
两国的花
它是Bungah Raya 和Rose of Sharon 的红色。它被写成标题的最后一个词和下一个动作。
- 白色字母
- 3.6:1 大字母
- 精美的字母
- 3.3:1 大字母
Sage#DFE7CFRGB 223 231 207
新叶
写在平静的一面，比如贺卡和第一张故事卡。
- 白色字母
- 1.3:1 禁用
- 精美的字母
- 9.3:1 AAA
Peach#F1D4BCRGB 241 212 188
阳光
写在温暖的一面，就像包含人物场景的卡片一样。
- 白色字母
- 1.4:1 未使用
- 精美的字母
- 8.4:1 AAA
尝试一下·同一张卡片，两个调色板
即使我改变颜色
即使我改变颜色
结构保持不变。
这两个提案都源于相同的代币设计。因为背景色、文字色、强调色的位置是先决定的，所以同一张卡片只要改变调色板就会有不同的表现。使用下面的按钮更改课程信息卡的调色板。
表面背景墨水文本重音强调软次级面
Korean Class✳
从第1步到第6步，
学费免费
任何居住在马来西亚的人都可以申请。您只需承担教科书和管理费用。
- 每个阶段 15 周
- 上半年、下半年开盘情况
- 出勤率70%，评价70分，完成
课程申请→课程信息
07 / 版式和语言一种家族字体，三种语言的问候语
一个家族的字体
两种声音。
这两项提案都被组织到一个系列中，即 Pretendard，该系列的韩语和英语版本一致。即使字体相同，粗细、字母间距和重点也设置不同，以创造夜晚和白天的声音。问候语包含韩语、马来语和英语。
学习韩语并用韩文交流
天地之声
培训中心的口号是用粗体字写的。厚度和尺寸都经过精心选择，使得金色的笔划经过时不会在屏幕上移动。
韩文
开始
一个新世界。
珊瑚之旅的声音
字母间距较窄的大标题在照片的衬托下显得格外醒目，只有最后一个词改为珊瑚色，以强调句子的结尾。
圆点（·）是
它是仿照天空而设计的。圆点代表天堂。
第一个以两种语言阅读的屏幕
《Cheonjiin Film》的字幕是韩语下方的英文字幕。刚刚开始学习韩语的马来西亚游客也能看到同样的场景。
- Display92 / Pretendard 800 / -0.035em
- Heading64 / Pretendard 800
- 声明50 / 700 · 通过单词增亮
- 正文17~19 / 400 · 行距1.75
- Caption14~16 / 英文下方韩文
08 / MOTION直到一个点连接两个城市
用 180 帧绘制
18 秒的胶片
Cheonjiin 提案的第一个屏幕是一部 18 秒的动态电影，滚动时播放。一点画一条横线，三笔连成“韩文”，三笔画出吉隆坡双子塔和首尔南山，用一条线连接两座城市。
预渲染帧不是实时 3D，而是根据滚动位置绘制。在手机上，单独加载垂直屏幕的帧，将相同的场景创建为视频，并使用“查看视频”按钮进行播放。
01一点·天空
02地平线·陆地
03竖笔·人物
04收藏
05韩语
06两个城市
尝试一下·移动胶片
- 天一点·天空
- 土地地平线·土地
- 人竖笔·人
- A创建元音
- 韩文韩文
- 吉隆坡吉隆坡
- SEL抵达首尔
FILM · 18 SECONDS
我们还制作了同一场景的视频。
我们将其呈现为 18 秒的视频，因此您无需滚动即可从头到尾观看。准备横屏和竖屏，然后打开适合您设备的视频。
- LENGTH
- 18秒
- SCROLL
- 180帧
- VIDEO
- 1920×1080 · 1080×1920
09 / 设计方案两个主页
在选择一个之前，我一直
两个方向。
尽管它是从相同的教育中心材料和相同的信息开始的，但网站的性质根据首先显示的内容而有很大差异。我们已经完成了以韩文原理为重点的《天、地、人类》，以及以与人相遇为重点的《珊瑚之旅》，一直到网站的末尾。
下面的屏幕是实际提案的记录。单击场景名称即可进入该部分，手机屏幕也会出现相同的场景。
方案A·天智院
CHEONJIIN学习韩语并用韩文交流
方向是介绍基于创建韩文的三笔画原理的教育中心。以与卷轴同步播放的动态影片开始，依次展示学院所做的工作、马来西亚各地的韩国学校、从吉隆坡到首尔的留学旅程以及从步骤1到步骤6的课程。
- 18秒的动作片，9个点连接两个城市
- 五张名片叠在一起
- 马来西亚地图和4600公里留学旅程
Pretendard 800 · 韩语和英语字幕
在公开录音中，培训中心活动的照片被类似场景的图像取代，联系信息也被遮盖。
方案B·珊瑚之旅
珊瑚之旅从韩文开始的新世界
方向是通过人们一起学习的场景来介绍培训中心。屏幕上滚动着一张拱形照片，上面写着“学习，更近”这句话，接下来是第一次问候、第一次韩语、横向交流、留学故事、最新动态。
- 第一个从拱门扩展到整个屏幕的屏幕
- 第一张带有“Hello!”字样的韩国卡片用三维字母写的
- 三个横向流动的故事：联系·经历·韩国留学
Pretendard 650 · 字母间距 -0.07em
在公开录音中，培训中心活动的照片被类似场景的图像取代，联系信息也被遮盖。
比较两个方向有何不同
两步介绍同一所教育机构
两份提案内容相同，但故事的顺序和氛围不同。我们对差异进行了整理，以便培训中心可以根据他们想要在第一个屏幕上首先传达的内容进行选择。
分类A·天地院B·珊瑚之旅
第一个屏幕通过滚动播放天地人动态电影照片和视频遍布拱门的屏幕
故事顺序韩文原理 → 学院介绍 → 我们做什么 → 指导 → 出国留学 → 课程 → 新闻第一次问候 → 连接 → 第一韩语 → 出国交流学习 → 新闻 → 一起场景
菜单保留当前的六个菜单和子菜单菜单减少为四个操作
留学信息GKS 4,600公里路线和四个赛段「韩国下一章」GKS卡
课程信息从1到6的阶梯和TOPIK级别课程信息·课程注册·三行学习材料
照片为每个项目选定的氛围照片一张人们一起学习直到最后的一张照片
屏幕氛围深沉而安静的夜晚明亮而温暖的白天
重点组织的身份和信息的深度首次访问者的同理心和下一步行动
这两项提案有何共同之处
- 当前子页面连接现有子页面，例如通知、图库公告板和课程信息。
- 申请现有课程课程申请按钮可打开当前正在运行的应用程序屏幕。
- 减少动作当您在设备上打开“减少动作”时，它将停止静态场景和影片，并依次向您显示内容。 《珊瑚之旅》在屏幕底部还有一个运动减弱按钮。
- 韩语·英语可以从标题直接进入英文网站，天地人电影的字幕也是英文的。
- 01阅读重读当前网站和培训中心资料
- 02分享将四个人定义为来的理由
- 03创立创立“三招连接两国”的故事
- 04绘图双向主页方案
- 05运动天地院电影和卷轴场景
- 06修剪移动·减少动作·韩语和英语
10 / 签名场景自行移动提案中的场景
表格中组织的事物被更改为
场景。
培训中心的工作以表格和列表的形式组织在当前网站上。提案中，内容改为地图、行程、楼梯等场景。下面的场景是根据此页面重新创建的提案。
地图 · 韩文到达您的地方从吉隆坡
从吉隆坡
到马来西亚的每一个角落
该研究所支持的八所韩国学校从槟城、芙蓉和新山延伸至婆罗洲岛的古晋和亚庇。当你向下滚动时，一条线从该研究所延伸到每个城市。
- 吉隆坡教育中心
- 槟城1所韩语学校
- 芙蓉1所韩语学校
- 新山2所韩国学校
- 古晋1所韩语学校
- 亚庇2所韩国学校
- 吉隆坡教育中心·马来西亚韩国学校
- 槟城槟城周六韩国语学校
- 芙蓉芙蓉周六韩国语学校
- 新山新山韩国学校·新山Milal韩国学校
- 古晋古晋韩国学校
- 亚庇亚庇韩国学校·亚庇韩国学校
- 有正规韩国语课程的中学
- 11处
- 中学正规韩语班
- 65个
- 中学韩国语学习者
- 大约1,500名
- 教育院支援的韩国语学校
- 8处
马来西亚政府将韩语作为第二外语。
第一批韩国语课程在两所中学举行。
师范学院开设了当地韩语师资培训班。
马来西亚韩国教育中心已完成教育机构注册。
11所中学正在开设韩国语课程。
资料来源：马来西亚韩国语教育中心网站主要任务信息：中学韩国语收养学校和周末韩国语学校（2026年10月确认）。中学数据截至 2021 年 4 月。
JOURNEY · GKS
从吉隆坡到首尔，
从吉隆坡到首尔，
约 4,600 公里
政府奖学金（GKS）是由韩国教育部国立国际教育院主办的奖学金项目。奖学金获得者在韩国完成一年的韩语培训后开始攻读学位课程。
- 01获取信息
有关大学和专业的信息可通过教育中心举办的GKS说明会和出国留学博览会获得。
- 02应用与选择
教育中心支持政府奖学金计划的推广和选拔过程。
- 031年韩语培训
- 04学位课程
奖学金生可获得往返机票、每月生活费（本科生90万韩元、研究生100万韩元）、医疗保险费、定居补助金。
资料来源：马来西亚韩国教育院网站、政府奖学金（GKS）信息（2026年10月确认）
COURSES · 1 → 6从1级到6级，
从1级到6级，
学费免费。
居住在马来西亚的任何人都可以申请该学院的韩语课程。 Cheonjiin提案将课程步骤按步骤堆叠起来，以便从当前步骤可以看到下一步和TOPIK级别。尝试按楼梯。
步骤1
TOPIK Ⅰ·1级
这是常规课程的第一步。学习达到 TOPIK Ⅰ 1 级 15 周。
步骤2
TOPIK Ⅰ·1级
2级证书是法务部签发签证时使用的韩国语能力证明的标准等级。
步骤3
韩国语能力考试Ⅰ·2级
这是TOPIK Ⅰ 2级的目标。
步骤4
韩国语能力考试Ⅰ·2级
继第3阶段之后，这是巩固TOPIK Ⅰ 2级的阶段。
步骤5
TOPIK Ⅱ·3级
这是通往 TOPIK Ⅱ 3 级的台阶。
步骤6
TOPIK Ⅱ·3级
这是常规课程的最后一步。接下来是为会话和出国留学做准备的深入课程。
高级/特别课程
TOPIK Ⅱ·4~6级
根据学习者的水平组织深度会话和留学准备课程。
- 15周各阶段运行周期
- 每年两次从上半年和下半年开始
- 70%出勤率达到70%以上且结业评价分数达到70分以上则结业。
- 免费您只需支付教科书和管理费用。
资料来源：马来西亚韩国教育院网站韩语课程信息（2026年10月确认）
11 / 移动同样的故事尽在掌中
在小屏幕上
将水平更改为垂直。
不少参观者是第一次用手机打开培训中心的网站。 Cheonjiin Film 为垂直屏幕渲染了单独的帧，并将水平流动的故事和地图更改为垂直堆叠。
- 天地人电影单独渲染为垂直屏幕
- 垂直堆叠的名片和故事
- 标题中的课程申请按钮
- 减少运动设置和减少运动按钮
DESIGN SYSTEM两个提案一起使用的组件
两个提案一起使用的组件
按钮、标签、通知行，甚至数字符号都被组织成多个部分。无论您选择哪种方案，您的操作人员都可以使用相同的部件创建新的屏幕。
ONE STROKE, TWO COUNTRIES.
您的组织提供什么样的介绍？
该组织的网站是第一次访问者收到的第一个问候。
我将首先用一句话解释该组织的业务。
- Client
- Korean Education Center in Malaysia
- Scope
- 研究、品牌解读、信息结构、UI设计、动态图形、交互原型
- Brand
- 徽章和教育中心资料：马来西亚韩国教育中心·解释和网络应用程序：BlueCanvas
- Status
- 主网站改版提案 2026 年 10 月
