让访客看到现场
重型钢铁工程很难单凭服务清单判断。访客要从大幅照片和视频里看到人、机器和产品。
Synchong Hoe Engineering制造业 · 钢铁加工网站
网站的入口是一个齿轮。
这是槟城钢铁加工公司 Synchong Hoe Engineering 的网站，公司创立于 1982 年。往下滑，标志里的齿轮慢慢打开，带访客从竣工的管道走进厂房。
概要
Synchong Hoe Engineering Sdn. Bhd.（SCHE）是槟城的钢铁加工公司，自 1982 年起生产碳钢和不锈钢产品。Potadot 为这家公司设计并开发网站，全站围绕一个动作：页面从竣工的管道开始，标志里的红色齿轮慢慢放大，直到焊工占满屏幕。接下来访客都在厂房里，依次看到公司数字、产品、工序、市场和认证。最后一张照片穿过一排大钢环，望向外面的厂区。
客户
这家槟城钢铁加工公司从 1982 年做到今天。
Synchong Hoe Engineering Sdn. Bhd. 为马来西亚的供水与污水处理行业供应钢铁产品，也服务其他行业。公司以碳钢和不锈钢为主要材料，厂区位于威省，面积超过 28,000 平方米。
产品包括机械接头、法兰转接头、压力容器、热交换器和工艺管道撬装系统。网站列出 12 个市场，近至马来西亚和新加坡，远至美国、尼日利亚和澳洲。
- 1982
- 创立年份
- 100+
- 员工
- 1,000+
- 已完成工程
- 28,000+
- 平方米厂区
客户所托
买家要亲眼看到厂房。
买钢铁产品，看的是信任和规格。买家拿起电话之前，网站就要把厂房、产品和文件都摆出来。
把七类产品理清楚
从接头到压力容器，七类产品都要放进首页，同时不能变成一张长长的清单。
资质放在容易核对的地方
采购团队一定会核对 ISO 9001、认证标志和公司注册号码，所以这些资料要放在清楚的位置。
让海外买家也看得明白
公司的市场遍及海外。网站要一眼交代这一点，也要给海外买家可以转发的文件。
设计概念
齿轮就是走进厂房的门。
四十多年的经验，说出来容易，让人看到却不容易。Synchong Hoe 的标志里有一个齿轮，我们就把齿轮做成入口。页面从户外的竣工工程开始，齿轮打开之后，访客已经站在厂房里，眼前是一位正在工作的焊工。往下滑，圆形的钢材不断出现，最后一张照片穿过一排大钢环，望回外面的厂区。
浏览路线
-
1
竣工工程
一条输水管道沿着河岸延伸。
-
2
齿轮
齿轮放大，焊工占满屏幕。
-
3
实绩
三个数字在红色横幅上往上跳。
-
4
产品
七类产品横向滑过。
-
5
厂内
六道工序，每道一段视频。
-
6
回到户外
穿过大钢环望向厂区，再按 Contact Us。
灵感从何而来
标志
红色齿轮，中间是深蓝色的公司缩写。整页的两种主色由此而来，齿轮本身也成了开场的入口。
产品
管道、法兰和钢环都是圆的，所以页面上重要的形状也用圆形：齿轮、焊工身后的管口、六个工序按钮，还有跟着鼠标走的红圈。
切口
切割是网站列出的第一道工序，排在弯曲和卷板之前。页头、数字横幅和联络区的照片都以一道斜边收尾，边上留一条白线，看起来就像钢板上利落的切口。
设计风格
红色和深蓝在斜线上相接。
风格硬朗直接：红与深蓝两种主色，标题用最粗的 Lato 字体，再配上真实钢材的大幅照片。
色彩
- 白色
#FFFFFF工序、地图、联络资料 - 浅钢灰
#E6EBF0产品、Why Us、Our Clients - 深蓝
#0F4271页头、标题、卡片、联络区 - 黑色
#000000About 章节，围绕焊接照片 - 红色
#BE1717标志底板、数字横幅、按钮
两种主色都取自标志。资料都用深蓝来写，公司名称、数字和下一步用红色标出。
字体
Create Growth To Our Community Through Steel
Lato · 最大标题Your Reliable Partner for Metal Solutions
Lato · 章节标题We are capable of conducting CNC Laser & Plasma Cutting, Rolling & Forming, CNC Lathe & Machining, Drilling, Welding.
Lato · 正文齿轮
标志里的齿轮以红色嵌在开场画面上。齿轮里面是焊工的视频，所以访客还没往下滑，标志已经是一扇窗。
细节
四张 Why Us 卡片红蓝相间，底下隐约透出钢材的照片。鼠标移上去，简短的说明就出现在彩色边框里。
节奏
- 开场
- 数字
- 关于
- 产品
- 工序
- Why Us
- 市场
- 伙伴
- 客户
- 洽谈
- 资料
深色章节放照片和视频，浅色章节用来阅读和核对。色条按静止时的高度画成。开场和产品两章实际上看得更久，因为页面会先停住，让动画走完。
逐章导览
从河边一路走进厂房。
采购人员会从河边的管道一路看到公司文件，请您照这个次序看一遍。亮起来的地方是重点，旁边写着用意。
竣工的管道最先出场
页面打开，是一条沿着河岸延伸的输水管道。标题在左下方，红色齿轮在角落。
用意 买家还没读文字，已经看到工程的规模；角落的齿轮也让人想知道后面还有什么。
齿轮慢慢打开
往下滑，齿轮越变越大，河景渐渐淡去。齿轮里的焊工一直在工作，直到视频占满屏幕。
用意 整个构思都在这一步。标志从一个徽章变成了走进厂房的入口。
红色斜边横幅上的三个数字
红色横幅从视频上升起，1982、100+ 和 1,000+ 在横幅到位时往上跳。
用意 公司做了多久、有多少人、完成过多少工程，是买家核对新供应商时很快就会看的几项。
七类产品横向滑过
页面停住，产品照片跟着往下滑的动作横向移动。鼠标移到照片上，深蓝色块就显示产品名称。
用意 每件产品都有大幅照片，七类产品又只占一个章节。
每道工序都有一段视频
厂区面积旁边有六个圆形按钮：Cutting、Bending、Rolling、Welding、Painting、Machining。鼠标移上去，按钮变红并出现播放图示；按下去，那道工序的视频就打开。
用意 机器清单谁都能写。机器开动的视频摆在眼前，买家看了才踏实。
一张地图标出十二个市场
深蓝色世界地图上，每个市场都有一个红点，从美国、尼日利亚到澳洲，大多数红点集中在东南亚一带。
用意 国家名单要读者自己去想象，地图一眼就看得出市场有多广。
采购要的文件都在电话号码旁边
公司名称和注册号码下面是六个认证标志，以及公司简介和产品目录两个 PDF 按钮。电话、传真、电邮、办公时间和地图放在旁边两栏。
用意 采购团队把新供应商列入名单时，通常都要这些资料。有了 PDF，一位同事也能轻松转给下一位。
管道、标题、齿轮标志变成一扇窗到位时数字往上跳鼠标移上去看名称每个按钮打开一段视频
每个市场一个红点
买家要存档的资料
手机版
手机上看到的是同一个故事。
齿轮、横向滑动的产品和圆形按钮，手机版一样都在。不同的是每一章的排法。
- 三个数字叠在同一个深蓝色块里，外加红色边框
- 六个工序按钮排成两列，每列三个
- 认证标志、两个 PDF 按钮和联络资料排成一列往下看
幕后功夫
齿轮之外的功夫。
齿轮最抢眼。访客和公司办公室用得顺手，靠的是这些细节。
每一屏都有 WhatsApp
绿色按钮一路留在角落，按下去就打开对话，第一句讯息已经写好。
Google 读得懂的资料
页面以 Google 能读取的格式写明公司名称、地址和联络方式。
随时可转发的文件
公司简介和产品目录都有 PDF，需要转给同事时按一下就拿到。
手机上直接拨号
办公室号码是电话链接，访客用手机可以在网站上直接拨打。
两家公司并列
Synchong Hoe Engineering 和 Synchong Hoe Piping 并排出现，各有自己的标志和电邮。
其他页面都备好了
About Us、Product、Project、Career 和 Contact Us 在首页之外各有独立页面。
- 1
了解您的业务
这家公司做什么、卖给谁、买家联络之前要看到什么。
- 2
文案撰写
把公司的故事、数字、产品和工序分成章节，顺序跟着买家的问题走。
- 3
设计与开发
整个设计围绕齿轮打开和斜边切口，每一章都分别排好电脑版和手机版。
- 4
SEO 与上线
网页标题以 Steel Fabrication Malaysia 开头，网页描述和公司资料也在上线前设好，方便 Google 读取。
常见问题
您可能想问。
经营工厂或加工厂？欢迎 WhatsApp Ricky（+6011-1142 1029）详谈。
Potadot 为 Synchong Hoe Engineering 做了什么？
我们定下构思，设计网站，并用 WordPress 和 Elementor 开发完成，包括滑动动画、工序视频、WhatsApp 按钮和 SEO 设定。
为什么开场放管道，而不是厂房？
网站把这张照片写明为装有 SCHE 机械接头的输水管道，让人一眼看到产品用在哪里。从户外开始，走进厂房这一步也看得更清楚。
手机上也看得到齿轮吗？
看得到。齿轮、焊接视频和横向滑动的产品，手机上都照常运作，每一章也按手机屏幕重新排过。
我的工厂也能这样做吗？
可以。每个网站都从客户自己的生意出发，您的网站会有自己的构思，来自您的标志、产品和买家。不妨告诉我们您做什么产品，我们再给您具体建议。
