精选 · 开放 · 免费
Tparkes
一个展示品牌与网站作品的个人数字设计负责人作品集。
PortfolioStudioCleanBold TypographyRestraint
01
设计气质 DNA
数字设计负责人作品集汤姆·帕克斯伦敦
一个简洁、专业的数字作品集,采用大胆、富有表现力的排版。
02
色彩
#333333Ink
#FFFFFFBG
#A7A7A7Muted
rgba(51, 51, 51, 1)Line
依赖于字体层级而非色彩点缀的高对比度单色调色板。
03
字体
sans-serif
04
间距
4px
8px
16px
20px
24px
32px
48px
120px
充裕的留白和内边距凸显了大尺寸排版。
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 12px
lg · 16px
pill · 999px
使用主文本颜色的微妙边框,常用于卡片或UI元素。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区域,文本左对齐,配有顶部导航栏。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
项目卡片的滚动触发显示
交互元素上微妙的透明度变化或光标指针变化。 · 直接导航或平滑滚动到项目部分。
08
组件
- button 极简的文字链接或基于图标的按钮(例如,汉堡菜单、“探索我的作品”)。
- card 大尺寸、全宽的图片/视频卡片,带有圆角。
- hero 主导性的排版陈述,内联图形图标和一张大型单色图片。
09
文案语气与禁用清单
- 语气 专业、自信且直接。
- 标题风格 使用柔和灰色和黑色图标的大型加粗无衬线字体陈述。
- 按钮文案 简洁、低调的文字链接,如“探索我的作品”。
- 不要使用彩色渐变——截图显示的是严格的单色调色板。
- 不要使用衬线字体——排版严格采用无衬线字体。
- 不要隐藏导航——汉堡菜单在移动设备上很显眼。
- 不要使用小而拥挤的文字——主视觉标题尺寸巨大(86px)。
- 不要使用杂乱的背景——背景是干净的白色。
- 不要使用浓重的阴影——界面表面是平面且干净的。
- 避免: 避免使用鲜艳色彩
- 避免: 过度装饰
- 避免: 过于复杂的导航
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个具有简洁、单色美学的个人数字设计作品集。它使用一个大的无衬线展示字体(86px)来呈现大胆的陈述,并辅以小型、高对比度的黑色图标。主要颜色是白色(#FFFFFF)作为背景,深灰色(#333333)用于墨色,浅灰色(#A7A7A7)用于柔和元素。关键的十六进制颜色包括#333333、#A7A7A7和#FFFFFF。关键约束:永远不要使用彩色点缀、衬线字体或复杂的UI模式。布局宽敞,依赖充裕的留白和单栏容器。导航极简,专注于作品展示。
en · zh-CN · zh-TW · ja · ko