A distinctive web presence for a London logistics company. From an expressive first impression to freight services and a clear route to an enquiry.
- My role
- Sole designer and developer. Website design, responsive frontend, contact integration and deployment.
- Built with
- Next.js, React, TypeScript, Tailwind CSS, D3, Unicorn Studio and Resend
- Hosting
- Vercel
- Website
- kingsleyav.com
From identity to implementation
I designed and built the complete website for Kingsley Avenue, a logistics company based in London. The site needed to introduce the business, explain its sea, air, rail and road freight services, and make it easy to start a conversation about a shipment.
I carried the work from the visual direction through the responsive pages, interactive details, enquiry form and Vercel deployment. The structure gives services, industries and the company story their own space, with contact kept within reach throughout.
Movement as part of the identity
The homepage opens with a fluid blue and green scene, large type and a bright lime accent. A restrained sans serif sits alongside an italic serif, giving the logistics company a recognisable visual voice.
I integrated a Unicorn Studio scene for the opening and used D3 for the globe graphic. Freight photography and video connect that abstract sense of movement to the services themselves. The lime accent consistently marks the next action.
A header that adapts to its surroundings
I built the fixed header around three visual states: transparent over immersive hero sections, white over light content, and dark navy over darker sections. As visitors scroll, the navigation becomes part of each section’s visual language while staying in a familiar position.
The logo, navigation text and dividing line change together to preserve contrast, with a short colour transition between states. The lime “Get a quote” button stays consistent throughout, keeping the primary action recognisable even as its surroundings change.
The behaviour is section-aware: each section declares its theme, and the header responds to the active section rather than sampling colours from photographs or animation. This gives me deliberate control over the contrast across very different backgrounds.
Four services, one clear rhythm
Each freight mode follows the same reading order: an introduction, the service name, a short explanation, practical capabilities and a contact link. Visitors can scan the options without learning a new layout for each one.
On desktop, the service text sits beside a large image that changes as the visitor moves between sections. Direct links from the homepage take people to the relevant mode. A separate industries page offers another entry point for visitors thinking about their cargo rather than its transport.
Reworking the layout for a phone
On smaller screens, the service image moves into the reading flow above the title. The desktop split becomes a single column, and navigation moves into a compact menu. The visual identity carries through while the layout adapts to the space available.
A useful start to the conversation
The enquiry form brings together contact details, company information, service interests and a message about the cargo. Visitors can select more than one service, and a phone number is optional.
I connected the form to a Next.js API route using Resend for email delivery. The interface includes sending, success and error states, with the company email available as a direct alternative.
The finished website
Kingsley Avenue now has a complete website connecting its identity, service offering and enquiry process. The project brings together the parts I enjoy most: establishing a visual direction, making the information easy to navigate, and building the experience through to launch.