Superlocal

一个大会官网要解决的问题很具体：让人看清有谁来、什么时候、在哪、多少钱。这一支没有绕开这四件事，而是把它们做成了一张海报的尺度。

首屏是一朵花，五片米色花瓣裹着橙色的放射星芒和深棕色的花心，压在一整片钴蓝上，除此之外只有左上角的 superlocal 字标和左下角一行小字写着乌拉圭的国际设计大会。右下角一个白框按钮，写着预订活动。

往下是四个巨大的 S，深棕色的字压在四块不同底色上——橙、蓝、灰、米。同一个字母重复四次，靠底色区分，不靠字形。

日程那一段是全站信息密度最高的地方，也是这个站真正能用的部分。深棕底上，左边是日期 13-10、14-10 一路到 19-10，右边四栏依次是活动名、时间、讲者、场地。品牌策略课 16:00 由 Proyectario 在 Magma Futura 讲，色彩实验室 10:00 由 Floralla 在 La Hoguera 开。七天、几十场活动，一屏一天。

这张表值得学的是它的取舍。它没有做筛选器、没有做标签页、没有做日历视图，就是一张长表，从头滚到尾。对一个只办七天、条目不到一百条的会来说，任何交互都是多余的——读者要的是一次看完，而不是先学会怎么筛。

赞助方那一段同理，二十来个 logo 排成一张等宽网格，全部转成深棕色单色，米色底。全部统一成一个颜色之后，这一段读起来是一个整体，而不是二十个各自为政的品牌。

这套视觉的骨架是两个颜色加一款字。

字是 RST Reactor，一款乌拉圭本地的字体，由 Fernando Díaz 的 ResetType 设计，视觉识别出自 Gabriela Nisizaki 的 Redondo——这两件事写在团队自述里。站上 Regular 写了 5,724 个字符，字号从 10px 拉到 172px。Medium 只写了 149 个字符，而且全部锁死在 64px 这一档，说明它只干一件事。Inter 只有 62 个字符，全在 16px，是补位用的。

颜色的层级很清楚。深棕 #3D2800 和米色 #FFF7E3 是主对比，钴蓝 #1673FF 是首屏和几个强调块，黑色落在 1,045 个文字元素上。

有意思的是另一批颜色。背景色的清单里还夹着橙 #FFAE45、品红 #E045FF、浅青 #99EEFF、玫红 #D92BD9、蓝 #2266FF、柠檬绿 #D3FF21、粉 #FF219B、亮橙 #FF7B02 这八个，每一个只用在一到两个元素上。也就是说主色系之外还有一套一次性的高饱和色，专门用来点某一个具体的块。

这种做法在活动类的项目上很好用。主色负责让整套东西看起来是一件事，一次性色负责让每一个板块有自己的脸，两者不冲突是因为一次性色永远只占很小的面积。

整页 1,667 个元素，其中 14 个带圆角。页脚那些媒体名字是深棕色的药丸形状，是全站圆角最集中的地方。

页面里没有一个 canvas。所有那些大字、大色块、放射星芒，全部是 SVG 和 DOM，110 张图片里有 19 张是直接写在 HTML 里的 data URI。

这个站的动效少到可以逐条数完，而它恰恰因此值得写。

样式表里的 CSS 动画数是 0。整页跑下来，处于动画状态的元素一个都没有。所有的位移都由 Framer 的运动层用 transform 驱动，滚动交给 Lenis，实测 lerp 是 0.1。

结果是 15,553 像素、16.5 屏滚下来全程 60 帧，p95 帧耗时 18 毫秒，卡顿帧 0%，12 段分段帧率全部是 60。一个没有 canvas、没有 CSS 动画、只有 transform 的页面，浏览器几乎不需要重排任何东西。

顶部那两行错开的滚动文字，superlocal 和 sprlcl，是唯一持续在动的东西。它们速度不同、方向相同，靠这个速度差制造出一点层次。

要从这里学一条的话。动效的成本不在数量，在类型。一个把所有运动都收在 transform 和 opacity 里的站，哪怕十六屏也不会掉帧。换成一个动了几处宽高或者边距的站，三屏就可能开始抖。

