sunserif case study · 01 of 04
Client · Mike Pizzella Practice · Picture framing & fine art Tenure · 20 years site ↗

Art made and framed
by the same hands.

Mike has been painting and framing since Jackson Square in 2005. His old website was one photograph and a phone number. We rebuilt the brand around the work itself — palette pulled from his actual oil paintings, hand-drawn wordmark vectorized from a scan, and seven prototypes delivered for him to choose from.

Tier
Standard Site + brand identity
Started
From a one-photo Squarespace page
Prototypes
7 directions delivered · client picked
State
Site live · ecom + pet-portrait commissions running
01 / The brief

Eighty-eight pet portraits in the portfolio. None of them findable.

What he came in with

A working frame shop in Mandeville with 20 years of painted commissions behind it, and a website that didn't do the work justice — generic template, no portfolio page, no path from "I want a pet portrait" to "I'm holding one." The strongest underlying story in the competitive set, hidden behind a site that looked like every framing shop in every strip mall.

The repositioning was straightforward to name and harder to execute: make the website match what Mike already is — a working fine artist with a frame practice attached, not a frame shop with paintings on the side. The art is the color. The site is the frame.

02 / The approach

Pull the palette from his paintings. Vectorize his handwriting. Build seven.

Every design choice traces back to a real object Mike already made. The palette isn't picked from a Pinterest board — five colors were sampled directly from dominant pigments across his actual oil paintings. The wordmark is the script he's been signing for two decades, vectorized from a scan and cleaned by hand into one mark.

Palette · sampled from paintings

Gallery white, aged paper, brand gold, deep gold, charcoal. Each color came off a real painting in his portfolio.

Type · gallery serif + working sans

A gallery-authority serif paired with a warm humanist sans. Editorial weight where the work is being introduced, working-craft tone where Mike is talking about practice.

Pizzella.
Hand-framed in Mandeville since 2014.

Logo · vectorized handwriting

The script Mike has been signing for two decades, scanned and cleaned by hand into one digital mark. Reads as Mike's signature — because it is.

03 / The signature feature

The cursor reveals the painting from underneath the photo.

Eighty-eight pet portraits is a lot of work, and the only honest way to show what Mike does is to show the source photograph next to what he made of it. So the conversion moment isn't a CTA — it's a hover. The reference photo lives underneath the painting; the cursor pulls the painting across it, left to right.

Move your cursor across the frame to reveal the painting:

Reference photograph of a schnauzer commissioned for a portrait
Mike's oil-painted portrait of the schnauzer
Photo Painting
Schnauzer · 14 × 18 · oil on linen 3 weeks · framed in pecan

The demo above is a simplified version. The production component on the prototypes uses real photograph-to-painting pairs Mike provided — schnauzer, doodle, spaniel, yorkie — each one a commission he can show by name. Four breeds. Twenty seconds. The whole pitch.

04 / Seven directions, one client

Mike got to choose. Not from a moodboard — from working sites.

Most studios ship one direction and call iteration "revisions." Pizzella got seven complete prototype directions on day one — every one a working HTML build, every one a different answer to "what does this brand want to be." Mike picks; we sharpen the chosen direction; we don't try to retrofit a different brand onto a single approved comp.

Pizzella prototype A — screenshotA Pizzella prototype B — screenshotB Pizzella prototype C — screenshotC Pizzella prototype D — screenshotD Pizzella prototype E — screenshotE Pizzella prototype F — screenshotF Pizzella prototype G — screenshotG

Each prototype implemented the before/after differently — CSS-only reveal, cursor-follow, draggable handle, paired grid — to give Mike feel-tests, not just look-tests. Three directions are live finalists.

05 / What shipped

Brand system, audit, seven builds, asset library.

01

Brand identity

Palette extracted from his paintings, two-face typography, vectorized handwritten logo, design tokens CSS file.

02

Brand & Web Audit

The 8-section audit at audit.html — the format that became Sunserif's hunter template. Eight competitors mapped, SEO analysis, social audit, positioning gap.

03

Seven prototype directions

A through G — each a working build, each a different visual hypothesis. Live at pizzella.vercel.app/review.html.

04

Asset library

30 art images of Mike's existing portfolio, atmosphere imagery (frame, paint, studio), and authored reference photographs matched to real paintings — built once, reused everywhere on the site.

05

Research corpus

A working document of gallery sites, pet-portrait market intel, motion patterns, brick-and-mortar conversion, and voice — kept after the engagement closed so Mike has the substrate when he wants to keep growing.

06

Strategy document

10-section design brief mapping every visual decision back to a real business outcome. Mike can read it; so can Mike's accountant.

06 / What's running

The site is live. Mike sells from it.

LayerState
Brand identity · palette, type, logoshipped
Seven prototype directions · Mike's pick lockedshipped
Before/after cursor-reveal pet-portrait gallerylive
Self-publishing dashboard for Mikerunning
Checkout for portrait commissionsrunning
Print-on-demand fulfillment for printsrunning
pizzellapainting.com · domain on the new sitecut over
Twenty years framing and painting, and my website had one picture on it. Patrick fixed that. The reveal slider on the portraits — that's the actual job, in a website.

Mike Pizzella · Owner, Pizzella Picture Framing & Fine Art