हाथ से बने स्केच स्टाइल के UI एलिमेंट्स

 (wiredjs.com)
4 पॉइंट द्वारा GN⁺ 2024-06-01 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Wired Elements

अवलोकन

  • Wired Elements हाथ से बने स्केच जैसे स्टाइल वाले UI एलिमेंट्स देने वाली एक लाइब्रेरी है.
  • इसे wireframe, mockup, या मज़ेदार hand-drawn style के लिए इस्तेमाल किया जा सकता है.
  • एलिमेंट्स को हल्की randomness के साथ ड्रॉ किया जाता है, इसलिए दो रेंडर कभी एक जैसे नहीं होते.

डेमो

  • सरल डेमो: rough.js का उपयोग करके बनाए गए स्केच सर्कल को wired-element control में बदलने का उदाहरण दिया गया है.

लाइव डेमो

  • Sandbox में रियल टाइम में wired-elements आज़माएँ:
    • Vanilla JS: बेसिक JavaScript के साथ wired-elements का उपयोग किया जा सकता है.
    • Vue: Vue framework में wired-elements का उपयोग किया जा सकता है.
    • Svelte: Svelte framework में wired-elements का उपयोग किया जा सकता है.
    • React: React wrapper component का उपयोग करके wired-elements का इस्तेमाल किया जा सकता है.

दस्तावेज़

  • इस्तेमाल का तरीका: wired-elements को कैसे उपयोग करें, यह GitHub पेज पर देखा जा सकता है.
  • API दस्तावेज़: किसी खास एलिमेंट का API दस्तावेज़ पेज पर उपलब्ध है.

कॉम्पोनेंट्स

  • सभी wired एलिमेंट्स का component showcase उपलब्ध है.

क्रेडिट

  • RoughJS और Lit का उपयोग करके wired-elements बनाया गया है.

प्रोजेक्ट समर्थन

  • Open Collective या GitHub पर प्रोजेक्ट डेवलपमेंट को स्पॉन्सर किया जा सकता है.

लाइसेंस

  • MIT लाइसेंस (c) Preet Shihn.

GN⁺ की राय

  • डिज़ाइन लचीलापन: हाथ से बने जैसे स्टाइल उन प्रोजेक्ट्स के लिए उपयोगी हो सकते हैं जो एक अलग तरह का डिज़ाइन चाहते हैं.
  • Framework compatibility: यह कई frameworks के साथ compatible है, इसलिए उपयोगकर्ताओं के पास अधिक विकल्प हैं.
  • Randomness: randomness का एलिमेंट होने से हर बार थोड़ा अलग परिणाम मिलता है, जो इसे ताज़गी देता है.
  • Learning curve: शुरुआती इंजीनियरों को नई लाइब्रेरी सीखने में कुछ समय लग सकता है.
  • विकल्प: मिलते-जुलते फीचर्स देने वाली दूसरी लाइब्रेरियों में Paper.js, Konva.js आदि शामिल हैं.

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-06-01
Hacker News राय
  • Pencil and paper: बिना code लिखे हाथ से बने sketch जैसा एहसास दिया जा सकता है.
  • Balsamiq Wireframes: तेज़ और सरल mockup बनाने के लिए उपयोगी tool के रूप में सुझाया गया.
  • Code लिखना: तेज़ और सरल mockup बनाने के मकसद के अनुरूप नहीं है.
  • Design feedback: हर बार checkbox toggle करने पर ऐसा लगे जैसे उसे फिर से हाथ से बनाया गया हो, तो अच्छा होगा.
  • WireText: हाथ से बने style के mockup जल्दी बनाने वाले VSCode plugin से प्रेरणा मिली.
  • Sketch UI elements: sketch style के UI elements अच्छे हैं, लेकिन sketch font खास नहीं है. सामान्य sans-serif font और sketch UI stylistically मेल नहीं खाते.
  • Balsamiq की याद: यह लगभग 10 साल पहले लोकप्रिय रहे Balsamiq की याद दिलाता है.
  • Sketch mockup इस्तेमाल करने का कारण: इसका उपयोग इसलिए किया गया ताकि users समझ सकें कि यह finalized interface नहीं है.
  • वास्तविक product में उपयोग: इस style को असली product या beta version में इस्तेमाल करना चाहूँगा, लेकिन लगता है कि अतिरिक्त काम बहुत ज़्यादा होगा.
  • DoodleCSS सुझाव: DoodleCSS भी पसंद आ सकता है.
  • rough.js: यह एक बेहतरीन tool है, और excalidraw में भी इस्तेमाल हो रहा है.