A metalwork atelierthat architects hadnever heard of.
Steel Arte cuts artistic metal panels, brise systems, gates and pergolas for high-end residential and corporate architecture in Brazil. Every piece is drawn for one project and cut to the millimetre. Nothing about the work is commodity — but nothing online said so.
The audience is narrow and specific: architects and developers specifying materials for luxury builds. They do not buy from a catalogue, they buy from confidence that the atelier can execute a drawing. The site had to earn that confidence before a single email.
Sell the art,not the metal.
The whole project turned on one decision: stop describing what Steel Arte manufactures and start showing what it makes possible. Metalwork suppliers lead with capacity, tonnage and finishes. Steel Arte leads with the room the panel is in.
That reframing set the narrative order for the entire homepage — art first, architecture second, process third, credentials last. By the time a visitor reaches the specification detail, they already want the piece.
The positioning line the site is built around: art, architecture and exclusivity in metal — in that order.
Designing for aspecifier, not ashopper.
Architects read a supplier site looking for evidence, not persuasion: can this atelier hold a tolerance, will it hit a site deadline, has it done something like this before. Interviews and competitor analysis kept surfacing the same three questions.
So the structure answers them in order — a process section that names each stage from briefing to installation, a differentiators section that says plainly what separates a Steel Arte piece from a generic one, and a project gallery that shows panels already living inside finished architecture.
“The metal was already art. The website was still selling it by the square metre.”
Design principle, Steel Arte
Graphite andbrushed brass.
Graphite
#0E0E0C
Primary Background
Brushed Brass
#B2935E
Accent
Warm Sand
#CBB287
Secondary Accent
Oxide
#9C5B3B
Supporting Warm
Bone
#F2EFEA
Primary Text
Arte,Arquitetura eExclusividadeem Metal.
Cormorant Garamond · Display / Jost · Body
Cormorant Garamond + Jost
A high-contrast editorial serif for display, set very large, against a geometric sans for body. The serif carries the craft and the heritage; the sans keeps the specification copy neutral and legible. The tension between them is the same one in the product — handwork executed by machine.
Story first.Screens after.
The narrative was settled before any layout existed, so the design had a spine to hang on rather than a set of sections to fill.
- 01
Discovery & Positioning
Interviewed the atelier about how work actually arrives — almost always an architect with a drawing. That single insight moved the whole site's audience from homeowner to specifier.
- 02
Competitor Analysis
Benchmarked Brazilian metalwork suppliers and European architectural-metal ateliers. The local field sells capability; the European field sells authorship. Steel Arte belonged with the second.
- 03
Narrative Architecture
Wrote the page as a story before designing it: art, architecture, what we do, how we work, why us, proof, contact. Each section earns the next scroll instead of restating the last.
- 04
UI Design
Designed every screen around the photography, with the serif set large enough to read as a statement and generous negative space so each panel gets its own frame.
- 05
Build & Launch
Built and shipped the production site, tuned for large architectural imagery without a slow first paint on a phone.
Every panel getsits own frame.
Product categories, the process walkthrough and the project gallery, all built to let the photography carry the argument.
A supplier site thatreads like aportfolio.
Steel Arte now presents the way its buyers already think: authored pieces inside finished architecture, with the technical detail available but never leading. The five-stage process section does the work a sales call used to do, so enquiries arrive already understanding how a commission runs.
The whole thing — story, research, screens, build — was delivered end to end, which meant the narrative that survived into production was the one the research argued for.
- 7
- Product lines structured
- 5
- Process stages defined
- 1
- Positioning line, everywhere
- 100%
- Designed and built in-house
Designed andshipped.
- FigmaUI & Design System
- ResearchInterviews & Benchmarking
- CopywritingNarrative & Positioning
- PhotoshopImage Treatment
- Front-endBuild & Deployment
Selling somethingbetter than yoursite says?
I find the story the work already tells, then design and build the site that tells it.
Let's Talk