UI/UX Designer Portfolio Specialist Portfolio Website Template
Folio is a dark, asymmetric landing page template built for senior user interface and user experience designers who want their work to speak first. It pairs a 60/40 grid layout with video case studies, a living award sidebar, and a behavior-triggered email capture that only appears after a visitor has already watched your work. The result feels less like a portfolio and more like a private screening.
by Rocket studio
Quick summary
Folio is a single-page user interface and user experience designer video portfolio template built on an asymmetric 60/40 grid. It opens with a self-drawing animated illustration, showcases project work through video case studies, and accumulates award credentials in a fixed sidebar as the visitor scrolls. The email capture only appears after the visitor earns it by watching.
Who this template is for
This template is built for working user interface and user experience designers who are ready to position themselves at a senior level. If your work has competition recognition, strong video documentation, or client testimonials worth showing, this layout gives those assets the right stage.
- Senior user interface and user experience designers building a video-led portfolio
- Independent designers pitching to startup founders or creative directors
- Agency designers presenting award-winning case studies to recruiters
What problem this template solves
Most portfolio pages treat every project the same way. They stack thumbnails, flatten the work, and give the visitor no reason to slow down. Folio solves that by creating a scrollable screening experience where each project demands attention before the next one begins.
- Static portfolio layouts that fail to communicate craft depth or process
- Forms that interrupt before the work has made its case
- Portfolios that show credentials without giving them emotional weight
What you get with this template
You get a complete, one-page dark portfolio layout built around video-first storytelling and progressive credentialing. Every visual and structural decision in the template is aimed at one outcome: keeping the right visitor watching long enough to reach out.
- Asymmetric 60/40 grid with a dedicated award sidebar and main project stage
- Self-animating header illustration that sketches a mobile interface in real time
- Behavior-triggered email capture that activates only after 60% video watch depth
Feature list
This template delivers a focused set of purpose-built components. Each one is designed to serve the specific scenario of a senior designer presenting work to an evaluative audience.
Self-Drawing Animated Header
The header opens with a hand-drawn wireframe of a mobile interface that sketches itself line by line over four seconds. It then floods with color and motion, transforming into a living prototype. The designer's name sets in electric-white type, kerned wide, and anchors the left column while the animation loops quietly on the right.
Asymmetric 60/40 Project Grid
The main layout divides the page into a 60-column project stage and a 40-column credential sidebar. Video case studies play on the wider left stage. Award laurels and competition badges pin themselves to the narrower right column as the visitor scrolls deeper into the page.
Living Award Sidebar
Each scroll section opens with a glowing award laurel or badge that docks into the sidebar. As the visitor moves through the page, the sidebar fills like a living résumé, with recognition building from honorable mentions toward top-tier awards. The accumulation creates a sense of rising stakes.
Behavior-Triggered Email Capture
A single-field email capture slides in only after a visitor watches any video past the 60% mark. The primary call to action is a case study PDF download. No form appears until the work has already made its argument, so the ask feels earned rather than intrusive.
Pull-Quote Testimonial System
Between project sections, jury panel quotes and creative director testimonials fade in against the grid's negative space. This gives the award recognition a human voice and breaks the visual rhythm between watching and reading, keeping the visitor actively evaluating rather than passively consuming.
Ungated Full Reel Lightbox
A secondary call to action offers a two-minute supercut of the designer's best work. It auto-plays in a lightbox and requires no sign-up. This gives hesitant visitors a low-friction way to see the broader body of work before committing to the email capture.
Page sections overview
| Section | Purpose |
|---|---|
| Animated Header | Opens with a self-drawing wireframe illustration; sets name and grid |
| Project Stage (60) | Plays video case studies on the wide primary column |
| Award Sidebar (40) | Accumulates badges and laurels as the visitor scrolls |
| Pull-Quote Breaks | Fades in jury and client testimonials between project blocks |
| Full Reel call to action | Presents an ungated lightbox supercut as a secondary path |
| Email Capture Gate | Slides in after 60% video watch depth; offers PDF download |
Design & branding system
The visual identity uses a Monochrome Steel color palette built around deep matte black, brushed gunmetal, and cool silver. Electric white appears only on active states, play buttons, and award badges. The result is a page that stays visually quiet until the visitor interacts with it.
- Core palette: deep matte black (#0E0E10), brushed gunmetal (#3A3A42), cool silver (#B0B3B8), electric white (#F0F0F5)
- Loose ink illustration style for the header, morphing into crisp vector over the four-second animation
- Interactive elements flash white only on engagement, keeping the dark base undisturbed at rest
Mobile & speed optimization
The template is structured to translate the immersive dark aesthetic across screen sizes. The asymmetric grid adapts to preserve the hierarchy of project content and credential display on narrower viewports.
- The 60/40 grid is designed to reflow cleanly so video case studies remain the primary focus on smaller screens
- The award sidebar repositions to maintain credential visibility without crowding the main project stage
- Video and lightbox components are built to work within the single-page layout without requiring external navigation
How this template helps you convert
The conversion structure in this template is intentional and sequential. It earns attention before it asks for anything, and it offers two distinct paths for visitors at different levels of intent.
- The ungated full reel lightbox gives low-commitment visitors a complete two-minute view of the work, warming them toward the deeper case studies before any form appears.
- The behavior-triggered email capture activates only after a visitor has watched past the 60% mark on any video, meaning the ask arrives at the exact moment the visitor has already demonstrated genuine interest.
Other information about this template
This template is part of the Portfolio and Agency category, designed specifically for the user interface and user experience designer video portfolio niche. It is particularly well suited for designers who have competition-recognized work to present and need a format that communicates both craft and credibility in a single scroll.
- Template style: Asymmetric Grid (60/40)
- Theme: Dark Immersive
- Creative direction: Award and Recognition
- Header concept: Animated Illustration
- Landing page direction: Content and Resource destination
- Color system: Monochrome Steel
- Best paired with video case studies that are edited for a professional audience, such as creative directors, startup founders, and agency recruiters
Theme
Dark Immersive
Creative direction
Award & Recognition
Color system
Monochrome Steel
Style
Asymmetric Grid (60/40)
Direction
Content/Resource
Page Sections
Self-drawing Animated Header Illustration
Asymmetric 60/40 Project Grid
Living Award Credential Sidebar
Behavior-triggered Email Capture
Pull-quote Testimonial Breaks
Ungated Full Reel Lightbox
Related questions
Who is this landing page template designed for?
Does the email capture form appear immediately when the page loads?
Can a visitor watch the full reel without signing up?
How does the award sidebar work as the visitor scrolls?
Is this a single-page layout or a multi-page website?