Origami – Design Prototyping(facebook.github.io)
facebook.github.io
Origami – Design Prototyping
http://facebook.github.io/origami/
26 comments
Check out QC's spiritual successor Form at http://www.relativewave.com
Definitely way more focused on mobile applications than general-purpose visualization, but it's been a pleasure to work with so far (much easier than Origami)
Definitely way more focused on mobile applications than general-purpose visualization, but it's been a pleasure to work with so far (much easier than Origami)
[deleted]
Putting 'for Mac OS X/iOS' in title would be nice
The link to Quartz Composer on the Origami page is old. Here is the current one for XCode 6.1 and Yosemite: https://developer.apple.com/downloads/download.action?path=D...
The latest announcement is probably more important: https://medium.com/@bwalkin/introducing-origami-live-and-ori...
- Origami Live
- Code Export
- Sketch Integration
Those are some seriously compelling features....!
- Origami Live
- Code Export
- Sketch Integration
Those are some seriously compelling features....!
I know of three people (including myself) who will find an interface very difficult to use if there's so much movement in it.
Indicating state and actions by visual movement is so incredibly specific to its audience (people who don't mind seeing things zipping round their screen vs people who do) it's a shame to see it destined to become universal.
I wonder if they've (Facebook, Google) done any actual scientific research about how various peoples' brains react to movement when they're trying to concentrate on something.
Indicating state and actions by visual movement is so incredibly specific to its audience (people who don't mind seeing things zipping round their screen vs people who do) it's a shame to see it destined to become universal.
I wonder if they've (Facebook, Google) done any actual scientific research about how various peoples' brains react to movement when they're trying to concentrate on something.
All of the examples shown are animating things that are being directly manipulated, not something in your periphery. What would you be concentrating on while you're dragging something with your finger?
In the real world, if I manipulate a sheet of paper by swiping it with my finger, I expect it to move directly with my finger. If it's wobbly, or springy, my instinct is that it's less controllable and that I need to concentrate more. Intuitively I feel (i.e. I haven't done any research on this) that if something is unstable I need to put more neurons and metal effort into controlling it.
If I'm dragging something then I expect it to move directly as I drag it. I think that's something built into human brain, or learned and calibrated at a very early age as we learn to manipulate objects. So if I continuously transform the origin to the location of my finger at any given time, during a drag, the subject of my drag should move.
- The four first examples ('rope effect' , 'swipe off stack', '2d waggle', '3d waggle') all involve expressing state changes in terms of movement.
- I don't know what the rope effect is for except to look cute. But it feels 'unstable' as above.
- I would much rather see a 'dismiss' button to get rid of something, and for it to disappear, than to have to swipe it away and process seeing it move with a 'swipe off stack'.
- I would rather an object did directly what I told it than do a 2d or 3d waggle.
- 'Compose modal' makes the new modal box slide on screen rather than just appear.
etc etc. I don't want to go through every example, but these are (mostly) all introducing movement when I'd rather not have to process it.
You probably like them. I don't. That's the point. You can argue about skeumorphism, flat, responsive design etc quite harmlessly. They matter, but they don't actively exclude people.
But I think this is something that, like colour schemes, should be researched properly and not subject to the whims of a designer. I'm sure plenty of designers at one point in history have said 'we'll make it red on green, screw the colour blind people'. Now we know better. I feel this is analogous on some level.
If I'm dragging something then I expect it to move directly as I drag it. I think that's something built into human brain, or learned and calibrated at a very early age as we learn to manipulate objects. So if I continuously transform the origin to the location of my finger at any given time, during a drag, the subject of my drag should move.
- The four first examples ('rope effect' , 'swipe off stack', '2d waggle', '3d waggle') all involve expressing state changes in terms of movement.
- I don't know what the rope effect is for except to look cute. But it feels 'unstable' as above.
- I would much rather see a 'dismiss' button to get rid of something, and for it to disappear, than to have to swipe it away and process seeing it move with a 'swipe off stack'.
- I would rather an object did directly what I told it than do a 2d or 3d waggle.
- 'Compose modal' makes the new modal box slide on screen rather than just appear.
etc etc. I don't want to go through every example, but these are (mostly) all introducing movement when I'd rather not have to process it.
You probably like them. I don't. That's the point. You can argue about skeumorphism, flat, responsive design etc quite harmlessly. They matter, but they don't actively exclude people.
But I think this is something that, like colour schemes, should be researched properly and not subject to the whims of a designer. I'm sure plenty of designers at one point in history have said 'we'll make it red on green, screw the colour blind people'. Now we know better. I feel this is analogous on some level.
> In the real world, if I manipulate a sheet of paper by swiping it with my finger, I expect it to move directly with my finger.
I challenge you to do this without "2D Waggle" happening (which just amounts to some rotation depending on where you drag and which direction). I'll wait! :)
Really though, that's the point of 2D Waggle. You say "I would rather an object did directly what I told it" — when you swiped the paper and it rotated a little, was it not doing directly what you told it to do?
To use an actual example in an actual app, have you ever used Tweetbot? I encourage you to find someone who has it: a couple releases ago, they added some new "physics-based" swiping animations for dismissing images. They pretty much amount to 2D Waggle, but if you flick something super fast, you can really send it spinning.
When I first saw a GIF of that behavior in the release notes, I, too, thought it was pretty excessive. Then I actually used it, and wondered why swiping anything would behave any differently. It felt as natural as swiping a real piece of paper...which is exactly the point.
> 'Compose modal' makes the new modal box slide on screen rather than just appear.
Picturing what this would look like (the whole screen just instantly changes?) – that wouldn't just look "boring" or whatever...it would look broken. Every single app I just tried on my phone with a compose button slides the new view into place because to do otherwise would be jarring. I honestly believe it's aiding one's brain in doing less work processing what the heck just happened, not adding extra work. Research into this would indeed be pretty interesting.
I challenge you to do this without "2D Waggle" happening (which just amounts to some rotation depending on where you drag and which direction). I'll wait! :)
Really though, that's the point of 2D Waggle. You say "I would rather an object did directly what I told it" — when you swiped the paper and it rotated a little, was it not doing directly what you told it to do?
To use an actual example in an actual app, have you ever used Tweetbot? I encourage you to find someone who has it: a couple releases ago, they added some new "physics-based" swiping animations for dismissing images. They pretty much amount to 2D Waggle, but if you flick something super fast, you can really send it spinning.
When I first saw a GIF of that behavior in the release notes, I, too, thought it was pretty excessive. Then I actually used it, and wondered why swiping anything would behave any differently. It felt as natural as swiping a real piece of paper...which is exactly the point.
> 'Compose modal' makes the new modal box slide on screen rather than just appear.
Picturing what this would look like (the whole screen just instantly changes?) – that wouldn't just look "boring" or whatever...it would look broken. Every single app I just tried on my phone with a compose button slides the new view into place because to do otherwise would be jarring. I honestly believe it's aiding one's brain in doing less work processing what the heck just happened, not adding extra work. Research into this would indeed be pretty interesting.
I'm prepared to be convinced otherwise! Like I said, I'm speaking only from intuition.
I have a piece of paper on my desk. I put my hand on it and slide it. It does pretty much what I ask it to. I would say it's 'well behaved'.
If I have some slippery surface and a slippery jell(y|o)-like object, it will wobble. To me, that's a sign that I need to pay more attention to it because it's not 'well behaved'.
Modelling not-well-behaved objects for interfaces seems counter-intuitive and (I suggest) takes more mental energy to interact with. This is the point I (hope I) made above.
As for the rotation, the origin-normalising in my previous comment is both affine and rotational (yes, I didn't consider that when writing it). But if you look at the examples, they also have rotational momentum. Paper doesn't have that, as it's got low mass and is dampened by the friction. The closest I could get to the Facebok examples is waggling a piece of paper about on the end of a stick, or moving a heavy object on a slippery surface, and that's not how I'd model an interface!
I just clicked 'compose' in GMail and the compose 'window' just appears. Likewise in my text editor, and creating a new window in Mac OS Finder and creating a new tab in my browser. Granted, there are lots of subtle (and not so subtle) movements in various operating systems. But it's a world apart from Google's Material Design demo video [0] and the 2d and 3d waggle [1].
Mac OS introduced the bouncing icon in the dock about a 15 years ago. Modal 'sheets' slide down. Ubuntu has things easing in and out. These can be disabled (to a greater or lesser extent) without any problem.
But I think we're going to see a fundamental shift in the paradigm, especially with Material Design, where movement isn't just easing things in and out. It's bringing movement directly into the representation and manipulation of objects.
It's a really cool, novel idea, but may leave some people behind (visually impaired or just, like me, people who prefer minimal movement on screen). Your jarring because the screen suddenly changes is my jarring because everything slides around.
[0] https://www.youtube.com/watch?v=Q8TXgCzxEnw [1] http://facebook.github.io/origami/examples/
I have a piece of paper on my desk. I put my hand on it and slide it. It does pretty much what I ask it to. I would say it's 'well behaved'.
If I have some slippery surface and a slippery jell(y|o)-like object, it will wobble. To me, that's a sign that I need to pay more attention to it because it's not 'well behaved'.
Modelling not-well-behaved objects for interfaces seems counter-intuitive and (I suggest) takes more mental energy to interact with. This is the point I (hope I) made above.
As for the rotation, the origin-normalising in my previous comment is both affine and rotational (yes, I didn't consider that when writing it). But if you look at the examples, they also have rotational momentum. Paper doesn't have that, as it's got low mass and is dampened by the friction. The closest I could get to the Facebok examples is waggling a piece of paper about on the end of a stick, or moving a heavy object on a slippery surface, and that's not how I'd model an interface!
I just clicked 'compose' in GMail and the compose 'window' just appears. Likewise in my text editor, and creating a new window in Mac OS Finder and creating a new tab in my browser. Granted, there are lots of subtle (and not so subtle) movements in various operating systems. But it's a world apart from Google's Material Design demo video [0] and the 2d and 3d waggle [1].
Mac OS introduced the bouncing icon in the dock about a 15 years ago. Modal 'sheets' slide down. Ubuntu has things easing in and out. These can be disabled (to a greater or lesser extent) without any problem.
But I think we're going to see a fundamental shift in the paradigm, especially with Material Design, where movement isn't just easing things in and out. It's bringing movement directly into the representation and manipulation of objects.
It's a really cool, novel idea, but may leave some people behind (visually impaired or just, like me, people who prefer minimal movement on screen). Your jarring because the screen suddenly changes is my jarring because everything slides around.
[0] https://www.youtube.com/watch?v=Q8TXgCzxEnw [1] http://facebook.github.io/origami/examples/
[deleted]
What about the license? Is there any cause for concern here?
https://github.com/facebook/origami/blob/master/LICENSE.md
" Facebook, Inc. (“Facebook”) owns all right, title and interest, including all intellectual property and other proprietary rights, in and to the Origami framework. Subject to your compliance with these terms, you are hereby granted a non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the Origami framework; and (2) reproduce and distribute the Origami framework as part of your own framework (“Your Software”). Facebook reserves all rights not expressly granted to you in this license agreement.
...
You will include in Your Software (e.g., in the file(s), documentation or other materials accompanying your framework): (1) the disclaimer set forth above; (2) this sentence; and (3) the following copyright notice: Copyright (c) 2013-2014, Facebook, Inc. All rights reserved. "
https://github.com/facebook/origami/blob/master/LICENSE.md
" Facebook, Inc. (“Facebook”) owns all right, title and interest, including all intellectual property and other proprietary rights, in and to the Origami framework. Subject to your compliance with these terms, you are hereby granted a non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the Origami framework; and (2) reproduce and distribute the Origami framework as part of your own framework (“Your Software”). Facebook reserves all rights not expressly granted to you in this license agreement.
...
You will include in Your Software (e.g., in the file(s), documentation or other materials accompanying your framework): (1) the disclaimer set forth above; (2) this sentence; and (3) the following copyright notice: Copyright (c) 2013-2014, Facebook, Inc. All rights reserved. "
Not a lawyer, but..As far as using Origami for prototyping? No, I don't think there is any issue. Using and shipping Origami framework along with your own product, yes. Im pretty sure they are only saying "If you implement Origami into your own framework, you must provide attribution".
Origami is already the name of some folding editor from Microsoft. (Folding, get it? It's actually a topical name.)
The Japanese language has lots of words; there is enough for every gaijin to have a unique one for their programming project.
The Japanese language has lots of words; there is enough for every gaijin to have a unique one for their programming project.
Anyone know how this compares to Framer?
They share the same purpose, but functionally they're quite different:
1) Origami is a visual programming tool where you connect functional nodes. Some nodes represent things on screen, some represent actions. You literally connect them to eachother (connect my swipe node to my feed node) to prototype your UI. You use origami in the same way you setup a modular synth, or use something like pure-data or MaxMSP. The end result is a UI prototype.
2) FramerJS is a javascript-based prototyping tool that has a DSL for programming the prototypes. You are very much writing javascript code to simulate the real interactions the user might have with your interface.
That's the big difference. If you are familiar with Javascript, you will certainly have an easier time writing code in Framer to represent animation and interactions (it will also translate more easily to final production code because in theory the algorithms for the interactions are similar). If you have no programming background (or just feel at ease with visual programming), you may prefer Origami.
(They're both great tools, and despite being quite accustomed to the latest Framer versions, I'm going to try out Origami 2.0 too. Seems like a big step from the previous version.)
1) Origami is a visual programming tool where you connect functional nodes. Some nodes represent things on screen, some represent actions. You literally connect them to eachother (connect my swipe node to my feed node) to prototype your UI. You use origami in the same way you setup a modular synth, or use something like pure-data or MaxMSP. The end result is a UI prototype.
2) FramerJS is a javascript-based prototyping tool that has a DSL for programming the prototypes. You are very much writing javascript code to simulate the real interactions the user might have with your interface.
That's the big difference. If you are familiar with Javascript, you will certainly have an easier time writing code in Framer to represent animation and interactions (it will also translate more easily to final production code because in theory the algorithms for the interactions are similar). If you have no programming background (or just feel at ease with visual programming), you may prefer Origami.
(They're both great tools, and despite being quite accustomed to the latest Framer versions, I'm going to try out Origami 2.0 too. Seems like a big step from the previous version.)
Not available in Norwegian app store. Is there a precompiled version I could simply just download?
Origami Live for iPhone isn't available for download in the US?
Why do all tools get created for Mac only?
because that's where the developers are, nowadays.
same problem here.. Origami Live ios app is not available in the USA app store.
Quartz Composer is effectively deprecated: no updates since 2011, not available in iOS, no Retina support. Building new products on it is not a viable long-term solution, so I wonder if Facebook plans to build a replacement.
(Incidentally, if someone wants to make a new Quartz Composer work-a-like, I have a bunch of potentially suitable code that I could share with an open source license... I made a node-based graphics app called PixelConduit whose code I was planning to release but never got around to: http://pixelconduit.com -- it could make a solid base for a QC-style tool.)