Design system, 3D
The R in 3D
I made RAMTT’s R as a part of anodized aluminum, from the flat mark to the files for AR and a printer. Scroll to follow it step by step, rendered live in this page.
The mark on paper
The R starts as the flat mark from the design system: one closed outline in ink, the same outline RAMTT uses at every size.
Depth from the outline
The outline is extruded to of its shorter side. Printed at across, the R is deep.
A round on every edge
Each edge has a round between the face and the wall, marked here in violet. A chamfer would light up as one flat band, and the round gives a highlight that moves along the edge as the R turns.
The marks of the tools
A fly cutter leaves arcs across the face, and an end mill leaves steps down the walls. The shader computes both from the R’s own coordinates, so the marks stay on the metal as it turns.
Anodized in violet
Anodizing grows a clear oxide on the aluminum, and the dye is held in that oxide. The color is RAMTT’s accent, and the oxide over it still mirrors the studio at a grazing angle.
Five finishes, one shader
Each finish is a set of values for the same shader: the color, the roughness, the oxide and the diamond cut on the round. The R passes through all five as you scroll.
The R as the app icon
Seen from the front, the R in white on violet is the app icon. Each platform gets its own tile from the same outline: iOS in light, dark and tinted, macOS, and the masks of Android.
One mesh in every file
The files hold the mesh that renders in this page. There is a GLB for the web and Android, a USDZ for AR Quick Look on an iPhone and an STL for a printer.
- Mesh
- triangles
- Printed
- across, deep
- Files
- GLB, USDZ, STL
- Renderer
- WebGL, in this page