Case study · 2026
Omae Containers
A container home built layer by layer, on screen too: the house assembles as you scroll, in indigo, paper and wood.
- Client
- Omae Containers
- Industry
- Custom container homes
- Deliverable
- Corporate website
- Year
- 2026
- Live
- Liveomaecontainers.com.br
01 · The website
Running right here
A copy of the website runs inside this page: scroll, click and switch between desktop and mobile. The site itself is in Portuguese, and its contact form is turned off here.
02 · The challenge
For many people a container home still sounds improvised. The brand needed to show method and finish, and explain in which order the house happens, from the first message to handing over the keys.
03 · The answer
Three complete visual directions were designed (carpenter, sashiko and architecture) and the final one combines the best of each: an opening photo that zooms with the scroll, a seal in the middle of the menu, the house that builds itself as you scroll in the "The build" section, the stack of wall layers and a contact section shaped like a letter.
- Corporate website
- Three art directions
- House that assembles on scroll
- SEO and structured data
- Self-hosted fonts
- Security headers
04 · How it was made
Seven stages, one team
Each stage has an owner and a sign-off before the next one. AI is a tool in the process, never the author.
- 01Strategy and content
Discovery
Study of the product, the building stages and the doubts that stop people from considering a container home.
- 02UX and architecture
Strategy and content
The narrative follows the build: conversation, plot, foundation, module, layers, finishing and delivery.
- 03Art direction
Architecture and wireframes
Wireframes for three different directions, each with the same content order, so only the form is compared.
- 04Motion and interaction
Art direction
Indigo, kinari paper, oxide and wood. Shippori Mincho for headings, BIZ UDPGothic for text and the seal as the mark.
- 05Development
Development
Hand-written HTML and CSS, inlined critical CSS, JavaScript cached for a year and the house drawn in layers that react to the scroll.
- 06SEO, AEO and data
SEO, AEO and performance
Schema, metadata and content written for real questions, with a "questions that always come up" FAQ.
- 07Quality and performance
Testing and delivery
PageSpeed on mobile and desktop with the same server and headers as the final hosting.
05 · From wireframe to layout
Structure before style
The whole page, top to bottom. Drag the divider: on one side the structure (blocks, headings, images and buttons), on the other the final layout. Scroll inside the frame.
06 · Art direction
Colors and type
- Indigo#1b2a4a
- Deep indigo#111b31
- Kinari#efe8d8
- Asagi#a3bdd3
- Oxide#8a3f2c
- Wood#a8825a
- Lamp#f2d59b
- Shippori MinchoHeadings
- BIZ UDPGothicText
07 · Measured, not promised
PageSpeed scores
Mobile and desktop.
- 100Performance
- 100Accessibility
- 100Best practices
- 100SEO
08 · Who thought through each part
Seven disciplines, one website
- 01
Strategy and content
Who arrives, what they need to understand and in what order. The story is defined before any screen.
- 02
UX and architecture
Page map, wireframes and the path to the contact, tested on mobile first.
- 03
Art direction
Palette, typography, photography and the signature element that makes the site recognizable.
- 04
Motion and interaction
What moves, why and how fast. Everything respects visitors who ask for reduced motion.
- 05
Development
Hand-written code, no page builder: light HTML, inlined critical CSS and a custom admin panel when the client needs one.
- 06
SEO, AEO and data
Structure for Google and AI assistants: schema, answer-ready FAQ, metadata and privacy consent.
- 07
Quality and performance
PageSpeed, accessibility, security and testing on desktop and mobile before delivery.
Want a website like this?
Tell us about your project. Bertoni replies the same day, on WhatsApp or by email.