EN BM 中文
Web & System Solutions · 槟城北海 +6011-1142 1029 sales@potadot.com.my
首页 · 项目 · 企业网站 · Pro Young Edu

Pro Young Edu教育 · 增益课程网站

首页先向家长讲清楚道理。

这是 Pro Young Edu 的网站。Pro Young Edu 在马来西亚为孩子开设编程、数学和英文课程,要学生明白为什么,而不只是记住是什么。所以首页先讲道理,课程卡片排在后面。

客户
Pro Young Edu
行业
儿童增益教育
我们负责
构思、文案、设计、开发、SEO
语言
英文
proyoungedu.com
先讲为什么课程排在第五章 三门学科编程、数学、英文 WhatsApp 按钮一路留在屏幕上
概要

Pro Young Edu 是马来西亚的教育平台,教孩子编程、数学和英文,在吉隆坡、新山和线上开课。Potadot 为 Pro Young Edu 设计并开发英文网站。首页沿用了这家机构自己的教学主张:学生要明白为什么,而不只是知道是什么。页面先说明思考能力为什么重要,再介绍怎么教,到第五章才出现三门课程,接着是家长的讯息和下一步。

客户

三门学科教的都是同一种思考方式。

Pro Young Edu 教孩子编程、数学和英文,并把三者合称为综合学习。编程包括 Scratch、Python 和 Roblox,数学包括 Singapore Math 和 Math Olympiad,英文涵盖 SPM、PSLE 和 CEFR。

课程在吉隆坡、新山和线上进行。作业、学习进度和老师的反馈都通过自家的线上学习管理系统处理,孩子在家和在课堂上的学习就能衔接起来。

Pro Young Edu 标志:蓝色的 P 和 Y 夹在绿色与橙色两个箭头之间,下方是 Pro Young Edu 字样
7+
年经验
200+
位学生
99%
家长满意度
3
门课程
客户所托

来上课的是孩子,看网站的是家长。

网站的标题直接对家长说 “Your Child”(您的孩子),因为做决定的是家长。网站的样子要讨孩子喜欢,讲的道理要让大人信服。

说明增益课程的价值

增益课程是学校以外的选择。家长看课程之前,网站要先说明思考能力为什么重要。

让三门学科连成一体

编程、数学和英文,很容易被看成三门不相干的课。网站要把贯穿三者的想法讲出来。

回答细心的家长

谁来教、每个孩子能得到多少关注、进度怎么跟进。这些问题在首页都要有清楚的答案。

让家长容易开口

线上课程面向全马的孩子,很多家庭未必会亲自上门。他们需要一个简单的方式,人在哪里都可以询问。

设计概念

先讲为什么,再讲学什么。

Pro Young Edu 说自己帮助学生 “understand why, not just what”(大意:明白为什么,而不只是知道是什么)。既然这样教学生,网站就不该一开场就列课程。所以首页照这句话的次序安排:先讲道理,再讲方法,最后才讲学科。家长读到课程时,已经知道这些课有什么用处。

浏览路线

  1. 1 承诺

    一句话讲孩子的自信。

  2. 2 为什么

    孩子现在需要什么。

  3. 3 方法

    提问、探索、推理。

  4. 4 学什么

    三门学科,三张卡片。

  5. 5 家长的话

    家长自己的聊天讯息。

  6. 6 开始

    一个圆形按钮。

灵感从何而来

教学主张

“We help students understand why, not just what.”(大意:我们帮助学生明白为什么,而不只是知道是什么。)首页的次序就由这句话决定。

标志

蓝色的 P 和 Y 夹在两个箭头之间,形状像程序代码里的标签。按钮、小标签和区块用的绿、蓝、橙三色,都和这个标志一致。

孩子

开头两张照片里的女孩都举起手臂,一脸开心。粗圆的标题字和柔和的圆角,延续的正是这份心情。

设计风格

既要让孩子喜欢,也要让家长放心。

