Dorothy DeLong

Designing and building a scalable portfolio experience for a visual artist

Who is Dorothy DeLong?

Dorothy DeLong is a photographer who needed a digital platform to showcase her work and attract opportunities from galleries and publications.

I designed and built a one-page website that balances visual storytelling with a flexible, scalable structure, ensuring her work remains the focal point while supporting future growth.

Concept project completed as part of UX/UI certification, focused on solving a realistic user scenario.

Short on time? Jump straight to the prototype

VIEW PROTOTYPE

The Challenge

The experience needed to:

Highlight photography without visual distractions
Organize content in a clear and intuitive way
Scale easily as new work is added

The challenge was to create a visually compelling experience that prioritizes content while remaining flexible and functional.

My Role

I owned the project end-to-end, including:

Wireframing and UX structure
Visual design and branding direction
Front-end development

I was responsible for translating design decisions into a fully functional, coded experience.

Approach

The design approach centered on letting the photography lead, while creating a structure that supports usability and scalability.

Key considerations:

Keep the interface minimal to avoid competing with imagery
Create a clear content hierarchy to guide users
Design a flexible layout that can evolve over time

Design

Website Look - Wireframes & High Fidelity Mock-ups

The main goal for the website redesign is clear - a responsive design with layouts for tablet and mobile! All aspects of the website need to be clear and visible while being viewed on any device. I started with hand-drawn wireframes as the base.

The desktop layout was successful, so I analyzed it to identify key content and functionalities. The content order on the desktop design prioritized Dorothy's portfolio, so that remained the same. For smaller screens, I ensured essential features were easily accessible, and created streamlined layouts with touch-friendly navigation.

Design

How It Works

The website is structured as a single-page experience with clearly defined sections:

Hero section to immediately showcase featured work
Gallery layout for browsing multiple images
Supporting sections (about and contact) to provide context and drive engagement

Key improvements:

Simplified navigation by consolidating content into one continuous flow
Designed a multi-row gallery system to support additional images
Used layout and spacing to guide users naturally through the experience

The result is a cohesive, scroll-based system that makes exploring the work intuitive and engaging.

How It Works

Before and After - originally the only spot to locate Dorothy's contact info was the footer, so a new Contact section was added, along with an email form.

Before and After - on mobile, the hamburger menu was replaced with a sticky footer menu so items are always visible

Key Decisions

Designing for a visual artist required careful balance between aesthetics and usability.

Used a minimal interface to keep focus on the photography
Selected a monochrome hero image to ensure UI elements remained legible
Designed modular sections to support scalability

Tradeoffs

When additional images were introduced, I chose to restructure the gallery layout rather than reduce image size—prioritizing visual impact over density.
On mobile, a stickey menu replaced a hamburger, fly-out menu for ease of accessibility and visibilty.
Although it added to the length of the page, I added a dedicated contact section with an email form, in addition to an email hyperlink

Prototype

Using Figma, I built an interactive prototype.

Click the button below to view the prototype of the Dorothy DeLong mobile site.

VIEW PROTOTYPE