Elemen UI bergaya sketsa gambar tangan

 (wiredjs.com)
4 poin oleh GN⁺ 2024-06-01 | 1 komentar | Bagikan ke WhatsApp
  • Wired Elements adalah kumpulan elemen UI umum bergaya gambar tangan yang cocok ditempelkan pada wireframe, mockup, dan UI yang playful
  • Setiap elemen memiliki randomness, sehingga komponen yang sama pun tidak terlihat sepenuhnya identik setiap kali dirender
  • Dalam demo, kontrol wired-element digunakan untuk mengubah lingkaran bergaya sketsa yang digambar oleh rough.js, menunjukkan cara kerjanya
  • Tersedia contoh CodeSandbox untuk Vue, Svelte, dan React; React menggunakan wrapper components terpisah
  • Cara penggunaan dan API tiap elemen dapat dilihat di dokumentasi GitHub, dan seluruh elemen dapat dilihat di component showcase

Komponen UI bergaya sketsa

  • Wired Elements adalah set elemen UI umum dengan gaya sketsa yang tampak seperti digambar tangan
  • Dapat digunakan untuk menonjolkan kesan belum final seperti wireframe atau mockup, atau untuk membuat UI bernuansa gambar tangan
  • Setiap elemen digambar dengan randomness yang cukup, sehingga tidak terlihat seperti bentuk yang persis sama pada setiap render
  • Demo sederhananya menggunakan kontrol wired-element untuk mengubah lingkaran bergaya sketsa yang digambar dengan rough.js

Contoh dan dokumentasi

Bacaan terkait

