The Design Society

The Design Society 是 2025 年在里昂成立的设计师社团，五个人发起，办两种活动，讲座和酒会。讲座请本地设计师讲一个题目，Hugo Douchet 讲工具对创作的影响，Salomé Millet 讲艺术指导，Julien Combaz 讲用户研究，酒会没有议程，来了就聊。报名走 Eventbrite，站上只放介绍和链接。站是法语的，没有第二种语言。

一个社团站通常会把自己写得很正经，使命、愿景、加入我们。这个站选了相反的路，把自己写成一个秘密社团，然后从头到尾拆自己的台。首屏的标题是里昂看守得最松的秘密社团，标题上下两行括号里的小字写着入会条件是会呼吸，以及可以现场培训。活动区的标题说我们在秘密地点办秘密活动，地址在 Eventbrite 上。成员区说给你们看我们的脸，但在街上别认出我们。关于页给自己贴了四个标签，分级可疑、密码 1234、泄密风险高、匿名失败。联系页的跑马灯写着我们真的读邮件，周日也读，48 小时内回复，偶尔 49。切到别的标签页，浏览器标签上的标题会变成一句法语的你回来啊。

这套自嘲有一个视觉上的对应物，就是那台电视。整站不是直接画在屏幕上，而是隔着一层显像管玻璃看，像一段九十年代的录像。秘密社团、老电视、像素画，三样东西拼成一个完整的调子，一群设计师在装模作样地搞神秘，而且明知道你看得出来。

内容只有四页。首页是标题、一段宣言、下一场讲座、五位成员和页脚。活动页是下一场酒会和一张四行的活动表。关于页是合影和一段介绍。联系页只有一屏，一个邮箱和一条跑马灯。全站文字不到一千个词，撑起它的是每一处交互都在延续那个玩笑。

最见功夫的是那五层电视效果，它让一个普通的 Webflow 版面变成了一段有材质的画面。五个固定层叠在所有内容之上，都不接受点击。第一层是扫描线，每 3 像素一条 1 像素的黑线，18% 的不透明度。第二层是颗粒，一张 SVG 湍流噪点以 5% 的不透明度铺满，每 0.4 秒换一次位置，所以画面一直在轻微地沙沙响。第三层是玻璃反光，左上角一块 5% 的白色径向高光。第四层是暗角，四角压暗 35%。第五层是机壳，两圈内阴影，60 像素和 160 像素，把屏幕边缘收进去。这五个数值都写成了 CSS 变量，一处改，整站的电视新旧程度跟着变。

颜色是四个。底色是很浅的灰紫，rgb(235, 237, 245)，墨色是近黑的 rgb(30, 30, 30)，电光蓝 rgb(53, 10, 255) 和酸性绿 rgb(188, 240, 21) 是两个品牌色。蓝色用来做整段的底，宣言段、页脚和联系页整页都是蓝的，绿色只做小面积，标签、按钮上的圆形箭头、菜单里的眼睛卡片和选中文字的底色。页面在灰紫和蓝之间来回切换，首屏灰紫，宣言蓝，活动和成员灰紫，页脚蓝，每一次切换都是一次章节的断句。

字体有四套，各管一件事。FK Raster Roman Compact 是一款像素化的衬线体，只做最大的字，首屏标题和讲座标题 125 到 132 像素，联系页的 Pssst 115 像素，它带着锯齿的边缘是这个站最容易记住的形状。KH Teka 是一款干净的无衬线，做 57 到 71 像素的章节标题和宣言，关于页放到 140 像素。KH Interference 做全部小字，14 像素的正文和 11 到 12 像素的全大写标签，那些标签几乎都套着方括号，像终端里的提示。第四款 Geist Pixel Line 只出现一次，页脚底部三个 768 像素高的字母 D、S 和版权符号，大到只剩几条横线，读起来像一组条形码。

界面元素全部按老操作系统的样子画。导航是屏幕顶端一个带标志的小窗，点开是一个居中的对话框，有关闭按钮，页面在它后面压暗。页脚里的两个链接组各自装在一个可以拖动的小窗里，标题栏右边有一个加号。标志上的那只眼睛会跟着光标转，最多偏移 15 像素。像素画贴纸散在各处，首屏标题里嵌着火焰、塔可和一小张人群照片，成员的头像上压着心、啤酒杯、票根，这些贴纸每 12 秒在绿和蓝之间换一次颜色。

图像只有一种，活动现场的照片，讲座里的听众、举着话筒的讲者、酒会上的人群，原片，不调色。五位成员的肖像有两个版本，一张照片和一张对应的像素小人，像素版只在悬停时出现。

拿掉电视效果和像素字，剩下的是一个排得很规矩的社团站，标题、段落、卡片、按钮，一样都不少。它的想法不在版面结构里，在那层玻璃和那些玩笑里。

