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
- Open with one strong campaign image and a concise positioning line.
- Move directly into selected work. Treat each case study as a new magazine cover.
- Explain the studio point of view only after the work has earned attention.
- Use oversized service typography as the handoff from proof to contact.
- 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.
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.
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.
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.02and expose the same project action. - Keep every panel understandable when static.
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.
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.
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.
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.
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.
