Confidential/2026
WebAgencia
A landing for a Spanish web development agency that sells peace of mind and results to business owners, not code.
(01) Overview
A web development agency in Spain asked me for its own landing page: a dark, typographic site that explains custom development to business owners who don't speak the language of developers. I designed it from the client's content brief, through one revision round that changed its focus, to a documented design system with its own WA monogram.
Client
Confidential
Year
2026
Services
Design, Development, Branding
Deliverables
Web design, Logo (WA monogram), Design system, Conversion copy, Responsive layouts
(A) The Challenge
The first brief read like a developer talking to developers: clean code, private repositories, speed metrics with acronyms. The client's revision turned that around and made it the rule for the whole page: no technical terms at all, every block answering what problem the agency takes off the owner's plate today.
(B) The Approach
- 01
Technical, said as business
I rewrote every technical idea as a business one: the repository became «all the keys and files», an integration became «connecting outside tools».
- 02
One objection per section
Each numbered section answers one objection, in the order an owner raises them: from the value proposition and before and after to a comparison against templates, a four-step process and seven FAQ answers.
- 03
Dark, light and lime
Dark and light blocks alternate for rhythm, with a single lime accent reserved for actions and key figures, all on a written design system with its own voice rules.
- 04
A close that asks
The page closes on a short form that asks what stage the project is in, so the agency knows how to answer before the first call.
sections, from hero to contact form
FAQ answers, one objection each
accent colour, saved for actions and figures
(02) Brand & Design System
The WA monogram is built from six diagonal strokes of constant width: the last stroke of the W climbs up and becomes the left side of the A, and the crossbar closes low to cut the triangle. It sits in lime at rest and turns white on hover, and its strokes enter one by one on load. Space Grotesk carries headlines and figures with tight tracking, Inter the body. Line icons only, no emojis.
Palette
Typography
Space Grotesk
Desde 330 € · 98/100
titulares, botones y cifras · Inter para el cuerpo
(03) The Product
Before and after, in plain words
Three categories (management, sales, scalability) told as a pair of cards: a dashed, muted «before» with an alarm clock, and a dark «after» that lifts on hover and closes with a separate «Result» line. The after card is the hook, so it is the only one that stands out.
Agency vs generic solutions
Design, code, speed, ownership and support, row by row, with the agency's column tinted in the accent so the eye lands on it first. On a phone the table recomposes into one card per criterion, so nobody has to scroll sideways to compare.
Everything connected, nothing lost
The client asked for a business infographic, not a network chart: the website at the centre with a pulsing glow, and payments, lead capture, customer management and notifications around it, joined by two-way dashed arrows that keep flowing.
A clear method, no surprises
Four numbered cards (strategy, architecture and design, agile development, delivery and support) with outlined numbers that fill with lime on hover, so the milestone-based way of working reads at a glance.
Seven objections, answered
Ownership of the code, custom work vs templates, growth, deadlines, errors, support after launch and day-to-day communication, in an accordion that keeps one answer open at a time.
A short form that qualifies
Name, email, a short message and one dropdown that asks what stage the project is in, from «just an idea» to «I want to extend my current site», so the agency knows how to answer before the first call.
(04) The Outcome
A complete landing delivered in versions (a second on 23 August, a third on 1 September) with a final pass on 8 September that added the mobile contact bar: phone on the left, WhatsApp on the right, the same bar I had designed for planpresencia.es. On a phone the comparison table becomes a stack of cards, the ecosystem diagram becomes a 2 by 2 grid, and every animation calms down for people who prefer reduced motion.