今天的 #SOTD 是 Maria Vasilyeva 和 @sryaaditya_ 的“Maria Vasilyeva Portfolio”。
https://www.awwwards.com/sites/maria-vasilyeva-portfolio
受音乐和声音启发的互动设计师作品集。
恭喜！
Maria Vasilyeva Portfolio 获奖作品集，音乐驱动交互设计，Awwwards SOTD 案例解析
Maria Vasilyeva Portfolio 是一个受音乐与声音启发的互动设计师个人作品集网站，由设计师 Maria Vasilyeva 与开发者 Surya Aditya 合作完成，并获得了 Awwwards 2026 年 10 月 9 日的 Site of the Day（SOTD）奖项，综合评分 7.28/10。该网站将节奏、排版、布局、交互与动画融为一体，试图把听觉体验转译为可视化的浏览体验，让访客在滚动与悬停之间感受到类似音乐律动的节奏感。
整站采用极简的双色配色方案，仅使用 #131313 与 #F9F9F9 两种颜色，技术栈涉及 CSS、WebGL 与 Sanity，属于典型的创意型前端作品集。你可以在 Awwwards 项目页查看完整评审细节与元素拆解。
痛点是什么
对于设计师、创意开发者以及正在准备个人作品集的人来说，最大的困扰往往不是作品本身不够好，而是作品集网站千篇一律：模板化布局、雷同的滚动动效、缺乏记忆点的视觉语言，导致访客看完即忘。同时，很多人想做出有节奏感、有情绪表达的交互体验，却不知道从何下手，也找不到足够优秀的参考案例来拆解学习。Maria Vasilyeva Portfolio 正好提供了这样一个可被逐帧观察的样本，让创作者看到排版、动画与交互如何协同工作。
主要功能特点
该作品集围绕沉浸式浏览体验展开，把音乐与声音的抽象感受转化为具体的界面语言，主要亮点集中在交互、动效与视觉系统三个层面。
音乐驱动的交互设计
以节奏和声音为灵感，让浏览过程带有类似音乐律动的情绪起伏。
丰富的悬停与滚动动效
悬停效果、滚动动画与页面转场共同构成连贯的浏览节奏。
极简双色视觉系统
仅用深黑与近白两色，突出排版与内容本身的表达力。
为什么值得关注
它不只是一个获奖作品集，更是一份关于交互设计与前端动画如何结合的公开参考，对创意开发者和设计学习者都有实际借鉴价值。
获得 Awwwards SOTD 认可
在设计与可用性等维度获得专业评审打分，具备行业参考意义。
技术栈清晰可拆解
涉及 CSS、WebGL 与 Sanity，方便开发者研究其实现思路。
推荐信息
awwwards.
@awwwards 2026年10月13日 20:14
