Magazine

5 App Design Tools – Nodes Design Stack 2018

Posted on the 10 September 2018 by Nodes Agency @Nodes_apps

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:

5 App Design Tools – Nodes Design Stack 2018> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" data-rjs="https://www.nodesagency.com/wp-content/uploads/2018/09/Overview-1.png" height="434" width="750" alt="Overview 1 - 5 App Design Tools - Nodes Design Stack 2018" srcset="https://qu6oa42ax6a2pyq2c11ozwvm-wpengine.netdna-ssl.com/wp-content/uploads/2018/09/Overview-1.png 750w, https://qu6oa42ax6a2pyq2c11ozwvm-wpengine.netdna-ssl.com/wp-content/uploads/2018/09/Overview-1-300x174.png 300w" class="vc_single_image-img attachment-full" />
5 App Design Tools – Nodes Design Stack 2018> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" data-rjs="https://www.nodesagency.com/wp-content/uploads/2018/08/Sketch.gif" height="300" width="500" alt="Sketch - 5 App Design Tools - Nodes Design Stack 2018" class="vc_single_image-img attachment-full" />

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.

5 App Design Tools – Nodes Design Stack 2018

5 App Design Tools – Nodes Design Stack 2018> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" data-rjs="https://www.nodesagency.com/wp-content/uploads/2018/08/Abstract.gif" height="300" width="500" alt="Abstract - 5 App Design Tools - Nodes Design Stack 2018" class="vc_single_image-img attachment-full" />

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 favorite 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.

5 App Design Tools – Nodes Design Stack 2018> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" data-rjs="https://www.nodesagency.com/wp-content/uploads/2018/08/Invision.gif" height="300" width="500" alt="Invision - 5 App Design Tools - Nodes Design Stack 2018" class="vc_single_image-img attachment-full" />

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.

5 App Design Tools – Nodes Design Stack 2018> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" data-rjs="https://www.nodesagency.com/wp-content/uploads/2018/08/Zeplin.gif" height="300" width="500" alt="Zeplin - 5 App Design Tools - Nodes Design Stack 2018" class="vc_single_image-img attachment-full" />

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.

5 App Design Tools – Nodes Design Stack 2018> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" />> 5 App Design Tools - Nodes Design Stack 2018" data-rjs="https://www.nodesagency.com/wp-content/uploads/2018/08/Principle.gif" height="300" width="500" alt="Principle - 5 App Design Tools - Nodes Design Stack 2018" class="vc_single_image-img attachment-full" />

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

5 App Design Tools – Nodes Design Stack 2018

Ann-Sophie Green Rasmussen

Copenhagen

5 App Design Tools – Nodes Design Stack 2018

Bo Mouridsen

Copenhagen

See Dribbble profile

5 App Design Tools – Nodes Design Stack 2018

Joel Freeborn

London

See Dribbble profile

5 App Design Tools – Nodes Design Stack 2018

Nyle Levi

London

See Dribbble profile

5 App Design Tools – Nodes Design Stack 2018

Sarah Bui

London

5 App Design Tools – Nodes Design Stack 2018

Søren Clausen

Copenhagen

See Dribbble profile

Indlægget 5 App Design Tools – Nodes Design Stack 2018 blev først udgivet på Nodes UK.


You Might Also Like :

Back to Featured Articles on Logo Paperblog

These articles might interest you :

  • Big Food Giants Manipulate Public Health Policy in China

    Food Giants Manipulate Public Health Policy China

    Coca-Cola is at it again. As soda sales decline in the United States and Europe, beverage companies look to emerging economies like China for growth. And, it... Read more

    The 15 January 2019 by   Dietdoctor
    DIET & WEIGHT, HEALTH, HEALTHY LIVING, MEDICINE
  • Jewellery for a Precious You

    Jewellery Precious

    Jewellery is always close to a woman’s heart. It completes her look and boost confidence. Considering the changing trends in jewellery fashion, it becomes... Read more

    The 15 January 2019 by   Dr.jenifer Sayyed
    LIFESTYLE
  • Rajshri Productions’ Next Is A Film On Friendship | Hum Chaar | Trailer

    Abhishek Dixit’s debut feature film Hum Chaar is a Bollywood film made under the banner of Rajshri’s film. Hum Chaar is written and directed by Abhishek Dixit. Read more

    The 15 January 2019 by   Themoviean
    ENTERTAINMENT, MOVIES
  • Saint Paul the First Hermit

    Saint Paul First Hermit

    Today is the feast day of Saint Paul the hermit. This is a sweet and delicate Oatmeal Bread topped with rolled oats and naturally sweetened with agave. Saint... Read more

    The 15 January 2019 by   Veronica46
    FOOD & DRINK, RECIPES
  • Irupathiyonnaam Noottaandu | Teaser | Pranav Mohanlal | Arun Gopy

    Arun Gopy’s Irupathiyonnaam Noottaandu is an upcoming Malayalam action-drama feature film starring Pranav Mohanlal and Zaya David in the lead roles. Read more

    The 15 January 2019 by   Themoviean
    ENTERTAINMENT, MOVIES
  • A Year Of Body Positivity

    Year Body Positivity

    Last January, as I sat there on New Years eve all set to make the same old resolutions I've made year after year for as long as I can remember, I realised how... Read more

    The 15 January 2019 by   Sparklesandstretchmarks
    DIARIES, SELF EXPRESSION
  • Garden Bloggers Bloom Day – Jan 2019

    Garden Bloggers Bloom 2019

    Euphorbia rigidaWhen I went out to take the photos for this blog post I was surprised at how much was in flower dotted around the garden. Read more

    The 15 January 2019 by   Patientgardener
    GARDENING, HOME