Design Case Study — Client Name

Project Name Campaign

Project Name Campaign

Project Name Campaign

A one-line pull quote goes here to set the emotional hook for the project.

A one-line pull quote goes here to set the emotional hook for the project.

A one-line pull quote goes here to set the emotional hook for the project.

Replace this paragraph with 2-3 sentences on the client, the brief, and the goal of the project. Keep it scannable — this is the first thing a visitor reads.

Brand

Client Name

My Role

Your Role

Year

2026

Scope

Design & Strategy

MODULE 01 — Image Left / Text Right

Use for a process step or feature callout where the visual leads and copy supports it.

Use for a process step or feature callout where the visual leads and copy supports it.

Section headline goes here

Two to three sentences describing this step of the project — what problem it solved and how you approached it.

MODULE 02 — Text Left / Image Right

Mirror of Module 01 — alternate sides down the page so the reading rhythm doesn’t feel repetitive.

Mirror of Module 01 — alternate sides down the page so the reading rhythm doesn’t feel repetitive.

Another section headline

Swap the image side to keep alternating rhythm down the page instead of repeating the same layout twice in a row.

MODULE 03 — Full-Bleed Image Break

A full-width visual pause between text-heavy sections — great for a hero shot of the final work.

A full-width visual pause between text-heavy sections — great for a hero shot of the final work.

MODULE 04 — Editorial Pull-Quote

For a client testimonial line or a key takeaway you want to land as a statement, not a caption.

For a client testimonial line or a key takeaway you want to land as a statement, not a caption.

“Drop the standout quote, stat, or takeaway here — this is the line people screenshot.”

“Drop the standout quote, stat, or takeaway here — this is the line people screenshot.”

MODULE 05 — 3-Column Grid Gallery

For a set of equally-weighted deliverables — ad variants, social tiles, print pieces.

For a set of equally-weighted deliverables — ad variants, social tiles, print pieces.

MODULE 06 — Featured + Supporting Grid

One hero deliverable spans a 2x2 block with two smaller supporting pieces beside it — good for a lead visual plus variants.

One hero deliverable spans a 2x2 block with two smaller supporting pieces beside it — good for a lead visual plus variants.

MODULE 07 — 4-Column Grid Gallery

For a dense wall of small artifacts — icon sets, stickers, thumbnails, logo lockups.

For a dense wall of small artifacts — icon sets, stickers, thumbnails, logo lockups.

MODULE 08 — Masonry Gallery

Uneven item heights for a more organic, editorial feel — good for a loose set of process shots.

Uneven item heights for a more organic, editorial feel — good for a loose set of process shots.

MODULE 09 — Hover-to-Reveal Comparison

Hover the image to crossfade to a second state — handy for before/after or light/dark variants. Interactive.

Hover the image to crossfade to a second state — handy for before/after or light/dark variants. Interactive.

MODULE 10 — Process Timeline

Four numbered steps walking through your process — Discover, Design, Build, Ship (relabel as needed).

Four numbered steps walking through your process — Discover, Design, Build, Ship (relabel as needed).

01

Discover

One short line describing this stage of the process.

02

Design

One short line describing this stage of the process.

03

Build

One short line describing this stage of the process.

04

Ship

One short line describing this stage of the process.

MODULE 11 — FAQ Accordion

Tap a question to expand its answer. Interactive — built as one reusable component with three instances.

Tap a question to expand its answer. Interactive — built as one reusable component with three instances.

What's included in this module?

−

Swap this component's Question and Answer controls per instance to reuse the same accordion everywhere.

Can I add more items?

−

Yes — duplicate the instance and rewire it into the list, or add more instances below.

Does it need code?

−

No — this toggles via a variant switch on tap, no code component required.

MODULE 12 — Testimonial Spotlight

Reuses your existing Testimonial component — swap image, name, and quote per project.

Reuses your existing Testimonial component — swap image, name, and quote per project.

Company / Title

Swap this quote for something the client actually said about working with you.

Client Name

Client, Project Name

MODULE 13 — Video Showcase

Drop in a walkthrough, motion reel, or product demo. Uses your existing Video component.

Drop in a walkthrough, motion reel, or product demo. Uses your existing Video component.

MODULE 14 — Caption-Over-Image

A short caption or label anchored to a corner of a full image — good for crediting a format or platform.

A short caption or label anchored to a corner of a full image — good for crediting a format or platform.

Instagram — Story format

MODULE 15 — Split Contrast Panel

Two evenly-weighted panels in contrasting tones — good for Problem/Solution or Before/After framing.

Two evenly-weighted panels in contrasting tones — good for Problem/Solution or Before/After framing.

The Problem

Describe the constraint or pain point that kicked off this project.

The Solution

Describe the approach or fix you shipped in response.

MODULE 16 — Full-Bleed Color Statement

A bold, single-color band with big display type for a section transition or key result.

