RICK W.

Building trust through image, structure and interaction

Rick W. is a self-initiated practice project created around a fictional commercial photographer, Rick Williams. I developed the brief, defined the content architecture and designed the complete interface in Figma.

The objective was not simply to display photographs, but to move a visitor from first impression to a booking enquiry. The page introduces the photographer, presents the available services, backs them up with testimonials and closes with a focused call to action.

The final interface was implemented as a responsive, interactive website. The build includes animated statistics, scroll-aware navigation, a responsive gallery, image lightboxes and subtle cursor-driven movement in the hero section.

Year

2024

Type

Web Design, UI, Portfolio Website

Role

Concept, Content Strategy, UX Structure, UI Design, Art Direction

Tools

Figma, HTML, CSS, JavaScript

From visual impression to booking

Photography portfolios often function as passive galleries. For this project, I structured the homepage so each section answers the next natural question a potential client has.

The page is structured to answer a sequence of practical questions: Who is the photographer? What does he offer? Can he be trusted? What does his work look like? How can a session be booked?

This creates a deliberate content progression:

The structure allows the imagery to establish atmosphere while the interface gradually supplies the information and reassurance required to support a booking decision.

A more ornamental first approach

The initial design already established the core architecture of the website: a personal introduction, service overview, client testimonials, image gallery and final booking call to action.

Visually, however, it relied on blue geometric framing, large star ratings, irregular compositions and more prominent decorative elements. These devices created energy, but they competed with the photography and made the interface feel denser and less unified.

From decoration to restraint

The final direction retains the original content structure while simplifying its visual expression.

The blue palette was replaced by a restrained black, graphite and muted-gold system. Decorative frames were removed, spacing became more consistent and content was reorganised into clearer modular sections.

This refinement shifted attention away from interface ornament and toward the photographer's work. The final page feels quieter, more premium and more credible, while calls to action remain immediately visible.

A restrained frame for varied photography

The interface combines a near-black background with graphite surfaces and a muted gold accent. The dark environment creates visual continuity across wedding, commercial and lifestyle photography, despite differences in subject matter and colour.

Editorial serif typography introduces personality and a premium tone, while the neutral interface type keeps navigation, supporting text and calls to action clear.

Rounded cards, thin borders and soft shadows create separation without making the interface feel overly technical. Gold is used selectively for active navigation, statistics, rating details and booking actions.

Designed in Figma, realised in the browser

The final design was translated from Figma into a responsive front-end build.

Interaction was kept subtle and functional. The hero portrait responds gently to cursor movement, statistics animate when they enter the viewport and the navigation updates according to the user's position on the page.

The gallery supports horizontal browsing and click-to-enlarge viewing, allowing photographs to be inspected without leaving the page. Responsive behaviour adapts the content hierarchy, gallery and navigation for smaller screens while preserving the original atmosphere.

Explore the finished website

The embedded website below is the complete working implementation. It combines the final visual system, responsive layout and interactive behaviours in one continuous experience.

The page closes with a direct booking invitation, completing the user journey from introduction and credibility to portfolio exploration and action.