信仰与世界，
一幕两个词
有两种描述 GGS 的方法。一是基督教信仰和六大价值观，二是美国的课程和世界各地的大学。如果两个故事在第一个屏幕中分开，学校的性质就会变得模糊，因此这两个词必须组合成一个场景。
将根源与视野连成一句话01 / 概述项目概述
一个植根于信仰的学校的故事
走向世界
京畿道国际学校（GGS）是一所位于京畿道高阳市一山的基督教另类学校。基于美国共同核心课程（CCSS），我们从小学到高中在一所学校任教十二年，毕业生升入美国和世界各地的大学。
BlueCanvas 提出了重新设计学校网站的两个方向。 LUMEN用光描绘每个学生，HORIZON将世界的可能性展开到地球的地平线。本页记录了导致这两个提案的考虑因素和过程。
- #基督教另类学校
- #小学、初中、高中一体化课程
- #美国课程
- #升学辅导路线
- #品牌诠释
- #动态图形
- #滚动交互
- #韩语·英语
- #响应式
首先是学校采取的步骤数量。
1997
教育界成立的那一年
2015年搬迁到一山校区，并采用了现在的名称
12年
贯通小学、初中、高中的一体化课程
一所学校从G1到G12
5个
国际认证和会员资格
MSA-CESS · AI · NCPSA · 大学理事会 · ACSI
50个
学生选择的俱乐部活动
从编程到管弦乐队
号码来源：京畿道国际学校网站公开数据（2026年10月确认）
02 / THE QUESTION
十二 年 委托 学校 寻找 家长 第一个 屏幕上 什么 您想检查 这个 学校 什么 信仰 和 孩子走了多远 走 可以 有吗？
ANALYSIS
主屏幕
主屏幕
需要解决的三件事
我们一一重新阅读学校介绍、课程设置、招生信息，整理出家长希望在主屏上看到的内容。已经有足够的信息了。所需要的是将这些信息编织成故事的序列。
信仰与世界，
小学、初中、高中十二年，看似一条路。
课程分为小学、初中、高中三个菜单。然而，为升小学而忧心忡忡的家长们好奇的是，接下来的12年将走向何方。我将这三个过程放在一行上，以便开头和结尾都可见。
从 G1 到 G12 用一根线连接甚至入学咨询
毫不犹豫
录取流程经过咨询申请、1:1面诊、考试、面试，然后进入入学注册。这个订单显示在主屏的最末端，在线申请和电话咨询放在同一个地方。
第一页的四步录取流程我首先画了打开主屏幕的
四个人。
访问学校网站的不仅仅是考虑入学的家庭。在校学生的家属、在校学生以及用英语来访学校的家长和老师也会打开同样的第一个屏幕。我们将访问者分为打开网站的原因，并确定每个人应该首先看到哪个屏幕。
这所学校适合我的孩子吗？
- 教育理念与六大价值观
- 小学、初中、高中课程
- 入学流程及咨询申请
提案中价值观和十二年课程，入学的四个步骤
这周在学校发生了什么？
- 最新消息和画廊
- 学术日历
- 校车信息
在提案中，最新新闻卡和快捷方式
学长们都去了哪些大学？
- 接受大学
- AP 科目和 SAT
- 俱乐部活动
在提案中，通向世界大学的轨迹
Is this school
accredited?- 国际认证和会员资格
- 英文主
- 招聘信息
提案中国际认证卡及英文正文
03 / BRAND THINKING
学校历史
学校历史
这是一个扩大一点的过程。
- 1997 · 开始小型教育社区
它始于1997年的一个小型教育社区，并于2005年引入美国课程。每个故事都从这一点开始。
- 2015 · 一山一山校区
2015年，学校迁至一山校区，并更名为现名京畿道国际学校。该点成为地图上的一个地点。
- 今日 · 世界致世界各地的大学
毕业生继续升入美国和世界各地的大学。以一山为起点的线路正在向世界各地扩展。
BRAND STATEMENT
Rooted in Faith,
Ready for the World.
它植根于信仰，走向世界。
来自学校的使命和愿景在两个提案写在一起的提案句子中
先显出根源。
信仰和六大价值观是家长选择学校时的重要标准。在关注表现之前，我们首先谈谈学校的信念。
都说十二年如一日。
不是单独介绍小学、初中、高中，而是按照学生成长的顺序依次呈现。
它展示了一所向世界开放的学校。
我们向在国外寻找学校的家庭讲述同样的故事，包括国际认证、被认可的大学和英语主要内容。
TWO METAPHORS
我
我
在两个场景中画了同一句话。
- 流明·光每个学生都是一盏灯
一束微小的光聚集形成了地球，那束光通向世界上的大学。信仰、价值观、一个人的成长都用温暖的光芒表达出来。
- 地平线·地平线可能性超出了地平线
它展示了学校从太空看到的地球地平线的视图。进入陌生世界的勇气和可能性在宽阔的银幕上展开。
- LUMEN × HORIZON当光芒升出地平线的那一刻
这两个提议是同一场景中的两个时刻，而不是不同的答案。当曙光从地平线升起时，新的一天开始了，您孩子的下一步也开始了。
PHOTOGRAPHY DIRECTION
而不是装饰的场景
而不是装饰的场景
选一个晴朗的日子。
家长首先通过网站上的照片了解在学校的一天。我们没有列出集体照片，而是设定了选择实际一天场景的标准，例如沉浸在学习中的双手、透过窗户的光线以及教室外的活动。我们仅使用经过学校验证的照片进行最终筛选。
- 做双手和背部沉浸在学习中
- DO自然光和真实课程的时刻
- 不要列出具有相同构图的集体照片
- 不要经过过度编辑的舞台照片。
04 / COLOR SYSTEM学校的海军蓝和金色
学校的海军蓝和金色
融入夜空和黎明之光。
当前网站使用深海军蓝（#00225C）和金色（#D4B972）。在《LUMEN》中，它们没有放弃这两种颜色，而是扩展到了夜空和光线，而在《HORIZON》中，它们扩展到了大地的蓝色和黎明的杏色。
流明夜空和光线
Night Navy#000A1FRGB 0 10 31
夜空
这是第一个屏幕和黑暗场景的背景。这是光线看起来最清晰的颜色。
- 白色字母
- 19.8:1 AAA
- 深色文字
- 1.1:1 禁用
School Navy#00225CRGB 0 34 92
学校里的海军
这是从当前网站沿用的学校代表色。写在页眉和大页上。
- 白色字母
- 15.2:1 AAA
- 深色文字
- 1.2:1 未使用
Light Gold#D4B972RGB 212 185 114
光
学校使用金色作为光的颜色。仅将其放在现在对您很重要的按钮上。
- 白色字母
- 1.9:1 未使用
- 深色文字
- 9.5:1 AAA
Gold Mist#ECDCAERGB 236 220 174
污迹光
这是黄金广泛传播时使用的明亮颜色。它以深色背景上的补充字母书写。
- 白色字母
- 1.4:1 未使用
- 深色文字
- 13.3:1 AAA
Paper#F7F4ECRGB 247 244 236
篇论文
明亮场景的背景。比纯白色更温暖，长时间阅读也很舒适。
- 白色字母
- 1.1:1 禁用
- 深色文字
- 16.5:1 AAA
地平线地球的蓝光和黎明
Deep Space#121B32RGB 18 27 50
宇宙
字母和黑暗场景的背景。它的氛围比黑色更蓝，因此与地球照片相关。
- 白色字母
- 17.1:1 AAA
- 深色文字
- 1.0:1 禁用
Ultramarine#244ADCRGB 36 74 220
地球的蓝光
链接和重点都写在招生咨询场景的宽泛部分。
- 白色字母
- 6.8:1 AA
- 深色文字
- 2.5:1 未使用
Apricot#E9C6A9RGB 233 198 169
黎明之光
写在温暖的一面，就像小学卡片一样。
- 白色字母
- 1.6:1 未使用
- 深色文字
- 10.7:1 AAA
Sky#C2D0E7RGB 194 208 231
天空
写在平静的一面，就像中学卡片一样。
- 白色字母
- 1.6:1 未使用
- 深色文字
- 11.0:1 AAA
Signal Red#E44B39RGB 228 75 57
小信号
我只将它用于非常小的标志，例如星号和进度条。
- 白色字母
- 3.9:1 大字母
- 深色文字
- 4.4:1 大字母
Paper#F6F5EFRGB 246 245 239
篇论文
这是基本背景。照片和卡片放在上面。
- 白色字母
- 1.1:1 禁用
- 深色文字
- 15.6:1 AAA
尝试一下·同一屏幕，两个调色板
即使我改变颜色
即使我改变颜色
结构保持不变。
这两个提案都基于相同的设计令牌。因为背景色、文字色、强调色的位置都是预先确定的，所以相同的部分只要改变调色板就有不同的表现。使用下面的按钮更改入学咨询卡的调色板。
表面背景墨水文本重音强调软次级面
Admissions✳
通过
GGS 开始您孩子的下一步
入学咨询可以在线或通过电话发起。请发送您的申请，招生办公室将审核并与您联系。
- 1申请咨询
- 21:1面对面咨询
- 3测试·面试
- 4入学登记
申请在线入学咨询→查看入学流程
排版三种声音
Rooted in
Faith
英文标题之声
这两个提案都使用衬线斜体来强调。它给英语句子增添了历史悠久的学校的沉稳印象。
植根于信仰
韩语语音
LUMEN 将韩语从标题到文本组织成 Pretendard 家族，而 HORIZON 则延续了 Noto Sans KR（学校网站的常用字体）。标题应书写紧凑，字间距窄，正文书写舒适，行距宽。
A world of
possibilities.
地平线的声音
用几何无衬线设置一个大的英语句子，只将最后一个单词改为衬线斜体，以在句子中创造节奏。
- Display88 / Pretendard 700 / -0.03em
- Heading58 / Pretendard 700
- Value48 / Cormorant 600 Italic
- 主体18 / 400 · 领先 1.78
- 标签14 / 600 · 字母间距 0.16em
05 / MOTION直到一个光点成为地球
立即滚动
十二年的旅程。
LUMEN 的第一个屏幕是滚动时播放的动态图形。一个光点扩散成粒子形成一个球体，光的轨迹从一山校区继续延伸到 14 所被录取的大学。
预渲染帧不是实时 3D，而是根据滚动位置绘制。在手机上，竖屏的帧是单独加载的，可以无缝地显示同一场景。
00一个光点
01传播粒子
02全球
03一山 37.67°N
04十四条轨迹
05走向世界
尝试一下·移动胶片
- 华盛顿大学西雅图
- 加州大学伯克利分校伯克利分校
- 加州大学戴维斯分校戴维斯
- 南加州大学洛杉矶
- 加州大学欧文分校欧文
- 伊利诺伊大学厄巴纳-香槟分校
- 普渡大学西拉斐特
- 范德比尔特大学纳什维尔
- 圣母大学圣母大学
- 凯斯西储大学克利夫兰
- 宾夕法尼亚州立大学州立学院
- 康奈尔大学伊萨卡
- 纽约大学纽约
- 东北大学波士顿
HORIZON · CAMERA
当您向下滚动时，相机会接近地球。
HORIZON 的第一个屏幕放大地球图片，倾斜它，使其看起来像是相机在移动。我们没有使用大量视频，而是创建了一个仅包含一张图像和滚动计算的场景。
06 / 设计方向相同的骨架，两种表达
在选择一个正确答案之前，我从头到尾画出了
两种可能性。
尽管它与相同的学校材料具有相同的信息结构，但网站的性质根据首先显示的内容而有很大差异。面向世界的HORIZON和依次传达信仰和价值观的LUMEN完成到网站的最后。
下面的屏幕是实际提案的记录。单击场景名称即可转到该部分。
STRUCTURE FIRST
在上色之前，我首先用一个灰色的盒子组装了骨架。通过移动手柄，您可以在同一屏幕上比较骨架和成品版本。
方案A
HORIZON我的潜力成为世界
这个方向显示了从地球地平线上的太空看到的学校的景色。随着滚动，镜头接近地球，学校的态度、课程、学校生活、升学、招生咨询在宽屏上依次展开。
- 第一个屏幕向地球地平线打开，镜头移动
- 小学、初中、高中横向课程
- 用粒子和信仰·性格·社区绘制的地球仪
Manrope · DM Sans · Cormorant Garamond
方案B
LUMEN每个学生都闪闪发光。
This is the direction in which each student is drawn with light.从一个光点变成地球的动态图形开始，我们依次引导家长了解他们需要了解的内容，包括使命和六大价值观、12年课程、国际认证、录取大学和招生咨询。
- 滚动运动图形，其中单个光点变成球体
- 六个值沿着六边形一一亮起
- 横向课程及升学辅导四步走
Cormorant Garamond · Pretendard
比较两个方向有何不同
介绍同一所学校
两个订单
两份提案内容相同，但故事的顺序和氛围不同。我们对差异进行了整理，以便学校可以根据他们想要首先在主屏幕上传达的内容进行选择。
A类· Horizon B · 流明
主屏幕地球地平线照片和英文文本光点变成地球的动态图形
故事顺序学校态度→课程→价值观→学校生活→进步使命→六大价值观→课程→进步·认证→学校生活
如何展现价值观信仰·品格·社区三个分支六边形中的六个价值观
课程三张不同颜色的水平卡片带图片的水平面板
录取信息大写字母代表大学名称录取大学徽标及光迹
入学咨询致电一屏申请咨询四步流程并下载申请表
屏幕氛围明亮欢快的日间屏幕深邃温暖的夜间屏幕
重要地位全球视野和沉浸感教育价值和信息传递
这两项提案有何共同之处
- 通用菜单和页脚继续现有学校网站的菜单和页脚并连接到子页面。
- 现有入学咨询咨询申请按钮打开当前正在运行的在线入学咨询屏幕。
- 减少运动当您在设备上打开“减少运动”时，它将停止静态场景和自动运动，并依次显示内容。
- 小屏幕在手机上，水平运行的部分会垂直显示。
- 01阅读重读学校介绍、课程和招生信息
- 02分享定义您访问的四个原因
- 03确定确定《从一点到世界》的故事
- 04绘图双向主页方案
- 05动作英雄动态图形和滚动场景
- 06修剪移动·减少运动·英文主
07 / 学术十二年一线
从小学到高中，
学生成长的顺序。
这两个提案都将课程呈现为单一流程而不是三个菜单。单击下面栏中的成绩。年级所属的课程和所学的内容一起变化。
小学小学课程
培养享受学习的力量
We provide different teaching methods to suit the interests and strengths of each student.建立注重英语、数学、科学和社会研究的平衡基础，并通过阅读、写作、口语、艺术、音乐、中文和体育课程建立信心。
中学中学
为自己思考和学习
我们通过各种活动和俱乐部活动来拓展我们的批判性思维、自我反思和世界观。课后支持计划和学生咨询帮助每个学生成长。
高中高中
为大学和世界做好准备
在四年的时间里，您将完成基于 CCSS 的学分，并通过 AP 科目扩展您的专业知识，学习到大学入学所需的水平。通过服务和课外活动培养责任感和领导力。
G9English & Lab 9GeometryBiologyWorld History
G10English & Lab 10Algebra IIChemistryEconomics
G11English & Lab 11PrecalculusPhysicsUS History
G12English & Lab 12CalculusAP Env. ScienceUS Government
课程来源：京畿道国际学校网站课程指南（2026年10月确认）
08 / VALUES一个形状中有六个值
值不是列表
它们是相互关联的。
学校追求的六个数值被放置在六边形的顶点，并被设计为每次向下滚动时一一点亮。当最后一个值打开时，六个顶点连接成一条线。尝试直接在形状上按该值。
01 / 06
Adaptability
适应性
基于为每个学生量身定制的目标和自我管理习惯，培养学生即使在陌生的环境中也能灵活应对的能力。
Global Citizenship
全球公民
获得探索、同理心和贡献的经验，并成长为尊重文化和观点差异的全球公民。
Integrity
真实性
通过自我反省和体悟的过程，我将诚实的价值深深铭刻在心。
Justice
公平
公平对待所有学生和教职员工，共同努力寻找造福所有人的解决方案。
Respect
尊重
我们尊重相同和不同的想法，创造一种每个人都可以自由表达意见的文化。
Trust
信仰
当教师和学生之间建立信任时，学习效果会最大。
HORIZON · FAITH · CHARACTER · COMMUNITY
HORIZON 将学校的价值观分为三个类别：信仰、品格和社区。当您滚动时，用 620 个点绘制的地球仪会缓慢旋转。
09 / GLOBAL
每一行
每一行
都是毕业生的下一步。
在 LUMEN 的英雄电影中，光迹沿着学校的录取大学名单绘制。该线路从一山校区出发，经过西雅图和加利福尼亚州，到达纽约和波士顿。
- 01华盛顿大学西雅图
- 02加州大学伯克利分校伯克利分校
- 03加州大学戴维斯分校戴维斯
- 04南加州大学洛杉矶
- 05加州大学欧文分校欧文
- 06伊利诺伊大学厄巴纳-香槟分校
- 07普渡大学西拉斐特
- 08范德比尔特大学纳什维尔
- 09圣母大学圣母大学
- 10凯斯西储大学克利夫兰
- 11宾夕法尼亚州立大学州立学院
- 12康奈尔大学伊萨卡
- 13纽约大学纽约
- 14东北大学波士顿
大学名单来源：京畿道国际学校网站大学入学情况（2026年10月确认）
10 / 入学入学咨询的四个步骤
主页面的最后一个场景是
入学咨询。
在这两个提案中，主页的最后一个场景都被设置为入学咨询。学校的招生流程减少为四个步骤，在线申请直接链接到现有的招生咨询屏幕。
我们还准备了句子，以便韩语和英语正文使用相同的结构。在下面的卡片中更改您的语言。
- 1申请咨询在线或电话申请。
- 21:1面对面咨询直接与班主任会面并咨询。
- 3测试·面试我们一起检查您是否适合入学。
- 4注册入学提交文件并接收最终指示
Admissions通过
通过
GGS 开始您孩子的下一步
入学咨询可以在线或通过电话发起。请发送您的申请，招生办公室将审核并与您联系。
申请在线入学咨询→了解更多入学流程
AdmissionsBegin Your Child’s
Begin Your Child’s
Journey at GGS
Start with an online inquiry or a phone call. Our admissions office will review your request and contact you.
Apply for Counseling →Admissions Procedure
句子根据相同的位置和长度对齐，以防止两种语言的屏幕结构晃动。
11 / 移动同样的故事尽在掌中
在小屏幕上
将水平更改为垂直。
家长往往首先用手机打开学校网站。水平流动的课程和固定场景被改为垂直流动，LUMEN的英雄为垂直屏幕准备了一个单独的框架。
- 单独为竖屏渲染的英雄影片
- 课程和价值观垂直堆叠
- 停止运动按钮（水平线）
- 即使屏幕宽度较小，也会检查布局
DESIGN SYSTEM两个提案一起使用的组件
两个提案一起使用的组件
按钮、标签、场景编号，甚至数字标记都被组织成多个部分。即使在执行所选提案时负责人发生变化，您也可以创建相同的屏幕。
EVERY STUDENT, A LIGHT.
您如何记得您的学校？
学校网站是家长、学生和教师申请者第一次接触学校的地方。
我们将首先总结学校所信奉的价值观。
- Client
- Gyeonggi Global School
- Scope
- 研究、品牌解读、信息结构、UI设计、动态图形、交互原型
- Brand
- 徽章和学校颜色：京畿道国际学校·解释和网络应用程序：BlueCanvas
- Status
- 主网站改版提案 2026 年 10 月
其他项目
-
全球企业
Youngone Corporation
一家名字从不出现在服装标签上的全球 OEM 企业的网站改版提案。内容包括“从衣服的内侧，到世界的外侧”的品牌解读、色彩系统、从雪山开始的首页方案、制造工序的滚动交互，以及全球网络、材料和 ESG 页面。
-
媒体 · 出版
Munhakdongne Publishing Group
出版集团的网站改版提案。品牌解读从名称中的“dongne（街区）”一词出发，内容包括取自纸张、墨和书签带的配色、四个方案，以及找书与阅读连载的体验。
-
基金会 · 非营利
Purme Foundation
非营利基金会的网站改版提案。品牌解读从标志中的三棵树出发，内容包括蓝色与新芽青柠色的配色、无障碍标准和四个方案。