跳到主要内容

LUMEN — 设计与艺术指导工作室

设计与艺术指导工作室

一家艺术指导工作室的网站:六件作品以索引而非网格呈现,先讲方法再讲服务,且没有一张被裁切的图。

2026-05
  • UI/UX 设计
  • 网页艺术指导
  • 前端开发
  • 动效设计
Next.jsTypeScriptTailwind CSSGSAPVercel
LUMEN — 设计与艺术指导工作室 预览
  1. 01

    六件作品以索引呈现,指针移到标题上才显出图像

  2. 02

    工作方法排在服务之前

  3. 03

    没有一张图被裁切:每一幅视觉都保留原始比例

需求

一家靠眼光吃饭的艺术指导工作室。在这个行当里,网站不是销售材料:它是作品集的第一件作品。它若平庸,就把所有说辞一并抵消。

工作室宣称四个领域——识别、艺术指导、动态与声音、交互网页——以及六件作品。风险在于把这一切堆在一起。

约束

  • 网站先于作品被评判。 版式上一处笨拙,访客就不会再点开任何东西。
  • 六件作品,四门学科:足以让一个首页饱和。
  • 任何图像都不得裁切:对艺术指导而言,被破坏的画幅是职业过失。

决策

做索引,不做画廊。

六件作品是一份列表,而不是缩略图网格。承重的是标题,图像在悬停时才显现。访客先在名字之间穿行——Halo、Terrain Vague、Onde、Sédiment、Cinabre、Veine——然后再选。六张图的网格会同时抛来六个决定;一份列表一次只抛一个。

方法排在服务之前。

页面先说工作室怎么做,再说它卖什么。在创意服务里,方法就是产品:买下一套识别系统的客户,买的其实是一种做判断的方式。四个领域随后出现,作为结果。

把约束当作材料展示。

工作室的说法是:约束成就作品。网站把这句话演了出来——只有一个字体家族,视觉之外没有任何强调色,只有一种栏宽。网站自己证明了它所宣称的论点。

结果

一个由四段构成的首页——主张、作品、方法、服务——以及六个一步即达的案例。没有一张图被裁切:每一幅视觉都以原始比例呈现。

如果重做

项目的发现完全压在悬停上。而移动端没有悬停——索引在那里退化成一串没有图的标题。我会先做触屏版本,每个项目给一张看得见的图版,再把悬停留作桌面端的精修。

PULSE