Folio — Minimalist Designer Showcase Landing Page Template

Quick summary

Folio is a single-page dark mode design portfolio built for professional set designers. It presents work the way a production bible does, dense, deliberate, and tactile. The layout uses a 60/40 asymmetric grid, a nine-image mosaic header with cursor parallax, and a living sidebar that updates as visitors scroll through case studies.

Who this template is for

This template is built for working set designers who pitch to serious clients in film, television, and commercial production. It speaks directly to decision-makers who judge craft quickly and expect a design portfolio that matches their own visual standards.

• Production designers and showrunners casting collaborators for feature films and limited series
• Agency creative directors sourcing set builders for high-concept commercial and music video shoots
• Experienced designers ready to move beyond a generic website and build a personal brand that commands attention

What problem this template solves

Generic portfolio templates fail set designers because they treat every creative discipline the same. A set designer's work is spatial, sequential, and collaborative. It needs context, not just images. This landing page solves that.

• Visitors leave too quickly when a design portfolio shows only finished photographs with no process depth
• Potential client inquiries stall because there is no structured intake path built into the page
• A flat, light-themed site signals the wrong aesthetic to future clients who live inside dark edit suites and art department binders

What you get with this template

Every component is purpose-built for a high-stakes B2B portfolio conversation. Nothing here was lifted from a generic creative template. The page teaches how sets get made while proving this designer makes them best.

• A nine-image Photo Grid Mosaic header with cursor parallax and a parchment-colored tagline reveal
• A 60/40 asymmetric project explorer with a contextual sidebar of blueprints, construction stills, and director testimonials
• Expandable case studies showing budget tier, stage dimensions, turnaround time, and before/after stage photography
• A fixed footer call-to-action bar and a gated Lookbook PDF intake form with production-type qualification fields

Feature list

This template gives designers a structured, easily editable framework. Each section is a reusable component built for clarity and scroll-driven storytelling. Attending to every smallest detail, the layout rewards curiosity from first scroll to final inquiry.

Nine-Image Mosaic Header with Parallax

Nine set photographs are arranged in an irregular mosaic that bleeds past the viewport edges. Images shift subtly on cursor movement using parallax layers, suggesting depth like a lightbox. A single line of parchment-colored type appears over the darkest tile after a short beat.

60/40 Asymmetric Project Explorer

The 60-column holds large hero images of finished sets. The 40-column runs a living sidebar of blueprints, material callouts, behind-the-scenes stills, and director testimonials. The sidebar updates contextually as the visitor scrolls, making this a true workshop experience rather than a passive gallery.

Expandable Case Study Pages

Clicking any project expands it into a full case study. Each portfolio single entry includes budget tier, stage dimensions, turnaround timeline, and a before/after comparison of bare stage to dressed set. This depth converts browsers into qualified inquiries.

Fixed Partnership Call-to-Action Bar

A persistent footer bar activates once the visitor scrolls past the second project. The primary call to action reads "Let's Build Your Next World." It keeps the conversion path visible without interrupting the scroll experience.

Gated Lookbook PDF Form

A secondary conversion path offers a downloadable PDF of full case studies. Visitors exchange a production company email address to access it. This qualifies leads before the first call and helps the designer build a focused outreach list.

Scroll-Triggered Interaction Animations

The page uses clip-path reveals and scroll-triggered interaction animations to guide attention through each section. Each layer of depth rewards curiosity and keeps a potential client engaged well past the first project.

Page sections overview

Design & branding system

The visual identity follows an Ink and Paper theme using a Monochrome Steel color system. Every color choice is deliberate. Using dark grays instead of pure black avoids harsh contrast and eye strain while making the portfolio items appear more vibrant against the background.

• Deep matte black (#111113) as the base, cold rolled steel (#3A3D42) for structural surfaces, onion-skin parchment (#D8D3CB) for type
• Red grease-pencil (#C0392B) reserved as a single accent for hover states and active links, matching the elegant design style of a drafting table aesthetic
• Fraunces serif display paired with DM Sans body type, supporting global fonts and consistent global colors across all components

Mobile & speed optimization

The template is desktop-first by design, reflecting how production designers and agency creative directors scout collaborators on large screens. The layout is structured to load cleanly and avoid poor website speed issues that slow websites create for first impressions.

• Retina ready visuals ensure set photography displays at full clarity on high-resolution desktop and laptop screens
• Server-side components handle static content while client components manage animations, keeping load speed efficient without sacrificing blazing fast interaction quality
• Re-usable classes and global components make it straightforward to easily update content across all the pages without touching styles from scratch

How this template helps you convert

Every design decision on this page serves one goal: turning a passive visitor into an active production inquiry. The page is optimized to move the right potential client from curiosity to contact.

1. The fixed partnership call-to-action bar stays visible after the second project, reducing friction for a visitor who is ready to reach out before finishing the full page
2. The gated Lookbook PDF form qualifies leads by requiring a production company email, so the designer speaks only to serious future clients
3. The expandable case studies answer the hardest pre-qualification questions, budget tier, timeline, and crew type, before the first conversation, making every inquiry more efficient

Other information about this template

This is the folio dark theme set designer portfolio landing page template. It is built on the same structural principles as the Darkfolio X Webflow template, a top-notch dark mode design portfolio webflow template created for designers who need more than a basic site. Presenting Darkfolio-style architecture, this template gives set designers a creative portfolio webflow template that feels nothing like a minimal portfolio template off the shelf.

• Darkfolio X includes over 10 unique pages and comes with a figma file included with purchase, giving designers a complete design portfolio webflow theme to work from
• The figma file supports own custom needs and own design requirements, so you can customize the layout and global colors to match your brand guidelines before building in the webflow editor
• Use the webflow cms to manage portfolio items on an ongoing basis, with webflow ecommerce and social media cover designs support available through the same platform
• The icon family set loaded with the template covers all interface needs; an icon family this complete removes the need to source assets from another webflow website or other webflow website
• The brix templates support team and brix agency offer dedicated help to support darkfolio users; the support team is available to assist with customization or troubleshooting on an upcoming future update basis
• Not all webflow templates offer this level of depth, this is the right template choice for set designers who want unique stories, a beautiful appearance, and a modern design that reflects the latest design trends
• You can easily customize, edit darkfolio sections, customize darkfolio colors, and use the webflow editor to adapt every component to your own design requirements with easy edit ability
• The optimized darkfolio structure uses re-usable classes and global components so designers can easily update any kind design element; the template is retina ready, optimized, and built to work perfectly from day one
• New features and latest features are released on an ongoing basis; features released through the platform mean your site benefits from updated practices without rebuilding from scratch
• Every potential client who visits expects a portfolio that tells unique stories, this template gives designers the components, cms depth, and interaction animations to do exactly that

Show more