Photography Website Explorations

Hannah Lins — 30 Demo Concepts

A range of styles, aesthetics, and UI approaches — from minimal to editorial to experimental. Click any demo to open it.

Style:
Open Demo →
01
Minimal

Minimal White

Ultra-clean 3-column grid. Generous whitespace, thin sans-serif, no decoration. Pure focus on the photos.

Open Demo →
02
Dark

Dark Moody Slideshow

Pure black background, full-screen auto-advancing slideshow with slow fade transitions and italic serif typography.

Open Demo →
03
Hero

Full-Screen Hero

A single photo fills the entire viewport. Name centered in large thin type. Animated scroll hint. Gallery below.

Open Demo →
04
Editorial

Editorial Magazine

Asymmetric column layout, bold Playfair Display headlines, mixed type sizes. Feels like a high-end photo mag.

Open Demo →
05
Analog

Film / Analog

Cream/sepia palette, typewriter font, film roll layout with frame numbers. Each photo presented like a contact sheet entry.

Open Demo →
06
Zen

Japanese Zen

Extreme whitespace, alternating image/text panels, haiku-like captions. Slow and meditative scroll rhythm.

Open Demo →
07
Split

Split Screen

Fixed dark left panel with name and bio, right panel scrolls through photos in alternating single and double views.

Open Demo →
08
Grid

Masonry Grid

Pinterest-style CSS columns, varying image heights. Captions and overlay on hover. Clean warm-neutral background.

Open Demo →
09
Brutalist

Brutalist

Visible borders, system fonts, newspaper-like grid, no decoration. Raw and intentional anti-design aesthetic.

Open Demo →
10
Luxury

Luxury Dark

Near-black background, gold accent color, Cormorant Garamond, thin Josefin Sans. High-end gallery feel.

Open Demo →
11
Horizontal

Horizontal Film Strip

Side-scrolling panoramic layout. Drag to explore. Full-height images in a single horizontal film strip. Mouse wheel also scrolls.

Open Demo →
12
Swiss

Swiss International Style

Red and black, strict grid with visible dividers, Helvetica, labeled figure numbers. Classic International Typographic Style.

Open Demo →
13
Neon

Neon Night

Deep purple background, neon pink and cyan accents with glow effects. Space Grotesk type. High energy, contemporary.

Open Demo →
14
Soft

Pastel Soft

Blush pink and cream, rounded corners everywhere, soft box shadows, Lora italic. Warm and inviting.

Open Demo →
15
Type

Typographic Bold

Giant Anton display type is the hero. Photos are inserted into the typography. Animated marquee ticker. Filled and outline text.

Open Demo →
16
Duotone

Duotone Color Toning

All photos rendered in grayscale + a tinted layer. Switch between 4 color modes with the swatch buttons. Interactive palette explorer.

Open Demo →
17
Polaroid

Polaroid / Analog Prints

Photos styled as physical polaroid prints with subtle random rotations, tape, and handwritten-style captions. Hover to straighten.

Open Demo →
18
Cinema

Cinematic Letterbox

Fixed black letterbox bars top and bottom. Full-viewport images between them. Bebas Neue scene titles. Film-inspired pacing.

Open Demo →
19
Reveal

Hover Reveal

Photos start hidden behind a near-white mask. Hover to reveal color. Numbered grid, grayscale-to-color transition.

Open Demo →
20
Layout

Staggered Asymmetric Grid

Multiple grid row types alternated: wide + stacked, 3-col, paired. Creates visual rhythm without chaos.

Open Demo →
21
Gallery

Art Gallery / Museum

White walls, matted frames, museum-style label plates with medium and edition info. Simulates a physical gallery experience.

Open Demo →
22
Earthy

Nature / Earthy

Forest green nav, warm cream body, organic serif type. Nature-inspired color language that complements natural photography.

Open Demo →
23
Print

Newspaper Broadsheet

Blackletter masthead, multi-column editorial layout, drop caps, sepia-toned photos. Photography presented as longform journalism.

Open Demo →
24
Retro

Retro 70s

Burnt orange, avocado green, warm brown. Righteous display font, bold card outlines with hover offset shadow effect.

Open Demo →
25
Geo

Geometric / Diagonal

Dark background, diagonal clip-path on hero image, Rajdhani typeface. Strong angular shapes create visual tension.

Open Demo →
26
Scroll

Scroll Reveal

Elements fade and slide up as you scroll using IntersectionObserver. Alternating split layout with large italic headlines.

Open Demo →
27
Studio

Studio / Commercial

Professional portfolio site aesthetic. Stats bar, service cards, sticky nav with CTA. Clean Inter type, corporate-but-personal.

Open Demo →
28
Dreamy

Dreamy Overlap

Photos layered and overlapping with absolute positioning. Italiana serif type blended over imagery. Collage-like, painterly feel.

Open Demo →
29
App UI

Dashboard / App UI

Sidebar navigation, stats cards, photo management grid with publish status badges. Feels like a modern CMS or portfolio tool.

Open Demo →
30
Wild

Experimental / Abstract

Photos layered across the page with absolute positioning. Giant type on mix-blend-mode:multiply. Custom cursor ball. Fully unconventional.