Case Study 03 · UX/UI · Web Design & Development

Dorothy DeLong Website

A photographer needed a digital platform to showcase her work and attract opportunities from galleries and publications. I designed and built a one-page responsive site that balances visual storytelling with a scalable structure — ensuring the photography always leads.

The Challenge

Let the photography lead. Get out of its way.

The challenge for any photographer's portfolio site is the same: the UI has to be invisible. Every design decision — layout, color, navigation — exists only to make the work easier to experience. Add to that the requirement for responsive design across desktop, tablet, and mobile, and a gallery system that could grow without requiring a full redesign.

The original site buried contact information in the footer and used a hamburger menu on mobile that was easy to miss. Two functional problems that a cleaner design could solve.

Layout

One-page scroll experience

Consolidated all content into a single continuous flow — reducing navigation friction and keeping the focus on the work.

Mobile UX

Sticky footer nav over hamburger

Replaced the fly-out hamburger menu with a sticky bottom nav on mobile — always visible, always accessible.

Gallery

Multi-row system over density

When additional images were introduced, chose to restructure layout rather than reduce image size — visual impact won.

Content

Dedicated contact section

Added a full contact section with email form — not just a footer link — so galleries and publications could easily reach her.

My Process

From hand-drawn wireframes to coded reality.

This project bridged design and development — I owned everything from initial wireframes through the final HTML/CSS build. Starting with hand-drawn sketches helped me move fast before committing to high-fidelity decisions.

Hand-drawn Wireframes

Started with low-fi sketches to quickly establish the one-page structure, content order, and responsive layout strategy.

Responsive Layout Design

Adapted the desktop layout for tablet and mobile — preserving content priority while solving for touch-friendly navigation.

High-Fidelity Figma Design

Built detailed mockups across all three breakpoints, with a focus on the gallery system's scalability.

HTML/CSS Build

Translated the Figma designs into a fully coded responsive site — bridging design decisions into a working implementation.

View the Prototype →

Outcome

A platform that gets out of the way — and grows with her.

The final site is clean, responsive, and built to scale. The photography leads at every scroll position. The sticky mobile nav solved the accessibility problem without adding complexity. The gallery system can accommodate new work without touching the structure.

Breakpoints designed and built

desktop, tablet, mobile

Redesign needed as new images are added

the system scales

End-to-end owner

from wireframe sketch to coded site

Reflection

💡

Design with real content, not placeholders. Using Dorothy's actual photography throughout the design process exposed layout decisions that wouldn't have surfaced with grey boxes.

💡

Building your own designs makes you a better designer. Translating Figma to code revealed details that needed refining — and made every future design decision more grounded in what's actually buildable.