11 ms·
Show HN: Wired-elements – UI web components with a hand drawn, sketchy look
- ai_ia 8y agoReally nice project. Not sure what's the use case but good fun project. Will use someday. :)
- shihn 8y agoYep. It was mostly done for fun. I can see it being a tool for wire-framing or interactive mockups.
- maccio92 8y agothe balsamiq wireframing software is stylized like this, and i think it suits the wireframing context very nicely https://balsamiq.com/ https://balsamiq.com/ that's just one specific use case, but it's one where i think this sketchy style fits really nicely with the context
- Angostura 8y agoCame here to mention Balsamiq. Used it for years and made by rather nice people.
- spking 8y agoThis is fantastic! Very useful to get a concept into the browser and hopefully minimize clients focusing on visual design preferences too early in the process.
- jedberg 8y agoI hadn't thought of this, but this is an excellent point! You can use this to make a functional mockup for a client/boss/whomever, and by using these they will completely ignore all styling and focus on the functionality. Heck, I'm even thinking of using it now when we launch a beta, to get the users to focus on the functionality instead of the design. My only fear is that they will want to keep the design!
- DougWebb 8y agoI've tried that, years ago, using a similar rough-draft kind of mockup engine. I still got comments on the styling, and comments along the lines of "this doesn't look finished enough for review".
- pc86 8y agoThis is why I purchased Balsamiq when I was contracting, even the basic Bootstrap theme, even with bold text saying "ignore everything design related!!" I'd still get comments about button shapes, colors, complaints about shadows and graphics, etc. Even with more "theme" stuff in a Balsamiq mockup like colors and images clients were able to focus much more on content, layout, and information architecture than design.
- DonHopkins 8y agoWe did that with The Sims. The programmers would sketch up stuff in Microsoft Paint as ugly as possible, to make it clear that it was just placeholder art: https://i.imgur.com/4yh7Bqt.jpg https://i.imgur.com/4yh7Bqt.jpg https://i.imgur.com/oMbtAL3.jpg https://i.imgur.com/oMbtAL3.jpg Q: Were these screenshots taken when you were working at EA/Maxis? A: Yes, these have placeholder "programmer art" that looks really shitty on purpose, so nobody mistakes them for final artwork! Q: I thought as much; also noticed the 'Live' 'Buy' and 'Build' mode placeholder text on the UI ;) It's harder to make ugly stuff in 3dsmax, so we had to make it inexplicable instead. Things tended to get weird when we were doing things like testing the 3D sprite exporter animations. I am at a loss to explain this, other than it's an experiment in post-transmogrification texture mapping... https://i.imgur.com/gmLNaBu.jpg https://i.imgur.com/gmLNaBu.jpg You could place "spores" on the ground that would grow into big Mona Lisa Mushrooms! Before that, I also used the same "programmer art" approach for some demos I made at Kaleida, when I didn't have an art department at my disposal to do my bidding, but knew just enough Photoshop and Director to be a danger to myself and others. (Some of it literally looked like shit and smelled like stinky cheese that made people scream!) https://medium.com/@donhopkins/1995-apple-world-wide-developers-conference-kaleida-labs-scriptx-demo-64271dd65570 https://medium.com/@donhopkins/1995-apple-world-wide-develop... >To make any sense of this, you should realize that it’s live improvisational performance programming art. The graphical and audio artwork are just ugly placeholder “programmer art”. The references to “great content” are laughably ironic! >I didn’t have an art department at my disposal, and I have terrible graphics design skills, but I didn’t let that stop me, because that wasn’t the point! >The art is in how it works and what it does and how I use it, not how it looks or sounds. >It was meant to inspire ScriptX developers as well as myself, and it led to me to later develop iLoci and MediaGraph.
- matt_the_bass 8y agoCool story. At my company we use an aweful puke pink color for all our “non designed” graphics. This solves: 1. Clearly not the intended final design 2. Let’s us quickly see issues with our theming infrastructure.
- DonHopkins 8y ago
- shihn 8y agoAfter working on http://roughjs.com/ http://roughjs.com/ I thought it would be interesting to create common sketchy UI components that worked like actual controls. Web components seemed liked the obvious tech for that. So, yeah, here's wired-elements.
- njx 8y agoGreat job!. What is it based on Canvas or SVG? I had in my initial version of https://www.mockuptiger.com https://www.mockuptiger.com built sketchy components using Canvas. It was interesting and fun.
- shihn 8y agoThe web components use SVG and are build on lit-element (https://github.com/Polymer/lit-element https://github.com/Polymer/lit-element) as the web-component base. Rough.js can render to either canvas or SVG.
- mathisonian 8y agoThis looks great! I might try to make a theme for https://idyll-lang.org/ https://idyll-lang.org/ that utilizes the components.
- laken 8y agoI really like the look, very nice job on that. Is there any particular reason though why you didn't follow the aria standards for the controls? None of these controls can be used by a keyboard, and a screen-reader sees them only as text.
- shihn 8y agoI do plan to make them more accessible. Wanted to get to a preview build first and then evolve. Thanks for the input.
- swyx 8y agoi started working on a react clone of wired from a few months ago - kinda dont have time to continue on it but if anyone wants to take over please do: https://github.com/sw-yx/react-wired https://github.com/sw-yx/react-wired also preet's designer tool is very very very usable: https://wiredjs.github.io/designer/ https://wiredjs.github.io/designer/ basically a free balsamiq!
- shihn 8y agoI must add that designer may not quite work anymore. Haha. Will get back to it at some point :)
- sandGorgon 8y agodamn! that designer looks good. I would pay for something good here.
- shihn 8y agoTo give full credit, the designer was adapted from https://github.com/PolymerLabs/wizzywid https://github.com/PolymerLabs/wizzywid
- spankalee 8y agoThese are web components and work fine within React already. We shouldn't need to port every interesting UI component to every single framework anymore.
- JasonFruit 8y agoSliders don't seem to be movable with Chrome for Android. Nicely done, though.
- shihn 8y agoYep. Doesn't work with touch events properly at the moment. Work in progress!
- desireco42 8y agoReminds me of https://github.com/tsx/shireframe https://github.com/tsx/shireframe Which if author is not aware, he could use as inspiration.
- osrec 8y agoLovely work. If my devs end up using this, I'll surely ask them to contribute to your repo :)
- 0x445442 8y agoReminds of the Napkin look and feel for Java Swing apps. I worked on a project where we only demoed the Napkin L&F to our customers until we were feature complete. The idea was to keep them focused on functionality.
- Bjartr 8y agoFor those curious like I was http://napkinlaf.sourceforge.net/ http://napkinlaf.sourceforge.net/
- DonHopkins 8y agoI love the retro "3 1/2 Floppy (A:)" in the file chooser. Nice touch. Or was it really that long ago?!?
- suyash 8y agoWhat is the font type that is used in this blog? Is it available for free use?
- shihn 8y agoYes: https://fonts.google.com/specimen/Gloria+Hallelujah https://fonts.google.com/specimen/Gloria+Hallelujah
- deleted 8y ago[deleted]
- asdsa5325 8y agoLooks nice, but I have a bug: The sliders don't work properly, when trying to move them they will always start back at 0. (I'm using Firefox 60).
- shihn 8y agoYep sliders aren't quite baked yet. Should work on chrome. Thanks for reporting. https://github.com/wiredjs/wired-slider/issues/3 https://github.com/wiredjs/wired-slider/issues/3
- Tijdreiziger 8y agoFYI, the slider doesn't work at all on Chrome Android.
- 8y ago
- tambourine_man 8y agoNice. I still drool over the Drawing Board theme from Classic Mac OS. http://fileasylum.weebly.com/uploads/1/0/2/9/1029074/2682747.gif http://fileasylum.weebly.com/uploads/1/0/2/9/1029074/2682747...
- delinka 8y agoI'd definitely pay to use this theme in web and mobile apps
- k__ 8y agoI used Sketchy theme from Bootswatch for a game I did last week for a contest. https://bootswatch.com/sketchy/ https://bootswatch.com/sketchy/ https://github.com/kay-is/startup-clix https://github.com/kay-is/startup-clix
- placebo 8y agoI like it. The thing that I'm asking myself now is why do I like it (and other "humanized" drawings) ? I've always preferred accuracy over ambiguity, clean minimization over unnecessary clutter, shouldn't I prefer clean straight lines over something a human can draw on a sheet of paper? I'd never want to read a book written in human handwriting, so why is this appealing to me? Is it perhaps because the lack of optimization of the diagram contrasts and brings out the simplicity of the idea being conveyed? I could bring up some theories but can't say for sure.
- mygo 8y ago> I'd never want to read a book written in human handwriting well, fwiw, the randomness/uniqueness of the elements help to give them their hand-drawn feel, and the font on this link does not contain that randomness. All letters look the same everywhere. And the line height is constant and so are the vertical positions. It’s more like a stylized font than handwriting. And it’s actually quite a game / readable stylized font. It’s not as fast as the more mechanical / typewritten fonts that are prevalent, but it’s still an comfortable read. Anyways maybe it’s the same reason we tend to prefer a human voice giving us directions over a robot voice
- jen729w 8y agoPersonal anecdote alert. Last year at work I had to design some process diagrams. I enjoy this sort of thing, but I was finding it very hard to get past that initial hurdle. I found, by accident I think, Visio’s ‘hand-drawn’ template - and everything changed. Suddenly my nit-picky perfectionist mind could get past the fact that these diagrams, which I was in the process of drafting, weren’t perfect. The edges didn’t align, the connecting lines weren’t all on exactly the same horizontal, the boxes weren’t all exactly the same width. I’m not kidding, I finished it within an hour. When it was done, I switched back to ‘square boxes and round circles’ mode, lined everything up, and was done. It was a revelation.
- zimpenfish 8y ago> I'd never want to read a book written in human handwriting Try Alfred Wainwright's guides - he not only hand-illustrated but hand-wrote and hand-justified his books. http://wainwrightguides.co.uk/ http://wainwrightguides.co.uk/
- Walkman 8y agoWhat is the use-case for this? I read and agree that writing HTML or JavaScript is too costly for wireframes and this is why wireframe tools are handy, because you can cheaply sketch out plans or ideas. But this is in JS, so "drawing" with this would be costly. I can see that it can be used for the fun look, but other than that, what's the point of this framework?
- ctrl-j 8y agoI work for an organization that nitpicks about how things look instead of actual functionality. I've taken to style things like this because it helps them remember "this is just a placeholder" and focus on the actual application logic. My sketchy stuff isn't as polished as this, but if this is just drop-in, it could be useful.
- gitgud 8y agoThat's a really good point, I never thought of that
- megamindbrian2 8y agoI had this idea but using a module to apply it to material components.
- acobster 8y agoThis is really rad! It's fun just to refresh a couple times and see the randomness at work. Nice job!
- p2t2p 8y agoPaperCSS looks a bit better imho and they are also working on set of react components.
- rhyneav 8y agoThank you for the kind words on PaperCSS! We’d love some help making the React components.
- rhyneav 8y agoThis is amazing, I love the sketched feel to it. I started an open source project in the fall, PaperCSS, that’s in the same category as wiredJS. PaperCSS is like if someone quickly drew the page with a marker, whereas this is as if someone sketched it all with a pencil. Happy to see less clean lines on the internet :) http://github.com/papercss/papercss http://github.com/papercss/papercss
- psetq 8y agoNot to be confused with paperjs, a /completely/ different js library. http://paperjs.org/ http://paperjs.org/
- binthere 8y agoAs always, accessibility is the last thing people care about.
- shihn 8y agoTo be honest, I did think about accessibility early on but realized that the main use case was for mockups and it wasn't high on the priority list for that scenario. I do plan to make most of these controls accessible before 1.0 release. Thanks for bringing it up.
- hugozap 8y agoHas someone tried these with React? An initial test didn't work for me: https://codesandbox.io/s/pp4q7kw9q7 https://codesandbox.io/s/pp4q7kw9q7
- shihn 8y agoWorking now: https://stackblitz.com/edit/wired-elements-react?file=index.js https://stackblitz.com/edit/wired-elements-react?file=index....
- capkutay 8y agoOh wow this gave me some flashbacks to using Balsamiq. https://balsamiq.com/ https://balsamiq.com/
- nimos 8y agoLove this. I wonder if there would be a way to add some randomisation to the font without replacing it with generated images.
- shihn 8y agoThe web page is using a hand written styles google fonts. Variable fonts may be a way to randomize the font at every render.
- lgregg 8y agoAwesome! Also, I chuckled at part of the GitHub org description, a "fun sketchy look."
- webXL 8y agoThe elements are drawn with enough randomness that no two renderings will be exactly the same — just like two separate hand-drawn shapes. Awesome, but why go through all that trouble if the text is going to be the same? I know typography is another degree or two of complexity, but I think that would make this particular feature complete.
- shihn 8y agoDesigning a variable font that does that would be the best solution for that. Variable fonts still have to go before accepted on all browsers. As for the randomness uniqueness, it was a bonus that came out of the algorithms I was using to draw shapes.
- webXL 8y agoThanks. I didn't even know variable fonts were a thing. Perhaps someone will submit a pull request for the issue I just added.
- bonoetmalo 8y agoSlider handle doesn't work on Chrome Android 66.0
- shihn 8y agoSlider is fixed now.
- ryan-allen 8y agoThis is great! I like the aesthetic, I'd happily use a web-app that was made with these components.
- PhasmaFelis 8y agoThis is very cool, but why is it called "Wired"?
- shihn 8y agoI was thinking of wireframes
- hinkley 8y agoI tried to build an svg and web component app about three years ago and just had a devil of a time with compatibility. Are web components a thing again? I sure hope so.
- shihn 8y agoMostly there. Firefox still needs a polyfill and some issues working with react
- dr_jerry 8y agoLove it! can't wait to incorporate into my project www.stretchsketch.com currently old fashioned jquery/javascript/html/SVG. Polymer is becoming a very strong candidate when introducing a new framework.
- deleted 8y ago[deleted]
- YorkshireSeason 8y agoI wonder if there's something comparable for LaTeX / Beamer. That would be very useful for my presentations.
- shihn 8y agoTheres a stand alone drawing library roughjs.com that might be useful for more generic drawings. I believe people have used it with reveal.js to use them in presentations.
- npunt 8y agoNice! This would be super cool when applied to some nice diagramming libraries like Mermaid and Markdeep. https://github.com/knsv/mermaid https://github.com/knsv/mermaid https://casual-effects.com/markdeep https://casual-effects.com/markdeep
- donmatito 8y agoI am not a designer but THIS IS SO AWESOME
- Naushad 8y agoI love it. I am a Designer and its on my list to re-design my portfolio site, which i want to look like a wireframe. I will definitely explore this.
- Vinnl 8y agoThat's brilliant! One suggestion I have is to prevent rerendering when changing states, e.g. when checking a checkbox, draw a checkmark without changing the shape of the actual box it's in, or when selecting a dropdown item, to not change the edges of the dropdown even if the label displayed in it changes. Probably a lot more work though :)
- Diggsey 8y agoEach component should generate a random seed on construction, and use that same seed for its entire lifetime.
- shihn 8y agoIt's actually simpler than that. Most of the time it should not re-render at all. Should only re-render when the size has changed - at which point one needs to recompute anyway. I was just lazy and rendering every time.
- roddux 8y agoReminds me of back when people used to make hand-drawn controls in Adobe Flash! Good memories. Nice work.
- nshillingford 8y agoThis is great. By the way, if anyone is interested in a library like rough js but for iOS/tvOS apps, I made one called rough cocoa https://github.com/nickshillingford/Rough-Cocoa https://github.com/nickshillingford/Rough-Cocoa
- csomar 8y agoFor the checkbox: Every time you click on the same one, the image changes. How do you achieve this apparent randomness?
- framestr 8y agoThis is fantastic! I’ll have to take a look at the licensing, id love to implement this on https://framestr.com https://framestr.com as an available form skin.
- shihn 8y agoMIT license (https://github.com/wiredjs/wired-elements/blob/master/LICENSE https://github.com/wiredjs/wired-elements/blob/master/LICENS...). Feel free to use the code however you like.
- varrock 8y agoYour website looks fantastic. I'm just beginning web development and am new to HN. It appears I cannot PM you. May I ask, is that an in-house design? I would love to know what frameworks you may be using. What your website looks like is what I ultimately want to be able to create by the end of my web development aspirations.
- infamousEB 8y agoWhat a nice project! :)