Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Morrow Watch / DESAIN & KOMPONEN

Morrow Watch
Disusun dari bagiannya sendiri.

Susun gambar jam dan ekspor SVG-nya. Konsep jam dibahas di atas gambar, jadi lembar gambar menjadi seluruh situs: papan nama bengkel, tab berkas, lembar dengan konfigurasi dan gambarnya, serta blok identitas yang menyebut gambar itu bukan apa.

01 / Palet & tipografi

Latar biru tinta, tinta gambar kapur, dan kuningan untuk pilihan dan keterangan; garis 1 px membingkai lembar, tabnya, dan blok identitas, dan gambar berada di grid teknis pucat. Geometri vektor orisinal menjadi subjek utama; tanpa foto atau kaca optik.

Latar#142a3d
Tinta#f1f2e9
Penanda#e7b66a
Permukaan pendukung#2b465b

B612, yang dirancang untuk layar instrumen kokpit, membentuk wordmark, judul lembar, kombinasi, dan nomor objek seperti label gambar teknik. DM Sans membawa tab, radio, keterangan, dan catatan. Tanpa huruf monospace.

02 / Komposisi & perilaku

Setiap halaman adalah satu lembar gambar: papan nama bengkel dengan nomor dokumen, tiga tab berkas (Gambar kerja, Siluet tali, Versi tersimpan), kepala lembar, kolom konfigurasi 290 px di samping bidang gambar, dan blok identitas selebar lembar. Di ponsel urutannya papan nama, tab, judul, pilihan dan ekspor, lalu gambar dan blok identitas.

Pilihan yang berubah menggambar ulang vektor dengan geser singkat; studi lapisan memisahkan lapisannya bila diminta. Reduced motion mengubah keduanya tanpa menggerakkan apa pun.

Radio asli dengan nama lokal dan tanda ✓, tab berkas sebagai tautan halaman dengan halaman aktif ditandai, lensa detail bertombol tekan, dan setiap perubahan diucapkan di baris status. Fokus terlihat, target 44 px, tidak ada keadaan yang hanya dibedakan warna, reduced motion.

03 / Kontrol hingga setiap detail

Setiap halaman adalah satu lembar gambar: papan nama bengkel dengan nomor dokumen, tiga tab berkas (Gambar kerja, Siluet tali, Versi tersimpan), kepala lembar, kolom konfigurasi 290 px di samping bidang gambar, dan blok identitas selebar lembar. Di ponsel urutannya papan nama, tab, judul, pilihan dan ekspor, lalu gambar dan blok identitas.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Gambar kerja dengan radio dial dan tali asli

    Setiap halaman adalah satu lembar gambar: papan nama bengkel dengan nomor dokumen, tiga tab berkas (Gambar kerja, Siluet tali, Versi tersimpan), kepala lembar, kolom konfigurasi 290 px di samping bidang gambar, dan blok identitas selebar lembar. Di ponsel urutannya papan nama, tab, judul, pilihan dan ekspor, lalu gambar dan blok identitas.

  2. 02
    Ekspor SVG yang sesuai dengan kombinasi aktif

    Radio asli dengan nama lokal dan tanda ✓, tab berkas sebagai tautan halaman dengan halaman aktif ditandai, lensa detail bertombol tekan, dan setiap perubahan diucapkan di baris status. Fokus terlihat, target 44 px, tidak ada keadaan yang hanya dibedakan warna, reduced motion.

  3. 03
    Dua siluet tali di bawah satu dial

    Halaman Next.js statis dwibahasa dengan satu draf browser tervalidasi (kombinasi dan versi tersimpan), ekspor SVG dan TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  4. 04
    Versi tersimpan dengan pemulihan dan catatan TXT

    Halaman Next.js statis dwibahasa dengan satu draf browser tervalidasi (kombinasi dan versi tersimpan), ekspor SVG dan TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  5. 05
    Lensa detail dan studi lapisan

    Halaman Next.js statis dwibahasa dengan satu draf browser tervalidasi (kombinasi dan versi tersimpan), ekspor SVG dan TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  6. 06
    Buku komponen dan status sendiri

    Halaman Next.js statis dwibahasa dengan satu draf browser tervalidasi (kombinasi dan versi tersimpan), ekspor SVG dan TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  7. 07
    Personalisasi merek lokal

    Halaman Next.js statis dwibahasa dengan satu draf browser tervalidasi (kombinasi dan versi tersimpan), ekspor SVG dan TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  8. 08
    Pilihan, tooltip & area gulir

    Perilaku papan ketik dibagikan; tema ini memiliki warna popup, batas, radius, tipografi, dan fokus sendiri.

  9. 09
    Ekspor & batasan

    Studi desain fiktif. Gambar ini konsep visual tanpa skala fisik, bukan gambar manufaktur; warna dan siluet tidak menentukan material, dan ekspor menjadi artefak perencanaan lokal.

BACA KEPUTUSAN DESAIN

Mengapa disusun seperti ini.

Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.

Tangkapan layar desktop asli demo Morrow Watch.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Gambarnya menjadi pembuka

    Tanpa slogan atau hero: layar pertama adalah lembar M—01 dan h1-nya nama gambar. Radio asli untuk dial dan tali berada di samping vektor yang diubahnya, dengan ekspor SVG di bawah baris status.

  2. 02

    Tab berkas, bukan bab

    Gambar kerja, Siluet tali, dan Versi tersimpan adalah tautan halaman sungguhan yang menggantung di atas lembar; yang terbuka ditandai sebagai halaman aktif. Di ponsel ketiganya berbagi satu baris.

  3. 03

    Lembar menyebut batasnya

    Kepala lembar menyebut dua berkas yang diberikannya (SVG / TXT); blok identitas di kakinya menyebut objek, kombinasi pada gambar, dan “Konsep visual · bukan gambar manufaktur”. 620 × 500 adalah kanvas SVG, bukan milimeter.

04 / Kontrak formulir & respons

Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.

10–1.000 karakter. Disimpan pada halaman ini.

Catatan yang disiapkan akan muncul di sini.

05 / Komponen yang benar-benar bekerja

Aktifkan ruang kerja lengkap saat ingin memeriksanya. Kode interaksinya dimuat sesuai kebutuhan.