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.
"Mockups" isn't really the right term here as far as I'm concerned – it implies high fidelity, whereas this is a tool for rapid, low-fidelity idea sketching. It looks like an excellent wireframing tool, not a mockup tool.
It's just as fast to draw a browser window, button, or text box in Balsalmiq as it is to draw a rectangle in Precursor, but the former makes it unambiguous what I'm talking about.
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.
> 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.
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.
I work remotely as a Product Designer. I could see this being useful for exactly what you said. However, I've never had the need for a tool like this. It seems like it is solving a problem that doesn't exist (at least not yet).
As a member of a totally distributed UX team, yes.
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.
As a college CS student, It's actually super useful for college students working on a project. The only good choice right now is Google DOCS for collaboration, having a realtime collab mockup creation tool would be very helpful for multiple college students working on a project.
There are quite many choices if you look around, in uni we used http://cosketch.com for math alot and i was very happy with it, it looks a bit outdated today but the workflow is better than most similar tools i've tried, very quick, non intrusive, keyboard shortcuts etc. Only drawback is that things are not saved permanently and it doesn't have many widgets if you plan to use it primarily for mockups.
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.
I finished something like this too, after working on it for about a year: http://papertogether.com/ Of course it's not as fully featured, but it was a fun experience. I'm surprised to see that so many others had this idea and implemented it too - I thought I was the only one interested in collaborative drawing.
Just wanted to chime in and say this beautiful application was built with a pretty cool technology stack: ClojureScript, Om (ClojureScript bindings to React), Clojure and Datomic.
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 :)
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.
If anybody from Trello is around, we'd love to do an integration. As Trello users ourselves, we want to be able to attach a Precursor wireframe directly to a card and sketch our ideas in a Precursor doc without leaving Trello.
WOW impressed with the shortcuts. Within a second of loading, I started using all the typical adobe shortcuts, and they even got a shift+? for the shortcut menu.
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?
I'd like to congratulate you for such an impressive user interface: so fast, sleek and well designed. For the purpose of creating mocks I'd like to have more prebuilt components though.
Amazing! I think you just raised the bar for UX. The level of detail is OCD crazy.
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?
Wow, that's awesome to hear about the polish. We move pretty fast, and sometimes I worry about skipping over important details.
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.
I think something that could really help this app succeed, is sharable UI elements.
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.
Curious what you think of our current approach to this.
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.
Right, that works to some extent. However there is still an upfront cost of drawing each component I want to use.
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.
This is awesome. One tiny minor thing. Can you add a little bit of a delay to releasing shift when drawing a shape?
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.
This works amazingly well on a Surface with pen/touch. It's the fastest app I've seen for going from idea to wireframes. So impressive that this could be done with web tech.
Wow! Impressive tool. We already can see the use cases for our workflow. One great one is when we need to quickly get the teams input on an idea or UI element. Dare I say Slack for UI?
This is cool, in concept. But there's no way that drawing all the shapes manually is an improvement over my existing system for creating annotated wireframes using Balsamiq (https://balsamiq.com/) and Red Pen (https://redpen.io/).
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.
What business that develops software can't afford $9 a month for an upgraded plan? The utility you get from this type of software far outweighs the cost.
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...
We've had a lot of success with moqups, it really is so simple that anyone can use it. The commenting is a little clunky but everything else works incredibly well.
Although there are many different tools out there, sometimes I just want to fire something up and start working on it. Speed, as in how quickly you can start working on something without having to tinker around with different tools and components is a huge plus. Use case scenario = design meetings, brainstorming sessions, client meetings etc. Plus the right click palette and the UI is very useful.
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.
I like the tool selection mechanism. One minor suggestion there: allow me to make more quick, "jerky" gestures to select a tool by not limiting the size of the circle when I click/release really fast. So I should just be able to right click and flick to the right to get the rectangle tool. It's a tiny detail, but one that might be fun to implement :)
What's really great about this is that it is a prototyping tool that enforces low fidelity. Not having multiple colors, not getting to choose fonts is actually a major feature, because it requires all collaborators to focus on the layout and functionality before getting into the weeds.
UX is great. Like others pointed out, it is of limited functionality. You would need to add pre-made elements to be able to wireframe things. Then ability to link those.
But UX is a solid foundation to continue developing this idea.
The app is not personally useful to me, but this has to be the best feeling web app I've ever used. Fluid, no illusion-shattering glitches, everything just works, including "desktopisms". Kudos.
Good eye, it is built with Om. We've been pretty happy with it and even published a tool to help find performance bottlenecks: https://github.com/precursorapp/om-i
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 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.
Can you elaborate on this a bit? I'm not that familiar with react itself, having only used it through om, but I built a proof of concept that let me work with SVGs via om with code like:
Oh sorry, I didn't mean to imply that none of the svg tags are present. Most of the common svg things work, but there are lots of missing tags and attributes. There's an issue for it here: https://github.com/facebook/react/pull/1032
Some of the things we had to add for Precursor were clipPath, foreginObject, mask, patternTransform, marker, and vector-effect.
Having trouble zooming in and out (ctrl + scroll). The zoom is incredibly sensitive and once I've zoomed one way, I can't get back to normal... Only to the polar opposite.
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.
I would have thought it would be a touch event, but it's actually a normal scroll event. The only difference I can see is that it has the ctrl bit flipped.
I understand that, but do any of the touch events fire in parallel? Like, just before the pinch happens, is there not a touch start even for when the fingers touch the screen? The idea is to change the rate of the normal scroll event only if there are fingers on the screen.
First of all, this is an amazing app. It uses many SVG animation. But the drawback about SVG animation is when it comes to cross browser support, especially safari. You will have many issue working in safari browser. That is one of the reason i still pending to implement cool SVG animation and UI in to the real project development. Last but not least, Good work, keep it up.
It's much more pleasant to build UIs with lots of different states in React, because you have a full programming language at your disposal. The last js library I worked with was Knockout.js. Having to use Knockout's limited subset of a programming language to do view logic meant that lots of view logic lived in the models.
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
I would also love to know what you thought about React since this is a fairly large app when compared to many of the examples commonly given as "this was built with react" (minus FB's products).
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 :)
Serious Slow Clap guys. To do this as a web app is really impressive. Great UI. Only recommendation would be to have a library of prebuilt commonly used components, similar to balsamiq, but I'm sure you are aware of them.
I don't think this is a criticism of this app, so much as web developing as a whole, but it's crazy how this app is hogging one CPU core at 100% to draw a circle AND still runs at around 15fps.
Amazing app. I haven't explored React much yet. How is the collaboration part working i.e. changes made in one browser window show up in the another instantly. Is React being used for this?
I like it a lot but it's unusable for me as I need to make things that are longer than the screen (often much longer), yet this forces me to work within size of the screen.
Why can't apps like this have a accessible demo available to try it out? Not interested enough to spend time signing up and I avoid SSO whenever I can for various reasons.
A good practice is to do it the other way around: start with long-polling and switch over to WebSockets only once it's confirmed to work. Don't know which library you're using but I know some do this.
Sorry, I have the ajax fallback mostly working. Sharing cursors doesn't work, but syncing chat and changes to the canvas does.
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.
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.