首屏的动作跟着光标走。光标每移动 240 像素，就从活动照片和贴纸里取一张，在光标的位置弹出来，弹性放大 0.6 秒，然后顺着光标的方向滑出去，距离是光标位移的四倍，带一点随机的旋转，1.5 秒后缩小消失。快速划一下能同时甩出四五张，它们向四面八方散开，像从桌上扫落的一叠照片。

宣言段是整站唯一被钉住的画面。蓝色的整屏钉在原地 3780 像素的滚动距离，51 个词一个接一个从屏幕右侧飞进来，每个词间隔 0.02 秒，缓动 power4.inOut，滚动进度直接驱动，往回滚就往回飞。滚到一半时，前半句已经排好，后半句还散在半空，每个词之间隔着大段空白。

活动区的照片是一个三格轮播，当前一格 1283 像素宽，另外两格各 275 像素，每 6 秒换一格，下方一条进度线走满就切，点任何一格也能切。照片进入视野时不是淡入，而是一张网格的方块随机地一格一格消失，露出下面的图，像老电视换台。章节标题一行一行从遮罩里推上来。

成员区是一条自动漂移的横条，五张卡片复制成十张首尾相接。光标停在一张上，照片上层出现这个人的像素小人版本，移开就回到照片。

换页是像素化的。点菜单里的链接，屏幕被 72 个蓝色方块按随机顺序盖住，12 列 6 行，用时 0.3 秒，盖满之后换页，再按随机顺序一格一格消失，整个过程 1.6 秒，期间导航小窗里走一条绿色的进度线。

页脚的两个小窗可以拖，按下去放大 5%、随机转 1 度、带上投影，松手停在原地，拖不出页脚的范围。跑马灯是纯 CSS 的位移动画，一圈 52 秒。三个 768 像素的大字母随滚动轻微变形。所有方括号里的链接悬停时字母会乱码一遍再复原，用的是 GSAP 的 ScrambleText。

这是一个没有画布的站。电视效果、像素换页、光标甩图、拖动的小窗，全部是 DOM、CSS 和 SVG，一个 canvas 都没有。Webflow 出版面，动效是一份 38 KB 的自定义脚本，通过 Slater 注入，里面是三十个各管一件事的初始化函数，加载器、导航、光标拖尾、宣言、轮播、成员条、像素换页、拖动贴纸、乱码文字。库是 GSAP 3.15 全家，ScrollTrigger、SplitText、ScrambleText、Draggable、InertiaPlugin、Observer 和 CustomEase，滚动是 Lenis 1.3.17，lerp 0.05，换页是 barba 2.10.3，另外还有 Webflow 自带的 jQuery。

因为没有画布，滚动很轻。首页 29 个滚动触发器里只有宣言那一个钉住，整页从头滚到底稳在 60 帧，最慢的一帧 27 毫秒。首字节 84 到 177 毫秒，首次内容绘制 350 到 480 毫秒，最大内容绘制 650 到 880 毫秒，布局位移 0.0066。加载完之前有一个标志的加载动画，大约 4 秒才放行。

体积出在图片上。首页 15 MB，其中 14.5 MB 是 PNG，五位成员的肖像每张 1.8 到 2.1 MB，像素版本每张 0.3 到 0.4 MB，全站没有一张 WebP 或 AVIF，讲座的照片也是 PNG。关于页再加 15 MB，活动页的一张主图 2.7 MB。四个字体文件一共 173 KB，其中 KH Interference 和 KH Teka 用的是文件名带 TRIAL 的试用版。

无障碍上漏得比较多。页面没有声明语言，读屏器会用默认语言念法语。首页、关于页和联系页一个标题元素都没有，所有标题是 div。47 张图全部是空的 alt，包括五位成员的肖像和讲座照片。导航按钮没有名字。做对的是键盘上 Escape 能关菜单，减弱动画的设置下换页改成淡入淡出，颗粒停止抖动，图片的像素揭示取消，不过光标拖尾和宣言的词还是照样动。

The FWA 给了 82 分，用了 14 天。奖项页上的团队自述只有一段，五个设计师发起，办讲座分享知识，办酒会忘掉知识，目标是创造原本缺少的见面机会，把这个行当聚起来。这段话和站上的语气完全一致，它本身就是那种自嘲。

Benjamin Nespoulous 一个人做了整个站，这是他的第一个 FWA。Awwwards 上他有两个提交，一个是活动创建工具 Shotai，一个是自己的作品集，各拿了一个荣誉提名。社团的五位成员都是设计师，站上写明了各自的分工，主席兼 AI 设计负责人 Samuel Boulery，财务兼首席设计师 Floriane Julliard，传播 Daniela Moncada 和 Léa Maurin，合作伙伴 Loïc Pelletier，署名里没有他们，站的设计和实现是 Nespoulous 一个人的。