designer-kb 作品集 · 012026.11

同一个知识库,三种做法Three directions.

三件作品分别选了知识库里差异最大的三个方向:一张讲秩序的展览海报、一页克制的产品落地页、一张吵闹的潮玩小红书封面。配色、字体和版式都按对应风格专题里的数值来做,没有凭感觉取色。

品牌都是虚构的,图形全部用 CSS 和 SVG 手绘,字体打包在本地,所以国内也能正常加载。

GRID / BREAK 海报缩略图
01
海报 / 活动主视觉

GRID / BREAK:第七届城市字体周

瑞士网格 × 实验字体(展览网格字体海报)

字体周的观众是设计师,最在乎“有秩序”和“有态度”这两件事。瑞士网格负责秩序:12 栏、左对齐、只用一个强调色。实验字体负责态度:BREAK 的最后两个字母冲出画面,正好呼应“先守住网格,再打破它”这个主题。

配色
#FFFFFF#000000#FF3B00
字体
Inter 900 / 500(拉丁)· 思源黑体 Heavy(“格律”)
参考
Tokyo TDC、Fonts In Use、Siteinspire(Grid Layout)
打开海报 →
Ambra Halo 落地页缩略图
02
产品落地页

Ambra Halo:会变色温的台灯

Bento 网格 × 苹果式精致质感(果味 Bento 功能页)

台灯的卖点很碎,有色温、显色、旋钮、专注模式、材质好几样。Bento 网格能把它们一屏讲完,每张卡只讲一件事。苹果式的留白和弹簧动效让整页显得贵、显得可信,适合千元价位的家居硬件。整页刻意不用深色背景和发光描边,避开“AI 味”模板。

配色
#F5F5F7#1D1D1F#6E6E73#E8892B
字体
SF Pro(苹果设备)→ Inter → 苹方 / 思源黑体
规格
4 栏网格,主卡 2×2;圆角 20px;内边距 24px;间距 16px;悬停上浮 2px
参考
Recent、Land-book、Apple Design Awards、60fps
打开落地页 →
胖星人小红书封面缩略图
03
小红书笔记封面 3:4

胖星人 Vol.3:充气潮玩开售

3D 材质 CGI × 高饱和极繁卡通(潮玩撞色 3D)

潮玩的受众年轻,小红书信息流里的竞争又激烈,封面要在第一眼就让人停下来。荧光撞色和夸张透视负责抓眼球。充气 3D 质感让人一看就知道这是“能摸的软胶”,直接把产品卖点画了出来。

配色
#2B4CFF#FF3EA5#E8FF3B#14121F
字体
站酷快乐体(标题)· Rubik 900(拉丁)· 思源黑体(正文)
参考
Golden Wolf、ManvsMachine、Coolors
打开封面 →