Finding the right tool chain
Getting from doodles to deliverable assets
Over the past few months I’ve had the opportunity to meet some of the guys that are making our life easier during a Sketch Hackday. Design teams from our most used design tools showed a bit of their process and how we can take advantage of that.
After the Sketch hackathon I was so hyped that a couple of days it was the only subject I was interested in discussing. Therefore, this article.
Going to a Sketch event
Called Sketch Hackdays, this event took place in Hamburg (Germany), and had some very cool speakers. Did I mention it was free? Big thanks to precious for this.
As this kind of events are not so common we decided to go with the entire design team and see how the designers around the world are using Sketch and how they plan to make it better.
We saw how much love InVision has for Sketch by creating the Craft plugin and we we’re even more surprised by all the future releases (and let’s not forget the upcoming SilverFlow integration).
The new Framer
As everyone already saw, the new Framer has a bold new look and dropped the js from it’s name for a good reason. The new workflow helps you learn to code but it’s not required as you can just click and trigger stuff. I really think Framer can be that quick solution you need when you just have to show a cool animation or a simple flow.
Prototyping
As the option for mobile design are pretty limited (what can you choose beside Sketch?) the big question is how do you go next to present your work? You probably know, there’s quite a big market out there dedicated to testing your design, but it can be simplified in two categories: pagination based and native.
Pagination tools
With pagination tools you can upload .pngs and link all the screens together with hot maps. And there are two big names in this category you need to think about: InVision and Marvel. I’ve used both and both are really good products, but if I had to choose one of the two I’d go anyday with InVision — everything it’s done so well, from Boards to Prototypes (+ the support is excellent in case you need it).
Native tools
The other category of tools helps you build your prototypes using native code and therefore, make the prototype feel more real. Top tools to do that are: Pixate, Framer, Origami, Principle and Silverflows (now owned by InVision).
Testing most of them I decided to go with Pixate, although I didn’t had too much experience with it but looked really promising and felt very close to a real app. And that’s exactly what your stakeholders will expect when you present them something. Nothing feels better than something you believe it’s real. And, with some restrictions, you can achieve this.
My tool chain
Finding my/our tool chain took me almost 2 years (1 year to adjust to) and around to experiment with all the tools out there, and if we play the name dropping game, here are a few: Balsamiq, Framer, InVision, Marvel, Omnigraffle, Origami, Pixate, Proto.io, UXpin.
Back to my tool chain: not saying it’s perfect, but it works for me.
And that is the only thing that matters, finding the tool chain that can let you design fast and fet the results you want.
So this is how it looks for me:
I usually start on paper to get the rough idea of what the architecture might look like and fix problems I can quickly identify (from flow to patterns etc.).
- For me, nowadays Sketch has a double role, as a wireframing tool & design tool. With the large number of kits available it’s super easy to create a simple user flow or an architecture (extremely good UI kits embedded in Sketch & dummy user data dumping with Craft). Plus, handing over a wireframe in Sketch to a designer who works in… Sketch (like most of them) helps everyone work faster.
- Design ready? Time for rapid prototyping! If you just want to validate or run an idea by your co-workers working with InVision’s prototype or board features is quite easy. If you just want to impress your fellow designers, working with SilverFlow directly in Sketch it’s probably the way to do it.
- Want to do some user testing without actually pushing your design into development? You will probably need a couple of days to setup a Pixate prototype and of course, another couple of days to run the user interviews. If you just need to test just one or a few screens but still want to go for that native look and feel, Framer is there for you.
Of course, there’s also what happens as soon as your design is validated, right? Well you also have plenty of options here. You can just use Sketch and manually prepare the assets or jump to Zeplin to let the developers get whatever assets they need. Another tool I’ve heard good about is Avocode, but didn’t got the opportunity to test it yet.
I hope you find this useful and please let me know if I miss anything or if there’s another magical tool out there making miracles for us, designers.
