CEO致辞在原网站的代表问候语中，有一个承诺：“我们将成为您的Next Key”
如果您在Y·N·K前面添加Your，则缩写将与公司名称相同
#F16022原始网站上的按钮和突出显示的字母中使用的橙色，
两个提案均以此颜色开头
两个方向当你打开门时，有
两条路
YNK ASSOCIATES · WEBSITE RENEWAL PROPOSAL
YNK Associates 网站改版提案
正确的连接·您的下一个关键两个方向
YNK Associates 是一家位于首尔的猎头公司。我们专注于猎头来发现和推荐企业正在寻找的关键人才，以及声誉检查来在招聘前检查申请人的工作表现和态度，以及人力资源咨询来增强组织的能力。
BlueCanvas 提出了重新设计公司网站的两个方向。 “正确的连接”，展示了与连接人和可能性的橙色丝带的联系，以及“你的下一把钥匙”，它讲述了公司与打开大门的钥匙的故事。本页将提出两个提案的过程整理为 YNK 寻找人才所采取的七个步骤。
SEVEN STEPS
猎头寻找人才的顺序和网站更新的顺序比你想象的更相似。我们接收请求，选择人才，寻找人才，推荐人才，验证人才，然后提出建议。
JOB DESCRIPTION
就像猎头在寻找人才之前会写一份工作描述一样，我在开始设计之前首先写下新网站应该做什么。两项提案均基于该文件。
主要任务
从第一个屏幕开始，双方访客都可以直接进入各自的咨询。
所有介绍、服务、引导语句均转换为文字，以便在手机上搜索和阅读。
来自原始站点的词语，例如“Next Key”、“Moon”和“Success Partner”以及橙色被用作设计材料。
您可以在主屏幕上看到招聘信息和“喝茶对话”栏目。
优惠待遇
关闭静态场景和视频，允许从上到下阅读相同的内容。
更新首先要了解公司已有的内容，然后再添加新内容。我重新看了一遍原网站的主要问候语和介绍图、按钮的颜色，甚至快捷菜单旁边的小图标，发现了其中的五个线索。
在最后的问候之前，首席执行官的问候承诺“YNK Associates 将成为您的下一个关键”。这是该公司将自己与什么进行比较的最清晰线索。
介绍图中间有一张金钥匙的图片，在职位信息部分有一张写有SUCCESS的钥匙图片，快捷菜单旁边有一个小钥匙图标。这把钥匙已经被用作这家公司的标志了。
介绍图上写着：“我们为最优秀的人才和最好的公司敞开大门。”有一句话是这样说的：“YNK知道通往那扇门的正确而快捷的方法。”如果有一把钥匙，那么也有一扇可以用这把钥匙打开的门。
在同一张图的左右两侧，“人才是公司的资产”和“公司是人才的垫脚石”相对放置。 YNK是一家倾听公司和候选人故事的公司。
如果您在 Next Key 前面添加 Your，则缩写将与公司名称 YNK 相同。橙色 #F16022 用于原始站点上的按钮和突出显示的文本。这五个线索构成了这两项提案的基础。
TWO READINGS
在门、人和座位之间画线。线索中，“两个方向”和橙色放在前面。
画出打开门和门后舞台的钥匙。线索中，“下一个钥匙”和“门”被放在前面。
我们从五个线索中选择了“联系”、“钥匙”、“门”、“对话”等词语，并创建了适合每个词语的场景图像。这是为了传达公司的氛围，即使没有实际的肖像，也能将人和公司联系起来。两个提案中使用的场景和探索阶段创建的场景放在一起。
按钮中使用的橙色 #F16022 和原始站点上突出显示的文本被用作标准。如果移动到红色一侧并增加饱和度，A 中它会变成朱红色，如果降低亮度和饱和度，B 中它会变成琥珀色。 方案A将此颜色放在 Blue Hour Charcoal 之上，方案B将其置于黄铜色和浓缩咖啡黑之间。
#FF5A36H 11° · S 100% · L 61%方案A · 功能区、按钮、句点#F16022H 18° · S 88% · L 54%原始网站上的按钮和突出显示的文本#C8501AH 19° · S 77% · L 44%B · 按钮和强调文字背景·44%是深炭色，就像蓝色时刻的建筑一样。我呈现出第一个屏幕上方的黑暗、连接场景和最终咨询信息。
论文·38%这是介绍、服务和招聘信息的基础。它的色调比白色低一级，使其看起来像纸。
连接·9%原站点颜色由橙色变为红色。仅用于功能区、按钮和标题中的句点。
第二面·6%这是服务卡的第二面。我将其设置为比纸张低一级，以区分背景和卡片。
补充句子·3%浅色背景上的辅助句子和标题的颜色。
黑暗·46%这是钥匙和门所在的黑暗。是第一个场景、服务、搜索流程、栏目场景的基础。
论文·30%这是公司介绍、原则和承诺卡的基础。
钥匙 · 10%钥匙是黄铜色的。用于数字、标签和线条图。
Ember · 8%这是一种将原始站点的橙色还原为类似于余烬的颜色。仅在按钮和突出显示的单词上书写。
辅助句子·6%这是浅色背景上辅助句子的颜色。
单击色样将复制十六进制值。示例中的数字是其上方文本颜色的亮度对比度。
方案A将英文标题和韩文文本写在一个假体中。英文标题的粗细为500，字母间距缩小到-6.5%，像建筑杂志的标题一样紧紧地竖立起来。 方案B使用 Instrument Serif 斜体作为英文标题，并将韩文标题设置为 Pretendard。斜体字，如同用钢笔书写一样，为钥匙和门营造出经典的氛围。
空格 0%THE RIGHT
CONNECTION.
Y·N·KYour Next Key
这三个词的首字母被涂成黄铜色，因此公司名称 YNK 首先被读出。
500·字母间距-6.5%我们看到了简历之外的可能性。
方案A对韩文标题使用相同的粗细和字母间距，以便它可以与英文标题作为一个整体来阅读。
700有一扇大门让最优秀的人才和最好的公司相遇。
在方案B中，只有一个单词被涂成琥珀色，以指出句子中的关键词。
表格0获胜7 步5 步
候选服务成本、搜索阶段和声誉查询阶段以衬线编号组织。
在比较两个提案时，为了避免菜单或申请方法的差异影响判断，GNB、页脚和咨询申请窗口被创建在一个公共文件中，以便两个提案可以一起使用。当打开菜单或接收窗口时，页面滚动被锁定，并且在方案B 中，平滑滚动也会停止。公共文件中的类和变量都带有 ynk- 前缀，以避免与提案的风格混合。
header.php通用GNB有一个徽标、四个菜单和一个提交按钮。文本颜色根据下面的场景是暗还是亮而变化。
A · THE RIGHT CONNECTION主屏幕这是两个提案中唯一不同的楼层。同一菜单和同一接待窗口之间仅第一屏幕和场景发生变化。
footer.php · apply.php公共页脚和接待窗口接待窗口有两种类型：页脚和浮动咨询按钮，职业咨询和企业招聘咨询。
ONE FORM, TWO VISITORS
接待处分为职业咨询和企业招聘咨询两种。提案提交窗口不会保存在服务器上，而是在检查姓名、电子邮件和咨询详细信息后将草稿发送到电子邮件应用程序。您可以通过将您的名字放在右侧来查看电子邮件主题是如何创建的。
A NEW POSSIBILITY
请告诉我们接下来的故事。
有些建议将五个线索视为连接，有些建议则视为钥匙。下面的记录是从上到下滚动两个提案的主页的屏幕。当您按下场景名称时，PC 屏幕和手机屏幕都会移动到该场景。
这是一个用一条橙色丝带展示人与企业之间联系的方向。从蓝色时刻第一个屏幕上有一条丝带掠过首尔开始，滚动的 3D 丝带显示了理解、联系和前进的三个步骤。该服务由三张水平翻转的卡片组成。
在方案A的场景中，我选择了一个我花了很大力气导演的时刻。单击照片可查看每个场景的大图。
蓝色时刻期间，一条橙色丝带掠过首尔上空，屏幕左侧充满了大英文标题。
当您滚动时，包含公司想法的第一句话会按顺序填充字体颜色。
3D 丝带滚动以展示理解，这是联系的第一步。
它描绘了丝带交叉并连接人和机会的时刻。
在最后一步中，丝带改变形状以向前延伸。
垂直滚动变为水平移动，三张服务卡一一过去。
介绍“先听你的，再找答案”的态度，并附上对话图片。
职业咨询和企业招聘咨询以充满屏幕的橙色并排提供。
这个方向将原网站的介绍性句子“我们为最优秀的人才和最好的公司敞开大门”翻译成一个场景。在第一个屏幕中，一把黄铜钥匙插入门并转动，门打开，屏幕变亮。钥匙孔形状的大门打开的照片，像表盘一样转动的四项原则，以及公司和候选人在面试中相遇的两条路径的搜索过程相继展开。
在方案B的场景中，我选择了一个我花了很大力气导演的时刻。单击照片可查看每个场景的大图。
第一个屏幕上的黄铜钥匙是用 180 帧绘制的，当你向下滚动时，它会向门移动。
当钥匙靠近门时，就会出现“最优秀的人才和最好的公司相遇的门”的字样。
钥匙在锁孔里转动，光线从门缝里漏出来。
锁孔形窗口的两侧分别写有致公司的话和致候选人的话。
当钥匙孔扩大到充满屏幕时，站在青铜门前的人的背影就显露出来了。
高管搜寻、背景调查和人力资源咨询卡堆叠起来并用线条图绘制。
四个原则一一调整，就像表盘一样。
在面试过程中，公司和候选人两条路合二为一。
我们决定仅使用动作来传达公司的信息。我们从两个提案中选择了关键场景，询问他们为什么这样做，并组织了答案。您也可以通过滚动或点击此页面直接移动卡内的场景。
01 UNDERSTANDA.包含连接没有开始或结束的想法。丝带沿着环面结曲线不间断地旋转，在滚动位置显示 8 秒场景的一帧。每个帧都被编码为关键帧，因此即使您上下滚动，它也会立即响应。
F 001 / 180A.原网站的介绍图中间有一把金钥匙，旁边有一句话：“我们为最优秀的人才和最好的公司敞开大门。”这两个被合并成一个第一个场景。钥匙、青铜门和漏光的门缝是直接使用 Three.js 创建的，并以 180 帧进行渲染。当你向下滚动时，按键会旋转，当你向上滚动时，它会返回。
A.我将这三项服务并排放置在相同大小的卡片上，这样每一项服务看起来都不那么重要。在PC上，垂直滚动变为水平移动，一张一张地传递卡片，而在手机上，您可以用手指滑动或使用箭头按钮。
A.这是因为它在第一个场景中显示了打开的门的内部。当钥匙孔形状的窗口扩大到充满屏幕时，站在青铜门前的人的背影显露出来，窗口的两侧写着对公司的文字和对候选人的文字。
A.这是为了匹配“我们看到简历之外的可能性”这句话的阅读速度。当你滚动时，文字会变暗，让访问者可以逐字阅读公司的想法。
首先了解该职位的作用和组织的方向，然后制定适合其的搜索策略。
A.方案B的主要场景的标题是“四个原则创造一个结果”。表盘中央放置了一个锁孔，从“深思熟虑的计划”到“我们的保证”四个数字一一旋转。按下按钮可以直接转动左转盘。
FOR EMPLOYERS
FOR CANDIDATES
A.这是因为公司和候选人的出发点不同。原网站《雇主指南》和《候选人指南》中划分的步骤被分成两条线，两条线在面试时相遇，从而达成合同和后续管理。这些页面后面的七个步骤也取自上层，即企业流程。
检查职位空缺和发送简历通常是在手机上开始的。两项提案分别设计了手机屏幕。 B方案中的关键影片单独渲染竖屏的框架，A方案中的服务卡和B方案中的栏目列表是用手指翻转的。
这两个提案都介绍了同一家公司，但在第一个屏幕上首先显示的内容有所不同。我们对差异进行了整理，以便您可以根据您的公司首先想向访客传达的内容进行选择。
REFERENCE CHECK
YNK 在决定雇用候选人之前会验证候选人的声誉。两个提案在发送给客户之前都根据相同的项目进行了检查。
我们确认页面不会在 PC、平板电脑和手机屏幕上水平溢出。
“减少运动”设置会关闭静态场景和视频并按顺序显示所有内容。
使用ESC关闭菜单和接收窗口，关闭后焦点返回到按下的第一个按钮。
仅在确认您的姓名、电子邮件地址和咨询详细信息后，接待窗口才会打开电子邮件应用程序。
接待窗口中常见的GNB、页脚和辅助文本都设置为14px或更大。
请您查看招聘公告栏，看看您是否正在招聘，报名日期写在方案B的职位卡上。
媒体 · 制作
DOREMI ENTERTAINMENT
电视剧与 OST 制作公司的网站改版提案。我们把标志中的青绿色梯形读作放映机的光，把公司名读作 do、re、mi 三个音。内容包括从同一种青绿色分出的两套配色、写成场景清单的信息结构、SCENE & SCORE 与 STORIES THAT STAY 两个方案，以及两部品牌影片。
公共 · 教育
Korean Education Center in Malaysia
韩国教育部海外教育机构的网站改版提案。品牌解读从创造韩文的三个笔画“天、地、人”出发。内容包括取自夜空金色和两国花卉珊瑚色的配色、18 秒动态影片、天地人与珊瑚之旅两个方案，以及韩文学校地图和 4,600 公里的留学旅程。
教育 · 学校
Gyeonggi Global School
基督教另类学校首页的改版提案。我们用“从一个点走向世界”的故事连接信仰与世界，内容包括藏青、金色与群青的配色，光（LUMEN）与地平线（HORIZON）两个方案，以及滚动动态图形。
Contact
请告诉我们您的现状与目标。 我们将为您梳理可行范围、推进方式及预估费用。
DIRECT