Skip links
5 App Design Tools – Nodes Design Stack 2018

5 App Design Tools – Nodes Design Stack 2018

Design is not as subjective as you might think. Sure, different colours and shapes, forms and structures speak to us in different ways. But design is so much more than just aesthetics. To use a much-quoted nugget of wisdom from Steve Jobs: “Design is not just what it looks and feels like. It’s how it works.” And nowhere is this quote more relevant than in the world of app development.

Not that long ago, we were all using Photoshop to design apps. As vital as it was, Photoshop was never intended for that use—the whole thing was a cleverly conceived hack by designers. Luckily, we’ve moved on from that primitive age, and nowadays, design teams have a wealth of tools at their disposal. And the benefits are myriad. So what do they do, and why make the jump from Photoshop?

In broad terms, they’re used to create static markups and build prototypes to share with clients and investors, and, ultimately, the development team. They have the added benefit of streamlining the design process, and simplifying collaboration between designers,  Also, and probably most importantly, they save time, and therefore money.

But, where to start? A casual Google search on the subject will throw up a ton of options. And as the market for design tools grows evermore crowded, it’s difficult to narrow down the best, most useful tools out there. So we asked our design team to hand-pick a selection of their favourites:

In this blog post we will go through these design tools:

In this model you can see which tools are used when throughout the app development process:

Overview 1 - 5 App Design Tools - Nodes Design Stack 2018
Sketch - 5 App Design Tools - Nodes Design Stack 2018

Sketch – Complete design tool for static mockups

The keystone of app design tools, when we asked one of our designers what projects they used Sketch for, the response was: “Pretty much all of them.”

Essentially, it’s a prototype builder used to design static mockups of what your app will look like. Versatile and lightweight, it’s jampacked with intuitive features which take out some of the repetitive donkey work of recreating elements. Take the symbols feature as an example. Imagine you’ve designed a button and want it to appear, unchanged, throughout your app, Symbols allows you to create consistent elements with minimal fuss.

Though Sketch is very much built for the UI, visual side of things, one of its greatest assets is its versatility. A powerful tool in its own right, it can be used in conjunction with all of the other tools on this list.

Through the relatively short lifespan of Sketch, a huge community of dedicated designers and developers have continuously build new plugins and shared design templates to help improve the design process and ease repetitive tasks.


An example could be this template for creating app icons, made by our own Søren Clausen.

shareimage copy 2 - 5 App Design Tools - Nodes Design Stack 2018

Abstract - 5 App Design Tools - Nodes Design Stack 2018

Abstract – Version control and seamless collaboration on design files

Abstract is basically a collaboration tool. Back in the old days, designers had to work on tasks independently, then upload their work to share it. Needless to say, the whole process was time-consuming and clumsy.

Then Abstract came along, offering the type of collaborative platform that developers had found in tools like Github. Now, Sketch files can be added to a project, and team members can jump on board, editing and saving their progress into a master file.

One of our favourite aspects is the tracking system. Abstract tracks every change, using a timeline to present each members contribution to the project, allowing for instant communication between designers.

Invision - 5 App Design Tools - Nodes Design Stack 2018

InVision – Prototyping focused on flows

Another indispensable entry. InVision picks up where Sketch leaves off, with an emphasis on functionality. Once they’ve got their static designs done in Sketch, our designers move over to InVision and start making a dummy prototype with some of the transitions and animations that go beyond just visuals to define UX.

With InVision, you can get a solid idea of how your app works in practical terms, how it feels to actually use it. This is particularly helpful for clients who want to see a clickable prototype of their app, and to get a step closer to the experience of using the finished product. It’s also fully integrated  with Sketch, meaning that transferring projects between the two is a breeze.

Our designers had previously found it difficult to give clients a full picture of how their app worked, being limited to presenting one screen at a time. So, along with Sketch, InVision has become one of the tools we use on every single project.

Zeplin - 5 App Design Tools - Nodes Design Stack 2018

Zeplin – Design handoff for development

Once your prototype is up and running, and everyone’s happy with the result, it’s time to hand over the reins to your developers. That’s when we use Zeplin.

We first stumbled on it after several years of frustration. When it came to delivering screens to the development team, we found the process to be drawn out and problematic. So we started looking for a solution, and eventually found Zeplin. It was only in beta back then, but we were so impressed by how smoothly it worked, that we’ve been using it ever since.

Essentially, it provides an interface that enables our developers to see sizes, colours & fonts, and makes it easy to copy all image assets in the correct sizes and formats. So our developers can get right into the technical nitty-gritty of building everything from complete views to smaller visual elements. Without having to ask for assets or guess design attributes.

Principle - 5 App Design Tools - Nodes Design Stack 2018

Principle – State based prototyping tool for complex interaction

Out of all of the tools on this list, Principle is the most centred on animation. It brings together some of the best features of apps like Sketch, After Effect, and Flash.

Once you’ve designed your interface, Principle is there to build on animated and interactive elements. It’s particularly adept at refining micro interactions, which play a big part in the overall experience of using an app. Designers accustomed to programs like Flash will love Principle’s stripped-down and intuitive workflow, and little tweaks and adjustments that had previously been a bit of a headache, are now easier than ever.

It’s worth noting, however, that Principle is strictly an Apple platform tool, so there’s currently no chance of testing Android apps on an Android device.

What about other tools?

Of course, this list isn’t exhaustive. New tools are in development as we speak and they’re bound to address the ever-changing requirements of app designers. The day may come where one tool rules them all, but for now, we’ve selected the most used, and most useful, for us as the leading app development agency in Europe. On many an occasion, they’ve allowed us to collaborate on projects, and meet deadlines that would have been extremely tight.

10 years of designing apps

Speed is crucial to our clients, and that is why we on an on-going basis test and implement new types of software into our design stack in order to be able to live up to their expectations. As we’ve seen, these tools are smart, powerful, and intuitive. But design is just one part of app development, and choosing your stack is as much about software capabilities as well as how Design integrate into other parts of app development. They’ve built up the knowledge and workflow. At the end of the day the purpose is to combine different tools for different tasks, creating a seamless interaction between them in order to get the job done.

Designers at Nodes

fie - 5 App Design Tools - Nodes Design Stack 2018

Ann-Sophie Green Rasmussen

Copenhagen

bo - 5 App Design Tools - Nodes Design Stack 2018

Bo Mouridsen

Copenhagen

See Dribbble profile

64eba6a146808695d8e01672550b57ae - 5 App Design Tools - Nodes Design Stack 2018

Joel Freeborn

London

See Dribbble profile

f0784764b363d9f493d9cc983018cad6 - 5 App Design Tools - Nodes Design Stack 2018

Nyle Levi

London

See Dribbble profile

sarah - 5 App Design Tools - Nodes Design Stack 2018

Sarah Bui

London

70ec238c4a87ff25e3c8ca8bfa2d40e8 - 5 App Design Tools - Nodes Design Stack 2018

Søren Clausen

Copenhagen

See Dribbble profile

Call now