精选 · 开放 · 免费
Robin Noguier
一个精炼的作品集，通过大胆排版和动态图像布局展示创意项目。
portfoliowebgl
01
设计气质 DNA
作品集展示设计师案例研究创意
一个精心策划的创意作品画廊
02
色彩
#FFFFFFInk
#3D6681BG
#D5DEDDMuted
rgba(255, 255, 255, 0.2)Line
精致、灰调的蓝色方案为高对比度白色文本和生动摄影内容提供了平静的背景。
03
字体
didone-serif · geometric-sans
- display
135px · 400 - body
16px · 400 - label
14px · 700
导航和操作标签使用大写字母和宽字间距 · 高对比度展示衬线字体搭配简洁几何无衬线字体 · 正文保持轻量，在深色背景上保持可读性
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
以一致的4px基础单位驱动垂直和水平节奏，内容周围留有充足内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
图片元素使用微妙的白色边框
0 4px 24px rgba(0, 0, 0, 0.15)
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
不对称分割布局，一侧为大字体排版，另一侧为动态图像；移动端切换为堆叠布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
平滑的基于滚动的变换实现视差效果 · 交互元素上微妙的悬停过渡
交互元素上微妙的光标变化和可能的透明度变化 · 直接导航至案例研究详情
08
组件
- button 大写文本按钮，具有充足水平内边距和右箭头图标
- card 动态图片卡片，带有轻微旋转和白色边框
- hero 大胆的排版介绍，搭配动态、旋转的图像
09
文案语气与禁用清单
- 语气 自信、极简、专业
- 标题风格 大型优雅衬线字体，注重冲击力
- 按钮文案 清晰、大写、面向行动
- 不要在主容器上使用圆角 — 截图显示为方形图片边框
- 不要使用带有许多沟槽的复杂网格 — 截图显示为干净、灵活的布局
- 不要使用明亮、饱和的强调色 — 截图依赖白色和灰调蓝
- 不要在导航中使用小写 — 截图显示 'ABOUT' 为大写
- 不要在每个元素上使用厚重的投影 — 截图显示为最小化、柔和的阴影
- 不要使用俏皮、圆润的无衬线字体 — 截图使用结构化、几何的无衬线字体
- 避免: 杂乱布局
- 避免: 过于复杂的色彩方案
- 避免: 密集的文本块
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为设计师设计的精炼作品集网站，其特点是平静、灰调的蓝色背景和大胆、高对比度的白色排版。它使用大型迪多内衬线字体作为项目标题，简洁的几何无衬线字体作为正文和导航。布局不对称，包含动态、略微旋转的图片卡片，营造出深度和动感。导航极简且大写，字间距充足。关键设计原则包括保持干净、整洁的美学，使用大尺度排版以增强影响力，并确保图片成为焦点，避免使用厚重阴影或边框。避免使用明亮的强调色、主要元素上的圆角或复杂的网格系统。
en · zh-CN · zh-TW · ja · ko