7 ms·
UI elements with a hand-drawn, sketchy look
- justinclift 2y agoFirefox's "Enhanced Tracking Protection" seems to break their React demo. Turning that off though and things seem to load ok, even with UBlock Origin and Privacy Badger running.
- jan_Sate 2y agoStrange. It works here with "Enhanced Tracking Protection". Maybe I'm using a different version of Firefox?
- justinclift 2y agoI'm using FF 126.0.1 on Debian Linux x86_64, if that helps. :)
- deleted 2y ago[deleted]
- tunnuz 2y agoI use Excalidraw for sketching with a similar outcome.
- endofreach 2y agoFinally. I have occasionally been looking for something similar & it was not important enough to do it myself. Now i have a good basis to start from. Thank you!
- sandGorgon 2y agocan i use this in htmx ?
- ayhanfuat 2y agorough.js is great. It is also powering excalidraw.
- j45 2y agoIt's also important to appreciate and congratulate someone who started and finished something they wanted to complete and release.
- ayhanfuat 2y agoTrue. I am not sure how that relates to my comment though. Did I seem unappreciative somehow?
- kvmet 2y agoI don't think they were saying you were unappreciative. They were just adding on that finishing a project is worth celebrating.
- throwaway290 2y agoIt was finished and congratulated 6 years ago: https://news.ycombinator.com/item?id=17146451 https://news.ycombinator.com/item?id=17146451 The same author also made rough.js. So it looks like the commenter you replied to has more context than you.
- majikandy 2y agoAh that makes sense now. I nearly said it was like excalidraw, which is really nice for architecture diagrams more than for ui/ux I find.
- elric 2y agoI never really used Excalidraw until I discovered the Obsidian plugin. Now I have tons of markdown notes with embedded Excalidraw doodles. It's good stuff.
- airstrike 2y agoPreviously https://news.ycombinator.com/item?id=17146451 https://news.ycombinator.com/item?id=17146451 (650 points, 121 comments)
- dang 2y agoThanks! Macroexpanded: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 https://news.ycombinator.com/item?id=17146451 - May 2018 (120 comments) I feel like there were other threads, either about this or something very similar. If anyone finds them, we can add to the list.
- seattle_spring 2y agoReally nice! Not sure what I'd ever use this for, but definitely putting it in my proverbial back pocket.
- greenavocado 2y agoBring back skeuomorphism. I hate flat and material design. Those two excessively eliminate subconscious visual cues from the natural world.
- bmitc 2y agoSkeuomorphism goes in the other extreme direction though. One doesn't need flat design or skeuomorphism. There's a nice balance of UI elements that sit in the middle. I think Windows 7 was probably a good example of just straight up boring buttons and controls.
- deleted 2y ago[deleted]
- wkat4242 2y agoI hate it too. I understand what people had against it though because Apple (led by Scott Forstall) took it wayyyy too far at one point. The notepad, the game center, it was a joke. It became its own objective. I think the current bland flatness is a kneejerk reaction to that (kicked off by Jony Ive who was probably angered by Forstall's design).
- Lorin 2y agoDoesn't seem super accessible tho', tab focus leaves me wanting.
- seanmcdirmid 2y agoThis brings back memories of Swing/JFC, back when it was thought to be a good thing to have pluggable look and feels.
- TeaVMFan 2y agoNapkinLAF provided a hand-drawn look for Swing: https://napkinlaf.sourceforge.net/#Snapshots https://napkinlaf.sourceforge.net/#Snapshots
- SoftTalker 2y agoWell we used to use "sketchy" looking mockups so that users would understand that this wasn't a finished, working interface. I guess that's out the window now.
- pech0rin 2y agothats the entire point of this. to generate mockup software
- samuria 2y agoWouldn't it be easier to just decide on a UI library to be used for the project and use that instead?
- worksonmine 2y agoDesign can distract from the UX and there's a use for very minimal mocks.
- epidemian 2y agoBut that would not convey to the user the idea of the interface being a work-in-progress.
- mirekrusin 2y agoYou can stick “under construction” animated gif.
- Dalewyn 2y agoI find the deliberate choice of a left-handed font for this example intriguing.
- hammock 2y agoWas it deliberate?
- Dalewyn 2y agoFrom the source code: ><link rel="preload" href="fonts/font.woff2" as="font"> >@font-face { font-family: 'Gloria Hallelujah'; ... src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(fonts/font.woff2) format('woff2'); ... } >body { ... font-family: 'Gloria Hallelujah', sans-serif; ... } So yes, the choice of font looks to be quite deliberate.
- hammock 2y agoDo we know they know it’s left handed, that was more my (our?) question
- bdcravens 2y agoReminds me of Balsamiq, which was the rage about 10 years ago.
- TheBlight 2y agoWasn't there an X window manager that you could skin in the same way?
- jzemeocala 2y agoCompiz?
- ceejayoz 2y agoI still find Balsamiq super useful.
- fuzztester 2y agoYes, was about to say the same, then saw your comment. IIRC, Peldi, Balsamiq founder, had blogged about it at the time. I like it too. Also reminds me vaguely of the Comic Sans font, which was the rage even earlier.
- majikandy 2y agoPerhaps more like Tekton, which was like a classier crisper comic sans
- neeleshs 2y agoIt's still my go-to tool for mockups. I find it to be the most powerful tool to convey product behavior to stakeholders
- kissgyorgy 2y agoI use it almost every day.
- the_gipsy 2y agoCompletely broken on mobile.
- HPsquared 2y agoWorks for me on Chrome Android
- throwaway_ab 2y agoWorks for me on iPhone.
- the_gipsy 2y agoClicking on the dropdown entries also selects the radio button below it.
- nonesuchluck 2y agoMaybe someone here can help me remember. I had a PalmOS app that I loved, back in the day, and I can't remember what it was called. It was a shareware clock app, with hand-drawn time that animated from one numeral to the next. I used to use it as an alarm clock, in my Sony Clie dock, by my bed. Would love to see it again.
- r1chard007 2y agoChatGPT thinks it was called 'TimeDraw' :)
- xyzzy_plugh 2y agoEvery time I go to reach for rough.js I get a bit uncomfortable when I read this: > Some of the core algorithms were adapted from handy processing lib. handy is LGPLv3, but rough.js is MIT. This line makes me think parts of rough.js are actually LGPLv3, as those parts are derivative works. In practice this is unlikely to negatively impact me but I'm not super pleased by the uncertainty.
- jacobolus 2y agoAlgorithms can't be copyrighted (though code can be), so this really depends on what level of copying is implied by the word "adapted".
- xyzzy_plugh 2y ago"I read this code and then reimplemented it from scratch in a different language" does not release you from licensing obligations. If that were the case then brb while I go reimplement unreal engine in rust.
- PaulDavisThe1st 2y agoYou absolutely can do that. And yes, it does release you from licensing obligations (unless the license included specific clauses).
- xyzzy_plugh 2y agoYou should consult a lawyer. It's one thing if it's a clean-room implementation but every IP attorney I have ever interacted with would disagree with you. It doesn't take much for a court to consider something a derivative work.
- PaulDavisThe1st 2y agoYou cannot copyright algorithms. Ergo, the expression of an algorithm in one language is not a copyright violation of an expression of the same algorithm in a different language. Of course, there's a gray zone: what about a reimplementation in the same language, but with different variable names? Those cases are why we have courts. But ... if you figure out how to solve Rathbone's conjecture[0] and reveal the source code for it in C++, my reimplementation of that in Rust or Lua does not constitute a derivative work. One exception would be if you managed to patent some feature of the algorithm (RSA comes to mind, or frequency-based colors for drawing waveforms). That's a different story. [0] invented :)
- deleted 2y ago[deleted]
- hgs3 2y agoThis looks nice and oddly nostalgic. One bit of feedback: each time I toggled the checkbox I expected the checkmark to look slightly different, as if it were being redrawn by hand each time. Adding some "noise" might be a neat feature for a version 2.0.
- deleted 2y ago[deleted]
- duegreg 2y agoAdding a noise would result differenet look on every render, I am not sure that's good
- SpaceNoodled 2y agoIt already does that, though.
- bryanrasmussen 2y agoI personally like the look of this kind of thing enough I would want to use it for a real product, or maybe for the beta version of the product and then switch it up when official release. Probably too much extra work though.
- shagie 2y agoThere's good reason to use it for a beta build (or an alpha) - it changes the type of feedback you get. While my google-fu is failing me as I write this, there was a blog post I read long ago about a making things look not done (I want to say it was in the context of an AWT look and feel). Related: xkcd-style Plots https://mathematica.stackexchange.com/questions/11350/xkcd-style-plots https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 https://news.ycombinator.com/item?id=4597977 ) and https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graphs_are_important.html https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph... If the product looks done then the feedback you will get assumes that it is done. I made the mistake of using a nice looking header (it looked better than the existing ones that were used which were stretched gifs and I had a CSS gradient) while working on the innards of some JavaScript. While I was trying to get feedback on the "is this workflow the right sequence of pages? Are these the UI elements that need to be on the page for this functionality? For that matter, am I missing some functionality?" .... and I got feedback about the color blue and if it should go from dark to light or light to dark in the gradient. ... And with some digging I remembered the look and feel - https://napkinlaf.sourceforge.net https://napkinlaf.sourceforge.net Which has the links to the blog post: Don't make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/12/dont_make_the_d.html https://headrush.typepad.com/creating_passionate_users/2006/...
- diegof79 2y agoCheck out Bill Buxton's work, he wrote a lot about this: https://www.billbuxton.com/ https://www.billbuxton.com/
- mortenjorck 2y agoEarly in my design career, I ran a user test of a lo-fi prototype with some members of a customer success team, the visual presentation intended to convey the mutability of what we were presenting. I got a comment that “the sketch look was really nice” and since then have never relied on that as a signifier of where a concept was in the design process.
- cl3misch 2y agoI love the sketchy UI elements. I hate the sketchy text font. Do normal sans-serif fonts and sketchy UI not fit together stylistically?
- lloeki 2y agoI liked the font myself, but as with every such "handwriting" font it sits in an uncanny valley of "sketchy but regular": a given glyph, however sketchy in isolation, always looks exactly the same!
- zogomoox 2y agoThe cursive font should at least lean to the right.
- PhasmaFelis 2y agoI think that might be how left-handed people write if they're taught how to write properly left-handed. (I was not.)
- tyingq 2y agoA lot (not all) of the things in their showcase are using a normal font, so you can have a look: https://wiredjs.com/showcase https://wiredjs.com/showcase
- hodanli 2y agoLast commit is three years ago
- amsterdorn 2y agoHN is like Reddit, people will repost old things that aren't theirs until the end of time.
- kissgyorgy 2y agoMy favorite tool for this is Balsamiq Wireframes: https://balsamiq.com/wireframes/ https://balsamiq.com/wireframes/ Having to write code loses the point of quick and dirty.
- McDyver 2y agoI really like https://wireframesketcher.com/ https://wireframesketcher.com/ No cloud dependencies, and a lifetime license for $99. These are becoming rarer and rarer
- mthoms 2y agoSadly, the "lifetime license" only includes one year of updates.
- riffraff 2y agoI think something like this can be useful to show your customers that something is a functional prototype and not a finished product. This works if you can switch out The design as in the old "napkin look&feel" for Swing.[0] Sadly I think "change design by switching out a theme" has long died as an idea in the web space. [0] https://napkinlaf.sourceforge.net/ https://napkinlaf.sourceforge.net/
- krsdcbl 2y agoI'm asking myself if this might be a good application for a WebGL shader? The issue with "theming to look sketched" is the same as with "hand drawn looking components" - it has to be integrated for your specific DOM or App, totally defying the purpose of "making someone understand this is a quick sketch". Because by now, it's far beyond being a sketch.
- riffraff 2y agobut that's the point, it's not a sketch, it's a prototype. Consider building a calendar app. You build part of the thing, but you have not handled error conditions and edge cases, the back-end supports only a single user and you don't have authentication working. It's enough to validate some of the flows and how UX actually works, but if you show it to a customer with the actual proper designs they will subconsciously asume that the work is finished. If the look and feel is "this is not real" it sets their mind in a different configuration.
- Terr_ 2y agoI wish more designers used these, precisely because it blocks them from prematurely adding too much detail. When they start doing things like exact-padding and font-size and whatnot, it either (A) front-loads implementation into the development process when the UX hasn't really been tested or at least (B) making developers spend time guessing how precisely the beta needs to look like the design.
- chr15m 2y agoYou might also like DoodleCSS! https://chr15m.github.io/DoodleCSS/ https://chr15m.github.io/DoodleCSS/
- vanviegen 2y agoI've drawn my inspiration from this project while creating WireText, a VSCode plugin for quickly creating mockups with a hand-drawn style, https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/README.md https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...
- bobwaycott 2y agoWow, this is really cool and clever. Well done!
- vanviegen 2y agoThanks! :-D
- bkazez 2y agoPencil and paper also has a hand-drawn, sketchy look, and you don’t have to write code!
- lproven 2y agoReminds me of the Paper theme for MacOS 8.x-9.x. There's a screenshot in the carousel here: https://www.macintoshrepository.org/2549-appearance-manager-themes-add-ons-mac-os-8-9- https://www.macintoshrepository.org/2549-appearance-manager-... Implemented using Appearance Manager, not via Kaleidoscope or one of the other add-ons. https://en.wikipedia.org/wiki/Appearance_Manager https://en.wikipedia.org/wiki/Appearance_Manager
- pg5 2y agoGlad to have found this! I've been looking for something like this because I'm working on a fun, quick side project and don't want to use something boring like bootstrap for it.
- danielovichdk 2y agoI would like to have something like this for "text on stripped paper". Anyone know if there is a library for that ?
- brimstedt 2y agoNice work It would be neat if there was an option to make input and textarea use the script font as well and an image component that made a sketch of the image provided. And maybe charts, and...
- beryilma 2y agoThis is UI theory gone wrong. The idea that users will give feedback more freely when something looks unfinished is at best a non-validated theory. This used to work with actual paper prototypes. But going the extra length to make UI designs look hand-drawn, when the users know full well they are computer generated is just busy work. Showing the users what the actual design might look like works better and it actually captures important design choices such as shapes, colors, proximity, etc. that users care about. I have been to many UX tests. Regardless of sketchy design look or not, the user will either have no problem providing feedback or they won't give useful feedback. It mostly depends on the person, not on what you show them.
- Oarch 2y agoThank you for this. I couldn't agree more about this being busy work. Which there seems to be a lot of in the PM world. Personally I've found basic shapes and text boxes, or felt markers, infinitely more helpful at getting direct feedback from users.
- shalmanese 2y agoI've found the opposite. When users feel like a lot of work has gone into something, they'll restrict their critiques to minor elements that seem easy to change because they are worried about causing you too much rework. Putting it in a sketch format makes it seem like it was easy to generate and gives them much more freedom to make more radical suggestions. The key though is you also have to present them at least 2 - 3 very radically different versions of the same thing. Each tool has a different purpose at different parts of the design stage. When I'm in blue sky ideation phase, I don't want users to be thinking about colors and proximity (although I do, even at that stage, care deeply about information hierarchy and hate sketch tools that make information heirarchy hard to design for). It's when I'm more in the narrowing down stage that I'll move to more higher fidelity tools.
- SteveDR 2y agoWho is claiming that this style improves user feedback? From the OP, “these can be used for wireframes, mockups, or just the fun hand-drawn look.” I like the style for its aesthetics alone
- elevatedastalt 2y agoI like it for the aesthetics. It's cute. I don't care whether it's more useful for getting feedback or whatever.
- literallycancer 2y agoIf you just want the visuals and don't need the JS parts, you can use PaperCSS.
- elevatedastalt 2y agoThanks for the tip, just checked it out. I prefer the aesthetics of the current one better. Paper CSS looks like a kid drew those elements. This one has the hand-drawn look of a more professional hand.
- flemhans 2y agoThe progress bars should really be filled out like if a person was doing it, rather than re-rendering the whole contents
- WillAdams 2y agoThere was a charming theme for Mac OS which looked something along these lines (and there was another which collapsed elements down to the bare minimum of space necessary which was a big help, and wish had been preserved, or re-created on some other platform --- in particular, being able to arrange a line of window-shaded folders and to double-click on any one to make it visible was a god-send on small displays) --- it would be nice if theming were simpler to do/implement.
- aryeshalev 2y agohttps://jdittrich.github.io/quickMockup/ https://jdittrich.github.io/quickMockup/ this is another GEM from the past, super easy and you can load/save as HTML file. i like the simple design for mockup
- lpellis 2y agoI'm using this for the AI annotations at https://pagewatch.ai/ https://pagewatch.ai/ Its strange how much different it makes the whole page feel from regular boxes, much more of a tangible/informal feeling. Felt perfect to go with the type of feedback LLM's give.
- archon810 2y agoI tried signing up and scanning apkmirror.com but it immediately came up with a 403. Perhaps your user agent is blocked, you should probably use a custom user agent.
- lpellis 2y agoIt is cloudflare that blocked us, we scrape using a regular chrome instance (with the latest user-agent), but cloudflare are sometimes very aggressive in their blocking. I'm busy adding a proxy option to handle these cases automatically, and some way to whitelist our scraper.
- PhasmaFelis 2y agoI want to sneak this onto the test environments for my company's webapp next April Fool's.
- siyejed358 2y agoWhat are the usecases? who will use this in production?
- deleted 2y ago[deleted]
- sabaimran 2y agoMy absolute favorite for hand-drawn-esque elements is Excalidraw (https://excalidraw.com/ https://excalidraw.com/). Immediately became enamored by the UX and the ability to get done what I was looking for - architecture diagrams and low fidelity mock ups. It stores everything locally on your browser, which makes it easy to work offline as well.
- niels_bom 2y agotldraw.com is also excellent