Charlie Phipps 网站预览
Charlie Phipps 网站预览

Charlie Phipps

近黑色基底、大幅摄影展示与大字排版。

页面以近黑色为基底,搭配白色文字。字体采用 Helvetica Neue、Times。视觉特点包括大幅摄影展示、大字排版、紧密字距、单栏阅读排版。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 整个界面只用 Helvetica Neue 字重 400,绝不引入粗、中或轻变体;单字重系统是标志。
  • 展示标题设为 162px,lineHeight 0.90,字间距 -3.89px;让换行自然发生,并允许视口裁切文字。
  • 间距尺度只用 6 / 13 / 26 / 41px,无任意中间值,41px 留给最大区块分隔。
  • 满幅摄影直接放在文字后,不用渐变覆盖或压暗遮层;图片自身对比必须支持可读性,否则将文字移到照片干净区域。
  • 色板保持 100% 无彩色:#101011 画布、照片上 #ffffff 文字、纸上 #000000 文字,灰度只用于边框与元数据。
  • 导航浮在视口边缘的左、中、右三个位置,文字 13-16px,绝不加盒、边框或背景。
  • 编辑区块标题以句号结尾,如“Selected works ©2022.”;陈述性句号是排版声音的一部分。

建议避免

  • 不要引入任何彩色,无品牌红、强调蓝或按钮填充,照片是唯一色彩来源。
  • 任何元素不要添加圆角,所有转角保持 0px;圆角会破坏印刷海报逻辑。
  • 不要使用 box-shadow、投影或任何浮起效果,设计有意平贴摄影平面。
  • 任何语境都不要把展示字重改为 700 或 800;标题需要更重时改为增大字号,尺度化 400 是系统允许的唯一权威。
  • 文字内容不要包在卡片、面板或带边框容器里,区块只以留白分隔,绝不用外框。
  • 社交链接、邮箱或导航不要用图标,文字加 ↗ 外部箭头就是完整图标词汇。
  • 正文不要用大写宽字间距标签,只有 EXPLORE、LATEST WORKS 等小区块标识使用堆叠标签模式。