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

Avara Homes: Avara Homes

A fictional residential architecture studio that starts a house from the household’s days. Its site is a numbered set of drawing sheets: a room programme with an adjacency matrix and bubble diagram, one ordinary day, patterns to pin and a printable summary.

Actual desktop capture of the Avara Homes demonstration.

READ THE DESIGN

Why it is arranged this way.

The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.

Actual website capture. Follow the numbered notes.
  1. 01

    Relations before rooms

    The adjacency matrix leads the sheet. Each diamond is one pair of rooms; a tap or Enter changes it, and the bubble diagram beside it is redrawn from the same programme. Nothing is measured or to scale.

  2. 02

    A title block, not a header

    Project, household, scale, status and the sheet index sit in a vertical title block, as on a drawing set. On a phone it becomes a strip with the sheet index, followed at once by the sheet title.

  3. 03

    Diazo ink on print paper

    Purple ink, a roof-tile accent and tracing-paper panels come from Indonesian drafting offices. Millimetre grid sits only behind drawings; relations read through symbols and line styles, never colour alone.

At a glance

Headline type
Archivo Expanded
Reading type
DM Sans
Try this interaction
Adjacency matrix, a day and pinned patterns
Print paper#f3eedb
Diazo ink#2f2b78
Roof tile#a3401f
Tracing#e4e0f0
Millimetre grid#e9a66f
A schematic of the implemented composition.

WHAT IS HERE / WHAT COMES NEXT

Know what you are choosing.

Start the house from the days inside it.

Working in this demo

  • Three sample households with 5–8 rooms each
  • Keyboard adjacency matrix and bubble diagram
  • Day schedule for 1–6 people with findings
  • Pinned patterns, A4 landscape print, TXT and SVG
  • Programme kept in this browser

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

Production integrations to discuss

  • A real studio’s information, portfolio with photo rights, its own planning method and a real consultation channel need a separately agreed implementation.

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

A limit to plan around

Fictional design study. Households, patterns and diagrams are illustrative and not to scale: not a construction drawing, a listing or a price. Exports stay local concept sheets.

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

Draw the day before the walls. The programme sheet an architect fills in with a household before any plan: who lives here, which rooms must be close, which kept apart, and what happens through the day. Print paper, diazo ink and a roof-tile accent, with a vertical title block on every sheet.

Visual language

Print paper, diazo-purple ink and a roof-tile accent, borrowed from Indonesian drafting offices: sketches on orange millimetre block paper and diazo prints from tracing paper. Millimetre grid sits only behind drawings; relations read through symbols and line styles, never colour alone.

Typography

Archivo Expanded 600, a wide straight-boned grotesque like title-block and presentation lettering, sets the sheet titles and the AVARA wordmark. DM Sans carries room names, the day table, notes and controls.

Layout & composition

Every page is one sheet in a set: a 2px drawing border, the drawing field on the left and a 312px vertical title block on the right (project, household, scale, status, sheet index). On a phone the title block becomes a top strip with a scrollable sheet index.

Motion & interaction

No decorative motion. A changed relation redraws the bubble diagram at once and is announced; the light section changes only when a time of day is chosen.

Under the surface

Static bilingual Next.js pages. One programme per household is kept in this browser and validated with Zod on every read; exports (TXT, SVG, print) are made locally. No account, submission or server.

Designed for everyone

The adjacency matrix is an ARIA grid: arrow keys move between pairs, Enter or Space changes a relation and the change is announced. The bubble diagram has an equivalent text list; schedule cells and patterns are labelled buttons; blocked or full storage is stated.

Inside the experience

  • Adjacency matrix and bubble diagram from one model
  • A day in this house, with findings sent to the matrix
  • Eight original patterns to pin
  • Printable summary, TXT and SVG
  • Own component and state book
  • Local brand personalization

A good fit for

  • Small residential design studios, contractors who also sell design, and renovation consultants, for households preparing to meet an architect.

Across screens

Actual desktop capture of the Avara Homes demonstration.
Actual desktop capture of the Avara Homes demonstration.
Actual mobile capture of the Avara Homes demonstration.
Actual mobile capture of the Avara Homes demonstration.

A different perspective