尧图网站设计 尧图网站设计YAOTU DESIGN
CASE · PORTFOLIO

作品集网站案例解析

设计师作品集怎么做才不抢戏?用极简版式和克制动效,让作品本身成为主角。

设计师作品集网站设计案例
旧作品集满屏花哨样式盖过作品 背景 · 版式抢戏

BACKGROUND

作品集做成了"个人秀",作品反而被淹没

这位独立设计师的旧作品集网站很"努力":首屏是渐变背景加打字机动画的自我介绍,每个项目卡片都配了视差和悬浮特效,导航是定制的异形按钮,配色用了高饱和的撞色。技术很炫,但访客反馈一致——"看完记不住你做过什么"。

问题本质是版式在抢戏。当背景、动效、配色都在"表演",作品图就被挤成了配角。设计师的作品集,主角应该是作品本身,任何让访客分心于作品的元素都是噪音。我们的任务是做减法:把版式退到背后,让作品重新成为唯一焦点。

  • 首屏打字机动画与渐变背景抢夺注意力
  • 项目卡片视差悬浮特效,盖过作品图本身
  • 高饱和撞色,访客记不住作品只记住"花"
极简版式大图陈列作品 决策 · 极简陈列

MINIMAL APPROACH

用减法,把舞台让给作品

新版我们砍掉了所有装饰性动效,首屏只留一张代表作大图和一句设计师定位。项目展示改成"大图陈列式":每个项目占满一屏宽度,作品图占七成版面,文字描述压到最小字号贴在侧边。访客向下滚动的过程,就是一页一页翻看作品的过程,没有任何东西打断这条主线。

配色从高饱和撞色改成奶白底配单一深灰文字,唯一保留的彩色来自作品图本身。这意味着每张作品图决定了当前屏幕的"色调",设计师的风格反而通过作品自然流露,而不是被网站强加。滚动叙事用了克制的渐入动效——只在作品进入视口时淡入一次,不重复、不悬浮、不视差。

  • 首屏只留代表作大图 + 一句定位,砍掉装饰动效
  • 项目大图陈列,作品图占七成版面,文字退到侧边
  • 奶白底 + 深灰文字,唯一彩色来自作品本身
CORE POINTS

四大 设计要点

作品集的高级感,来自对"不做什么"的清醒。

极简版式

去掉所有装饰性动效与撞色,版式只做"画框",让作品图成为唯一视觉焦点。

大图陈列

每个项目占满一屏,作品图占七成版面,文字描述压到最小贴边,作品自己说话。

克制配色

奶白底配深灰文字,唯一彩色来自作品本身,色调随作品自然流转,不被网站强加。

滚动叙事

向下滚动即翻阅作品,仅在进入视口时淡入一次,不重复不视差,节奏安静克制。

PROCESS

项目 实施流程

从梳理作品到上线,四步把作品集做"安静"。

01

梳理作品

从设计师历年项目里挑出 8 个最能代表风格的代表作,按时间倒序排列。

02

提炼定位

用一句话概括设计师的核心风格,作为首屏唯一的文字信息。

03

大图重排

项目页改成大图陈列式,作品图占七成版面,文字退到侧边最小字号。

04

克制上线

只保留视口淡入动效,砍掉视差与悬浮,奶白底深灰文字定稿。

PROJECT METRICS

上线三月,访客反馈

新版上线三个月后的关键指标,来自站点统计与设计师客户咨询记录。

0 作品页停留时长提升
0 访客记住风格的耗时
0 月均主动咨询增长
0 装饰性动效保留
MORE CASES

相关 案例解析

看看其他行业的网站,怎么用版式解决各自的问题。

想要一个同样出彩的作品集?

免费沟通需求,48 小时内出具定制方案。