twc-014 / A study by Syafril · not client work

Ruang/Bentuk: Ruang/Bentuk

An architecture practice study built from cinematic facade photography, attentive typography and a ruled spatial index. Select three reference studies, pin a material sample from each study’s board and collect it, with your needs, in a project file you can download.

Actual desktop capture of the Ruang/Bentuk demonstration.

At a glance

Headline type
Big Shoulders Display
Reading type
Inter Tight
Try this interaction
Three spatial reference studies
Charcoal#202320
Light#f1f1e9
Concrete#a6ada0
Study paper#e4e4dc
A schematic of the implemented composition.

WHAT IS HERE / WHAT COMES NEXT

Know what you are choosing.

Architecture, interior and spatial design practices.

Working in this demo

  • Three spatial reference studies
  • Scoped project-detail dialog
  • A material board on every study
  • Spatial brief with a project file and TXT download
  • Architecture brief context

This tool includes a working workspace and its own component book. Its controls operate on local state.

Production integrations to discuss

  • Real business content, verified photography, CMS and any booking or transaction service need a separately agreed production implementation.

Exports are generated in your browser. No account, cloud storage or external service is connected.

A limit to plan around

A fictional practice, not a list of commissioned buildings. Every photograph is identified as a licensed reference, with original author and subject. Material samples are drawings for discussion, not a specification of the photographed buildings. No client or completed project is claimed, and the brief is never sent.

Delivery & customization

Page scope, brand assets, content, handover, hosting, costs and support are discussed in a consultation before work begins. The demo is a reference for that conversation.

Prepare a brief for this direction

The idea

Space deserves a slower look. Architecture appears as a sequence of material, light and everyday rituals, rather than an interchangeable portfolio grid.

Visual language

Charcoal, concrete and light. A full-width facade, hairline editorial rules, square dialogs, oversized restrained typography and one italic serif line as the accent. Material samples are original drawings.

Typography

Big Shoulders Display, a tall condensed Gothic made for civic signage, gives long headings a facade-like rhythm; Instrument Serif italic answers it in one line of a title, study and sample names and the page standfirst, like a caption written by hand. Inter Tight reads the text and small technical labels create the spatial index.

Layout & composition

A cinematic facade spans the page beneath an oversized title. An approach essay gives way to a ruled project index beside the selected photograph and a detailed dialog. Each study page ends on a material board of three samples and the other studies; the spatial brief keeps a project file beside the form, an empty sheet with a blank plan until it is prepared.

Motion & interaction

A bounded facade pan, a once-only approach reveal and directed study-image changes create continuity. Native scrolling, stable focus and reduced motion remain intact.

Under the surface

Static bilingual pages, local project selection and a scoped accessible Radix dialog. A board link carries the study and sample to the spatial brief in the URL, checked against the boards on every read; the needs stay on the page. Brief links carry validated architecture and design context.

Designed for everyone

Server-visible content, labeled keyboard controls, scoped focus/portals and readable mobile flow. Motion respects reduced-motion preferences and avoids automatic loops.

Inside the experience

  • Three spatial reference studies
  • Scoped project-detail dialog
  • A material board on every study
  • Spatial brief with a project file
  • Architecture brief context
  • An independent design and component book

A good fit for

  • Architecture, interior and spatial design practices.

Across screens

Actual desktop capture of the Ruang/Bentuk demonstration.
Actual desktop capture of the Ruang/Bentuk demonstration.
Actual mobile capture of the Ruang/Bentuk demonstration.
Actual mobile capture of the Ruang/Bentuk demonstration.

A different perspective