Elemen UI bergaya sketsa yang digambar dengan tangan

 (wiredjs.com)
4 poin oleh GN⁺ 2024-06-01 | 1 komentar | Bagikan ke WhatsApp

Wired Elements

Gambaran umum

  • Wired Elements adalah library yang menyediakan elemen UI bergaya sketsa yang terlihat seperti digambar dengan tangan.
  • Dapat digunakan untuk wireframe, mockup, atau gaya gambar tangan yang menyenangkan.
  • Elemen-elemennya digambar dengan sedikit unsur acak, sehingga dua kali rendering tidak akan sama.

Demo

  • Demo sederhana: Menyediakan contoh mengubah lingkaran sketsa yang digambar menggunakan rough.js menjadi kontrol wired-element.

Demo langsung

  • Mencoba wired-elements secara real-time di Sandbox:
    • Vanilla JS: wired-elements dapat digunakan dengan JavaScript dasar.
    • Vue: wired-elements dapat digunakan di framework Vue.
    • Svelte: wired-elements dapat digunakan di framework Svelte.
    • React: wired-elements dapat digunakan dengan komponen pembungkus React.

Dokumentasi

  • Cara penggunaan: Cara menggunakan wired-elements dapat dilihat di halaman GitHub.
  • Dokumentasi API: API untuk elemen tertentu dapat dilihat di halaman dokumentasi.

Komponen

  • Menyediakan showcase komponen untuk semua elemen wired.

Kredit

  • wired-elements dibangun menggunakan RoughJS dan Lit.

Dukungan proyek

  • Pengembangan proyek dapat didukung melalui Open Collective atau GitHub.

Lisensi

  • Lisensi MIT (c) Preet Shihn.

Pendapat GN⁺

  • Fleksibilitas desain: Gaya yang terlihat seperti digambar dengan tangan bisa berguna untuk proyek yang menginginkan desain unik.
  • Kompatibilitas framework: Kompatibel dengan berbagai framework sehingga pilihan pengguna lebih luas.
  • Unsur acak: Karena ada elemen acak, hasil yang berbeda bisa didapatkan setiap kali sehingga terasa segar.
  • Kurva belajar: Bagi engineer pemula, mempelajari library baru ini mungkin memerlukan waktu.
  • Alternatif: Library lain yang menawarkan fungsi serupa antara lain Paper.js dan Konva.js.

Bacaan terkait

1 komentar

 
GN⁺ 2024-06-01
Pendapat Hacker News
  • Pencil and paper: bisa memberi nuansa sketsa seperti digambar tangan tanpa menulis kode.
  • Balsamiq Wireframes: direkomendasikan sebagai alat yang berguna untuk membuat mockup cepat dan sederhana.
  • Menulis kode: tidak sesuai dengan tujuan membuat mockup yang cepat dan sederhana.
  • Umpan balik desain: akan bagus jika setiap kali checkbox di-toggle, rasanya seperti digambar ulang dengan tangan.
  • WireText: terinspirasi dari plugin VSCode yang bisa dengan cepat membuat mockup bergaya gambar tangan.
  • Elemen UI sketsa: elemen UI bergaya sketsa itu bagus, tetapi font sketsa kurang bagus. Font sans-serif biasa dan UI sketsa tidak terlalu cocok secara gaya.
  • Mengingat Balsamiq: mengingatkan pada Balsamiq yang populer sekitar 10 tahun lalu.
  • Alasan menggunakan mockup sketsa: digunakan agar pengguna memahami bahwa ini bukan antarmuka yang sudah final.
  • Penggunaan pada produk nyata: ingin menggunakan gaya ini pada produk nyata atau versi beta, tetapi sepertinya butuh terlalu banyak pekerjaan tambahan.
  • Rekomendasi DoodleCSS: sepertinya juga akan menyukai DoodleCSS.
  • rough.js: alat yang hebat, dan juga digunakan di excalidraw.