Episode 6: The Wild World of Prototyping Tools
Finding a prototyping tool that’s right for you can be a huge challenge. Which one of the seemingly endless options out there is the best one for you? In this episode Cennydd and Val discuss their favourite prototyping tools and why, plus how to find the best prototyping tools for you.
Episode Links
Transcript
Welcome to Episode 6 of Motion & Meaning; a little podcast about motion for digital designers. I'm Cennydd Bowles, I'm an digital product designer based in London.
And I'm Val Head; I'm a designer here in Pittsburgh. In our last episode, we talked about some pitfalls and mistakes and even some slightly embarrassing stories about where we've gone wrong or very wrong in the past and this time around we're looking at prototyping tools which oddly enough, these things probably could have saved us from making a lot of those mistakes we talked about last week. So, hey: good follow up!
Right, yeah, absolutely. And the prototyping market, the prototyping environment has just got completely out of hand, to be honest, hasn't it?
There's so many tools; it's really gotten out of hand. Out of hand in a good way, I think though; there's a lot of options.
Yeah, a good and a bad way. At some points recently, I've found myself just thinking, I wish one of these would just win! So we've just got a standard tool and then I can invest all my time in learning that one.
Yeah, that is the problem with it.
But it's really nice that there's different approaches and interesting tools looking at the problem in new ways and also in cheap ways; that's one of the fantastic things, isn't it? Because I look at even five years ago, some of the prototyping tools you were meant to use, Axure and iRise and so on were hundreds; some of them were thousands of pounds and now you can buy them for, like, fifty dollars.
Yeah, or even free!
Or even…yeah, or even free, absolutely right. So I think probably what we'll do then is we'll cover some of the most significant or the most common ones; we'll just have a chat about what maybe they're well suited for, what they're not so good at and then maybe at the end we'll just have a little vote of where are we putting our time at the moment.
I like it!
Yeah, OK. Well, that sounds good. Let's stat with Keynote then, shall we? Because there's been a ton of people writing about Keynote prototyping and so on of late, and we've talked about it quite a bit in the earlier episodes of the podcast too.
Yeah, I feel like in the last few days even, especially, everyone's like, oh, Keynote for prototyping! Yay! It's like this flurry of examples and articles about it which, you know, is not bad in any way; it's actually kind of nice because there's definitely still people, I know I Tweeted about one of the articles recently and a guy I know was like, what are you talking about? Keynote like the PowerPoint thing, are you sure? Is there a different Keynote? And I'm like, nope. The Keynote you're thinking about, it's changed, and the big thing with Keynote of why people can use it now as maybe they couldn't before is the magic move function that's now kind of there; or I mean, it is there! It's not just kind of there and it's basically made animating in Keynote something you can do and still be sane. Maybe even easy!
Yes.
So, that's why people have liked Keynote so much and I think also because it's just there, right? Doesn't it come free on pretty much every Mac now? It's just sort of…
Yeah, I don't think it's pre-installed; I think you have to go and install in the App store, don't you, but people listening to this podcast: everyone's going to have Keynote installed if they're a Mac user.
I think so.
It's fairly ubiquitous.
So it's just so easy; it's there, you just open it up, you can do it, and I think it's also nice that you don't have to know code to use it because it's just Keynote, and even people maybe aren't even proper designer people, like you're a project manager or whoever, if you're in a team environment and you're talking about something, everyone can kind of jump in there and edit to show what it is they're talking about, which, if you're in a really collaborative space, that's really handy.
Yeah, I agree. For me, I knew there were some crazy people who were using it but it wasn't until I saw it in action, one of our designers at Twitter, Colleen, was using it quite a lot for some of the work that she was doing, on DMs or something, and walking through this deck and it's playing and I go, wow, I had no idea it could do this stuff, and suddenly it became a legitimate player for me; it's like, this is a potential prototyping platform that I've never really considered before and it's surprising what you can do on it. When we talked previously about Linda Dong.
Motion design experiment; that was amazing.
Yeah, and that was all Keynote and she's clearly an expert because she's ex-Apple herself. Yeah, it's surprisingly powerful, right?
Yeah, I mean it's definitely a lower-fidelity one. I've tried it on a couple recent projects just to be like, what's going to happen? Can I do this? Will I hate everything? But it actually wasn't bad and it's pretty flexible, you can make things any size you want, any length you want and it's pretty low-fidelity; you're not going to spend hours drawing pixel-perfect designs in Keynote. At least I hope you don't: don't do that; that would be terrible. And you don't really have a lot of interaction.
You can kind of get clicks to work because you're switching between slides, right? But then that also could mess up your Magic Moves so you kinda just watch it. But for a quick-and-dirty low-fidelity thing that just kind of is easily accessible, it's pretty good.
Have you ever used any of the sort of added libraries and so on? Keynotopia and things like that, have you ever experimented with those as well?
Yeah, I downloaded the web pack thing, the web version stuff of Keynotopia and I tried to use it last time around. I found I was editing them a lot, maybe just because I'm too picky! Like, oh, I just don't like the stroke on that. I should probably not do that, but they're pretty helpful; it's nice to have that pre-drawn thing because you can just drag it in and be like, there: now I figure out how it moves as opposed to let me draw this button and how do you draw in Keynote, which it's not a drawing tool.
Yeah, for sure. Certainly whenever I've used it I've done all the drawing in Sketch, or actually in Photoshop back in the day.
That's true.
And then taken layers out and put them directly in. One thing that Keynote does well is you can copy and paste layers really easily from Sketch; you don't need to do any export and transparency and crap like that; you can just drag them in, I think, even.
I've never tried that. I've always been like…
You can just copy and paste at least, I think, it's really solid. But I've always done that so I've always had an idea, like a static mock or a static idea and then I've started putting things in Keynote and just sort of started tweaking them and see where they went; I've not tried to actually draw the system itself in Keynote, I don't think it's really sophisticated enough.
I don't think that would be a good idea.
Yeah, absolutely right. I think you're definitely right about it being a low fidelity tool; you can't do any sort of advanced motion curves or anything like that; you're relatively limited. I mean, you have things like build orders as well so you can set the choreography things to happen in a certain order so, not just Magic Moves but actually the individual transition developments rather than just sort of entire slide to slide stuff. But still, I've always found it more useful for kind of the divergent stuff, the: hey, this could work; I wonder if this is an option, and show it to your stakeholders, show it to fellow designers, to kind of bounce the ideas off them, but I don't know if I would use it for production; I wouldn't then say to an engineer, this is the canonical animation that you need to recreate.
Yeah, I would feel the same way about it. It's kinda like an early on tool; you're like, ah, could we do this? Will this work? And the main reason I wouldn't want to use it as a final product hand it off to developers kind of thing is that you just don't have a lot of control over the motion itself; you've got ease out, ease in and duration, but there's no motion curves, there's no physics; it's just like do you want to ease in or ease out? How long is it going to take? And I know in some of these articles that have come up recently about it, that's kind of the way they frame using it and I'm like, I personally wouldn't be up for that, but if it works for you: cool. But that's my main drawback of Keynote.
Yeah, I kind of get the impression that if you are going to use it for that, there's still going to be some hand-waving; you're still going to say, it's like this but a bit squashier, or whatever it is, and you resort to these vague adjectives that we used to use before we didn't even prototype this stuff, you know…it has to slide out with a real bang!
More of a bang!
It's just vague language and you still have to use those kind of caveats, those language tweets, because you can't have that level of detail in the tool so yeah, it strikes me it's not going to be great for that. It depends on what you're trying to aim for with your motion, I guess; you're going for something detailed and complex and sophisticated, or is it just a fairly simple ease in and ease out? If so…
Yeah, then you're good.
In fact, Keynote may work fine for you.
And also it depends on how your team works too; if you talk to whosever building it and you're like, it needs more bang and they're like, they know exactly what you mean, you're good to go! You don't need to do a whole other prototype if you've got that level of communication and you're very lucky if you do, so don't leave that team!
Right.
Anyways. We have…there's definitely some other ones. Pixy is one that we've talked about before. I think we've both used it.
Yes. Well, I certainly have.
I've never used it for a proper project but I've played around with it because it's looked really interesting and I kind of want to be able to use it but just haven't had a place to use it.
Yeah, and obviously Pixate's in the news at the moment because they just got acquired by Google which was kind of a surprise move, I think. I certainly didn't see it coming.
I didn't see that coming.
And interesting kind of move. There's a question about what Google are going to try and do with this acquisition because they've obviously got Form as well, which I think we'll talk about in a second too.
I didn't realise they had that too. OK.
Yeah, so they bought Form a while back and they've just actually released a newer version, 1.2 or I don't know, I'm making up version numbers in my head here! But the Pixate acquisition was kind of a surprise. But it might be a good fit for them, assuming they keep it available for non-Googlers to use, which I'm confident they will; surely they must.
Hopefully they don’t keep it all for themselves!
Quite!
And Pixate's definitely one that's a lot more mobile-focused. It has gestures and the interactions you can pick are very touch-based; it feels like it's made for doing apps. Not that you couldn't do something other than apps in it, but it feels like it's very much geared towards prototype apps.
Even things like the actions, I don't even know the specific labels they give them and so on, within Pixate, because it's been a while since I've played with it, but the actions palette or whatever you'd call it, I think they default to Tap and Drag and so on, don't they, rather than mouse-like interactions that we would associate more with desktop computing models, so part of that is just a labelling thing; it helps to frame what we think the tool should be used for. Certainly at Twitter we had a few folks who used it, one or two who were experts in it. Actually, there was a bit of a battle, to be honest, a very friendly battle; there were some people who were After Effects experts; some people were Pixate experts, Framer and so on and so you had a lot of experts that you could go to with your chosen tool, but Pixate, we had some good exploratory kind of dabs at that and there were some people really using it to quite good effect at the company but again, that was all native mobile, iOS and Android specifically.
The one thing I really liked about it which is kind of the opposite of my Keynote complaint is that there was so much in the way of tools, really fine-grain or fine-tune the motion and what you were doing; there were springs you could change; the easing, really specifically, so there was a lot more higher-fidelity in that sense. And you just had so much more control. It seemed like you could layer motion a lot more easily too; they kind of had it all in a layers-ish looking palette. It wasn't really layered but you could add more than one thing and you can more events with it; if this moves when you scroll past this point, and that kind of thing. A lot more fine-grain control.
Yeah, you can definitely chain a few things together, can't you? Almost like a JQuery style, reaching events together in JQuery; I recall there was something similar you could do: once this is complete, then kick off this action and so on, so I think Pixate, I actually kind of recommend Pixate to a lot of people when they've said, well what prototyping tool should I look at? I say, well, Keynote, have a look but maybe something like Pixate because for me it has that sort of sweet spot; it's got power but it's also got a reasonable learning curve. It's not too bad.
You could do things quickly if you needed to, but it would take a little bit of…you'd need to read up a bit on it. They actually have a really great page of tutorials, which is how I learned to use it! You kind of have to go through all of those, but once you've got that, you could work quickly in it, just you've got to put that initial investment in.
Yeah, but it's not as scary as perhaps something like Framer or something like Quartz Composer which again we'll come to in a second. So for me, it had that nice sweet spot and I really liked what they did around Pixate Studio, which was in Beta for a very long time, a restricted Beta, and I, for whatever reason, I was able to wangle my way onto that list and I was wondering, why aren't they releasing this? This is great, because essentially…
Oh, because Google!
Yeah! So it's a standalone dev environment and so on; you didn't need the subscription and it was brilliant, this is wonderful. And then of course the acquisition happened and I was like, oh, that's why, because clearly they didn't want to release it and then have to refund everyone because that's what they've done; they've actually…if you paid for it…
It's free now, right?
If you paid for it recently, yes, it's free now. If you paid for it previously, a few folks, I don't know if this is across everyone, but got given the equivalent value in hosting credits for the Pixate Cloud service but Pixate Studio is lovely; really nice environment. And I liked having everything in that single app and not having to bounce between web browser and environment and then a mirroring app and all this sort of stuff, so it's nice to bring all that together, so it's a nice combination, I think.
Definitely. It's definitely one to check out if you haven't already, I think.
Well, let's move onto…I actually want to lump together a few similar ones here. So, we talked about Form; I want to lump Origami and Quartz Composer in there as well. The reason I want to do that is essentially they take the same approach and they're quite significantly different than the other tools that we've talked about and the other ones we will talk about, because they have more of this kind of visual programming model where it's very modular and it's like a synthesizer model; you're connecting inputs and outputs with noodles and wires and all this sort of thing and I'm sure listeners, you've seen screenshots of Origami, screenshots of Form and so on and see all these… this slightly esoteric system of connecting different modules and behaviours and so on. Have you got any experience using these, Val?
No, I haven't really used any of them. I haven't actually tried to use any of them. They're just kind of, since I work mostly with web things, I just haven't really had much of a reason to; they just seem so tied to the iOS eco-system that I'm like, well, it's not really what I do. I would like to check them out, they look pretty cool, but just haven't gotten around to it.
Right, yeah. Because Quartz Composer is obviously an Apple tool originally that appears to be dead; I don't know if that's been confirmed but it certainly hasn't had any updates in a very long time, which is why Facebook have built the Origami platform on top of that, which has a lot of shortcuts and pre-built components that are more built towards the sort of thing Facebook are doing and more towards some of the standardised patterns that you might find, particularly again in native mobile. I think Form came at it saying, well, if Quartz is dead or not really going anywhere, then we can innovate, we can take some of that model and we can improve on it and certainly at the time, one of Quartz's big downsides was you couldn't mirror it onto a device.
Oh. How did you preview anything?
You did it in the product; you actually did it on a desktop. So you could simulate it with a mouse click and so on, but clearly that's not really good enough. Now, I think Origami built in mirroring over the top, but Form also did that as well. I know a couple of people who really swear by these tools. When I was at Twitter again, we actually hired someone who was a Quartz guy originally, a Quartz expert, and we found him because he was doing a lot of tutorials and so on and we were like, hey, this guy knows something that very few people in the world know, we've got to…
He's the one expert left!
Yeah! So he was a genius with that and could pull off some amazing things but even him after a while, he drifted to all different tools as well; played a bit with Origami but also spent a bit of time with things like Framer and After Effects as well. So there are going to be people for whom this is a really suitable tool; for me, I never quite got my head around it in the same way, to be honest. I do like the fact it's really componentisable, if that's a word? You can say, we talked about this idea of signature interactions a couple of times and the idea of choreography and if you say, I want this type of transition to always look a bit like this or to always have these properties, then you can kind of almost drag that interaction in that module in and then hook it up to your element and say, there we go, we've got that spring or we've got that bounce, or whatever it is, that slide kind of pre-packaged, you can re-tweak it a bit but…
So you can kind of really easily grab that thing as a thing and stick it in the chain of what happens for that interaction?
Exactly.
I think Origami or Quartz or whichever, when you're using it, I think they're the only ones that work like that, with those connecting…what did you call them, noodles?
The noodles!
Yeah, I think it's the only one that works like that of all of the prototyping tools.
Yeah, pretty much. I think those three are the big ones because Origami and Quartz are kind of the same thing anyway because Origami builds on top of it. And it is nice that you can essentially build up a library of interactions; you can have that in your palette, I suppose, and then you can drag it in and lo and behold, you've got a lot of that ready-made for you. But I do find I've had problems with it trying to work at scale, even just anything beyond simple stuff, you end up with a lot of wires all over the place.
A lot of knots and twists and turns!
Well, they call it noodle soup. You end up with this kind of noodle soup and for me, I never quite got to grips with it. But I know people who swear by it.
People seem to really love it; it seems people who are into that; that is their thing and they love it, which is great.
Yeah, and with Google now owning Form as well as Pixate, I'm sure we're going to see further development there; I suspect it's going to be in a material design kind of direction; my hunch is they probably bought it to help people design better Android products to improve the Android eco-system.
That would be a good goal, yeah, that would make a lot of sense.
So, if you're working on Android, I'd certainly be keeping a look out at both of those tools to see how they evolve, for sure. And if you work in a particularly visual way, then maybe that's the right tool for you, but like I say, it never quite felt right for me.
So there's a couple of web ones that are sort of, I guess, kind of like the opposite of Origami and Quartz Composer. I don't know, maybe not really, I just decided that would be a good segue. There's a couple of specific web-based ones: Hype and Edge are two of them. Have you ever used Hype?
Yes, I've played with Hype a little bit. I like it, I think. I mean, I haven't used it in anger on a product: that's the caveat, so until you use these things for something really meaty, you never quite know, just the same way as you never know how good your insurance company is until you have claim off them, right?
Until something happens!
But I actually like it and I quite like the fact it has this kind of timeline model, like Flash and After Effects and so on; you've got the timeline at the bottom, you can see that visual history of what's going to happen in that seven seconds or whatever it is, and it's kind of got that keyframe Frame mentality as well which I kind of like; I understand and I can latch onto that better than I probably can the noodle stuff.
Yeah, I guess that's why I call it the opposite: you have that timeline you can see, which is unlike the noodles. And unlike Pixate and Keynote, I guess there's a timeline in those as well but you can't see it; it's just kind of implied, perhaps?
It's not exposed in the same way, yeah.
And I think, I'm pretty sure the original thing Hype was made for was for doing iAds and when I looked at it originally it was ages ago I was like, oh man, I don't think I want to use this, but it seems like it's changed a lot since then; I'm like: I'm not making banner ads!
Right, interesting. I don't actually know much about its provenance, but I could definitely see how it could have been used, or could be used now for that sort of thing. They're going for more of a kind of generalised but a web-skewing kind of motion value prop here; they're saying they output HTML and CSS so it's all native, it's not a Swiff or anything outdated like that.
Are there two versions of it?
Yes, so there's Hype and then there's Hype Pro, so we're on Version 3 now. My recommendation is go straight with Pro; that's what I did when I was starting to play around, because it's got more configurability, particularly around the physics side of things, so it has built-in physics so you can do collisions and things like that; you can set one object to have dynamic physics which essentially says, well, it can move and then something else could be static and you could say that that could be a floor or a wall, and then this element will bounce off it and you can adjust the friction and the density and all these physical properties.
Oh, that's really interesting; it's very different than other timeline tools that I've seen; they don't have that kind of physics built in, or at least not easily accessible.
No, exactly. It's interesting, I've not played too much with that feature, but I've watched tutorial videos and thought, huh, I need to have a proper play with that.
Yeah, you're like, that I want to see!
Yeah, and in one of the tutorials they have a sort of Angry Birds style thing where it's like a cannonball hits a stacked chimney and it topples over in different directions, depending on how you tweak the parameters and so on, and it's all HTML and that's kinda cool.
That's pretty interesting.
I've no idea if it's performand so I don't know what it would be like in a production environment but, you know, kinda cool stuff.
Well, for prototyping we don't have to worry about that too much, as long as you can actually play it to show someone, hopefully it'll never make it to production if it's terrible!
That's true; I trust my developer colleagues to make the call on the quality of the code that it put out. But it's also got some quite nice detailed timing functions as well; it has twenty nine different pre-defined curves or you can set your own beziers and all this sort of stuff so I like what I'm seeing with it, but it's early days; I haven't really got too far into it.
So there's a similar one to that, and the one I've played with more but now I'm like, did I make the wrong decision? I've played more with Edge. Edge Animate, which is the Adobe tool.
That's right, yeah.
And I actually did a tutorial, I think maybe a year ago for Net Magazine or Creative Bloc I guess it is now, on using this to prototype things and it's definitely also very early in its early tool, it's clearly a new thing and not super-mature. Even though I did that tutorial I'm like, I'm not really sure it's something I would use to prototype because it's just…mostly because it's so difficult to import anything. They recently added copying and pasting SVG from Illustrator, which I assume might also work from Sketch but I often have things that aren’t SVG, so how do I get those in? You can’t. Kind of a deal-breaker. Maybe not for if you’re doing really low-fidelity stuff, but if you wanted to, if you had a design and you wanted to put it in motion, you might think you could use Edge for that, especially if you use Photoshop or another Adobe tool, but it doesn’t really do that, which was kind of the thing that really got to me at the beginning, I’m like, OK, so everything I make I have to draw in Edge, or copy and paste SVG now which is good but not really where you’d want it. So you can kind of really only use it for early on lower fidelity stuff. I do really like their timeline metaphor; they have a really nice way that it works.
hey don’t have any fancy physics or anything like it sounds like Hype does but the way they do the timeline is really nice. Adobe’s done Flash and they’ve done After Effects so they know timelines pretty well and Edge has a decent timeline. I like that it’s web-based, which was kind of the main reason I looked at it for prototyping, because I’ve used After Effects for prototyping a lot and there’s this weird thing sometimes when you show that to clients and they’re like, well, if this is going to be on the web, why are we looking at a QuickTime video? You’re like, oh yeah! Some people can’t get past that, so I thought Edge would be a good way to get around that but I haven’t been able to get it to do the things that I want it to do, but maybe it’ll work better for other people because I know other people really like it. It is nice to see Adobe having a tool that is with the times in that sense. I like it but I also don’t like it!
Right, as you say, they’ve got some of that heritage I suppose that they know how to do timeline-based animation, so it makes sense for them to re-use some of that skill. Something like After Effects for me is probably too heavy and it just doesn’t have any interactivity; it’s just a pure video render, so I don’t really consider it a prototyping tool; it’s more of a rendering tool if you want to show a detailed interaction. So, it’s nice to see that brought to something a bit more interactive but it sounds like you’re not wild about where it’s ended up?
Yeah. It seemed to have a lot more potential than it was and you’re right about After Effects; it’s kind of good for showing how something might work but you can’t interact with it. I leaned on it a lot because I knew it and I was like, hey, I could take this thing that I did in Photoshop and animate it in After Effects and it’ll take me two minutes. Or maybe not two minutes, but you know!
Two hours!
And that seemed a lot easier than, I will learn a new tool to maybe hopefully show what I want with this. But After Effects was pretty good for showing people what you wanted motion to look like but also difficult in that there were things you can do in After Effects that you could never do with web technology, so anyways, that’s a whole other thing. But Edge is an interesting one and I’ve seen some other people make some very interesting and cool looking things with it, so I think it’s worked better for other people than me, which is good.
OK, very diplomatically put, I like that! Let’s talk about Framer. I want to talk a bit about Framer, because I’m enthusiastic about Framer. They’re an independent company, they’ve just raised quite a lot of finance, twenty five million or something like that kind of investment, which doesn’t matter in itself but it suggests to me they’ve got big plans for that product and for trying to get themselves into the workflow of all designers working on contemporary products and hopefully with a bit of capital, they can do that, so that’ll be interesting.
Yeah, that’s a goal for sure; the big one!
Yeah! It also means they’re probably not going to be selling to someone like Google any time soon because, you know, etc. So I think there are interesting times ahead for Framer. I’m really liking Framer, I’m really starting to lean on it as probably my primary tool. The downside of Framer is of course that it’s code and that’s definitely intimidating for some people; if you have no JavaScript, it’s a lot tougher than something like Pixate. Even if you have some JavaScript, it’s still fairly tough because it’s in CoffeeScript rather than JavaScript so you have to learn CoffeeScript.
Oh, right.
Or at least the Framer Studio environment is. Now, you can still do it with JavaScript because Framer is essentially just a big JavaScript library and you can manipulate it through JavaScript anywhere you want but the development environment uses CoffeeScript which for me, that was the first time I’d encountered indentation meaning anything…
Oh yeah…it’s a little weird.
It’s all meaningful indentation and so on which is just…that hurdle was a little bit stronger still. However, once I got past that sort of initial pain, I found it to be a really, really interesting, quite surprisingly scalable, but also very powerful tool. What’s your experience? Have you played with Framer that much yourself?
I’ve played around with it. It’s one I haven’t used in a real project yet but I would like to. I feel like I need something, a product that’s maybe a little bit bigger scale or something, or maybe at least something with more people involved, because a lot of the time for me when it gets to the point of, oh, you need to make a code-based prototype I’m like, well I’ll just code it up then! Which not everyone’s in that position; I’m like well, just code it. But I really like that Framer is code-based because it feels like you have more possibilities that way; you can just kind of make what you want to make, you don’t have to worry the interface steward to find the right button; you’re just like, this is what I want it to do and I will make it do it. It feels like you have more power that way, and I really like what I’ve seen from it; just haven’t gotten the chance to use it on anything real yet.
Yeah, I get you. One of the things I do like about it is; well two things really. It’s got a nice import function from Sketch so…
I didn’t know that.
So you just tell it to load a Sketch file and it will load all the layers and it’ll create layer objects for each of your Sketch layers that you specify and so you can then just directly manipulate then, change the opacity, turn them on and off, put states on them essentially. The other thing that I found myself doing quite a bit with Framer is abstracting certain variables and having almost like a pseudo-global variable for friction or for duration or something like that, and it doesn’t have to be two hundred milliseconds, it can just be whatever, it can just be like a scaling factor: I start at one, and then if I want to try everything a bit slower, I can just change it to 1.5 and then it elongates everything, or if I want things to feel snappier, I can reduce to point five and so on, so with a bit of code knowledge, you can just abstract some of these variables and you can tweak those individual things and the effects kind of cascade down onto all the interactions that they’re related to, all the functions that they contribute to. So, in that way, you can use it a little bit like Quartz, Origami and so on, you can change the properties of that particular interaction just by changing those figures. And there’s something interesting about that idea. Like I say, you need a bit of code knowledge to get away with that but having a bit of code knowledge is never a harmful thing anyway for a designer.
No, and it sounds like having that little bit of code knowledge can get you a lot more of that flexibility; setting those global variables isn’t a huge amount of code knowledge but that sounds like a really effective way to just kind of test things out and just work with things; you have that ability. I think in a lot of the timeline based ones, there’s just that same flexibility at least that ease of it, isn’t really there.
Yeah, exactly. The timeline stuff is a little bit less abstracted; it’s more about the specific interaction that you’re designing, whereas Framer I find the way I’ve set it up is just to be a little bit more a tier above that, if you like, in that abstraction layer. So I find it very useful for that and I love the site and the examples that they show in that as well, which you can de-construct, because there’s a bit of a gap between some of the tutorials and some of the detailed examples on the site.
Yeah, they’re way more complex.
Yeah, for sure. You need to cherry-pick, you can find the ones that are kind of intermediate level, unpick them to see what they’ve done and then hopefully upskill yourself and move on as well.
Yeah, it sounds like Framer is definitely, even though I haven’t used it for anything real, Framer is definitely one of my favourites too; it just seems like it’s got a lot of flexibility and power, which I like.
Yeah, exactly. That does come at a cost, that it’s harder to learn, particularly than something like Keynote. So, for me actually, this kind of brings me on to how you choose the right tool and I find myself leaning to actually saying that people should have two tools. They should have one tool that they’re very familiar with for low-fidelity, quick work, like a kind of divergent, try an idea out work and then another tool, it could be the same tool actually, but they should also be comfortable that they can produce this high-detail work that has much more of this kind of finalised animation where you don’t have to use all these vague words. And for me, I’m leaning to Keynote and Framer; those are the two I’m looking at really, to fill those roles at the moment.
I totally agree on that; there’s cases where you need to be able to prototype something quickly, generally in the early phases where, like we were talking about Keynote, when the question you’re trying to answer is more like, will this work? Is this possible? Will this be something…is this possible in a way that makes sense for us? And then there’s times when you’re like, how should this look? Exactly how should it look? Exactly how should it behave? And you can probably do that with the same tool but I feel like if you took Framer to make low-fidelity just boxes or something prototypes that maybe it’s kinda overkill. I don’t know.
Yeah, it's a little bit using a rocket launcher to swat a fly; it's a bit like that, isn't it? But I'm sure there are people who can do that, who can manipulate Framer to be this quick tool if they set up certain patterns and so on they can re-use: great. For me, I'm happy just throwing that in Keynote if it's something nice and simple. But that's kind of where I've been leaning of late, anyway. And then also, like all these things, with tool choice, it comes down to what works best for you. There is no right or wrong answer.
No, because in the end, you need that thing to share and to show what you're thinking, to get that thing out of your head, so everyone else can look at it and discuss it or whatever; it doesn't really matter what you made it with.
Right, exactly. And some people are going to like the timeline model, some people are going to be more comfortable with that visual programming with the noodles etc; some people are going to be more happy with code, so it's really, as with all these things, if it helps you get the job done, if it helps you ship better products, it doesn't matter a damn which tool you've used to get you there.
Not at all. Yeah, definitely, it's all…we say that for a lot of things but I think in this case, it's even more true; it doesn't matter what you use, as long as you can get that to a point that you can share it and use it to make better things, it's good; it's the end result is what matters, these are almost like temporary deliverables in a way; they get tossed out because the real thing gets made based on them and they don't have to have a long shelf-life or be amazingly performant; they just need to get their small job done.
Yeah, absolutely. OK, so there are obviously more tools, we haven't got time to dive into all of them. There are a couple of things I've been reading that I just want to refer to, because they talk about some more of these tools and they also cover some of the ones that we've mentioned. There was a post called Five App Prototyping Tools Compared and it talks about Form and Framer and Origami and Pixate but it also has Proto.io in there as well.
Oh, I haven't heard of that one.
Yeah, I've never played with it, but I think it's more like a sort of page to page thing; I don't know if it's an elements in motion kind of prototyping thing or whether it's more connecting more static pages and so on, kind of à la Briefs or Axure and so on have done that. InVision does that to an extent as well. But we'll put that link up as well because that talks a bit about some of the facets of those tools that I haven't mentioned when I was talking. And then also the second post I'll mention is a Medium article; most of these things we're talking about are Medium articles, right?
Oh, I think they are. Except for one, anyways!
But a Medium article called New Generation of Prototyping Tools and this is a two-part thing; I actually haven't looked to see if Part 2's out yet, but it talks about a couple of tools that are new to me even, even as I was prepping for this podcast I was like, oh, goodness me, there are even more tools I don't know, so that's definitely worth a read as well and I'm sure people out there will have their own favourites and be shaking their fists at me: why haven't you mentioned whatever it is; rest assured we would love to, but the day is only so long.
I would like to hear about other ones people find useful, even if we didn't get to talk about them. So to add to our list of Medium articles…oh gosh! Medium really is taking over, huh? I'm not sure how I feel about that. So there's a couple I was reading, one about prototyping which I kind of mentioned in the beginning about for ones prototyping with Keynote, it's called Design in Sketch and Animate in Keynote and kind of goes through one possible workflow process of how you would do that and talks a bit about how the animation in Keynote gets done, which is pretty handy and helps solve that mystery of how does anyone do that in Keynote. So it's a good one for that. Another one I've read recently is called Stop Gratuitous Animation. Despite the title being, I would say, a gross exaggeration of actually what happens because that's not what this article really discussed. But what I really thought was interesting about it is they present this problem of, hey, this animation wasn't working; here's how we fixed it. And one of the main ways they fixed it, the biggest change that was made, was that they started the animation, or had the animation happen, while communication with the server was happening instead of chaining everything like, contact the server, then run the animation when you get the information back, they overlapped those activities and then the animation effectively made it seem like that server communication was going faster, that kind of perceived performance, so I like that part of the solution even though the title I was like, that's like, huh…exaggerated title for Medium!
Yeah, I think the title itself was a little gratuitous with that one.
That is the word I was looking for!
I think the piece itself is nice because as you say, it's almost kind of a case study of, here's some bad animation; here's how we can make it a lot better and actually I think if they'd re-framed it a little more around those lines, it might have been an easier sell to people or an easier read, but it's still a good article either way. Gratuitous title, no.
Good article: bad title.
For sure.
Anyways! So, that pretty much wraps it up for today actually.
I think so.
Talked a lot about prototyping tools; hopefully you guys have some good ideas and it's nice to talk through them all in one thing to compare them. I've got some new ideas of things to try now. In the next episode we're going to be talking about physics, so we're getting to the serious, serious stuff, so look out for that next time.
You've been listening to Episode 6 of Motion & Meaning with Val Head and Cennydd Bowles. You can find out more about this show at motionandmeaning.io and we'd love to hear your feedback on Twitter as well: we're @MotionMeaning there. See you again soon.
Transcribed by Alison