页面本身要干净利落
供应商服务的是受控环境，网站杂乱就会让人起疑。这个页面要让人感到用心、有条理。
STMT工业供应 · 公司网站
供应商的网站也要像无尘室一样整洁。
这是槟城贸易公司 STMT 的网站。STMT 向制造商供应无尘室用品和工业五金。在无尘室里，任何东西都要有理由才能带进去，这个页面也守同一条规矩。
概要
STMT 的公司全名是 Sit Tha Mat Thu Sdn. Bhd.，这家槟城的五金贸易公司为北马制造商供应无尘室用品和工业五金。Potadot 为 STMT 设计并开发英文网站。首页照无尘室的规矩来安排：头尾各一张照片，中间七个章节共用同一片淡色底，红色是唯一的记号。章节顺序跟着制造商审核新供应商的步骤：您是谁、供应什么、为什么选您、有什么认证、懂不懂我的行业、有谁背书、该怎样联络。
客户
这家槟城贸易公司兼顾无尘室和厂房的需要。
Sit Tha Mat Thu Sdn. Bhd.，简称 STMT，是设在槟城北海的五金贸易公司。客户包括北马各地的本地制造商和跨国企业，团队本身出身制造业。
产品从无尘布、口罩、手套，到紧固件、感应器和检测工具，也包括定制工程零件。网站列出的经验涵盖半导体、医疗器材、制药和电子业，展示的品牌包括 3M、Ansell、Bosch 和 Mitutoyo。
- 9
- 首页列出的产品类别
- 12
- 服务的行业
- 18
- 首页展示的品牌
- 5
- 客户评语，以职位署名
客户所托
首页要先通过供应商审核这一关。
没有人会一时兴起买无尘布。采购或工程团队要知道供应商有什么货，放在受控的生产环境里靠不靠得住。在对方拿起电话之前，网站要先回答这些问题。
产品范围要集中摆出来
STMT 的卖点是货品一次配齐，从口罩、紧固件到量具都有。访客不必打开菜单，在首页的一个章节里就看得到。
不同部门都看得明白
网站上的评语来自工程、制造、采购和营运部门的人员。页面要让这些读者都看得明白。
把证明摆在明处
认证、行业、客户评语和品牌名称，都是审核新供应商时要看的。每一项都要有自己的章节，不能只在段落里带过。
设计概念
进无尘室的东西都要有理由。
无尘室讲究管控：什么能进去都有规定，每样东西都有固定的位置。STMT 在无尘室工作的客户天天守着这条规矩，我们就用同一条规矩来安排页面：同一片淡色底，一种颜色做记号，每个产品类别一张卡片。凡是帮不上买家审核供应商的，一律留在门外。
浏览路线
-
1
进门
戴手套的手、无尘布和电路板。
-
2
供应
九大产品类别，每类一张卡片。
-
3
查验
三个理由，接着是 ISO 章节。
-
4
对口
十二个行业，排成一组可滑动的图片卡。
-
5
核实
客户评语和十八个品牌标志。
-
6
联络
电话、电邮、营业时间和地址。
灵感从何而来
无尘室
无尘室明亮、整齐，色调偏白。所以每个章节都铺在带一点蓝的近白底色上，章节之间没有色块。
标志
粗重的红色 STMT，下面是黑色的公司名称。这个红色是设计上唯一的浓烈颜色，用在按钮、图标和标题的关键字上。
买家
章节顺序来自制造商审核新供应商的步骤：您是谁、供应什么、为什么选您、有没有认证、懂不懂我的行业、有谁背书、该联络谁。
设计风格
淡色取自无尘室，红色专做记号。
页面以近白底色和炭灰文字为主。每个标题的关键字、图标和按钮都用红色标出。
色彩
- 淡冰蓝
#F8FEFF每个章节的底色 - 白色
#FFFFFF卡片和品牌方格 - 炭灰
#3A3A3A标题和内文 - STMT 红
#E70013按钮、图标和标题关键字
在两张照片之间的章节里，红色只占画面不到 2%。正因为用得少，才特别醒目。页面上的蓝色来自两张照片，并非版面配色。
字体
Cleanroom Supply Solutions
Inter · 标题和卡片名称Trusted by Manufacturers Across Northern Malaysia
Montserrat · 客户评语的标题和版权行Consumables such as wipers, masks, gloves, and other controlled environment supplies for manufacturing.
Inter · 内文和按钮戴手套的手
蓝手套擦拭电路板，访客还没读到文字，就知道这是无尘室和电子业。同样的蓝色在最后一张照片再次出现，页面一头一尾用的是同一种蓝。
细节
每个产品类别都用同样的白色卡片：红色线条图标、粗体名称和一句简介。买家先看图标，产品范围一眼就看清。
节奏
- 进门
- 简介
- 供应
- 理由
- ISO
- 行业
- 评语
- 品牌
- 联络
- 页脚
上方的色条就是真实页面，按比例绘制。长页面通常靠色块交替来分段，这一页把七个章节都放在同一片底色上，头尾两张照片就像进出的门。
逐章导览
买家会这样逐章看下去。
请照采购人员的顺序把页面看一遍。框起来的是重点，说明写着为什么这样安排。
开场画面说清楚做什么生意
整个画面是一张照片：戴手套的手在擦拭电路板，上面写着 Cleanroom Products Supplier in Penang, Malaysia（大意：马来西亚槟城无尘室用品供应商），下方是一句简介和一个红色按钮。
用意 还没往下滑，访客已经知道产品、地点和下一步。网页标题的开头也几乎是同样的字眼，搜索结果和页面说的是同一件事。
九大类别用同一种卡片
Cleanroom Products 和 ESD 排在标题旁边，接着是 Fasteners、Custom Engineered、Safety & PPE、MROP、Abrasive、Automation 和 Testing & Measurement，卡片样式全部相同。
用意 “什么都有”说来容易。九张整齐的卡片让买家几秒内看清，想了解更多，View Catalog 按钮就在旁边。
全页只有这里用红框
三个选择 STMT 的理由：团队出身制造业、协助挑选合适的产品、品质优先。整页只有这三张卡片加了红色边框。
用意 产品卡片让人快速浏览，这三张要细读，所以样子不同。
认证有自己的章节
ISO Certified Cleanroom Products 写成大标题，下面是 Indico 系列的大横幅，展示无尘布、手套、口罩和无尘衣。
用意 行业要求严格的买家很早就会找这一项。写成一整个章节，比段落里的一句话更不容易漏看。
十二个行业排成一组图片卡
每次显示四张图片卡，十二个圆点代表列出的十二个行业，从食品饮料到汽车业。
用意 制造商想看到自己的行业被列出来。图片卡比一行文字更容易找到。
十八个品牌各占一格
十八个品牌标志排成三行，每行六个，各占一个白色方格，包括 3M、Ansell、Bosch、Festo、Mitutoyo、Panasonic 等。
用意 这些标志各有自己的颜色，买家也早就认识这些名字。方格大小一致，整面标志墙依然整齐。
一个按钮加上全部联络方式
第二张照片为页面收尾，上面只放一个 Contact Us 按钮。下方页脚列出电话、电邮、营业时间和地址。
用意 审核到最后只剩一个问题：该找谁？答案全放在同一处。
产品、地点、一个按钮产品范围集中在一章红色边框
标题和横幅十二个行业十八个品牌该找谁
手机版
手机版一样井然有序。
在手机上，页面变长了，一样整齐。章节顺序不变，产品卡片和品牌方格改用较少的列数。
- 菜单收进一个按钮，页头固定在最上方
- 产品卡片排成单列，图标在上
- 品牌方格改成每行两个
幕后功夫
页面的整齐来自这些幕后安排。
这些安排看起来简单，却让买家找得到 STMT，进来后也不迷路。
买家搜产品就找得到
网页标题和主标题都写明无尘室用品供应商和所在地点。
Google 读得懂
结构化资料向 Google 说明公司、网站和网页路径。
产品目录放在菜单里
主菜单的 Catalog 下列出六个产品类别，每类都有自己的页面。
页头一直都在
往下滑时菜单固定在顶部，在照片上是透明的，到了淡色章节变成白底。
按一下就能拨打
电话号码是链接，买家在手机上按一下就能打到公司。
用 WordPress 开发
网站用 WordPress 和 Elementor 开发，日后要加新页面，不必重做网站。
- 1
了解您的业务
STMT 供应什么，哪些行业在买，采购团队采用新供应商之前要查什么。
- 2
文案撰写
把产品整理成清楚的类别，再围绕买家会问的问题写首页。
- 3
设计与开发
先定淡色底、红色记号和一种卡片样式，再把九大产品类别和十八个品牌标志调整到手机版和电脑版。
- 4
SEO 与上线
网页标题围绕无尘室用品和槟城来写，加上结构化资料，把产品目录接进菜单，然后上线。
常见问题
您可能想问。
您的客户也是制造商？欢迎 WhatsApp Ricky（+6011-1142 1029）详谈。
Potadot 为 STMT 做了什么？
我们构思概念、整理文案、设计页面、开发英文网站，并围绕 STMT 供应的产品做好 SEO 设定。
为什么全页只用一片淡色底和一种记号颜色？
STMT 的无尘室客户在受控环境里工作，整齐的页面很适合他们，买家也能很快找到产品、证明和电话。
为什么把九大产品类别放在首页？
因为货品齐全是 STMT 最重要的一点。买家一看就知道 STMT 合不合适，想看详情，按一下就能打开产品目录。
您能为我的公司做类似的网站吗？
可以。每个网站都从客户自己的业务和买家出发，各有各的概念。告诉我们您供应什么、买家是谁，我们再跟您说明会怎样做。
