风格库/个人作品集/BAM Photographers

BAM Photographers

黑白基调,电影感影像,超大字体Monochrome framing, cinematic stories, oversized type.

深色主题个人作品集photography portfolio homepage暗色极简编辑式排版摄影汽车原网页 benandmartin.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
BAM Photographers 首屏

摄影双人组合的作品集以近乎纯黑的页面为底,搭配醒目的白色大字和电影感项目影像。汽车广告与生活方式作品依次呈现,视觉重点始终落在摄影本身。

North star · Keep the interface monochrome and understated so each cinematic project image, not decorative UI, commands attention.

The page uses a deliberately spare monochrome interface: #000000 anchors the canvas and #ffffff carries navigation, headings, and the oversized opening wordmark. The hero’s black-and-white photograph establishes the mood, while the project sequence introduces saturated colors only through the photography; these hues are image content, not interface accents. Compact uppercase navigation and labels contrast with a very large, expressive brand mark. Helveesti is measured for the small interface text, with consistent tracking and uppercase treatment. Projects are arranged as broad, vertically stacked image compositions, alternating full-width frames with paired images. Black gutters keep separate works distinct without adding decorative card chrome. Sections follow a steady, spacious rhythm, and text stays secondary to the imagery. Reproduce the page as a quiet gallery: restrained interface, high-impact photography, and no invented color accents.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

表层色
中性色
页面底色 · Gallery Black主文字 · Paper White
文字背景对比度WCAG
#ffffff Paper White#000000 Gallery Black21:1AAA

字体

字号阶梯:Major Third(比例约 1.25,正文 14px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

Helveesti

网络字体 · 字重 400 · 占比 100%
免费替代:Inter

Uppercase navigation, body labels, and eyebrow text.

角色示例字号字重行高字距
正文
Uppercase supporting project labels and small interface text.
The quick brown fox 敏捷的狐狸
14px4001.30.06em
导航
Top-level portfolio navigation links.
The quick brown fox 敏捷的狐狸
14px4001.30.06em
眉题
Compact uppercase labels introducing project content.
The quick brown fox 敏捷的狐狸
14px4001.30.06em

间距与布局

基准单位 1px · 密度:适中

60px版块间距
20px元素间距
—卡片内边距
1390px内容最大宽度
20px
25px

A vertically scrolling, single-column portfolio uses a measured page maximum width of 1390px and a comfortable section rhythm. The opening viewport is a full-bleed photographic hero with navigation overlaid along its top edge and an enormous centered wordmark. Below, project compositions alternate between paired frames and wide single images; headings align to the start. Keep the black canvas visible as gutters and avoid adding conventional boxed content columns.

圆角与层次

没有测到阴影:页面是扁平的,层次靠底色和描边区分。

The measured interface is flat, with no shadows or gradients. Black gutters provide separation between photographs instead of borders or elevated cards. Keep the navigation and wordmark layered directly over the hero image; use contrast from the image and white type rather than introducing decorative panels.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。

Overlay navigation

A compact uppercase row sits over the hero image, with links for Selected, Automotive, Directors, and Contact in white.

Hero wordmark

An oversized white “bam selected” wordmark dominates the opening black-and-white photographic frame.

Project heading

Short white project titles, such as AUDI and A6 ALLROAD, introduce image-led work and align to the start.

Project image composition

Wide single images and paired frames alternate down the page, separated by the black canvas.

Project link

Where present, a plain white uppercase link sits alongside project content without a button background.

Imagery · Use cinematic photography as the primary content: automotive campaigns, portraits, landscapes, and lifestyle scenes. The opening image is black and white, while later project images retain vivid natural color. Mix wide single frames with paired images, preserving each image’s own crop and strong photographic atmosphere; do not add illustrations or interface graphics as substitutes.

页面版块

共 13 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • Use #000000 as the page-wide canvas.
  • Set interface text and headings in #ffffff.
  • Let project photography provide the page’s color.
  • Overlay compact navigation on the opening image.
  • Alternate paired frames with wide project images.
  • Keep project titles short and start-aligned.

✕ 不该做

  • Do not add colored interface accents.
  • Do not wrap every image in a card.
  • Do not add shadows or decorative gradients.
  • Do not let supporting copy compete with the photography.
  • Do not replace the monochrome hero with a colorful interface treatment.
  • Do not introduce extra font families without evidence.

给 AI 的提示词

想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。

Build a new photography portfolio page in BAM Photographers’ restrained gallery style. Use Gallery Black (#000000) for the full-page canvas and Paper White (#ffffff) for navigation, headings, and interface labels; keep color confined to the photographs. Start with a cinematic full-bleed hero, overlay a compact uppercase navigation row, and give the brand wordmark dominant scale. Use Helveesti where available, or a close sans-serif substitute, for lightly tracked uppercase interface text. Organize the work as a spacious vertical sequence of broad images, alternating single frames and paired compositions, with short start-aligned project titles. Preserve black gutters between works. Keep the interface flat: no shadows, gradients, colored buttons, or ornamental card chrome. Prioritize atmospheric automotive and lifestyle photography over explanatory copy.

相似风格

BAM Photographers 设计系统 — 配色、字体与 DESIGN.md | Design DNA