Background
LavaX is an IT infrastructure and automation agency for fast-growing businesses. I designed and built the site as a self-initiated concept, and picked that market on purpose. When every competitor looks the same, the site has to earn trust in the first few seconds.
I built the whole look on one idea: gold as a signal of excellence and ambition, set against deep black with big confident type. I designed it in Figma, then built it in Webflow.
The challenge
Building a look from scratch, and keeping it in the browser
They had no brand presence yet, so I had to make something people would remember in a market where every site looks the same. The design leans on layered gold gradients over dark backgrounds, and that's exactly what browsers get wrong. Gradients go stripey and backgrounds stack oddly, which kills the depth.
Explaining technical services simply
LavaX does complex work, but the people buying it aren't developers. The copy and the cards had to make sense fast. On the build side, those service cards couldn't just be static blocks. They had to run off the CMS without losing the spacing that makes them easy to skim.
Earning trust with no track record
A new agency can't lean on years of reputation, so the design uses every bit of proof it can get: client logos, a featured project with real numbers, testimonials, and a clear process. All of those repeat, so I had to set them up as collections with rules instead of drawing each one by hand.
Not looking like every other IT site
Most IT agency sites use stock photos, blue, and bullet lists. I went the other way with big type and overlapping sections. Those are also the parts that break first, usually somewhere between 992px and 1280px, if you just copy the desktop positions straight over.
The solution
Dark editorial look, set up as reusable styles
I designed it around deep black with amber and gold on purpose, to get away from the usual light blue IT template. In Webflow I turned the Figma colors and text styles into classes and variables, and rebuilt the gradients as stacked backgrounds with set color stops so they don't band.
Services written around results, built on the CMS
Each card leads with what the client gets, not what LavaX does. The section pulls from a Services collection tied to a component I sized against the Figma file, with limits on how long the text can be so later edits don't break the look.
Proof stacked all the way down
Client logos sit right under the hero, then a featured project (Foodora) with real numbers, then testimonials with names and job titles. Projects and testimonials run on the CMS with image size rules, so new ones drop in without pushing the spacing around.
A three-step process that still works on mobile
Discover, Build, Grow lays out how working together goes, with real photos so it feels tangible. On desktop it runs across the page. On mobile it stacks with the lines still lining up, and the steps come in with IX2.
“I wanted LavaX to look like an agency you don't need convincing about. Then I built it so none of that got lost on the way.”
— Nnamdi Ogbonna,
Key outcomes
A look of their own, built from nothing
LavaX now stands apart from every other IT agency site, and the live build matches what I designed at every screen size.
Complex services made easy to read
You can pick up what they do, how they work, what they've built, and what clients say in one scroll. Nothing turns to mush on a small screen.
Trust built in, and easy to add to
Logos, project numbers, testimonials, and the process section make a new agency feel settled, and LavaX can add more without calling me.
Solid on every screen
Scroll effects, hover states, and the process steps all run on IX2, with nothing jumping or sitting on top of each other when you refresh.
Technology stack
- Figma
- Webflow
- Webflow CMS
- IX2
