Elespacio

Elespacio 是一家做了二十多年的代理公司，办公室在巴塞罗那和柏林，客户名单里有 Nespresso、Victorinox、Google、Zalando 和 Desigual。这一版官网推销的是他们自造的一个词，Brandformance，由品牌（brand）和效果广告（performance）拼成。效果广告指按点击和转化来算账的投放，通常和做品牌形象的团队分开干。首页第一句就把这层意思说白了，Most agencies split the space between brand and performance. Elespacio closes it。意思是别的代理公司把品牌和效果分成两摊，Elespacio 用一个团队、一份简报把两件事一起做。站上还介绍了两样东西，一是他们命名为 REEAL 的工作方法，以五周为一轮冲刺，二是他们对 AI 的立场，研究、审计、初稿和优化这些重活交给 AI，思考仍然归人。

整个站是这家公司的自我陈述，而不是一本作品集。首页七个段落里只有一段讲案例，而且是借客户之口讲的，Nespresso 的媒介经理说和 Elespacio 合作从来不用操心，Victorinox 的用户体验负责人说电商转化率和收入都涨了。完整的案例放在单独的一页，一共七个项目，每个项目的标题就是它的成绩，Victorinox 的电商销售涨了百分之二十，Cricut 在德国的广告回报率达到 521%，Ismax 的社交互动涨了五倍。访客点进任何一个项目，看到的都是一整页竖着排下来的图片。Nespresso 那一篇一万多像素高，放了 35 张图，正文只有八十来个英文词。

Agency 页介绍团队的办法，是把 18 个人的名字连成一句话，We are Agnes, Ahmed, Ali，一直到 Yuri。光标停在哪个名字上，那个人的照片就从名字上方弹出来。名字下面是五条工作原则，每一条配一张抠出轮廓的实物照片，一支网球拍接住一颗球，一只插满罂粟花的旱冰鞋，一捆扎成炸药模样的萨拉米香肠。再往下是一份奖项清单，一共 16 个行业奖，其中 Awwwards 五次，CSS Awards 三次，Webby、Lovies、FWA 和 Laus 各一次。联系页上没有表单，只有四个按钮，分别是开始一个项目、加入团队、邮箱电话和媒体询问。真正的表单在 Start a project 那一页，粉红底，用 Mailchimp 收集，一共十三个字段，其中预算分四档，从还不确定到一万五千欧以上。

全站的底色只有两个，近黑 rgb(32, 30, 31) 和米白 rgb(244, 239, 232)，文字也只用这两个颜色。其余的颜色全部落在贴纸和卡片上，一共六种，粉 rgb(255, 171, 200)、橙红 rgb(252, 65, 9)、土黄 rgb(166, 115, 37)、蓝 rgb(93, 157, 197)、淡紫 rgb(231, 191, 255) 和墨绿 rgb(28, 61, 36)。每种颜色都是一整块实心的色面，没有渐变，也没有半透明。粉色留给页脚和主按钮，橙红留给开场那张卡和邮箱按钮，其余四种在贴纸、服务卡和客户证言卡之间轮换。

六张贴纸的形状、颜色和倾斜的角度各不相同。Home 是一张 96 乘 154 像素的黑色竖卡，描着一圈细线，往右歪三度。Case Studies 是土黄色，左边两个角的圆角半径是 8 像素，右边两个是 20 像素，歪一度。Services 是一枚两头全圆的蓝色胶囊，往左歪一度。Insights 是墨绿色，四个角都是 8 像素的小圆角，歪三度。About 那张是淡紫色的，四个角的圆角半径都是 16 像素。Contact 是橙红色的胶囊，也是六张里唯一放正的一张。光标停到任何一张上，它都会往下长高 12 像素，看上去像鼓了起来。当前所在那一页的贴纸会胀得更大，在案例页，Case Studies 胀成一块 150 像素见方的土黄方牌，在联系页，Contact 拉成一根 148 像素高的橙色长条，在 Agency 页，About 下面展开 Agency 和 Approach 两张小贴纸。进入单个案例的详情页后，整摞贴纸收起来，右上角只留一个关闭用的叉。

全站只用一款字，Bricolage Grotesque，层级全靠两个字重来分。细体用来排所有的大话，首屏那句宣言是 72 像素，字母间距收紧到负 2.16 像素，客户名单是 64 像素，页脚那句 The space for Brandformance 也是细体。粗体用来排卡片标题、章节标题和贴纸上的字，分别是 44、36 和 16 像素。细体和粗体这两个字重，各自是一个 48 KB 的 TTF 字体文件。全站没有第二款字，没有全大写的标题，也没有斜体。

图片只用一种拍法，一件实物放在纯色背景上，没有人像特写，也没有场景照。一只戴红色乳胶手套的手臂在弯起肌肉，一块蜡封的萨拉米香肠被扎成炸药捆，还有一串齿轮、一只蜥蜴、一沓印着 REEAL 字样的面包片，以及一个穿蓝色睡衣、长着马头的人在跑。这些实物都被抠出轮廓，四周留白，颜色饱和，看上去和导航一样像一枚枚贴纸。全站的圆角也从同一套刻度里取，8、16、24、48 像素和两头全圆的胶囊，按钮、卡片、图片框和输入框共用这一套。

整个版面从头到尾只有一列，左边留给贴纸导航，内容排在右边那一整列里。每个章节的标题前面都有一个箭头，写着 What we can do for you、We partnered with、Trusted by the finest、Industry insights 这样的小号粗体字，下面才是大字。客户名单没有放一个标志，而是把十四个客户的名字用逗号连成一段 64 像素的细体文字。页脚是一整块粉红，城市名、地址、邮箱和电话各做成一个胶囊按钮，社交链接是两个黑色的圆。

