Websites
Client projectQualls Dickerson Photography
A portfolio and booking site for a sports photographer in Hohenwald, Tennessee.
Football and basketball photography shown at full strength: filterable galleries with a full-screen viewer, camera-inspired motion, copyright protection on the photographs and a website chat for booking a shoot.
Client project — designed and built by TrueFrame Studio
- Type
- Client project
- Category
- Websites
- Platform
- Responsive website
- Built with
- HTML · CSS · JavaScript · Three.js
- Disciplines
- Website Development, UI/UX Design
Screen 01 — Home
A poster-scale headline beside the hero photograph in a viewfinder frame.
01Live site
See it live.
On the live site
- 01
Open the football gallery and filter by Emotion or Portraits.
- 02
Select any frame to view it full screen, then use the arrow keys.
- 03
Press Book a shoot to see the website chat.
Key features
- 01
Two sport galleries
Football and basketball each have a gallery, filterable by action, emotion, portraits and atmosphere.
- 02
Website chat
Visitors start a conversation from the site with no account, and replies come back into the same chat.
- 03
Full-screen viewer
Any frame opens full screen; the arrow keys and swipes move through the set.
02Screens
Inside the product.
Responsive
Recomposed for every screen.
Navigation, hierarchy and controls are rebuilt for tablet and phone, not scaled down from the desktop layout.
Tablet768 px
Phone390 px
03Under the hood
How it was made.
- ArchivoDisplay · 800
- InterText · 400–500
- IBM Plex MonoReadouts · 500
- Paper#F7F7F5
- Line#DDDCD6
- Ink#0B0B0B
- Red#FF3B30
Qualls Dickerson Photography is the online home of a sports photographer based in Hohenwald, Tennessee. The site leads with the photographs: a large hero frame, a gallery for football and one for basketball, and a highlights band drawn from both.
01Brief and goalsWhat the site is built to do
Every page points to one next step: Book a shoot. The contact page opens a website chat: visitors start a conversation without an account, and Qualls can reply from his email. Copyright notices sit beside the work throughout.
Goals
- 01
Put the photography first, at a size that does it justice.
- 02
Make each sport's gallery easy to browse, with every frame viewable full screen.
- 03
Turn interest into a booking through one clear action: Book a shoot.
- 04
Make it clear on every page that the photographs are copyrighted.
02Design decisionsTypography · Colour · Motion · Layout
- Typography
Condensed type at poster scale
Archivo, a variable typeface, is set extra-condensed at weight 800 for every headline, with semi-condensed capitals for labels. Inter carries the text, and IBM Plex Mono sets the camera readouts (ISO, shutter speed, aperture) on the hero frame. All three are served from the site itself.
WhyCondensed capitals carry the weight of a sports poster and still leave room for the photograph beside them.
- Colour
Paper, ink and one red
An off-white page, near-black ink and a single red kept for small signals: the live dot, section numbers, focus outlines and the chat's unread marker. The highlights band and the gallery pages switch to a dark ground.
WhyThe photographs bring the colour. A neutral interface keeps it from competing with them.
- Motion
The language of a camera
A viewfinder overlay with focus brackets and exposure readouts on the hero photograph, aperture-style transitions between pages and a 3D camera introduction on a first visit. All of it is skipped for visitors who prefer reduced motion.
WhyMotion borrowed from the photographer's own tool reads as part of the brand rather than decoration.
- Layout
Galleries with rhythm
Each gallery is an editorial grid that repeats a pattern of large, tall and small frames, numbers every photograph and tags it by category. Choosing a filter re-flows the grid and updates the count.
WhyMixed sizes give the strongest frames room and keep a long set of photographs from reading as a uniform wall.
03Build and technologiesHTML · CSS · JavaScript · Three.js
HTML
Static pages: home, about, contact, a gallery for each sport and a thank-you page.
CSS
Custom stylesheets for the layout, the editorial gallery grid and the camera motion. No CSS framework.
JavaScript
Plain scripts for navigation, gallery filters, the full-screen viewer with keyboard and swipe, image protection and the chat.
Three.js
Bundled into one script that loads only for the 3D scenes: the first-visit intro and the home page.
Self-hosted fonts
Archivo, Inter and IBM Plex Mono, served as WOFF2 files from the site.
Netlify
Hosting, plus a serverless function behind the website chat.
Services delivered
04ProcessDiscover · Plan · Design & Develop · Launch & Support
01Discover
Start from the photographs: two sports, a selected set of frames for each, and the need to protect the images.
02Plan
Organise the site into work, about and contact, with a gallery page per sport and Book a shoot as the single next step.
03Design & Develop
Design a bold editorial system with camera-inspired details, then build the pages, galleries, viewer and chat.
04Launch & Support
Serve every photograph as WebP at several sizes and publish the site on Netlify.
The site. Qualls Dickerson Photography is a client project, designed and built by TrueFrame Studio and live at quallsdickersonphotography.com (opens in a new tab).