两种橙色、鲜明的蓝色和粗圆的标题字,让页面有孩子的活力。章节简短,版面稳定,大人读起来也轻松。

色彩

  • 白色#FFFFFF正文章节
  • 米白#FFF7EC课程与家长讯息
  • 琥珀橙#FE9300标题与区块
  • 橙色#FC5C00图标方块与主要按钮
  • 蓝色#0273FF圆形按钮与课程按钮
  • 绿色#27CD98小标签与数字卡

大部分标题都是同一种写法:第一行用深色,第二行用琥珀橙。琥珀橙落在这句话的重点上,例如 “Isn’t Enough”(大意:还不够)。

字体

Developing Child Confidence

Nunito · 主标题

Why Traditional Learning Isn’t Enough

Nunito · 章节标题

We help students understand why, not just what.

Montserrat · 正文与按钮

走出框外

网站的开场画面:抱着手提电脑的女孩高举双手,拳头伸出蓝色圆形的边缘,旁边是主标题

女孩坐在蓝色圆形里,高举的双手却伸出了圆圈。往下看,同样的手法又出现两次:一位女士和一位女孩跨过两种橙色的分界线,最后一位女孩也高出橙色区块。自信很难单靠一张照片表现,版面正好补上这一点。

细节

孩子一起学习的画面,配上 Coding、Mathematics、English 三个方块,以及 Scratch Coding、Python Programming、Roblox Game Development 标签和一句关于思考框架的话

这一张图就交代了课程范围。三个方块写明学科,各用一种标志颜色划线,小标签列出 Scratch、Python 和 Roblox。图的上方写着全站的主张:“We don’t just improve grades.”(大意:我们不只是提高成绩。)

节奏

  1. 承诺
  2. 为什么
  3. 简介
  4. 方法
  5. 课程
  6. 优势
  7. 家长
  8. 文章
  9. 开始

颜色跟着内容转换。橙色用在开头讲道理的一章和结尾,米白放课程和家长讯息,白色留给长段文字。上方色条就是整个页面,按实际比例画成。

逐章导览

照家长读的次序一章一章看。

每一章都在回答上一章留下的问题,从思考能力为什么重要,一直讲到怎么开始。每个画面上标出的地方,就是回答问题的部分。

01/07

先讲承诺再讲课程

标题讲的是孩子的自信,不是课程。一小段文字点出三门学科,下面两个按钮让家长选择:继续了解,或者直接联络。

用意 家长想到的是孩子,不是课表。第一句话就从孩子说起。

02/07

两种橙色讲一个道理

画面分成两半。左边说明在科技和 AI 的时代孩子需要什么,右边接上 Pro Young Edu 的名字,再加一个圆形的 Start Now 按钮。

用意 课程还没出现,家长已经先看到问题。两种颜色让这一章读起来像一问一答。

03/07

教学方法排成三步

Structured Questioning、Exploration、Reasoning 分别放在三个橙色图标方块旁。中间一项往左移,三项读起来就像一条路线,而不是普通的清单。

用意 教学方法正是家长选择 Pro Young Edu 的理由,所以排在学科之前。

04/07

到这里才出现课程

Coding、Math、English 是三张一样的白色卡片,放在米白底上。每张都有图标、简介和蓝色按钮。

用意 卡片大小相同,没有哪门课看起来像附带的。读到这里,家长会把每段简介看成前面那套方法的实际应用,不会当成推销的话。

05/07

六个简短的回答

学习系统、小班教学、老师、学习路线、比赛培训和未来技能,各有一个图标和几行文字。

用意 看完学科,家长想知道上课是什么情形。六段短文逐项回答,家长可以先看自己最在意的一项。

06/07

家长在 WhatsApp 上怎么说

家长评价用的是 WhatsApp 截图和视频,放在手机形状的卡片里,聊天内容有英文也有中文。

