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

 (wiredjs.com)
4 पॉइंट द्वारा GN⁺ 2024-06-01 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Wired Elements वायरफ्रेम, मॉकअप और playful UI में जोड़ने के लिए उपयुक्त हाथ से बने स्केच जैसे सामान्य UI एलिमेंट्स का संग्रह है
  • हर एलिमेंट में randomness शामिल है, इसलिए एक ही component भी हर render पर बिल्कुल एक जैसा नहीं दिखता
  • डेमो में wired-element control के साथ rough.js द्वारा बनाए गए स्केच-स्टाइल सर्कल को बदलते हुए इसका काम करने का तरीका दिखाया गया है
  • Vue, Svelte और React के लिए CodeSandbox examples उपलब्ध हैं, और React में अलग wrapper components का उपयोग किया जाता है
  • उपयोग का तरीका और हर एलिमेंट का API GitHub docs में देखा जा सकता है, जबकि सभी एलिमेंट्स component showcase में देखे जा सकते हैं

स्केच-स्टाइल UI कंपोनेंट्स

  • Wired Elements हाथ से बनाए गए जैसे दिखने वाले स्केच-स्टाइल के सामान्य UI एलिमेंट्स का एक सेट है
  • इसे वायरफ्रेम और मॉकअप जैसी अधूरी/प्रारंभिक अनुभूति बनाए रखने या hand-drawn माहौल वाला UI बनाने के लिए इस्तेमाल किया जा सकता है
  • हर एलिमेंट पर्याप्त randomness के साथ ड्रॉ किया जाता है, इसलिए हर render में वह बिल्कुल एक ही आकृति जैसा नहीं दिखता
  • एक सरल डेमो wired-element control का उपयोग करके rough.js से बनाए गए स्केच-स्टाइल सर्कल को बदलने के तरीके पर आधारित है

उदाहरण और दस्तावेज़

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

