自主概念设计 · 艺术工作坊网站
JUST BE 马湾艺术文化工作坊
面向香港马湾艺术工作坊的三语概念网站,结合马湾本地特色、课程介绍、团体咨询和随鼠标移动显示图片的互动,引导访客了解课程并发起预约咨询。
这是自主制作、概念设计或界面练习,展示可查看的设计与实现;并非客户委托成果,未提供客户营收或转化成效证明。

项目拆解
从页面结构,到实际画面。
ZequnWeb 自主作品,非客户委托;Demo 中的品牌、评价与数据属于展示内容,不代表已核实的客户成果。
完整网站与手机画面
英文 Demo 的桌面与手机长图会自动从顶部展示到底部。可暂停后手动滚动、从头重播,或打开原图。
01 / 页面架构
访客的信息浏览路径
- 01马湾介绍
- 02工作坊课程
- 03团体体验
- 04品牌故事
- 05预约咨询
02 / 视觉设计
地点影像与游标图片揭示互动表达艺术工作坊的个性,课程分类与团体信息让氛围进一步转为可浏览的选择。
03 / 响应式取舍
手机端以可见图像和课程信息承担叙事,直接咨询入口不依赖鼠标悬停操作。
依据现有实现整理的设计分析,不将其表述为客户调研或用户测试记录。
具体实现
技术栈
- Vanilla JavaScript
- Cloudflare Pages
仅列出现有项目记录或公开脚本可支持的技术;内容架构与 UX 在上方单独说明。
自主概念设计
交付内容与项目结果
概念重点
这个概念展示什么
概念背景
这是为香港马湾本地艺术文化工作坊构思的网站提案,受众包括个人、亲子家庭、学校和企业团队。
改变了什么
页面从普通课程陈列转向具有地点感的品牌体验,并将课程探索、团体查询与即时通讯入口组织成清晰路径。
设计与实现重点
- 繁体中文与英文可即时切换
- 四类工作坊和团体体验紧接首屏呈现
- WhatsApp 咨询入口在桌面与移动端保持可见
- 随鼠标移动显示图片的互动增强品牌辨识度
项目问题
艺术工作坊需要同时呈现空间气氛、课程选择和团体活动能力,并让亲子、学校与企业访客快速找到适合自己的咨询入口。
解决方案
网站以马湾的岛屿氛围为视觉线索,结合课程分类、团体体验、三语切换、WhatsApp 咨询和随鼠标移动显示图片的互动,让浏览过程更有特色。
交付内容
- 三语艺术工作坊品牌首页
- 课程与团体体验展示
- WhatsApp 预约咨询路径
- 游标图片揭示互动
技术栈
- 单页静态网站
- 响应式 CSS
- 原生 JavaScript
- Canvas 互动
业务价值
这个项目说明什么
项目把艺术工作坊的现场气氛、课程内容和商业咨询动作整合到同一体验中,既保留创意个性,也方便访客采取下一步行动。
从这里开始
想把这个方向做成真实网站?
发我你的公司类型、现有网站或参考网站、目标客户和预算范围。我会先帮你收窄合适范围。


