[HN Gopher] UI elements with a hand-drawn, sketchy look
___________________________________________________________________
UI elements with a hand-drawn, sketchy look
Author : nickca
Score : 670 points
Date : 2024-05-31 22:23 UTC (1 days ago)
(HTM) web link (wiredjs.com)
(TXT) w3m dump (wiredjs.com)
| ayhanfuat wrote:
| rough.js is great. It is also powering excalidraw.
| j45 wrote:
| It's also important to appreciate and congratulate someone who
| started and finished something they wanted to complete and
| release.
| ayhanfuat wrote:
| True. I am not sure how that relates to my comment though.
| Did I seem unappreciative somehow?
| kvmet wrote:
| I don't think they were saying you were unappreciative.
| They were just adding on that finishing a project is worth
| celebrating.
| throwaway290 wrote:
| It was finished and congratulated 6 years ago:
| 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 wrote:
| Ah 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 wrote:
| I 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 wrote:
| Previously https://news.ycombinator.com/item?id=17146451 (650
| points, 121 comments)
| dang wrote:
| Thanks! Macroexpanded:
|
| _Show HN: Wired-elements - UI web components with a hand
| drawn, sketchy look_ -
| 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 wrote:
| Really nice! Not sure what I'd ever use this for, but definitely
| putting it in my proverbial back pocket.
| greenavocado wrote:
| Bring back skeuomorphism. I hate flat and material design. Those
| two excessively eliminate subconscious visual cues from the
| natural world.
| bmitc wrote:
| Skeuomorphism 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.
| skydhash wrote:
| OS X Maverics and iOS 6 were also nice examples of
| skeuomophism done right.
| bmitc wrote:
| I personally dislike Apple's skeuomorphic designs and find
| them very distracting. I in general do not like
| skeuomorphism in nearly any application.
| wkat4242 wrote:
| I 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).
| seanmcdirmid wrote:
| This brings back memories of Swing/JFC, back when it was thought
| to be a good thing to have pluggable look and feels.
| TeaVMFan wrote:
| NapkinLAF provided a hand-drawn look for Swing:
|
| https://napkinlaf.sourceforge.net/#Snapshots
| SoftTalker wrote:
| Well 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 wrote:
| thats the entire point of this. to generate mockup software
| samuria wrote:
| Wouldn't it be easier to just decide on a UI library to be
| used for the project and use that instead?
| worksonmine wrote:
| Design can distract from the UX and there's a use for very
| minimal mocks.
| epidemian wrote:
| But that would not convey to the user the idea of the
| interface being a work-in-progress.
| mirekrusin wrote:
| You can stick "under construction" animated gif.
| Dalewyn wrote:
| I find the deliberate choice of a left-handed font for this
| example intriguing.
| hammock wrote:
| Was it deliberate?
| Dalewyn wrote:
| From 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 wrote:
| Do we know they know it's left handed, that was more my
| (our?) question
| bdcravens wrote:
| Reminds me of Balsamiq, which was the rage about 10 years ago.
| TheBlight wrote:
| Wasn't there an X window manager that you could skin in the
| same way?
| jzemeocala wrote:
| Compiz?
| ceejayoz wrote:
| I still find Balsamiq super useful.
| fuzztester wrote:
| Yes, 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 wrote:
| Perhaps more like Tekton, which was like a classier crisper
| comic sans
| neeleshs wrote:
| It's still my go-to tool for mockups. I find it to be the most
| powerful tool to convey product behavior to stakeholders
| kissgyorgy wrote:
| I use it almost every day.
| the_gipsy wrote:
| Completely broken on mobile.
| HPsquared wrote:
| Works for me on Chrome Android
| throwaway_ab wrote:
| Works for me on iPhone.
| nonesuchluck wrote:
| Maybe 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 wrote:
| ChatGPT thinks it was called 'TimeDraw' :)
| xyzzy_plugh wrote:
| Every 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 wrote:
| Algorithms 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 wrote:
| "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 wrote:
| You absolutely can do that.
|
| And yes, it does release you from licensing obligations
| (unless the license included specific clauses).
| xyzzy_plugh wrote:
| You 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.
| justinclift wrote:
| Firefox'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 wrote:
| Strange. It works here with "Enhanced Tracking Protection".
| Maybe I'm using a different version of Firefox?
| justinclift wrote:
| I'm using FF 126.0.1 on Debian Linux x86_64, if that helps.
| :)
| hgs3 wrote:
| This 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.
| duegreg wrote:
| Adding a noise would result differenet look on every render, I
| am not sure that's good
| SpaceNoodled wrote:
| It already does that, though.
| bryanrasmussen wrote:
| I 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 wrote:
| There'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-s...
| ( https://news.ycombinator.com/item?id=4597977 ) and
| 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
|
| Which has the links to the blog post:
|
| Don't make the Demo look Done -
| https://headrush.typepad.com/creating_passionate_users/2006/...
| diegof79 wrote:
| Check out Bill Buxton's work, he wrote a lot about this:
| https://www.billbuxton.com/
| mortenjorck wrote:
| Early 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.
| Lorin wrote:
| Doesn't seem super accessible tho', tab focus leaves me wanting.
| cl3misch wrote:
| I love the sketchy UI elements. I hate the sketchy text font. Do
| normal sans-serif fonts and sketchy UI not fit together
| stylistically?
| lloeki wrote:
| I 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 wrote:
| The cursive font should at least lean to the right.
| PhasmaFelis wrote:
| I think that might be how left-handed people write if they're
| taught how to write properly left-handed. (I was not.)
| tyingq wrote:
| A lot (not all) of the things in their showcase are using a
| normal font, so you can have a look:
| https://wiredjs.com/showcase
| hodanli wrote:
| Last commit is three years ago
| amsterdorn wrote:
| HN is like Reddit, people will repost old things that aren't
| theirs until the end of time.
| kissgyorgy wrote:
| My favorite tool for this is Balsamiq Wireframes:
| https://balsamiq.com/wireframes/
|
| Having to write code loses the point of quick and dirty.
| McDyver wrote:
| I really like https://wireframesketcher.com/
|
| No cloud dependencies, and a lifetime license for $99. These
| are becoming rarer and rarer
| mthoms wrote:
| Sadly, the "lifetime license" only includes one year of
| updates.
| riffraff wrote:
| I 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/
| krsdcbl wrote:
| I'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 wrote:
| but 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.
| pjmlp wrote:
| Exactly, I have been in too many meetings when they get shown
| a click dummy in the technology stack, we get the reaction, a
| couple of days more and it is done.
| juliushuijnk wrote:
| For wireframing on your phone, with hand drawn style:
| https://www.tinyux.app
|
| It has a non-standard ux, since I didn't want drag-drop on a
| small touch screen.
| xixixao wrote:
| Wow! Awesome!
| grodriguez100 wrote:
| Looks great! No iOS version?
| pjmlp wrote:
| Great, thanks for sharing.
| Angostura wrote:
| Love Balsamiq. The style of wireframe is so useful for
| conveying to people that this is just a sketch and to avoid the
| 'I'm not sure about the font' questions
| jnsie wrote:
| Absolutely love Balsamiq. So quick and easy. IIRC there used to
| be a post-processing tool by a 3rd party that would turn
| Balsamiq Mockups into code - wonder if it's still kicking
| around.
|
| Edit: it was called napkee. looks like it was open sourced but
| hasn't been touched in almost a decade
| Terr_ wrote:
| I 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 wrote:
| You might also like DoodleCSS!
| https://chr15m.github.io/DoodleCSS/
| vanviegen wrote:
| I'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/RE...
| bobwaycott wrote:
| Wow, this is _really_ cool and clever. Well done!
| bkazez wrote:
| Pencil and paper also has a hand-drawn, sketchy look, and you
| don't have to write code!
| lproven wrote:
| Reminds 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-...
|
| Implemented using Appearance Manager, not via Kaleidoscope or one
| of the other add-ons.
|
| https://en.wikipedia.org/wiki/Appearance_Manager
| tunnuz wrote:
| I use Excalidraw for sketching with a similar outcome.
| pg5 wrote:
| Glad 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.
| brimstedt wrote:
| Nice 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 wrote:
| This 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 wrote:
| Thank 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 wrote:
| I'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.
| samatman wrote:
| You're imputing a huge amount of intention found nowhere in the
| link.
|
| > _A set of common UI elements with a hand-drawn, sketchy look.
| These can be used for wireframes, mockups, or just the fun
| hand-drawn look._
|
| You made up all the stuff about users and feedback. It isn't on
| the page and it isn't in the README.
| SteveDR wrote:
| Who 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
| wouldbecouldbe wrote:
| It's great for showing work to clients, not users.
|
| I've always gotten so much complaints when wireframes look too
| much as design, they will start making all kinds of comments
| about how it looks instead of focusing on structure.
|
| I used balsamiq wireframes tool a lot for that reason.
| DontchaKnowit wrote:
| Counterpoint, it looks good.
| ghnws wrote:
| Where are you reading this?
| swiftcoder wrote:
| Nah, the magic here is that if you hand this to your CEO, he's
| not going to go "looks great, ship it!" and demand your hacked-
| up demo be in production next week.
| Izkata wrote:
| Sketch-style UI isn't supposed to make people comment more
| freely, it's supposed to help stop them from focusing on the
| polish and instead look at the functionality. The last thing
| you want is "X and Y aren't aligned" or "Would color Z be
| better?" when the questions are still more like "Does this
| work?" and "Are these numbers correct?"
| danielovichdk wrote:
| I would like to have something like this for "text on stripped
| paper". Anyone know if there is a library for that ?
| elevatedastalt wrote:
| I like it for the aesthetics. It's cute. I don't care whether
| it's more useful for getting feedback or whatever.
| literallycancer wrote:
| If you just want the visuals and don't need the JS parts, you
| can use PaperCSS.
| elevatedastalt wrote:
| Thanks 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 wrote:
| The progress bars should really be filled out like if a person
| was doing it, rather than re-rendering the whole contents
| WillAdams wrote:
| There 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.
| endofreach wrote:
| Finally. 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 wrote:
| can i use this in htmx ?
| aryeshalev wrote:
| 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 wrote:
| I'm using this for the AI annotations at 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.
| PhasmaFelis wrote:
| I want to sneak this onto the test environments for my company's
| webapp next April Fool's.
___________________________________________________________________
(page generated 2024-06-01 23:02 UTC)