A bold, single-color band with big display type for a section transition or key result.

A bold, one-line result or milestone worth its own moment.

A bold, one-line result or milestone worth its own moment.

A bold, one-line result or milestone worth its own moment.

MODULE 17 — Draggable Slideshow

A drag/swipe carousel using your existing Slideshow component — good for a sequence of screens or shots. Interactive.

A drag/swipe carousel using your existing Slideshow component — good for a sequence of screens or shots. Interactive.

MODULE 18 — Hover-Reveal Card Grid

Cards lift and reveal a short description on hover — good for a set of features or capabilities. Interactive.

Cards lift and reveal a short description on hover — good for a set of features or capabilities. Interactive.

Research

How this project started — the brief, the audience, the constraints.

Design

Key decisions made along the way and why they mattered.

Impact

What changed for the client after this shipped.

MODULE 19 — Sticky Scroll Pairing

The image pins in place while the text column keeps scrolling past it — nice for a longer narrative next to one strong visual.

The image pins in place while the text column keeps scrolling past it — nice for a longer narrative next to one strong visual.

First beat of the story.

Second beat — what changed as the project evolved.

Third beat — the resolution and what shipped.

MODULE 20 — Auto-Scrolling Logo Ticker

A continuous scrolling strip of client or tool logos — draggable, auto-scrolls on its own.

A continuous scrolling strip of client or tool logos — draggable, auto-scrolls on its own.

  • Logo One

  • Logo Two

  • Logo Three

  • Logo Four

  • Logo Five

  • Logo Six

MODULE 21 — Big Metric Callout

One outsized number for the headline result of the project — pairs well right before the Outcome section.

One outsized number for the headline result of the project — pairs well right before the Outcome section.

3.2M

3.2M

3.2M

Describe what this number represents and over what time period.

MODULE 22 — Comparison Spec List

A simple two-column list for specs, deliverables, or a before/after feature comparison.

A simple two-column list for specs, deliverables, or a before/after feature comparison.

Deliverable

Description

Brand identity

Logo, color system, typography

Website

12-page responsive site

Launch campaign

Paid social + email sequence

MODULE 23 — Drag-to-Reveal Compare

Grab the handle and drag to reveal the layer underneath — a true drag gesture, not just hover. Interactive.

Grab the handle and drag to reveal the layer underneath — a true drag gesture, not just hover. Interactive.

↔

MODULE 24 — Click-to-Expand Lightbox

Click the image to zoom it into a full-screen lightbox with a dimmed backdrop. Interactive.

Click the image to zoom it into a full-screen lightbox with a dimmed backdrop. Interactive.

MODULE 25 — Tab Switcher

Click a tab to swap the panel below — built as one component with three linked variants. Interactive.

Click a tab to swap the panel below — built as one component with three linked variants. Interactive.

Overview

Process

Results

Overview panel copy — swap the text per variant to match each tab.

MODULE 26 — Scroll Text Reveal

Big type that dims in character-by-character as you scroll past it — uses your existing Text Reveal Scroll component.

Big type that dims in character-by-character as you scroll past it — uses your existing Text Reveal Scroll component.

Replace this with the line you want to reveal word-by-word as it scrolls into view.

Replace this with the line you want to reveal word-by-word as it scrolls into view.

MODULE 27 — Mixed-Weight Statement

One heading mixing weight, size, and color per word — a quick way to add typographic emphasis without extra imagery.

One heading mixing weight, size, and color per word — a quick way to add typographic emphasis without extra imagery.

We design bold, considered work — not just pretty pictures.

We design bold, considered work — not just pretty pictures.

MODULE 28 — Marquee Headline

An oversized headline that scrolls continuously — good as a section divider or brand statement.

An oversized headline that scrolls continuously — good as a section divider or brand statement.

  • AVAILABLE FOR WORK

    AVAILABLE FOR WORK

  • LET’S BUILD SOMETHING

    LET’S BUILD SOMETHING

  • AVAILABLE FOR WORK

    AVAILABLE FOR WORK

  • LET’S BUILD SOMETHING

    LET’S BUILD SOMETHING

MODULE 29 — Bento Grid — Image-Led

A mixed grid of image and text cards in varied sizes — a big visual anchors the set, supporting cards carry copy and stats.

A mixed grid of image and text cards in varied sizes — a big visual anchors the set, supporting cards carry copy and stats.

+42%

Conversion lift

“A short client quote fits nicely in a card like this.”

A closing statement that spans the full width of the grid.

MODULE 30 — Bento Grid — Text-Led

A second bento composition weighted toward copy and stats, with one supporting image — good for a metrics-heavy Outcome section.

A second bento composition weighted toward copy and stats, with one supporting image — good for a metrics-heavy Outcome section.

12wk

Timeline from kickoff to launch

4.9/5

A supporting note about scope, team size, or tools used.

3x