Back to Details

editorial-portfolio-chapters

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Editorial Portfolio Chapters

编辑式作品集章节

Build the page as a sequence of distinct editorial chapters. Let the work establish desire before explaining the studio.
将页面构建为一系列独立的编辑式章节。先通过作品吸引用户兴趣，再介绍工作室。

Establish the Story

构建叙事逻辑

  1. Open with one strong campaign image and a concise positioning line.
  2. Move directly into selected work. Treat each case study as a new magazine cover.
  3. Explain the studio point of view only after the work has earned attention.
  4. Use oversized service typography as the handoff from proof to contact.
  5. End with a high-contrast contact chapter that feels final, not appended.
Replace all source brands, projects, people, claims, images, labels, and links with original or client-provided content. Preserve pacing and hierarchy, not source content.
  1. 以一张醒目的宣传图和简洁的定位语开篇。
  2. 直接展示精选作品，将每个案例研究视为新的杂志封面。
  3. 仅在作品获得关注后，再介绍工作室的理念。
  4. 用超大尺寸服务字体作为从作品展示到联系模块的过渡。
  5. 以高对比度的联系章节收尾，给人一种完整终结感，而非附加内容。
将所有参考品牌、项目、人物、声明、图片、标签和链接替换为原创或客户提供的内容。保留节奏和层级结构，而非参考内容本身。

Build the Visual System

搭建视觉系统

  • Frame the page with near-black, then introduce warm white and one muted color field per project.
  • Use a grotesk display face with a neutral text companion. Keep labels compact and copy readable.
  • Align to a 12-column grid with 40–64px desktop edge margins.
  • Favor square or deliberately cropped media, restrained radii, hairline rules, and almost no shadow.
  • Let the strongest proof change scale. Do not turn every section into a hero or bento grid.
  • Keep full-bleed chapters rare and purposeful.
  • 以近乎黑色的色调作为页面框架，为每个项目搭配暖白色和一种低饱和度色块。
  • 使用无衬线展示字体搭配中性文本字体。标签保持紧凑，正文保证可读性。
  • 对齐12列网格，桌面端边距设置为40–64px。
  • 优先使用方形或刻意裁剪的媒体素材、克制的圆角、细线条，几乎不添加阴影。
  • 仅让最具代表性的作品调整尺寸。不要将每个 section 都设计成 hero 或网格布局。
  • 全屏章节需少而精，且具备明确目的性。

Compose the Page

页面布局规划

  • Header: place compact navigation at the outer edges and keep the identity centered or strongly anchored.
  • Hero: reserve most of the first viewport for one stable image; expose the first project below the fold.
  • Projects: alternate dark framing with muted color panels; show title, role, year, and action without hover.
  • Studio: use an asymmetrical portrait or process composition instead of a generic team-card grid.
  • Services: set capabilities as large semantic headings or links with controlled wrapping.
  • Contact: switch to one unmistakable signal color and one primary action.
  • Footer: resolve navigation, location, social links, and legal text without competing with the contact ask.
  • 页眉：将紧凑导航放在外侧边缘，品牌标识居中或固定在显眼位置。
  • Hero模块：为一张稳定图片保留首个viewport的大部分区域；将首个项目展示在首屏下方。
  • 作品模块：交替使用深色框架和低饱和度色块面板；无需 hover 即可显示标题、角色、年份和操作按钮。
  • 工作室模块：采用不对称肖像或流程构图，而非通用的团队卡片网格。
  • 服务模块：将服务能力设置为大尺寸语义标题或可控制换行的链接。
  • 联系模块：切换为辨识度极高的标志性颜色，并设置一个核心操作按钮。
  • 页脚：整合导航、地址、社交链接和法律文本，避免与联系模块的核心诉求冲突。

Implement the Signature Interactions

实现标志性交互效果

Editorial project panel reveal

