Elle Çizilmiş Eskiz Stilinde UI Öğeleri

 (wiredjs.com)
4 puan yazan GN⁺ 2024-06-01 | 1 yorum | WhatsApp'ta paylaş
  • Wired Elements, wireframe’lere, mockup’lara ve oyuncu arayüzlere eklemek için uygun elle çizilmiş görünümlü ortak UI öğeleri koleksiyonudur
  • Her öğede rastgelelik bulunduğundan, aynı bileşen bile her render edildiğinde tamamen aynı görünmez
  • Demoda, wired-element kontrolleriyle rough.js tarafından çizilen eskiz tarzı bir daire değiştirilerek çalışma şekli gösterilir
  • Vue, Svelte ve React için CodeSandbox örnekleri vardır; React ayrı wrapper components kullanır
  • Kullanım ve öğe bazlı API’ler GitHub belgelerinde görülebilir; tüm öğeler component showcase’te incelenebilir

Eskiz Tarzı UI Bileşenleri

  • Wired Elements, elle çizilmiş gibi görünen eskiz stilinde ortak UI öğelerinden oluşan bir settir
  • Wireframe ve mockup gibi tamamlanmamış hissini korumak ya da elle çizim atmosferinde bir UI oluşturmak için kullanılabilir
  • Her öğe yeterli rastgelelik ile çizilir; bu yüzden her render’da tamamen aynı şekil gibi görünmez
  • Basit demo, wired-element kontrollerini kullanarak rough.js ile çizilmiş eskiz tarzı bir daireyi değiştirme biçimindedir

Örnekler ve Belgeler

İlgili okumalar

