Shape the idea
Turned the Pink Starship name and recording-studio brief into a clear visual direction.
← Back to earlier work
Pink
Completed personal project
Pink
Starship.
A recording studio website that started with a friend's domain name and a loose idea for something playful, hand-drawn and unlike the usual studio template.
- Role
- Design & development
- Design
- Adobe XD + custom graphics
- Frontend
- CSS Grid, CSS animations, TypeScript
- Testing
- Playwright regression coverage
Pink StarshipCompleted site
Context
From a name to a working site.
A friend approached me because he wanted a website to advertise his recording studio services. He already had the Pink Starship domain and wanted the site to have a playful, hand-drawn aesthetic rather than looking like a generic recording-studio template.
I took the project from the visual concept through to implementation, designing the interface in Adobe XD, creating the supporting graphics and then building the site itself.
Adobe XDCSS GridCSS animationsTypeScriptPlaywright
What I worked on
Design, interaction and regression safety.
The visual direction was developed as part of the project rather than applied after implementation. I used Adobe XD to work through the UI and created graphics that supported the hand-drawn Pink Starship identity.
The finished frontend uses CSS Grid for layout and CSS animations for movement and personality. TypeScript powers the audio-player interactions so visitors can listen to studio work directly on the site.
I also added Playwright coverage around the site so future changes could be checked against the existing behaviour instead of relying entirely on manual visual testing.
Design
Produced the interface in Adobe XD and created the supporting hand-drawn graphics.
Build
Implemented the responsive site with CSS Grid, animation and TypeScript audio-player behaviour.
Protect
Added Playwright regression coverage to reduce the chance of future changes breaking established behaviour.
Result
A small project with its own personality.
The finished site took a loose creative brief all the way from visual direction to a responsive, interactive implementation, including automated regression coverage for future changes.
The result is intentionally unlike a generic studio template: playful, hand-drawn and built around the personality of the Pink Starship name.
Visit Pink Starship ↗