Maria Vasilyeva Portfolio

这是一位设计师的个人作品集，要做的事是把十一件作品摆出来，并让人记住做这些作品的人。Maria Vasilyeva 在 FWA 的介绍里写，这个站的灵感来自音乐和声音，每张图是一个音符，每件作品是旋律的一段。站上没有一个地方停下来解释这套比喻，比喻本身就是界面，页面上的名字、按钮和过场，几乎都借自乐谱和播放器。

一块黑底的开场画面最先出现在首页上，LOADING THE PLAYLIST、FINDING THE RIGHT TUNE、BE READY TO HIT PLAY 这几行字一个字母一个字母地打出来，重复三遍，像一份正在加载的播放列表。开场画面退开之后，首页是一张浅色的谱面，中间那条谱线上排着一长串作品缩略图。访客滚动鼠标，播放头就沿着谱面往前走，屏幕下方随之显示当前作品的编号和名字，旁边是一个 View project 的入口。这串作品一共九件，滚到尽头会接回第一件，一直循环下去。

首页之外还有几个页面，入口都在菜单里。NOTES 就是首页的精选作品，MELODY 是全部十一件作品的列表，OVERTURE 是关于页，JAZZ 链接到这位设计师在 Substack 上写的随笔。每件作品都有一页长长的案例，写着设计师在项目里的角色、合作的人、客户是谁，再往下是大量的网页截图和实拍照片，末尾一行大字写着 LET'S COMPOSE A BEAUTIFUL MELODY TOGETHER。关于页介绍了 Maria Vasilyeva 的兴趣和经历，这位设计师在 Bakken & Bæck、Klarna、Fjord 和 Darwinex 都工作过。

这套比喻的另一半，是铺在整个站上的一层手写批注。页面上到处有手写的字和线，开场的 Scroll 外面画了一个圈，View project 上方写着 More details，还拉了一条箭头指过去。右侧竖着的栏里有两个开关，SOUND 管声音，ANNOTATIONS 管这层手写批注。批注默认是开着的，声音默认是关着的。

整个站的界面只有两种颜色，一种接近黑色，一种接近白色，所有的色彩都来自作品图。浅色的谱面占了大部分页面，左右两边各竖着一条黑色的窄栏，左边写着 Maria Vasilyeva 的名字和 VISUAL & INTERACTIVE DESIGNER，右边是 MENU 和两个开关，字都转了九十度竖着排。访客打开菜单时，整页会反过来，变成黑底白字。

Maria Vasilyeva 把字体分成三层，每一层只管一件事。作品名、菜单里的四个词和关于页的大句子用一款笔画对比很强的衬线体，排得很紧，字号可以大到占去屏幕三分之一的宽度。按钮、编号、竖栏里的字和正文用一款很小的等宽字体，像乐谱上的标注和播放器上的读数。第三层是手写体，只出现在批注里，划掉、圈起、补写和箭头都用它。三层字放在一起，读起来像一份印好的乐谱上被人用笔写满了字。

版面上的规矩，几乎都来自那几条谱线。首页的七条横线等距排开，把屏幕分成几行，作品带就压在正中那一条上。MELODY 页把十一件作品排成十一行，每一行是一条轨道，作品图沿着轨道一张接一张，右边标着它的编号。一根播放头同样竖着穿过所有的轨道，看起来很像音乐软件里多轨编辑的界面。这几条线也归批注那一层管，访客关掉批注，谱线随之消失，页面只剩作品图和小字。

作品图在首页上大多是一小段一小段的短片，网页截图、产品渲染和实拍照片混在一起，尺寸和比例各不相同。播放头扫过时，这些图从谱线上弹起来，叠成一个没有对齐的图团，有的压住了作品名，有的被别的图挡住一半。这种不对齐和谱线的整齐正好相反，一件作品在首页上停留的那几秒，看起来像一个刚被按响的和弦。

到了案例页，版面换成了另一种节奏。页面变成一条往下走的长卷，大图一张接一张，中间夹着用等宽字体写的项目说明，手写的 Scroll for more 和 Details 也跟着出现在页面上。

