网站设计与开发 · 由 VJO 设计开发
住宅开发与建筑公司官网
墨尔本一家住宅开发与建筑公司的英文官网，设六个页面，采用全黑影院式视觉。网站由 VJO 设计开发，现已上线。客户名称与网址不公开。
实际项目版式，客户名称不公开
项目要求
- 01
网站只设英文版，读者是持有地块、考虑开发的业主，以及需要委托项目管理的业主与合作方。
- 02
内容只讲公司与作品。不列个人信息、项目地址与项目数量，地点只写 Melbourne。
- 03
视觉为全黑影院式：黑底配古铜色，标题用衬线字体，正文用无衬线字体。
- 04
照片取自项目实景与效果图。外景门牌须作模糊处理，效果图须标明 Architectural visualisation。
实施方法
- 01
结构与内容。首页、服务、项目、关于、联系、隐私共六页，另设 404 页。内容以 Markdown 撰写，由一个构建脚本生成整站。
- 02
工程。零依赖静态站：不使用 npm 包，前端资源不经外部 CDN 加载，不设第三方统计脚本，字体由本站托管。
- 03
发布。资源文件名带内容指纹，静态资源长期缓存，HTML 每次使用前重新验证。每次发布先在预览环境核验，再正式部署，必要时可恢复先前版本。
- 04
质量门槛。部署前自动检查禁用词、死链、图片替代文字、内联样式、首屏资源体积与色彩对比度。任何一项未通过，即不部署。
- 05
照片。从专业营销原图中挑选，统一处理为 WebP 格式。外景门牌与信箱号作局部模糊，效果图标注 Architectural visualisation。
- 06
动效。首屏的建筑线框随滚动与指针缓缓变化，细线节点在指针周围浮现。系统设为减少动态效果、未启用 JavaScript 或使用触屏设备时，显示静态版本。
- 07
托管。部署于 Cloudflare Pages，配置安全响应头与内容安全策略。
交付内容
- 已上线的英文官网，共六页。
- 构建脚本与发布脚本：生成整站，管理预览、正式部署与版本恢复，每项一条命令。
- 质量门槛脚本，每次发布前自动运行。
- 处理完毕的图库，以及选图、模糊与标注的规则。
- 首屏动效，附静态版本。