用意 家长和老师的聊天,读起来不像广告。WhatsApp 对话的样子,家长也一看就熟悉。

07/07

结尾回到开头的承诺

最后一个区块回到自信这个主题。一位女孩高出橙色区块,圆形的 Start Now 按钮压在区块下缘。

用意 页面以承诺开场,也以同一个承诺收尾。按钮跨出区块,成为视线最后停留的地方。

proyoungedu.com
先讲承诺再讲课程先讲自信
两种橙色讲一个道理左边提问,右边回答
教学方法排成三步思考的三个步骤
到这里才出现课程三张同样的卡片
六个简短的回答上课是什么情形
家长在 WhatsApp 上怎么说聊天截图代替评语
结尾回到开头的承诺最后一步
手机版

手机版的次序保持不变。

内容的先后次序最要紧,所以手机版保留次序,只调整版面。

  • 标题和按钮排在前面,照片跟在后面
  • 左右并排的章节改成一栏,文字居中
  • 菜单收进一个按钮,WhatsApp 留在屏幕一角
手机版开场画面:标题、两个按钮,下方是蓝色圆形里的女孩
手机版的机构简介,以及第一张绿色数字卡
手机版的教学方法和第一张课程卡片
幕后功夫

鲜艳的颜色背后还有这些功夫。

颜色吸引家长的目光,下面这些安排帮家长找到答案,也方便他们开口询问。

01

屏幕一角的 WhatsApp

圆形按钮一路留在屏幕上。按一下就打开 WhatsApp,问候语已经写好。

02

每门学科一个页面

Coding、Mathematics、English 在 Course 菜单下各有页面,首页只需简单介绍。

03

写给家长的文章

内容包括 IGCSE 计算机科学、IB 课程、AEIS 考试,以及 Singapore Math 和 Math Olympiad 的区别。

04

Google 看得懂

网页简介写明学科和两座城市。Google 所需的资料列出吉隆坡和新山两家分校,并附上地址和电话号码。

05

一路跟随的菜单

标志和菜单固定在页面顶部,家长滑到哪里,都可以转去课程或 Contact Us。

06

页脚的公司资料

注册号码、地址、电话和电邮,都写在页脚。

制作流程

项目不同,做法一致。

每个 Potadot 项目,都先把客户的情况弄清楚,才动手设计。 查看全部七个步骤

  1. 1

    了解您的业务

    Pro Young Edu 教什么、怎么教,家长询问之前想听到什么。

  2. 2

    文案撰写

    把要说的话排成次序:道理、方法、学科、让家长放心的理由、下一步。

  3. 3

    设计与开发

    标志色和圆润的字体定下整体样子,再逐章做手机版和电脑版,用 WordPress 和 Elementor 开发。

  4. 4

    SEO 与上线

    按学科和城市设好网页标题、简介和 Google 所需的资料,然后上线。

常见问题

您可能想问。

正在经营教育中心?欢迎 WhatsApp Ricky(+6011-1142 1029)详谈。

Potadot 为 Pro Young Edu 做了什么?

我们定下构思,整理文案,设计页面,开发英文网站,设定 SEO,并加上一路留在屏幕上的 WhatsApp 按钮。

为什么课程排在首页这么后面?

因为 Pro Young Edu 先教为什么,再教是什么,首页也照这个次序。家长明白了道理和方法,读课程简介的感受就不一样。赶时间的家长,也可以从 Course 菜单直接转到学科页面。

网站活泼可爱,家长也会信任吗?

活泼来自颜色和圆润的字体,信任来自条理:一章讲一件事,清楚回答上课和老师的问题,再加上家长自己的讯息。

我的教育中心也能这样做吗?

可以。每个网站都依客户的教学方式和所服务的家庭量身定做,样子各有不同,思路却是一贯的。不妨告诉我们您怎么教,我们再给您具体建议。

与我们洽谈

经营教育中心?

+6011-1142 1029 sales@potadot.com.my potadot.com.my