1 komentar

 
GN⁺ 2024-06-01
Pendapat Hacker News

  • Terlihat bagus dan entah bagaimana membangkitkan nostalgia. Satu masukan: saya sempat berharap setiap kali checkbox di-toggle, tanda centangnya akan sedikit berbeda, seolah digambar ulang dengan tangan setiap kali
    Menambahkan sedikit noise sepertinya cocok untuk fitur 2.0

    • Kalau ditambahkan noise, tampilannya akan berbeda setiap kali dirender, dan saya tidak yakin apakah itu bagus

  • Untuk keperluan ini, Balsamiq Wireframes adalah yang terbaik: https://balsamiq.com/wireframes/
    Kalau harus menulis kode, tujuan membuatnya cepat dan kasar jadi hilang

    • Hal seperti ini bisa berguna untuk menunjukkan kepada pelanggan bahwa yang mereka lihat bukan produk final, melainkan prototipe yang berfungsi
      Akan lebih cocok jika desainnya bisa diganti seperti “napkin look&feel” di Swing dulu: https://napkinlaf.sourceforge.net/
      Namun di web, gagasan “mengganti desain dengan mengganti tema” tampaknya sudah lama menghilang
    • Kalau ingin membuat wireframe bergaya gambar tangan di ponsel, ada ini: https://www.tinyux.app
      Saya tidak ingin memakai drag-and-drop di layar sentuh kecil, jadi memilih UX nonstandar
    • Saya sangat menyukai https://wireframesketcher.com/
      Tidak bergantung pada cloud dan lisensi seumur hidupnya $99. Produk seperti ini semakin langka
    • Saya suka Balsamiq. Gaya wireframe seperti ini berguna karena menyampaikan “ini hanya sketsa” dan membantu menghindari pertanyaan seperti “font-nya agak kurang pas ya”
    • Balsamiq benar-benar cepat dan mudah. Saya ingat dulu ada alat pascaproses buatan pihak ketiga yang mengubah Balsamiq Mockups menjadi kode; penasaran apakah masih ada
      Setelah dicari, namanya napkee, dan sudah dijadikan open source, tetapi tampaknya hampir 10 tahun tidak disentuh

  • Mengingatkan pada Balsamiq yang populer sekitar 10 tahun lalu

    • Saya masih menganggap Balsamiq sangat berguna
    • Sampai sekarang masih menjadi alat pertama yang saya pakai untuk membuat mockup. Menurut saya ini paling kuat untuk menyampaikan cara kerja produk kepada para pemangku kepentingan
    • Betul, saya juga hendak mengatakan hal yang sama, tetapi sudah ada yang menyebutnya
      Kalau ingatan saya benar, pendiri Balsamiq, Peldi, pernah menulis blog tentang ini saat itu. Saya juga menyukainya. Ini juga samar-samar mengingatkan pada font Comic Sans yang lebih dulu populer
    • Bukankah ada X window manager yang bisa diberi skin dengan cara yang sama?
    • Saya memakainya hampir setiap hari

  • Dulu kami menggunakan mockup bergaya sketsa agar pengguna paham bahwa ini bukan antarmuka kerja yang sudah selesai. Sekarang saya bertanya-tanya apakah makna itu sudah hilang

    • Memang itulah tujuannya. Ini untuk membuat perangkat lunak mockup

  • Untuk elemen bernuansa gambar tangan, Excalidraw adalah yang terbaik: https://excalidraw.com/
    Saya langsung jatuh hati pada UX-nya dan bagaimana ia membuat pekerjaan yang diinginkan, terutama diagram arsitektur dan mockup low-fidelity, bisa selesai dengan cepat. Semua data disimpan lokal di browser, jadi bekerja offline juga mudah

    • tldraw.com juga bagus

  • Diskusi sebelumnya: https://news.ycombinator.com/item?id=17146451 (650 poin, 121 komentar)

    • Jika dibuka, isinya seperti ini: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - Mei 2018 (120 komentar)
      Sepertinya ada thread lain tentang ini atau sesuatu yang sangat mirip. Kalau ada yang menemukannya, bisa ditambahkan ke daftar

  • Saya suka elemen UI bergaya sketsa, tetapi tidak suka font teks bergaya sketsa. Apakah font sans-serif biasa dan UI bergaya sketsa memang sulit dipakai bersama secara gaya?

    • Secara pribadi saya menyukai font-nya, tetapi font “tulisan tangan” seperti ini selalu jatuh ke uncanny valley yang terlihat seperti sketsa tetapi tetap teratur
      Sekalipun suatu glyph terlihat sangat seperti sketsa jika dilihat sendiri, setiap kali tampilannya tetap persis sama
    • Banyak item di showcase memakai font biasa, jadi bisa dijadikan referensi: https://wiredjs.com/showcase
    • Kalau itu font tulisan tangan, setidaknya harus miring ke kanan

  • Terinspirasi oleh proyek ini, saya membuat plugin VSCode WireText untuk membuat mockup bergaya gambar tangan dengan cepat
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • Saya menyukainya karena estetikanya. Lucu. Saya tidak terlalu peduli apakah ini lebih berguna untuk mendapatkan feedback atau tidak

    • Kalau hanya menginginkan nuansa visualnya dan tidak membutuhkan bagian JS, gunakan PaperCSS

  • Secara pribadi, saya cukup menyukai gaya ini sampai ingin memakainya di produk sungguhan. Atau mungkin dipakai di versi beta produk lalu diganti saat rilis resmi
    Namun sepertinya pekerjaan tambahannya terlalu banyak

    • Saat baru mulai bekerja di bidang desain, saya menjalankan user testing prototipe low-fidelity dengan sebagian tim customer success
      Representasi visualnya dimaksudkan untuk menyampaikan bahwa apa yang kami tunjukkan masih bisa berubah, tetapi feedback yang kami dapat adalah “nuansa sketsanya sangat bagus”. Sejak itu, saya tidak lagi mengandalkan representasi itu sebagai penanda tahap dalam proses desain
    • Ada alasan memakai gaya seperti ini untuk build beta atau alpha. Jenis feedback yang diterima menjadi berbeda
      Lama sekali dulu saya membaca tulisan tentang “membuatnya terlihat belum selesai”, mungkin dalam konteks AWT look and feel. Terkait itu ada juga grafik bergaya xkcd: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) dan https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      Kalau produk terlihat sudah selesai, feedback yang diterima juga berangkat dari asumsi bahwa itu produk final
      Dulu, saat mengerjakan logika internal JavaScript, saya membuat kesalahan dengan memakai header yang terlihat lumayan. Itu lebih baik daripada GIF melebar yang sebelumnya dipakai, dan juga memakai gradien CSS
      Saya ingin memeriksa “apakah urutan halaman dalam alur kerja ini sudah benar? Apakah elemen UI yang dibutuhkan fitur ini ada di halaman? Apakah ada fitur yang terlewat?”, tetapi feedback yang kembali justru tentang warna biru dan apakah gradiennya harus dari gelap ke terang atau sebaliknya
      Setelah ditelusuri lagi, look and feel itu adalah https://napkinlaf.sourceforge.net, yang mengarah ke tulisan blog berikut: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...