首页打开时，屏幕上最先出现的是一张橙红色的卡片。这张卡片顶着一条粉色的标签从左边滑进来，上面是四行粗体字，We built Elespacio for what brands need next。它停两三秒后换成一张粉色的卡，写着 An agency for braver ideas and accelerated growth，然后两张卡退开，露出首屏的视频。这段视频托管在 Vimeo 上，静音循环播放，1574 乘 886 像素，内容是一叠彩色卡片轮流翻上来，Nespresso 那张是紫底配咖啡胶囊，Victorinox 那张是米白底配一把瑞士军刀，最后一张是那只戴红手套的手臂，配着一句 Elespacio. The space for Brandformance。翻卡的动作全部拍在视频里，页面本身的代码不参与。

Lenis 接管了滚动，这是一个平滑滚动库，滚轮停下后页面还会顺着惯性往前滑一小段再停稳。首页的服务那一章做成了一组叠起来的卡片。左边一栏在滚动时固定不动，椭圆框里的马头人一直在跑。右边的四张卡片一张接一张从下面升上来，盖住前一张，每张都在顶上露出一条自己的颜色，四张叠完，顶边就是四条彩色的标签，依次是蓝、橙、粉、土黄，整个叠卡的过程要滚动 2,607 像素。卡片靠 CSS 的粘性定位 position: sticky 自己停在原处，位置不用 JavaScript 去算。

除了开场卡片和服务叠卡，页面上其余的动作都很小。客户证言是用轮播库 Swiper 做的走马灯，一共十四张卡，两侧各有一个箭头按钮，点一下往前走三张，用鼠标拖不动。行业洞察那一段有三张卡片，光标停上去，图片框从方角变成一个 80 像素圆角的大椭圆，框里那只弯起的手臂看起来像被装进了一枚贴纸。光标本身换成了三个 SVG 图标，平时是箭头，停在链接上是手形，停在文字上是竖线，都是用 CSS 的 cursor 属性直接指定的。页面没有另做一个跟在光标后面的圆点，光标也不会放大或变色。

访客点贴纸换页时，整个页面会重新加载，中间没有过场动画。在案例列表页，光标停到一张卡片上，卡片的四角会变圆，正中浮出一枚写着项目名的胶囊。

站点搭在 Webflow 上，但动效代码不是 Webflow 生成的。首页底部有一段内联脚本，它从 Webflow 的文件存储里下载一个后缀是 .txt 的文件，285 KB，先当普通文本读进来，再在浏览器内存里包装成一个临时文件（Blob），最后当作 JavaScript 模块运行。这个文件其实是用构建工具 Vite 打包出来的一整份脚本，文件名里带着日期 10-09-26，里面装着 GSAP、ScrollTrigger、SplitText、Flip、Lenis 1.3.21、Swiper 和 Lottie 这些动画和交互库。Webflow 的文件库不接受 JavaScript 文件，把后缀改成 .txt 再在浏览器里还原，是把自己打包的代码带进 Webflow 的一种办法。

首页第一次打开要下载 3.3 MB，共 39 个请求。其中 2.5 MB 是马头人那段 WebM 视频，720 乘 720 像素，11 秒一循环，一个视频就占了四分之三。自家的脚本压缩后是 96 KB，Webflow 自己的脚本 57 KB，jQuery 3.5 是 31 KB，两个字体文件加起来也是 96 KB。Google Tag Manager 却分两个文件拉了 339 KB，再加上 LinkedIn 的追踪像素和 Google Ads 的转化脚本，统计和广告追踪的代码是自家脚本的三倍多。访客把整页滚到底时，总下载量会到 4.0 MB，多出来的主要是一张 544 KB 的 REEAL 文章配图。案例页和 Agency 页各自在 1.1 到 3.1 MB 之间。

加载时间上，服务器要 107 到 231 毫秒返回第一个字节，屏幕上第一次画出内容（FCP）是在 556 到 720 毫秒，整页加载完要 1.7 到 2.1 秒。首页在加载过程中没有任何东西跳位置，布局位移（CLS）是零。内页更快，第一个字节 35 到 64 毫秒就到，第一次画出内容在 224 到 288 毫秒。只有案例列表页的布局位移达到 0.41，远高于 Google 建议的 0.1 上限，原因是七张卡片在图片到达前后换了位置。整页连续滚动保持每秒 60 帧，没有一帧超过 18 毫秒。

有几处麻烦会落到读屏软件和键盘用户头上。页面只标了主体 main 和页脚 footer 两个地标区域，贴纸导航没有放进 nav 标签，读屏用户没法一键跳到导航。页面倒是正确声明了语言是英文，读屏软件会按英文发音来读。37 个可以操作的控件里，有两个没有可读出的名字，就是证言走马灯的两个箭头。首页 31 张图片的替代文字全部留空，读屏软件会把它们都当装饰跳过。键盘焦点框是 2 像素的实线，看得清楚，但第一次按 Tab，焦点就进了首屏的 Vimeo 视频播放器，屏幕上看不出它去了哪。标题层级从 H1 直接跳到 H3，中间少了一级。样式表里没有为系统的减少动态效果设置写任何规则。脚本倒是读了这个设置，但只用它停掉马头人那段视频，开场的卡片和带惯性的滚动都照旧。

Elespacio 在 FWA 的主页上介绍自己是一家专注网页体验和广告战役的数字创意代理公司，这个站是它拿到的第二个 FWA。在 Awwwards 上它有 10 件作品，拿过 5 个当日站和 8 个荣誉提名。其中三个当日站给的是它自己官网的前三个版本，分别在 2014 年、2016 年和 2021 年，2021 年那一版得了 7.34 分。这一版官网的署名只有公司名，没有个人。Agency 页虽然列出了 18 个人的名字，但没有写每个人的职务。