The process was intuitive. I knew what looked right, but I wasn't working with a clear system behind it.
Built to monitor.
Console gives you a clear view of every fixture, zone, and circuit in real time. Everything you need, one tap away.
From idea to live.
A monitoring tool built for theatres, arenas, and live events. Here's how it came together.
-
01
Research
Sat with the team to understand how the software was being used day to day.
-
02
Benchmark
Went to a tradeshow to study how other companies visualise the same system.
-
03
Design system
Started with a design system document. The layout needed to scale across devices and the company has more than 10 of them.
-
04
UI Design
Designed everything in Figma, spending a lot of time polishing it alongside the product owner.
-
05
Handoff
Handed off to the dev team, then came back at the end to work on the shared CSS library and iron out the small things.
neutral
#1B1B21
neutral-light
#525264
primary
#0E4161
secondary
#1D89CC
accent
#8F3694
error
#A10707
warning
#F1AA0E
Dark for a reason.
Lighting professionals work in booths, backstage, and dimmed control rooms. Console is designed around three core colours, easy on the eyes in any condition.
Nothing left to default.
Designed once, works everywhere. The same system carries across all devices, from a phone screen to a full control panel.
TYPOGRAPHY
Headline 11.5em 24px
Headline 21.2em 19.2px
Headline 31.1em 17.6px
paragraph1em 16px
SPACING
.5em
.8em
1em
1.2em
2em
COMPONENTS
Primary slider
On
Off
Small slider
Button
Grid layout
50%
40%
10%
40%
40%
20%
Picker
None
None
Text
From idea to live.
This was my first big commercial site. Here's how I handled it.
-
01
Brief
Went through the brief with the team and figured out what mattered.
-
02
Research
Looked at other hotel sites for ideas and inspiration.
-
03
Mockup
Built the first version of the design in Figma.
-
04
Polish
Added colours, typography, and the finishing touches.
-
05
Launch
Tested everything and took the site live.
dark-green#12372A
green#436850
light-green#ADBC9F
cream#FBFADA
Island palette.
I wanted a palette of greens and cream. To me, the greens felt like the forest and the cream like the dunes. I used the brighter green to pull the eye toward action buttons, and cream to keep the rest soft and let the green stand out.
Two years later.
I see this project differently now. A few things I'd do differently if I started it today.
I'd do the design system first. Components, grid, spacing. It would have made the whole process cleaner.
Specifically
- Start with a proper grid and spacing system.
- Spend more time on typography.
- Use AI to speed up the early groundwork.
Built from scratch.
A product website for lighting control hardware. Brand, design, and front-end, all handled by me.
From idea to live.
Everything from brand to code, here's the process.
-
01
Kickoff
First project at a new company. Sat with the product owner to define the scope.
-
02
Research
Started with research, looking at similar products and how they presented themselves online.
-
03
Design
Spent time on colours and typography, then moved into Figma to sketch out the layouts.
-
04
Collaboration
Brought in people with more knowledge of the field to help visualise certain parts.
-
05
Launch
Got the design approved and developed it from scratch.
primary#FFDDFF
accent#8F3694
light#FFFFFF
dark#1F0920
Company colour.
The company colour is purple. I built the whole palette around it, using a dusty shade for surfaces and a brighter one for buttons and key actions.
A year later.
It's only been a year, but I already see things I'd do differently.
Most of the work was visual. I was designing block by block rather than thinking about the full picture.
Now I'd think about the full layout first before touching individual sections.
Specifically
- Set a clear visual hierarchy across the whole page.
- Spend more time on typography and how text flows across the page.
- Reusable components with a shared logic.