Gil Huybrecht

Gil Huybrecht 是比利时 Bornem 的自由设计师和艺术指导，做编辑式排版的网站、电商和沉浸式体验。这一版个人站放的是 19 个项目，从 2018 年到 2026 年，客户里有 Sotheby's、Loop Earplugs、纽约两栋住宅楼 53 West 53 和 111 West 57th Street、比利时护肤品牌 Ray、品牌公司 Motto 和创意公司 DoThings。他只做设计，每个项目的开发另有其人，项目页的 Dev 一行里逐个写着名字。

作品集通常要在两件事里选一件，要么把每个案例做成一页故事，要么做一张缩略图墙让人自己点。这个站两件都做了，用的是同一批图。首页是一张网格，每个项目的截图连成一段，占几格算几格，Studio DADO 四格，Vucko 六格，格子右上角标着这是这个项目的第几张。点任何一格，那张图就从格子里飞出来撑满右边九栏，左边留四栏黑底放一句简介、开发者、客户、年份和一个去看现场的链接。右边那一列是这个项目的全部图片和视频，八到二十五张，一张接一张往下排，滚到底再从头接上。

第二种看法叫 Gallery，左下角切换，同样的 19 个项目每个只留一张，大小从三栏到八栏不等，散着往下走。第三个入口是 Profile，五段自我介绍用 84 像素的字排成整屏，旁边悬着几张倾斜的项目截图。

右下角还有一个开关，Normal 和 Star Wars。切过去之后整站重新加载成星战版，所有文字改成黄色，背景是星空，光标是光剑，进门有主题曲，格子被光剑照到会泛蓝光。这一版没有新增任何内容，它是给同一批作品换了一套气氛，一个设计师拿自己的站开的玩笑。

功夫在克制上。全站只有一种字体 Lay Grotesk，只用 Medium 一个字重，正常页面上每一个字都是 20 像素，页眉、项目名、序号、页脚、项目简介、开发者姓名，没有一处放大或缩小。层级不靠字号也不靠字重，靠位置和留白。页眉分四栏，名字、档期、服务、荣誉各占一栏，下面空出 200 多像素才开始放图。

版面是 14 栏，每栏 118 像素，栏距 16.8 像素。作品格子一律占两栏，253 像素宽，高度跟着截图的比例走，一行七格，行与行之间空 75 像素，所以每一行的下缘都是参差的，像一排贴在墙上的样张。项目名只出现在这个项目的第一格，后面的格子只有序号，读者靠序号知道自己还在同一个项目里。19 个项目连成 12 行，首页不到六屏就结束。

颜色是黑底白字，白字有两级，主要文字全白，次要的开关和链接四成白。整站没有第三个颜色，除了 Star Wars 那一版，那里全部文字换成一个黄，rgb(255, 232, 31)，光剑是蓝的，只有这两种颜色出现在星空上。

图像只有一种，全部是他做过的网站的截图，首屏、内页、长图，原样放上来，不加边框、不加阴影、不调色。每一格就是那个站在一个浏览器窗口里的样子，整张网格读起来像 84 个浏览器窗口平铺在一面黑墙上。视频也是截屏录像，静音循环，84 格里有 9 格在动。

Profile 页是另一套尺度。五段话每段以一个小标签开头，1. Profile、2. Approach、3. Info，正文 84 像素，行高只有字号的 0.9 倍，字距收紧 1.68 像素，首行缩进五栏。同样的字体在首页是 20 像素的标注，在这里变成整屏的宣言，两页之间没有中间尺寸。段落旁边悬着一张倾斜的项目截图，随着滚动缓缓转动，是这个站里唯一带透视的画面。

把 Star Wars 拿掉，剩下的是一张很讲究的网格，格式统一、字号统一、留白慷慨，是一个教编辑式排版的人会做的作品集。它的想法不在版面上，在那个开关里。

主效果是格子飞出来变成大图。点一格之后，那张图从 253 像素宽的位置出发，沿一条弧线抬起来，带着透视倾斜飞向右边的大框，落地时刚好 1207 像素宽，用时半秒多一点，缓动是 power3.inOut。同一时间网格隐去，左栏的文字从下方推上来。回去的时候反过来，大图缩回原来那一格。图片自始至终是同一张贴图，只是换了一个矩形。

进到项目里之后，滚轮推的不是页面，是右边那一列图。页面本身被锁住，那一列在一个整屏高的裁切框里往上走，走出上缘的图被接到队尾，所以往下滚永远滚不到头。光标停在左栏的黑底上会跟着一个 Back 的标签，点一下就回网格。

