UI/UX Designer Portfolio Portfolio Website Template

Quick summary

Inkfolio is a single-page, overlap-layered portfolio landing page for user interface and user experience designers. It combines a collage scrapbook header, narrative case study cards, and a Void and Violet color palette to communicate design depth instantly. Two inline lead capture prompts collect email addresses without interrupting the reading experience.

Who this template is for

This template is built for designers who want their portfolio to do real persuasive work, not just display thumbnails. It speaks directly to the visitors most likely to make a hire or brief a project.

• User interface and user experience designers seeking senior roles or freelance clients
• Independent designers pitching to startup founders, product studios, or recruiting teams
• Practitioners who have strong case studies but need a format that presents strategic thinking clearly

What problem this template solves

Most designer portfolios look like image galleries. They show outputs but skip the thinking. A design director scanning portfolios at midnight, or a founder worried about conversion loss, needs to trust your process before they trust your work.

• Generic grid layouts flatten nuanced case studies into thumbnails with no narrative context
• No clear lead capture path means visitors leave without a way to follow up or share your work
• Visual portfolios without voice fail to differentiate one strong designer from another

What you get with this template

You get a fully structured, single-page landing page that tells each project as a complete story. Every layout decision is made for you, from the collage header down to the persistent bottom-bar prompt.

• A collage scrapbook header with overlapping project fragments, rotated screenshots, and hand-drawn annotation elements
• Scroll-triggered overlap card stacks that reveal problem, process, solution, and result for each case study
• Two distinct lead capture paths: a per-project case study PDF download and a persistent user experience audit checklist prompt

Feature list

A brief look at the core capabilities built into this template.

Collage Scrapbook Header

The header arranges overlapping project screen fragments, wireframe sketches, and sticky-note annotations as if pinned to a studio wall. A cropped mobile prototype overlaps a desktop screenshot at a slight rotation. The designer's name appears small in monospace type at the top left, and a handwritten-style tagline runs across the composition.

Overlap Layered Case Study Cards

Each project card slides up and physically overlaps the previous one as the visitor scrolls. Inside each card, the narrative unfolds in four beats: a provocative problem statistic or user quote, annotated process wireframes stacked at angles, a full-bleed prototype animation, and a bold result metric highlighted in violet.

Inline Lead Capture per Case Study

At the end of each project narrative, an inline email field with a violet submit arrow invites the visitor to download the full case study as a PDF. The prompt appears only after the visitor has read strategic thinking, so the exchange feels earned rather than forced.

Persistent user experience Audit Checklist Bar

After the visitor scrolls past the second case study, a persistent bottom bar appears offering a 47-point user experience audit checklist in exchange for an email address. It stays visible without blocking reading, acting as a low-friction second conversion path.

Editorial Between-Card Typography

Between case studies, single-line observations appear in italic on paper-white fields. These lines carry the designer's voice and create a rhythm of tension, process, resolution, and proof that builds trust across the full scroll.

Void and Violet Color System

The palette uses absolute void black as the primary background, handmade paper off-white for card surfaces, and muted violet reserved exclusively for interactive states, pull-quote borders, and result metrics. Graphite handles body text. Violet appears sparingly so each instance carries visual weight.

Page sections overview

Design & branding system

The visual identity is built around an Ink and Paper theme. Every color, spacing, and typographic choice reinforces the feeling of a printed, handmade artifact rather than a polished software interface.

• Void and Violet palette: void black (#09090B) grounds the page, off-white (#F5F0EB) surfaces the cards, muted violet (#7C5CFC) activates on hover and result metrics, and faded graphite (#3A3A3C) carries body text
• Typography uses a monospace typeface for the designer's name label and a handwritten-style face for the hero tagline, creating contrast between precision and personality
• Cards cast subtle shadows as if physically stacked, and backgrounds alternate between void and paper tones to create a sense of physical depth across the scroll

Mobile & speed optimization

The overlap and layered structure is designed to translate across screen sizes without losing the stacked depth effect. The layout adapts so smaller screens still experience the narrative card sequence.

• Rotated and overlapping card elements reflow for narrow viewports while preserving the collage impression
• Persistent bottom bar and inline call to action fields remain accessible and functional on touch devices
• Heavy visual elements such as full-bleed prototype animations are contained within card boundaries to keep the layout stable across devices

How this template helps you convert

Inkfolio earns the conversion before it asks for it. The page proves strategic depth first, then presents the email prompt at the moment the visitor is most engaged.

1. Each case study builds credibility in a structured four-beat sequence, so by the time the PDF download call to action appears, the visitor already wants the full version to share with their team.
2. The persistent user experience audit checklist bottom bar gives a second conversion opportunity to visitors who scroll deeply but are not ready to download a specific project PDF, capturing interest without interrupting the reading flow.

Other information about this template

This template is part of the Portfolio and Agency category, specifically designed for the user interface and user experience designer minimalist portfolio niche. It is built as a single-page overlap-layered landing page with a Content and Resource direction, meaning the page is structured to deliver value before asking for anything in return.

• The template style is Overlap and Layered, making it well suited to designers who want their scroll experience to feel physically dimensional rather than flat
• The Ink and Paper theme and Collage Scrapbook header concept make this template distinctive within minimalist portfolio landing pages, separating it visually from standard grid-based portfolio formats
• The Case Study Narrative creative direction means the template is optimized for portfolios with two to four substantial projects rather than large collections of small work samples

Show more