1 टिप्पणियां

 
GN⁺ 2024-06-01
Hacker News की राय

  • देखने में अच्छा है और अजीब तरह से nostalgia जगाता है। एक feedback यह है कि checkbox को toggle करने पर मुझे उम्मीद थी कि check mark हर बार ऐसा लगेगा जैसे हाथ से फिर से बनाया गया हो, यानी थोड़ा-थोड़ा अलग
    थोड़ा noise जोड़ दें तो 2.0 feature के तौर पर अच्छा रहेगा

    • noise जोड़ने पर हर render में उसका रूप बदल जाएगा, यह अच्छा होगा या नहीं, पक्का नहीं

  • इस काम के लिए Balsamiq Wireframes सबसे अच्छा है: https://balsamiq.com/wireframes/
    अगर code लिखना पड़े, तो जल्दी और rough तरीके से बनाने का मकसद ही खत्म हो जाता है

    • ऐसी चीज़ें customer को यह दिखाने में उपयोगी हो सकती हैं कि वे जो देख रहे हैं वह final product नहीं, बल्कि चलता हुआ prototype है
      पुराने Swing के “napkin look&feel” की तरह अगर design को बदलकर लगाया जा सके, तो यह और बेहतर fit होगा: https://napkinlaf.sourceforge.net/
      हालांकि web में “theme बदलकर design replace करना” वाला विचार लगता है काफी पहले गायब हो गया
    • phone पर hand-drawn style में wireframe बनाने के लिए यह है: https://www.tinyux.app
      छोटी touch screen पर drag-and-drop इस्तेमाल नहीं करना चाहता था, इसलिए non-standard UX चुना
    • https://wireframesketcher.com/ मुझे बहुत पसंद है
      इसमें cloud dependency नहीं है और lifetime license $99 का है। ऐसे products अब धीरे-धीरे rare होते जा रहे हैं
    • Balsamiq पसंद है। यह wireframe style “यह बस sketch है” बताने में मदद करता है, और “font थोड़ा अजीब है” जैसे सवालों से बचाता है, इसलिए उपयोगी है
    • Balsamiq सच में तेज और आसान है। याद है कि पहले किसी third-party post-processing tool से Balsamiq Mockups को code में बदला जा सकता था; पता नहीं वह अभी भी मौजूद है या नहीं
      खोजने पर पता चला कि नाम napkee था, और यह open source हुआ था, लेकिन लगता है लगभग 10 साल से इसे छुआ नहीं गया

  • लगभग 10 साल पहले लोकप्रिय रहे Balsamiq की याद आती है

    • मुझे अब भी लगता है Balsamiq बहुत उपयोगी है
    • mockup बनाते समय आज भी यही मेरा पहला tool है। stakeholders को product behavior समझाने में मुझे यह सबसे शक्तिशाली लगता है
    • सही, मैं भी यही कहने वाला था लेकिन पहले ही दिख गया
      अगर याद सही है, तो Balsamiq के founder Peldi ने उस समय इस बारे में blog लिखा था। मुझे भी पसंद है। उससे भी पहले popular रहे Comic Sans font की धुंधली याद भी आती है
    • क्या X window managers में भी कोई ऐसा नहीं था जिसे इसी तरह skin किया जा सके?
    • लगभग रोज़ इस्तेमाल करता हूँ

  • पहले हम sketch-style mockups इस्तेमाल करते थे ताकि users समझें कि यह final working interface नहीं है। अब लगता है शायद उसका वह मतलब खत्म हो गया है

    • यही तो इसका उद्देश्य है। यह mockup software बनाने के लिए है

  • hand-drawn feel वाले elements के लिए Excalidraw सबसे अच्छा है: https://excalidraw.com/
    इसका UX और जो काम मैं करना चाहता हूँ—खासकर architecture diagrams और low-fidelity mockups जल्दी निपटाना—मुझे तुरंत पसंद आ गया। यह सारा data browser में local save करता है, इसलिए offline काम करना भी आसान है

    • tldraw.com भी शानदार है

  • पिछली चर्चा: https://news.ycombinator.com/item?id=17146451 (650 points, 121 comments)

    • expand करने पर यह दिखता है: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - मई 2018 (120 comments)
      लगता है इसी या किसी बहुत मिलती-जुलती चीज़ पर एक और thread भी था। अगर कोई ढूँढ ले, तो list में जोड़ सकता है

  • sketch-style UI elements अच्छे हैं, लेकिन sketch-style text font पसंद नहीं। क्या सामान्य sans-serif font और sketch-style UI को style के लिहाज से साथ इस्तेमाल करना मुश्किल है?

    • व्यक्तिगत रूप से मुझे font पसंद आया, लेकिन ऐसे “handwriting” fonts हमेशा sketch जैसे लेकिन regular uncanny valley में फँस जाते हैं
      कोई खास glyph अलग से देखने पर कितना भी sketch जैसा लगे, हर बार बिल्कुल वैसा ही दिखता है
    • showcase में कई items normal font इस्तेमाल कर रहे हैं, इसलिए参考 कर सकते हैं: https://wiredjs.com/showcase
    • अगर cursive font है तो कम से कम दाईं ओर झुका होना चाहिए

  • इस project से प्रेरित होकर hand-drawn style mockups जल्दी बनाने के लिए VSCode plugin WireText बनाया
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • aesthetic की वजह से पसंद है। प्यारा है। feedback पाने में ज्यादा उपयोगी है या नहीं, ऐसी बातों की मुझे खास परवाह नहीं

    • अगर सिर्फ visual feel चाहिए और JS वाला हिस्सा नहीं चाहिए, तो PaperCSS इस्तेमाल कर सकते हैं

  • व्यक्तिगत रूप से मुझे यह style इतना अच्छा लगता है कि इसे actual product में इस्तेमाल करना चाहूँगा। या product के beta version में इस्तेमाल करके formal launch पर बदल सकता हूँ
    हालांकि लगता है extra काम बहुत ज्यादा होगा

    • design काम शुरू ही किया था तब customer success team के कुछ लोगों के साथ low-fidelity prototype user testing की थी
      visual treatment का मकसद यह बताना था कि जो हम दिखा रहे हैं वह अभी बदल सकता है, लेकिन feedback मिला कि “sketch वाला feel सच में बहुत अच्छा है।” उसके बाद से design process के stage indicator के तौर पर उस treatment पर निर्भर रहना छोड़ दिया
    • beta या alpha builds में यह style इस्तेमाल करने की वजह होती है। आपको मिलने वाले feedback के type बदल जाते हैं
      बहुत पहले “इसे अधूरा दिखने जैसा बनाना” पर एक लेख पढ़ा था, शायद AWT look and feel के context में। इससे जुड़ा xkcd style graph भी है: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) और https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      जब product पूरा बना हुआ दिखता है, तो feedback भी उसी premise पर आता है कि यह final product है
      पहले JavaScript internal logic पर काम करते समय मैंने अच्छा दिखने वाला header इस्तेमाल करने की गलती की थी। यह पुराने stretched GIF से बेहतर था और इसमें CSS gradient भी था
      मैं यह check करना चाहता था कि “क्या इस workflow में pages का order सही है? क्या इस feature के लिए जरूरी UI elements page पर हैं? कोई missing feature तो नहीं?” लेकिन जो feedback मिला वह इस बारे में था कि blue color और gradient dark side से light side की ओर जाना चाहिए या उल्टा
      और खोजने पर पता चला कि वह look and feel https://napkinlaf.sourceforge.net था, और वहाँ से इस blog post तक पहुँचा: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...