Design Review Document

TRAWACA Website
Redesign Proposals

Four distinct visual directions for the TRAWACA homepage redesign, each retaining the original colour identity — terracotta, crimson, and parchment — while bringing a modern, authoritative character.

4  Designs
Responsive  
Mobile-friendly  
TRAWACA · FTI UKDW Yogyakarta

Pilih Desain

Klik thumbnail untuk membuka tiap desain

Each design opens in a new browser tab. Review them side by side and leave notes for your team on which direction best represents TRAWACA's identity.

TRAWACA
T

Universitas Kristen Duta Wacana · Yogyakarta

Selamat Datang
di Situs Web TRAWACA

Tim penelitian berdedikasi untuk pelestarian budaya Nusantara, dengan fokus pada digitalisasi Aksara Jawa.

Kenali Kami →
Buka Desain A

Design A

Manuscript Scholar

Klasik · Formal

Dark ink navbar with a parchment hero enclosed in an elegant double-border frame. A giant faded italic "T" serves as a background ornament. Typography uses Cormorant Garamond — a classical serif — paired with Inconsolata mono for metadata labels. Partners are listed Roman-numeral style like a scholarly table of contents. The overall feeling: opening a prestigious academic journal or an illuminated codex.

Cormorant Garamond Parchment Hero Double Border Roman Numerals
TRAWACA.
Tim Penelitian · Sejak 2016
Selamat Datang
di
TRAWACA

Tim penelitian untuk pelestarian budaya Nusantara.

Kenali Kami Kegiatan
2016
Berdiri
4+
Mitra
12
Kontributor
T

Transliterasi Aksara Jawa

Duta Wacana

Buka Desain B

Design B

Modern Cultural

Modern · Tegas

Clean white background where terracotta and crimson are used as bold power accents. The split hero features a dark terracotta right panel with concentric rings. Uses Sora — a sharp geometric sans-serif — for headings and Lora for body text. Includes stat counters (year founded, partners, contributors) for instant credibility. The overall feeling: a polished contemporary research institute website.

Sora + Lora Split Hero Stat Counters Clean White
TRAWACA

UKDW · Yogyakarta · Est. 2016

Selamat Datang
di
TRAWACA

Tim penelitian untuk pelestarian budaya Nusantara, fokus pada Aksara Jawa.

Kenali Kami Kegiatan
T

Transliterasi Aksara Jawa

Duta Wacana

Digitalisasi manuskrip aksara Jawa melalui Digital Humanities.

Buka Desain C

Design C

Warm Editorial

Hangat · Mudah Dibaca

The warmest and most readable of the four. Cream and parchment backgrounds with an asymmetric hero featuring a terracotta side panel bearing a ghosted "TRAWACA" watermark. Features a styled pull-quote in the about section for gravitas. Typography uses Libre Baskerville — warm and authoritative — with Nunito Sans for body text, yielding excellent on-screen readability. Feels like a cultural magazine meets academic authority.

Libre Baskerville Warm Cream Pull Quote Editorial Layout
TRAWACA

UKDW Yogyakarta

Selamat Datang
di
TRAWACA

Tim penelitian untuk pelestarian budaya Nusantara, fokus pada Aksara Jawa.

Kenali Kami →
Buka Desain D

Design D

Split Diagonal

Dramatis · Berkarakter

A bold, dramatic split-hero with a diagonal clip-path divider separating the text panel from a deep terracotta right panel. The original redesign — retaining the closest DNA to the source site while elevating it significantly. Uses Playfair Display for headers and Source Serif 4 for body text, with DM Mono for labels. The team sidebar is styled like a formal document with a ruled left border. Feels authoritative and institutional with a strong graphic identity.

Playfair Display Diagonal Split Hero Gold Accents Document Sidebar

Cara Menggunakan Halaman Ini

Langkah 01

Pastikan semua lima file HTML (trawaca_showcase.html, A, B, C, D) berada dalam satu folder yang sama.

Langkah 02

Buka trawaca_showcase.html ini di browser. Klik thumbnail atau kartu untuk membuka tiap desain di tab baru.

Langkah 03

Bandingkan keempat desain secara berdampingan. Perhatikan tipografi, suasana warna, dan keterbacaan di layar maupun ponsel.

Langkah 04

Diskusikan dengan tim dan pilih satu arah, atau gabungkan elemen terbaik dari beberapa desain untuk iterasi berikutnya.