编辑式作品面板展示

  • Reserve the panel height before media loads.
  • Clip only the image layer; keep title and metadata selectable.
  • Reveal with a 500–760ms mask or shallow translate.
  • On hover or focus, scale media no more than 
    1.02
    and expose the same project action.
  • Keep every panel understandable when static.
  • 在媒体加载前预留面板高度。
  • 仅裁剪图片层；保持标题和元数据可选中。
  • 通过500–760ms的遮罩或轻微位移效果展示内容。
  • hover 或聚焦时，媒体缩放比例不超过
    1.02
    ，并显示相同的作品操作按钮。
  • 静态状态下每个面板都需清晰易懂。

Oversized service handoff

超大尺寸服务过渡

  • Use 
    clamp()
    for scale and a short edge-aligned text mask.
  • Shift weight, underline, or tone on hover and focus without moving layout.
  • Open optional details with semantic disclosure behavior, Escape support, and focus return.
  • Wrap deliberately on mobile and render immediately under reduced motion.
  • 使用
    clamp()
    控制尺寸，并采用短边对齐的文本遮罩。
  • hover 和聚焦时调整字重、下划线或色调，不改变布局位置。
  • 通过语义化展开行为显示可选详情，支持Escape键关闭并返回聚焦状态。
  • 移动端刻意控制换行，在减少动画模式下立即渲染。

Motion Defaults

动效默认设置

  • Use 160–220ms for control feedback and 500–760ms for section entrances.
  • Stagger direct children by 45–70ms with 
    cubic-bezier(.22,.61,.36,1)
    .
  • Keep parallax below 5% and the hero stable enough to study.
  • Tie navigation or background changes to section boundaries.
  • Pause offscreen media and observers; clean up timelines on route changes.
  • Do not hijack scroll.
  • 控件反馈动效时长为160–220ms，章节入场动效时长为500–760ms。
  • 直接子元素以45–70ms的间隔依次触发，使用
    cubic-bezier(.22,.61,.36,1)
    曲线。
  • 视差滚动幅度控制在5%以下，Hero模块保持稳定以便用户查看。
  • 导航或背景变化与章节边界绑定。
  • 暂停屏幕外的媒体和观察者；路由切换时清理时间线。
  • 不要劫持滚动行为。

Validate

验证环节

  • Confirm logical heading order, visible focus, useful alt text, and contrast through every color change.
  • Test keyboard, touch, 200% zoom, narrow mobile, slow media, missing media, and reduced motion.
  • Confirm case studies remain readable before animation and no source content was lightly paraphrased.
  • Remove invented awards, clients, outcomes, or claims when evidence is unavailable.
  • 确认标题逻辑顺序、可见的聚焦状态、有效的替代文本，以及所有颜色变化下的对比度达标。
  • 测试键盘操作、触摸操作、200%缩放、窄屏移动端、慢速媒体加载、缺失媒体和减少动画模式。
  • 确认案例研究在动画加载前即可阅读，且未对参考内容进行简单改写。
  • 若无证据支持，删除虚构的奖项、客户、成果或声明。

Source-Backed Prompt Pack

参考提示包

Use Mara Voss Interaction Prompt Pack as a worked example for turning one editorial portfolio into portable loader, pinned chapter, archive, inspection, sticky-stack, and footer interaction prompts. Reuse the motion logic, not the reference identity, copy, imagery, or claims.
以Mara Voss Interaction Prompt Pack为实例，将单个编辑式作品集转化为可复用的加载器、固定章节、归档、检视、粘性堆叠和页脚交互提示。复用动效逻辑，而非参考品牌标识、文案、图像或声明。

Avoid

避坑指南

  • Explaining the studio before showing its work.
  • Repeating identical rounded cards across every chapter.
  • Fast card choreography, large parallax, or decorative motion loops.
  • Hiding project titles or actions until hover.
  • Copying source imagery, brand language, project names, or client claims.
  • 不要先介绍工作室再展示作品。
  • 不要在每个章节重复使用相同的圆角卡片。
  • 避免快速卡片动画、大视差或装饰性循环动效。
  • 不要将作品标题或操作按钮隐藏至hover状态才显示。
  • 不要复制参考图像、品牌语言、项目名称或客户声明。