减弱动画这边同样是空白，样式表里找不到一条 prefers-reduced-motion 规则。不过因为 CSS 动画本来就是零，把偏好打开之后页面的实际观感变化不大，真正在动的只有那两行滚动文字和 Lenis 的缓动。

站点自己的域名只负责发那份 60 KB 的 HTML 文档，其余 6.76 MB 全部来自 framerusercontent.com。这是 Framer 站的标准形态，图片会自动生成 srcset 和缩放参数，91 张外部图片全部带 srcset，25 张标了 lazy。

一次冷访问传了 6.83 MB，105 个文件。视频 4.64 MB，图片 1.65 MB，脚本 340 KB，字体 138 KB，文档 60 KB。

视频那 4.64 MB 里有一半是白扔的。页面上有两个 video 标签，src 指向同一个文件 21McwOzw74HKdNY8giMyq3mRj8U.mp4，两个都写了 autoplay 和 preload="auto"，于是这个 2.3 MB 的文件被完整下载了两遍——网络记录里能看到 2,321 KB 和 2,289 KB 两条独立的请求。

这一条对任何人都有用，而且很容易中招。同一个 URL 的视频，浏览器不会像图片那样在两个元素之间共享缓冲。两个 video 元素就是两条流。如果两处要放同一段画面，办法是只保留一个元素，用 CSS 把它定位到两处，或者退一步给第二个加上 preload="none"，等它真的进视口再取。

这段视频本身也值得看一眼。源是 1920×1080、4 秒，而页面上一个实例的显示尺寸是 649×652，另一个是 1921×1081。也就是说小的那个把一张 1080p 的素材塞进了三分之一的框里，多下载的像素全部被缩掉了。

第一个字节 268 毫秒到，首屏内容 536 毫秒画完，最大内容绘制 720 毫秒落在 H1 上，load 事件 877 毫秒，累计布局偏移 0，长任务 0 个，首次请求数 62 个。

这几个数字放在这份库里是第一梯队，而它们来自一个可视化工具的默认输出。静态 HTML、图片自动切分辨率、脚本走 ES module、没有第三方统计——这些是 Framer 替你做掉的事，不需要工程师逐条实现。

无障碍那一头就是另一回事了，而且缺的全是工具不会主动提醒的那几项。

html 元素上完全没有 lang 属性。这是一个整站西班牙语的页面，读屏器拿不到语言，会按浏览器默认的语音去念西班牙语，念出来的东西基本不能听。这一条只要在 Framer 的站点设置里填一次就好了。

整个文档没有一个地标元素，header、nav、main、footer 一个都没有，只有 2 个 section。读屏器的按区域跳转在这一页上完全失效，16.5 屏只能一路线性读下来。

样式表里焦点规则是 0 条，键盘用户在 13 个可聚焦元素之间移动时看不到自己在哪。

页脚那一栏叫 PRENSA 的媒体名字——Magazine Uy、La Diaria、Cuchara x Revista Materia、Rompe Paga、El Living，加上一个 SPRLCL——六个都画成了药丸形状的链接样子，但六个的 href 全是空的。没有 href 的 a 元素既不是链接也不可聚焦，键盘 Tab 直接跳过去，鼠标点下去也什么都不会发生。

做对的部分也要记：110 张图片全部带 alt 属性，其中 94 张写的是空字符串，而这 94 张实测下来全部是那些巨大的 S、色块和放射星芒之类的纯装饰图形，空 alt 正是它们该有的写法。标题层级也是完整的，H1 之后是 H2，日期那一层是 H3，没有跳级。

81 分，用了 13 天才拿到，两个数字都是这份库里 FWA 那边最低的一档。放在一堆满屏 WebGL 的获奖站里，这个分数说得通。它没有任何技术上的新东西，赢的是一整套扎实的平面设计被完整地搬上了网。

团队自述写得很坦白。他们说视觉识别来自 Gabriela Nisizaki 的 Redondo，字体来自 Fernando Díaz 的 ResetType，自己负责的是把这套识别变成最终的数字形态。把别人的那部分先说清楚，再说自己做了什么，这种写法在获奖自述里不多见。

只有一个署名。视觉识别和字体的作者写在自述里但没有列进署名栏，这是 FWA 的署名规则决定的——提交方只能是执行这个站的一方。

Awwwards 上没有这个站的条目。