Show HN: Mockups fixed by making collaboration effortless, built with React
precursorapp.com
precursorapp.com
I've never had to collaborate on a mockup. I make mockups. I review mockups. I mark mockups up. But I've never wanted to do one live with someone else. That's just me though so an example of when this is used would be great.
Some feedback: I use Balsamiq and have for years. The whole reason I use a mockup tool in the first place is so I don't have to draw everything by hand or make boxes in Photoshop. The ability to use pre-drawn UI items is golden.
While the collaboration features are cool and hi-tech, this seems like the beginnings of a mockup tool, but not a full one yet. So saying "we fixed mockups" seems a bit of a stretch. It's a nice start though and I look forward to seeing where it goes.
The point of low-fidelity mockups is to make the conversation about the the overall design without focusing on detail. If "low-fidelity" means moving from basic web elements to basic geometry, it seems to me like that hinders the conversation more than it helps.
Remote teams perhaps? I've never had the need, but I would imagine if you work with designers and engineers remotely live mockups could come handy in a brainstorming session.
We've been looking for just a simple whiteboarding tool that updates live, supports a pen tablet, and lets us collaborate around any rough UI language. We haven't found any that have stuck.
This has the potential (haven't used it much yet) to enable us to quickly sketch UX concepts at early stages collaboratively, which is huge.
We don't do real mockups that are persistent and used as a base for development anyway—it goes straight from paper sketches to HTML prototype. So this fills a real hole, just rough enough to work together on, just high fidelity enough to make sense to others.
Side note, "mockup" is such an ambiguous and relatively irrelevant term for whatever happens at this stage. A mockup here is just whatever you need to visually communicate the UI. The simpler and more malleable the better. If everyone understands the concept and how it translates to a UI in your application framework, then the process was successful.
Another good tip, if you trust your friends, is just starting a remote desktop or teamviewer session. Then you have full access to proper tools like Word, Photoshop or IDEs.
http://write-live.com/d/8f9b7846-a7b9-4e5c-b704-dad9aa87d14e
- unlimited* levels of zoom http://docs.write-live.com/WriteliveServer/webview.html?d=34...
- draw on a tablet, view on tablet / web http://write-live.com/d/538254c5-7d31-41f2-83bb-bcd0a7cee7ab
A bit like if google docs had a baby with OneNote
While it's a good start, I agree it's far from "We fixed mockups" To your point: The inability to use pre-drawn UI items here is a deal breaker.
It remains flexible enough to play with visual concepts outside the restrictions of a UI kit. That's a good thing in my book.
I've actually been looking for a collaborative sketching tool for quite some time; but using terms like 'live whiteboard.' Seems closer to that.
1. This is just wire-framing, not mock-ups. Adding mock-up features will take away the realtime-discussion-ness of the product, so that's that.
2. Wire-framing is essentially a brainstorming exercise. I'm not sure if it's actually very worthy to do initial brainstorm together.
3. But, what is valuable is that once you brainstorm, to show that to coworkers and let them make edits in realtime to discuss.
4. However, this product is fully focused on making the brainstorming part collaborative, not the review part. So much so that for the review use case, I can use it for free.
So I don't know. I'd still like to explore and brainstorm alone. Things must pass a threshold before they are shown out. Maybe there is a market, but I have never started on a blank canvas with a coworker.
I am looking for a quick way to sketch some apps and this might be the simplest way to do so even though it misses a couple of things.
Some of the things to improve:
* Snapping. Sometimes when the area is small, the snapping is annoying as I won't be able to vertically center text in the box even though it should be possible physically. Maybe, turning off snapping?
* More text settings (font size at least)
* Predefined elements. Surely, it must be kept simple but things like arrows would help a lot and my crooked hands won't have to draw crooked arrows :)
> Snapping
You might be able to do what you want by zooming in (alt + scroll). When you're zoomed in, the snap interval is smaller.
You can also move text without any snapping with click+hold, then drag using the text tool.
Grouping is also coming, which will allow you to auto-center text in a box.
> font size
You can change font size by hitting "+" or "-". It will affect all selected text.
> Predefined elements
We're still working on this, but we remember everything you copy and paste. You can manage them from the "Clipboard history" in the upper left menu. You can use that to define your own components.
The next version of that feature will make it much easier to get the clips that you starred into the document, without having to go through the menu.
For arrows, hold "A" and click the edges of 2 shapes. We'll create an arrow between them.
Contact daniel@precursorapp.com
That alone is pretty impressive and shows that these guys know who they are building for. Well done!
* I know this is a tall order, but even adding some of the more technically difficult but basic functions like colors, shapes, borders, radiuses, gradients, etc would be incredible. Could you make a browser version of Sketch?
* * Slack needs to buy this app, now.
Any chance you can share how you got to such polish? the workflow of modeling the animations and UX? How you concluded SVG would be best? tooling you used?
Amazing!
To get what polish we do have took a few things: 1) My cofounder and I have been working together for a while and our workflows compliment each other. The time we save with development usually gets spent on polish after shipping. 2) This started as a side project for us, so we made a strong effort to find a concept that was inherently simple. For example, the simpler we can make the UI, the more users can concentrate on your ideas. So our motivation towards the UI isn't to add more, it's to refine down when possible. 3) I use Precursor everyday now, so it's important for me make sure things behave well :)
We're not heavily-dependent on svg, it would be possible to render to canvas or just to straight html. But svg has some niceties, like transforms on groups and easy export to images. It definitely has its challenges (e.g., text formatting, Safari bugs, etc.) but we get a lot of things for free, and it helps keep sharing options pretty simple. Luckily our visual aesthetic is pretty minimal, so we don't have to push things very hard on it.
There are a lot of common things I don't want to redraw (date pickers, dropdowns, file uploads, etc, etc). However, I don't want these provided as a static set, because the web and my needs are always changing/growing.
If I was able to browse the community's drawings and add them to my profile for quick insertion into a mockup that would be great or even create my own for reuse.
Just my two, - Cheers
We're worried about people spending a lot of time searching for the perfect component instead of just sketching out their ideas. That's one of the big problems that we see with tools like Omnigraffle.
But we recognize that people can work a lot faster if they don't have to keep sketching out the same components in every wireframe. Our approach is to use copy/paste as a mechanism for creating custom components.
We're already keeping track of everything you copy/paste from the canvas. You can delete them, star them, and insert them into the canvas from the "Clipboard history" in the menu at the top left. Our next step is to make them easier to insert into the canvas.
I think share-ability is important (seo/community, think of github repos). I'd like to do something like google for "precursor datepicker" view/fork or 'save'/star/insert it or maybe search in app for "datepicker"s.
That just my two cents, I think it creates a community and then as a whole everyone benefits, while the tool still remains uncluttered (the workflow remains the same, but components could be incorporated). Consider this: I could have say 4 tabs open which I then copy & paste some components I found into a mockup I'm working on. No searching in app, no component drawers, just simple copy & pasting between tabs.
Also, tracking a clipboard doesn't really classify something as "important", I mean, won't that list just get cluttered, I don't necessarily want to look through 20 copies to find the one time I copied the whole component. And workflow to update it might be a bit weird, do I edit it, re-copy it and re-star it, delete the previous staring?
Really, just my two cents, food for thought, great work, I'm sure you know better!
You may be right about share-ability being important. It would be nice to see some validation of that. For example, users sharing Precursor docs full of their custom components, encouraging other users to copy the items. We might build a couple of those ourselves to see if it gets any traction.
> Also, tracking a clipboard doesn't really classify something as "important"
We anticipated that problem. You can delete the clips that you don't want to keep and star the important clips to keep them at the top of the list. They're also ordered by creation time, so the cruft will just fall to the bottom.
For updating clipboard items, you'd have to go through the steps you describe. But it wouldn't be especially difficult to allow people to edit the clipboard items from the menu.
I'm spoiled by the behaviour in Photoshop where there's a little bit of a delay (~75ms) between releasing shift, and it taking effect. This means that both shift and the mouse button can be released simultaneously, instead of having to consciously be aware of the order that you release the keys.
While I certainly do like feedback from the team, I don't want other people marking up my wireframes in a way that makes it impossible to tell who drew what / said what.
Site note, the latest version of Balsamiq is REALLY great. They added a bunch of simple things like Font Awesome Icons, and the ability to keep all the project wireframes in one file.
https://moqups.com is a great web based mockup app I have been using for a few years. It's very slick.
"The Free Plan includes 2 projects (limited to 300 objects) and 5MB of storage to get you started."
Who wants their wireframes to be public projects? Maybe if you're working on UI's for open source projects? I can't think of any other use cases.
Precursor's unique value propositions seem to be aimed at problems I would guess few people have...
Assigning different colors for users working on the same canvas will be helpful to track who is working on what.
Considering this is an initial release, it is pretty amazing.
But UX is a solid foundation to continue developing this idea.
For the unfamiliar, Om is a ClojureScript React wrapper that makes React much nicer to work with and adds some nice performance benefits out-of-the-box. Nolan's intro post is pretty inspiring: http://swannodette.github.io/2013/12/17/the-future-of-javasc...
I'm also wondering, are there any difficulties that arise when working with canvas and svg using just Om, or in plain React?
I can't say much about canvas, but using svg with React is a bit of a hassle. There isn't built-in support for every svg tag and attribute, so we have to maintain our own fork: https://github.com/precursorapp/react
Once you add support for the tags, though, it's no different than working with any other html in React. I think we'll see React start to eat into d3's market-share pretty soon.
(defcomponent circle-view [data]
(render [_]
(let [size (get-in data [:circles :size])]
(html [:div.circle
[:svg {:height size
:width size}
[:circle {:cx (/ size 2)
:cy (/ size 2)
:fill "yellow"
:r (/ size 2)
:stroke "green"
:stroke-width 4}]]]))))
Some of the things we had to add for Precursor were clipPath, foreginObject, mask, patternTransform, marker, and vector-effect.
You can also hit "1" to reset your viewport to the origin with no zoom.
It's a bit of an oddity that ctrl + scroll works at all--mac trackpads set the ctrl key bit on the event when you use pinch-to-zoom. At the normal rate, the pinch-to-zoom feels too sluggish, so I speed it up by 10x. Unfortunately, I can't find a way to tell the difference between pinch-to-zoom on a mac trackpad and normal ctrl + scroll.
ontouchstart: scrollMultiplier = 10;
ontouchend: if(evt.touches.length === 1) scrollMultiplier = 1;Here's the stackoverflow answer: http://stackoverflow.com/questions/15416851/catching-mac-tra...
It's a relatively common shortcut.
But the really big difference is in using ClojureScript. I converted CircleCI's open-source frontend[1] to Om/React and it feels much closer to backend codebase than a frontend. Brandon Bloom gave a good talk about it at Clojure/West: https://www.youtube.com/watch?v=LNtQPSUi1iQ
After looking at the GitHub page for the org, it looks like you're mixing in a bunch of Clojurescript as well, and tying that in, I'd love to hear more about the choices you made when building this and what you thought about the tools. Love the design and the app feels great :)
To pan, you can scroll or hold space and drag.
To zoom, hold alt and scroll.
Firefox 31.5.0
edit: is it really necessary to downvote for reporting a valid bug !?
In the meantime, I'd be interested if Chrome or Firefox 38 works for you.
WebSocket connection to 'wss://precursorapp.com/chsk?tab-id=883d69ff-1095-4eed-bf63-83d786d55db1&client-id=f71e3c9b-fd70-4710-8502-ada0c73f4760' failed: Error during WebSocket handshake: Unexpected response code: 200
Maybe you could add some better error handling into the GUI ?
I'm still trying to find a reliable way to catch the error that prevents the connection upgrade. Right now, the library I'm using thinks that it should just keep retrying the websocket connection. We're already maintaining our own fork of the library, but it's a tedious process to make and test changes.
Whether its something that meets a need, dunno.
The pencil tool could be a little more smooth maybe? Like, when making circles?
As a beginner web developer aiming to work remotely, they have me. I want simple, fast, colaborative, and they have it all plus "mindblowingness". ;)
Not only that, sites like this get me excited and make me want to develop something as good.
I can only congratulate the developers!
Beside that, the app is very slick.