Elle Çizilmiş Eskiz Tarzı UI Öğeleri

 (wiredjs.com)
4 puan yazan GN⁺ 2024-06-01 | 1 yorum | WhatsApp'ta paylaş

Wired Elements

Genel Bakış

  • Wired Elements, elle çizilmiş gibi görünen eskiz tarzı UI öğeleri sunan bir kütüphanedir.
  • Wireframe, mockup veya eğlenceli bir el çizimi stili için kullanılabilir.
  • Öğeler hafif bir rastgelelikle çizilir; bu yüzden iki render aynı olmaz.

Demo

  • Basit demo: rough.js ile çizilmiş bir eskiz çemberinin wired-element kontrolüne dönüştürülmesini gösteren bir örnek sunar.

Canlı Demo

  • Sandbox içinde wired-elements'ı gerçek zamanlı deneyin:
    • Vanilla JS: wired-elements temel JavaScript ile kullanılabilir.
    • Vue: wired-elements Vue framework'ünde kullanılabilir.
    • Svelte: wired-elements Svelte framework'ünde kullanılabilir.
    • React: wired-elements, React wrapper bileşeni kullanılarak kullanılabilir.

Dokümantasyon

  • Nasıl kullanılır: wired-elements'ın nasıl kullanılacağı GitHub sayfasında görülebilir.
  • API dokümanları: belirli öğelerin API'si dokümantasyon sayfasında görülebilir.

Bileşenler

  • Tüm wired öğeleri için bir bileşen vitrini sunulur.

Katkılar

  • RoughJS ve Lit kullanılarak wired-elements geliştirilmiştir.

Proje Desteği

  • Open Collective veya GitHub üzerinden proje geliştirmesine destek verilebilir.

Lisans

  • MIT lisansı (c) Preet Shihn.

GN⁺ görüşü

  • Tasarım esnekliği: Elle çizilmiş gibi görünen stil, özgün bir tasarım isteyen projeler için faydalı olabilir.
  • Framework uyumluluğu: Çeşitli framework'lerle uyumlu olması, kullanıcının seçim alanını genişletir.
  • Rastgelelik: Rastgelelik unsuru sayesinde her seferinde farklı sonuçlar üretilebilir ve bu da tazelik katar.
  • Öğrenme eğrisi: Başlangıç seviyesindeki mühendisler için yeni bir kütüphane öğrenmek zaman alabilir.
  • Alternatifler: Benzer işlevler sunan diğer kütüphaneler arasında Paper.js ve Konva.js yer alır.

İlgili okumalar

1 yorum

 
GN⁺ 2024-06-01
Hacker News görüşleri
  • Pencil and paper: Kod yazmadan, elle çizilmiş gibi bir eskiz hissi verebilir.
  • Balsamiq Wireframes: Hızlı ve basit mockup hazırlamak için faydalı bir araç olarak öneriliyor.
  • Kod yazma: Hızlı ve basit mockup hazırlama amacına uygun değil.
  • Tasarım geri bildirimi: Checkbox her toggle edildiğinde, yeniden elle çizilmiş gibi bir his vermesi güzel olurdu.
  • WireText: Elle çizilmiş tarzda mockupları hızlıca oluşturabilen bir VSCode eklentisinden ilham alınmış.
  • Eskiz UI öğeleri: Eskiz tarzı UI öğeleri güzel, ancak eskiz fontları pek iyi değil. Normal sans-serif fontlar ile eskiz UI stil açısından uyumlu değil.
  • Balsamiq nostaljisi: Yaklaşık 10 yıl önce popüler olan Balsamiq'i hatırlatıyor.
  • Eskiz mockup kullanma nedeni: Kullanıcıların bunun tamamlanmış bir arayüz olmadığını anlaması için kullanılıyordu.
  • Gerçek üründe kullanım: Bu stili gerçek bir üründe ya da beta sürümünde kullanmak isterdim, ama ek iş yükü çok fazla olur gibi görünüyor.
  • DoodleCSS önerisi: DoodleCSS'i de beğenebilirsiniz.
  • rough.js: Harika bir araç ve Excalidraw'da da kullanılıyor.