网格上的悬停是把别人压暗。光标落在哪个项目上，其余 18 个项目的格子连同项目名和序号一起在 0.2 秒内降到两成不透明度，当前项目保持全白。Gallery 视图里悬停一张卡片，卡片里的图会飞出来散成它在网格视图里的那几格，摆在页面顶端，原位只剩一个一像素的白框，光标移开再飞回去。

Star Wars 模式是另一套动效。切换会整站重载，加载数字变黄，加载完是一片星空，光标变成光剑，旁边一行黄字 Click to enter。点下去响起光剑点燃的声音和主题曲，页眉和网格淡入，格子的贴图会随光剑的位置泛起一圈蓝光，离得越近越亮，每次点击都有一声光剑碰撞声。

这套模式里藏着一个没有任何提示的动作。在 Profile 页按住键盘上的 F，页面淡出，他写的五段自我介绍变成黄色斜体、从下往上向远处收窄的开场字幕，配一段专门的字幕音效，光标旁边一行小字写着 Release to go back，松开就回来。

页面上没有一张 img。84 张截图和 9 段视频全部画在一块铺满视口的 WebGL 画布上，three.js r185 驱动，DOM 里只有 84 个空的 article 占位，写着项目名、序号和一个比例值，画布按这些占位的位置和大小去贴图。所以悬停压暗、飞出放大、星空、光剑的蓝光，都是改一块贴图的参数，版面本身不动。

贴图用的是 KTX2 格式，Basis ETC1S 压缩，每张 1500 乘 1000，自带 11 级 mipmap，首页 110 张一共 19 MB，浏览器里用一个 226 KB 的 wasm 转码器解成显卡直接吃的格式，显存里存的就是压缩纹理。这换来的是滚动时只有 14 次绘制调用、1 万 4 千个三角形，整页从头滚到底稳在 60 帧。

首屏要付出的是体积。冷加载 46 MB，19 MB 是贴图，24 MB 是 Mux 托管的 9 段视频，加载数字从 0 走到 100 要 1.5 到 3 秒，页面在 2.6 到 4.2 秒之间解锁。解锁之前的指标很好，首字节 230 到 290 毫秒，首次内容绘制 280 到 340 毫秒，最大内容绘制 1.7 到 1.8 秒，布局位移 0.005。切到 Star Wars 会再下载 4 MB 的音频。

框架是 Nuxt 加 Tailwind，内容来自 DatoCMS，滚动是 Lenis，lerp 0.15，滚轮倍率 1.25，由 GSAP 3.11 的 ticker 驱动。项目页可以直接用地址访问，服务端会渲染出一个普通的长页面版本。

无障碍上有一个真正的问题。84 个格子都是没有链接的 article，键盘用户按 Tab 只能走到页眉的三个控件和页脚的七个链接，右下角的视图开关和任何一个项目都到不了，也就是说只用键盘的人打不开这个站的任何一件作品。页面声明了语言，地标齐全，控件都有名字，焦点框是白色的，但没有为减弱动画写过一条规则，星空和光剑在那个设置下照样跑。

Awwwards 的四维是 Design 7.93、Usability 7.33、Creativity 7.46、Content 7.92。Design 和 Content 高，Usability 最低，19 张评委票里大多数给的是 7 和 8，有一位给了 9.9、9.3、9.3、9.7。Usability 落后于其他三项，和键盘打不开作品、首屏要等几秒是对得上的。开发奖 7.4 里 Animations 一项 8.4，五位开发评委里有一位给了 10，Semantics 只有 6.6。The FWA 那边 83 分，三天拿到当日站。

两个人的分工很清楚。Gil Huybrecht 做设计，他在 Awwwards 的 15 个当日站全是编辑式排版的作品，这个站的网格、单一字号和 84 像素的宣言都是他一贯的做法。Jesper Landberg 做开发，FWA 上 40 次获奖，Awwwards 上 30 个当日站，档案自述是专注动效和精致数字体验的创意开发者，这个站里 The Lookback、53 West 53、DoThings 的开发也都是他。WebGL 贴图网格、飞出放大和整套 Star Wars 模式，是他的手艺。Gil 在 Profile 页里写自己开了一门叫 TIWD 的编辑式网页设计课，收了 400 多个学生，这个站本身就是那门课的样板。