首页上最主要的动作，是那根播放头扫过谱面。访客每滚一下，整条作品带就往左移一段。播放头扫到的那件作品会把它的图从谱线上弹出来，散成一团，扫过去之后再落回谱线上，下一件作品接着弹起。首页这一段持续滚动时稳定在每秒 60 帧，几乎没有卡顿。

声音是这套动效的另一半，只是要访客自己打开。打开 SOUND 之后，播放头每扫过一张缩略图，或者光标划过一张，就会响一个大约五分之一秒的短音。访客连着滚动，这些短音就连成一串，像在弹一段旋律。光标停在菜单的某个词上，会放出一段十几秒长的音乐。

开场和换页都借用了播放器的样子。开场那几行字打完之后，屏幕下方升起一排高低不齐的白色竖条，像音乐播放器上跳动的音量柱，竖条一路涨到顶，把首页露出来。菜单打开时，整页先翻成黑底，四个大词和上面的手写乱线才出现。这些动画对系统里的减少动态效果设置没有任何反应，打开它之后，开场的打字、音量柱、作品图的弹起和散开都照常播放。

这个站没有用现成的网页框架，整套界面由一个自己写的脚本驱动，画面画在一块铺满屏幕的 WebGL 画布上，作品内容来自内容管理系统 Sanity。大号的衬线字也是在画布上画的，站点为此把这款字做成了一套专门给显卡画字用的字形数据。页面里另外留了一份看不见的文字副本，读屏软件读到的作品名和菜单都来自这份副本。

首次打开首页要下载约 4.9 MB，滚完一整圈作品之后约 6 MB。最大的两个文件是那两套画字用的字形数据，合起来约 0.76 MB。作品图是几十段很小的短片，平均每段不到 100 KB，滚到哪件作品才下载哪件的。站点还在打开首页时就把所有页面的内容一并取了回来，所以访客换页时不用再等。

打开速度本身很快，服务器在 30 毫秒以内就开始返回页面，屏幕上第一次出现东西只要 0.3 秒左右，远好于 0.8 秒和 1.8 秒的常用标准。不过访客先看到的是开场那几行字，首页要到大约 5 秒才完全露出来。画面在加载时几乎不跳，布局位移只有 0.03，低于 Google 建议的 0.1。

用键盘浏览的访客几乎没法使用这个站。站点拦下了每一次 Tab 键，焦点始终停在页面本身，按多少下都不会落到任何一个链接或按钮上，首页和案例页都是这样，而样式表里明明写好了焦点框。读屏软件这边，首页那串缩略图里有九个链接没有名字，SOUND 和 ANNOTATIONS 两组开关的按钮都只叫 ON 和 OFF，听的人分不清是在开哪一个。页面上也没有一级标题，读屏软件的用户没法直接跳到这一页的主题上。

这个站上还有两处看起来没有做完的页面。菜单里的 Get in touch 通向联系页，可那一页除了左右两条竖栏之外什么都没有，联系方式只能到关于页或案例页的末尾去找。另有一个叫 tile-demo 的测试页面也上了线，菜单里没有入口，但地址能直接打开，页面上只有一行 HOVER A TILE TO EXPAND IT 和一排彩色的方块。

Creativity 是这个站在 Awwwards 拿分最高的一项，得了 7.56，Usability 最低，只有 7.02。创意分高，和这个站把乐谱、播放器和手写批注三样东西一路贯彻到底有关，几乎每一个界面名都在接这套比喻。可用性分最低，可能是因为整个站要先读懂这套比喻才好用，键盘又完全进不去。开发奖的评委给了 7.33 分，不算响应式那一项，动画最高，得了 8.0。无障碍最低，只有 6.4，正好对上前面说的 Tab 键和没有名字的链接。FWA 早在 2026 年 8 月 26 日就把当日站给了这个站，给了 85 分。

Awwwards 和 FWA 的战绩都算到写报告时为止，这个站是 Maria Vasilyeva 自己的作品集，也是 Maria Vasilyeva 在两个平台上拿到的第一个奖。Surya Aditya 是两个平台上的常客，在 Awwwards 列出的十件作品里有八件拿过当日站。