把名字说明白
Calia 源自希腊文 Kallos，意思是美。这层意思不能只写出来，要让访客一打开网站就看得到。
Calia Residences房地产 · 住宅计划网站
打开网站迎面就是一幅画。
这是 PGB 位于新山丹加湾的住宅计划 Calia Residences 的网站。Calia 的意思是美，所以我们用金色和蓝色的颜料，把整个网站当作一件艺术品来做。
概要
Calia Residences 是 Paragon Globe Berhad（PGB）在新山丹加湾发展的住宅计划。名字源自希腊文的“美”，Potadot 就从这层意思出发设计并开发网站。网站以流动的金蓝颜料开场，照片边缘裁成笔刷毛边，标题在一行之中由一种颜色转为另一种颜色。除了这些画面，网站还有屋型、设施、位置、图库、360 度导览和获批广告资料等页面。
客户
这个新山海滨计划的名字自有来历。
Calia Residences 由 Paragon Globe Berhad 发展，这是一家在马来西亚交易所主板上市的发展商。计划位于丹加湾，紧邻 Skudai Highway，并有接驳车前往 CIQ 和 RTS。
计划共有 Tower A 和 Tower B 两座大楼，四种屋型，从一房套间到三房双钥匙单位都有。
- 1,274
- 单位
- 2
- 座大楼
- 4
- 种屋型
- 2029
- 预计第三季竣工
客户所托
大楼竣工之前，名字要先被记住。
PGB 在 2025 年推出 Calia Residences，这个名字对买家还很新。网站要让访客记住名字的意思，也要备齐买家会逐项核对的资料。
同时照顾两类买家
有人买来自住，有人买来投资。两类买家都要能清楚看到屋型、设施和位置。
把周边地点一一列明
网站的故事离不开丹加湾和 Skudai Highway，所以要写明具体地点和距离，从 CIQ 到学校都要有。
法定资料单独成页
画面再讲究，执照、销售准证、地契和建筑图则编号也一样要列明。这些资料要有自己的页面，不该变成艺术品底下的小字。
设计概念
名字的意思是美，所以我们把网站画了出来。
两座大楼的效果图，说不清 Kallos 是什么意思，一幅画却可以。所以我们把整个网站当作一件作品来做：颜料落在有纹理的纸上，章节之间以波浪线相接。气氛铺好之后，大楼才出场。
浏览路线
-
1
开场
颜料在白色卡片后流动。
-
2
名字
Kallos 的解释就在大楼旁边。
-
3
主张
三个词配三张毛边照片。
-
4
要点
八个金色方块逐一出现。
-
5
位置
24 个地点、地图和距离线。
-
6
登记
夜景大楼旁的一张表格。
灵感从何而来
名字
Kallos 的意思是美。这个字让房地产网站有了做成艺术品的理由，也说明了网站为什么以颜料开场，大楼稍后才出现。
海岸
网站把 Calia 放在丹加湾的海岸线上，蓝色颜料因此让人想到海水。蓝色章节与纸色章节以弯曲的波浪线相接，看上去就像潮水留下的痕迹。
标志
Calia 的字母 I 上方有一颗四角星。网站把这颗星单独取出来，放在各个标题上方当作记号。滑到位置章节之前，一颗深蓝色的星还会慢慢变大，铺满整个屏幕。
设计风格
金蓝颜料落在一张纸上。
蓝色的颜料章节和淡色的纹理纸章节轮流出现。标题用修长的展示字体 Dominance，大多在一行之中由深蓝或白色转为金色。
色彩
- 纸白
#FFFFFF纹理章节和蓝底文字 - 深海蓝
#002B64页首、页脚和位置章节 - 古铜金
#BE8C5B方块、表格和按钮 - 浅桃色
#FFD9AF设施标题栏的文字 - WhatsApp 绿
#25D366只用在 WhatsApp 按钮
绿色是整幅画之外唯一的颜色，只用在 WhatsApp 按钮上，所以在任何一章都很容易找到。
字体
Shuttle Service to CIQ and RTS
Marcellus · 菜单、按钮与方块标签Nestled along the enchanting shoreline of Danga Bay, Johor Bahru.
Raleway · 正文与表格笔刷毛边
首页的照片没有笔直的边。每一张都裁成笔刷扫过的形状，大楼和设施就像直接画在纸上，而不是放进方框里。
细节
要点放在金色方块上，配柔和的阴影，在蓝色颜料底上很醒目。距离线上也用同样的方块，放大之后放着 Calia 的标志。
节奏
- 开场
- 地址
- 概念
- 要点
- 设施
- 位置
- 联络
- 页脚
蓝色和纸色一路交替，多数转换由波浪线相接。到了位置章节，一颗深蓝色的星随着滑动变大，铺满屏幕。上方色条就是真实的首页，按实际比例画成。
逐章导览
从第一笔颜料看到最后的表格。
请您从颜料开场一路看到表格。亮起来的地方是重点，旁边写着这样安排的原因。
第一眼看到的是颜料
金蓝颜料在循环视频里流动。一张半透明的白色卡片放着标志和一句话：Luxury Living Made Flexible（大意：灵活自在的奢华生活）。
用意 大楼还没出现，气氛已经定下来。有这张卡片，画面再怎么流动，名字也读得清楚。
名字就在大楼旁边解释
两座大楼以笔刷毛边的样子出现，旁边是一段关于 Kallos 的短文。
用意 图片和字义并排，访客看一眼就明白颜料风格从何而来。
三个词说清计划的主张
Connectivity、Community、Comfort（交通、社区、舒适）各配一张毛边照片和一小段文字。中间一栏略低一些。
用意 三个词容易记住。高低错落的排法，也让这一章有别于常见的三张并排卡片。
八个方块出现后页面停一停
方块逐一出现：接驳车、GreenRE Gold 认证、电动车充电、保安系统、屋型等。之后这组方块停在原位，纸色章节从下方滑上来盖过。
用意 买家比较发展计划时，看的就是这几项。停这一下，这些要点能在屏幕上多留一会儿。
长长的设施清单分成五组
设施分在五条深蓝色标题栏之下，从 Community Hub 到 Kids’ Corner，每组各有一份简短清单。
用意 分了组，一家大小可以看这一栏，在家工作的人可以看那一栏，不必读完整份清单。
每个地点都写明距离
五个分页列出 24 个地点和距离，旁边是 Google 地图。下方一条虚线，从 Calia 连到六个地点。
用意 写明地点和距离，比一句“交通方便”更能让买家心里有数。
最后是一张简短的表格
姓名、电话、电邮，再加一个同意条款和 PDPA 声明的勾选框，金色区块旁边是大楼的夜景。
用意 还在比较的访客只需填三项，销售团队也拿到了回电所需的资料。
一张卡片，一句话大楼与名字并排三个词，三张照片八个方块停在原位
五个分组分页、地图和距离线只填三项
手机版
在手机上打开也是先看到画。
颜料开场、笔刷毛边和波浪线，手机上全都保留。方块和距离线这些较宽的部分，则按窄屏重新排过。
- 白色卡片依然居中，衬在颜料之上
- 八个方块改为两栏
- 距离线在地图下方分成两行
幕后功夫
这幅画背后还有很多功夫。
首页定下气氛，其余页面交代细节，买家要查的资料和销售团队要用的联络方式都在这些页面上。
屋型图则
独立页面用分页展示 Type A 至 Type D，并写明面积、房间和浴室数目。
360 度导览
主菜单设有 VR Tour 页面，访客动身之前可以先在网上四处看看。
设施图
设施图按大楼和楼层分开，买家看得到每项设施的位置。
获批广告资料
页脚链接到 APDL 页面，列明执照、准证、地契、批准和竣工资料。
为 Google 而设
每个页面都有自己的标题，并以 Google 读得懂的格式说明页面和机构资料。
多种方式联络销售团队
主要页面都以同一张表格收尾，WhatsApp 按钮始终留在屏幕上。Contact Us 页面还写明 PGB Experience Gallery 的地址，并附地图。
- 1
了解您的业务
Calia 代表什么，为谁而建，自住买家和投资者各要核对哪些资料。
- 2
文案撰写
先写首页的简短章节，再写屋型、设施、位置和广告资料等独立页面。
- 3
设计与开发
先定颜料、纸张、笔刷毛边和波浪线，再逐章做手机版和电脑版。
- 4
SEO 与上线
为全站设好页面标题和 Google 所需的资料，然后上线，并提供后续支援。
常见问题
您可能想问。
您的发展计划名字也有来历吗？欢迎 WhatsApp Ricky（+6011-1142 1029）详谈。
Potadot 为 Calia Residences 做了什么？
我们定下颜料的构思，撰写文案，设计页面并开发网站，包括屋型、设施、位置、图库、360 度导览和获批广告资料等页面，也完成了 SEO 设定。
为什么用颜料开场，而不用大楼的照片？
这个名字源自希腊文的“美”，大楼效果图很难说明这层意思。以颜料开场，先把构思交代清楚，网站也有了自己的面貌。往下滑几下，大楼就出现了。
这类网站的法定广告资料放在哪里？
这些资料有独立的 APDL 页面，从页脚就能打开。颜料页面保持清爽，执照、准证和批准资料也很容易找到。
我的发展计划也能这样做吗？
可以。我们从您的计划名字、位置和买家出发，构思是您自己的，样子也各有不同。不妨把您的发展计划告诉我们，我们再给您具体建议。
