先把结构想清楚
网站要回答谁、说什么、先看哪一块。我们先把信息结构和你真正要达成的目标排出来， 再谈视觉。
信息架构
内容规划
68
个上线项目
2019
年开始持续接单
9
人团队，无外包
96分
上线页均 Lighthouse 性能
我们怎么做
四个环节，一条线走完
常见的情况是：设计交一套漂亮稿子，开发照着做完发现有些效果根本落不了地， 上线后没人管。我们把设计、动效、代码和上线放在同一支手里，中间不转手。
设计要能落地
每一版界面都在真实断点上看过、在真实内容下排过。不给"填进去才发现放不下"的稿子。
界面设计
设计系统
动效是交互的一部分
滚动进场、状态切换、加载反馈 —— 我们做动效时会同时考虑它有没有在帮用户理解页面。
交互设计
动效实现
按标准写代码
语义化标签、可访问性、键盘可操作、真实断点测试。代码交给你的团队时是能读的，不是黑箱。
语义化
可访问性
性能是设计指标
首屏时间、图片策略、字体加载、缓存头。一个慢的漂亮网站，等于一个不好的网站。
核心指标
图片与字体
交付之后还有人管
上线不是结束。域名、证书、监控、备份、内容更新路径，我们一并交接清楚。
部署
维护交接
精选作品
最近交付的几个站
完整案例、过程记录和技术说明都在作品页。
品牌官网
源岭茶业 · 全站改版
从图文堆砌改成以区块叙事的产品官网，重排了信息层级，把冲泡方法做成了可交互的步骤条。
首屏 1.1s
转化 +34%
产品界面
北辰数据 · 控制台重构
重做了图表体系与筛选交互，把六个页面才能完成的操作收敛到一个工作台里。
点击 ↓41%
设计系统
动效实验
Scroll Motion 实验集
用 Canvas 与 CSS 做的滚动驱动动效合集，全部开源，附性能预算说明。
开源
60fps
好的网页设计是会被人忽略的 —— 访客只感觉到顺畅，不会停下来想"这里为什么这么排"。 我们的工作，就是让那份顺畅成立。— Motionweb Studio 的设计原则
有想法，或者只有一个模糊的方向？
两种情况都可以聊。第一次沟通不收费，我们会直接告诉你这件事值不值得做。