1 yorum

 
GN⁺ 2024-06-01
Hacker News yorumları

  • Hoş görünüyor ve tuhaf biçimde nostalji uyandırıyor. Bir geri bildirimim şu: Onay kutusunu her açıp kapattığımda tik işaretinin, sanki her seferinde elle yeniden çizilmiş gibi biraz farklı olmasını beklerdim.
    Biraz gürültü eklemek 2.0 özelliği olarak iyi olabilir.

    • Gürültü eklerseniz her render edildiğinde görünümü değişir; bunun iyi bir şey olup olmadığından pek emin değilim.

  • Bu iş için en iyisi Balsamiq Wireframes: https://balsamiq.com/wireframes/
    Kod yazmak zorundaysanız hızlı ve kabaca yapma fikri ortadan kalkıyor.

    • Böyle şeyler, müşteriye baktığı şeyin bitmiş ürün değil, çalışan bir prototip olduğunu göstermek için yararlı olabilir.
      Eski Swing’in “napkin look&feel”i gibi tasarımı değiştirip takabiliyorsanız daha da uygun olur: https://napkinlaf.sourceforge.net/
      Ancak web’de “temayı değiştirip tasarımı değiştirme” fikri sanki uzun zaman önce ortadan kayboldu.
    • Telefonda elle çizilmiş tarzda wireframe oluşturmak için şu var: https://www.tinyux.app
      Küçük dokunmatik ekranda sürükle-bırak kullanmak istemediğim için standart dışı bir UX seçtim.
    • https://wireframesketcher.com/’u gerçekten seviyorum.
      Bulut bağımlılığı yok ve ömür boyu lisansı 99 dolar. Bu tür ürünler giderek nadirleşiyor.
    • Balsamiq’i seviyorum. Bu tür wireframe tarzı, “bu sadece bir eskiz” mesajını veriyor ve “font biraz garip değil mi?” gibi sorulardan kaçınmayı sağladığı için yararlı.
    • Balsamiq gerçekten hızlı ve kolay. Eskiden üçüncü taraf bir son işlem aracının Balsamiq Mockups’ı koda dönüştürdüğünü hatırlıyorum; hâlâ var mı merak ediyorum.
      Bakınca adının napkee olduğunu gördüm; açık kaynak olmuş ama neredeyse 10 yıldır el değmemiş gibi.

  • Yaklaşık 10 yıl önce moda olan Balsamiq aklıma geldi.

    • Bence Balsamiq hâlâ çok kullanışlı.
    • Mockup hazırlarken hâlâ ilk kullandığım araç. Paydaşlara ürünün nasıl çalıştığını anlatmakta en güçlü araç olduğunu düşünüyorum.
    • Evet, ben de aynı şeyi söyleyecektim ama zaten yazılmış.
      Yanlış hatırlamıyorsam Balsamiq’in kurucusu Peldi o dönemde bununla ilgili blog yazmıştı. Ben de seviyorum. Daha da eskiden moda olan Comic Sans yazı tipini de belli belirsiz hatırlatıyor.
    • X pencere yöneticileri arasında da aynı şekilde skin uygulanabilen bir tane yok muydu?
    • Neredeyse her gün kullanıyorum.

  • Eskiden kullanıcıların bunun tamamlanmış, çalışan bir arayüz olmadığını anlaması için eskiz tarzı mockup’lar kullanırdık. Artık bu anlamı kaybetti mi acaba?

    • Amaç zaten tam olarak bu. Mockup yazılımı yapmak için.

  • Elle çizilmiş hissi veren öğeler için en iyisi Excalidraw: https://excalidraw.com/
    UX’ine ve özellikle mimari diyagramları ile düşük sadakatli mockup’ları hızla bitirmeyi sağlamasına hemen vuruldum. Tüm verileri tarayıcıda yerel olarak saklıyor, bu yüzden çevrimdışı çalışmak da kolay.

    • tldraw.com da harika.

  • Önceki tartışma: https://news.ycombinator.com/item?id=17146451 (650 puan, 121 yorum)

    • Açınca şöyle görünüyor: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - Mayıs 2018 (120 yorum)
      Bununla veya çok benzeriyle ilgili başka bir başlık daha vardı sanırım. Biri bulursa listeye eklenebilir.

  • Eskiz tarzı UI öğeleri hoşuma gidiyor ama eskiz tarzı metin fontlarını sevmiyorum. Normal sans-serif fontlarla eskiz tarzı UI’ı stil olarak birlikte kullanmak zor mu?

    • Kişisel olarak font hoşuma gitti ama bu tür “el yazısı” fontlar hep eskiz gibi ama düzenli olan tekinsiz vadiye takılıyor.
      Belirli bir glif tek başına ne kadar eskiz gibi görünürse görünsün, her seferinde tamamen aynı görünüyor.
    • Showcase’teki birçok öğe normal font kullanıyor; referans alınabilir: https://wiredjs.com/showcase
    • El yazısı bir fontsa en azından sağa yatık olmalı.

  • Bu projeden ilham alarak elle çizilmiş tarzda mockup’ları hızlıca oluşturmak için VSCode eklentisi WireText’i yaptım.
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • Estetiği nedeniyle hoşuma gidiyor. Sevimli. Geri bildirim almak için daha yararlı olup olmadığı gibi şeyleri pek önemsemiyorum.

    • Sadece görsel hissi istiyor ve JS kısmına ihtiyaç duymuyorsanız PaperCSS kullanabilirsiniz.

  • Şahsen bu tarzı, gerçek bir üründe kullanmak isteyecek kadar beğeniyorum. Ya da ürünün beta sürümünde kullanıp resmi lansmanda değiştirmek de mümkün olabilir.
    Yine de çok fazla ek iş çıkaracak gibi.

    • Tasarım işine yeni başladığımda müşteri başarı ekibinin bir kısmıyla düşük sadakatli prototip kullanıcı testi yürütmüştüm.
      Görsel ifade, gösterdiğimiz şeyin hâlâ değişebileceğini anlatma niyeti taşıyordu; ama “eskiz hissi gerçekten çok güzel” geri bildirimi aldık. O zamandan beri tasarım sürecinin aşamasını göstermek için bu ifadeye bel bağlamıyorum.
    • Beta ya da alfa build’lerde bu tarzı kullanmanın bir nedeni var. Alacağınız geri bildirimin türü değişiyor.
      Uzun zaman önce “bitmemiş gibi göstermek” hakkında bir yazı okumuştum; muhtemelen AWT look and feel bağlamındaydı. Bununla ilgili xkcd tarzı grafikler de var: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) ve https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      Ürün bitmiş görünürse, aldığınız geri bildirim de bitmiş ürün varsayımıyla gelir.
      Bir zamanlar JavaScript iç mantığı üzerinde çalışırken gayet iyi görünen bir header kullanma hatasına düşmüştüm. Daha önce kullandığımız uzatılmış GIF’ten iyiydi ve CSS gradyanı da vardı.
      “Bu iş akışındaki sayfa sırası doğru mu? Bu özellik için gereken UI öğeleri sayfada var mı? Eksik işlev var mı?” diye kontrol etmek istiyordum; gelen geri bildirim ise mavi rengin ve gradyanın koyudan açığa mı, yoksa tersine mi gitmesi gerektiğiyle ilgiliydi.
      Biraz daha bakınca o look and feel’in https://napkinlaf.sourceforge.net olduğunu gördüm; buradan da şu blog yazısına ulaşılıyor: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...