START WITH WHAT THE WEBSITE NEEDS TO DO

What are you building?

A school, a bakery, a neighborhood coffee shop. Different people, different jobs, different visual voices.

Real-world contexts, illustrated by fictional working demos. Each case separates what works here from production integrations.

Actual desktop capture of the Pijar Academy demonstration.Pijar Academy
1 working directions

Courses

Try one exercise, compare levels and tracks, and take a learning plan away.

For: Independent learners and course creators
Actual desktop capture of the Pijar Academy demonstration.Pijar Academy
1 working directions

School

Help families understand the programmes and prepare a trial class.

For: Families & future students
Actual desktop capture of the Hening Retreat demonstration.Hening Retreat
1 working directions

Retreat

Choose a notebook, fill the days and take a pocket book.

For: People preparing a quieter stay
Actual desktop capture of the Nacre Rituals demonstration.Nacre Rituals
1 working directions

Beauty rituals

See each texture before asking, then take home a ritual card.

For: Small body-care makers, refill shops and small salons, and the people deciding what to try
Actual desktop capture of the Avara Homes demonstration.Avara Homes
1 working directions

Residential concepts

Write a household’s room programme before any plan is drawn.

For: Households preparing to build or renovate, before they meet an architect
Actual desktop capture of the Roti Pagi demonstration.Roti Pagi
1 working directions

Bakery

Make the bread collection easy to explore and prepare a clear pickup list.

For: Local shoppers & pickup customers
Actual desktop capture of the Warkop Sela demonstration.Warkop Sela
1 working directions

Coffee shop / warkop

Show the menu character and help people put together their drink choices.

For: Regulars, neighbors & people finding a drink
Actual desktop capture of the Ruang/Bentuk demonstration.Ruang/Bentuk
1 working directions

Architecture practice

Let people inspect a practice’s spatial thinking before preparing a project brief.

For: Prospective clients & collaborators
Actual desktop capture of the Luma Light demonstration.Luma Light
1 working directions

Product exhibition

Make form, finish and light inspectable before a product conversation.

For: Product studios & people inspecting form
Actual desktop capture of the Morrow Watch demonstration.Morrow Watch
1 working directions

Watch drawing

Set a concept drawing’s dial and strap, compare them and take the vector into a design conversation.

For: Watch and accessory designers, and the people they draw for
Form & Field demo: oversized black typography on an acid yellow canvas.Form & Field
1 working directions

Creative studio

Give a creative practice a recognizable voice and a browsable project record.

For: Art directors & prospective collaborators
Actual desktop capture of the Wayfinder demonstration.Wayfinder
1 working directions

Trip planning

Help people compare an itinerary and prepare a useful field note.

For: People preparing an itinerary
Actual desktop capture of the Tidal Glass demonstration.Tidal Glass
1 working directions

Digital exhibition

Give visual work a clear frame and useful ways to inspect its material.

For: Visitors exploring visual work
Actual desktop capture of the Chromatic Press demonstration.Chromatic Press
2 working directions

Creative tools

Turn a visual idea into something visitors can edit and export.

For: Designers, educators & visual makers
Actual desktop capture of the Gilir demonstration.Gilir
1 working directions

Practice queue

Choose a lane and a slot, then keep one clear ticket — before any queue system exists.

For: Visitors to a small practice or service counter
Actual desktop capture of the Toko Saku demonstration.Toko Saku
1 working directions

Product catalogue

Pick goods and quantities, check one note, then ask the seller in one message.

For: Customers of a small shop that sells over chat
Actual desktop capture of the Saku Dapur demonstration.Saku Dapur
1 working directions

Shop workbook

Read the work behind a shop note: inspect samples, prepare notes, adjust practice stock and read daily counts.

For: The keeper of a small shop
Actual desktop capture of the Relasi demonstration.Relasi
1 working directions

Client desk

Decide which conversation moves next: move opportunities through stages, read a client’s history and keep one next step each.

For: An agency or consultant keeping client conversations
Actual desktop capture of the Sapa demonstration.Sapa
1 working directions

Digital business card

Hand over one page instead of a printed card: who the trade is, how to reach it, whether it is open, and a contact to save.

For: Customers who meet a small trade and want to keep its contact
Actual desktop capture of the Kilau demonstration.Kilau
1 working directions

Member & stamp card

Keep a stamp card on a page instead of in a wallet: which shop it is, how many stamps, what the next free visit is — with nothing that looks like a bank card.

For: Regulars of a small barber, salon, laundry or café
Actual desktop capture of the Sampul demonstration.Sampul
1 working directions

Wedding invitation

Send each guest an invitation addressed to them that reads like a printed card — names, date, place, how to get there — and let them answer in a message they send themselves.

For: Couples and families sending a wedding invitation to their guests
Actual desktop capture of the Sanak demonstration.Sanak
1 working directions

Restaurant menu book

Put the menu book from the table on the web: read by chapter, shared page by page, printed again — with prices the restaurant fills in itself.

For: Family restaurants, home caterers and warung with a printed menu book
Actual desktop capture of the Serambi demonstration.Serambi
1 working directions

Mosque & study circle board

Find this week’s sessions, see what changed, keep a few, and read where the infak went.

For: The congregation of a small mosque or study circle