All the tools we use for screen design

A few words about our shiny software

Bartłomiej Pierzchała
7ninjas
Published in
5 min readMay 14, 2018

--

The software you use is an extension of your brain. The better you know it, the better and faster you can apply those sweet creative juices that you have flowing in your head. Before we dive into the details, please keep in mind that the following list features the tools we use on a daily basis. These tools have proven their worth in the long run. This is basically all we want you to know or at least be familiar with when you join our team. So, let’s start.

Sketch

https://dribbble.com/shots/4464263-Apartments-Comparison-Animation

Our favourite tool. We use it to design all our interfaces. If you don’t know it, but you’re a Photoshop or Illustrator pro, you’ll get it in no time. The most important tool in our set. All our interfaces were crafted in it.

Photoshop

https://dribbble.com/shots/4407023-4000-Followers-Milestone

Once an almighty graphics programme, Photoshop is losing its predominance today. An overwhelming versatility of this software has become its biggest drawback For being too slow to handle multiple artboards and incapable of creating components that get updated within other components. We still love it and use it for photo-manipulation, retouch, assets creation, GIF exports, and everything else but the digital screen design itself.

Illustrator

https://dribbble.com/shots/3860557-Competition-Management-Landing-Page

Icons, Illustrations and basically all vector assets are made here. Sketch app is ok for interfaces but the fine-tuned elements are very often finessed inside the good’ol Illustrator.

Axure RP

In most cases,the design process starts here. We create low-fidelity prototypes in Axure RP before we begin polishing our work. A well-laid out low-fidelity prototype is worth a tonne to front-end developers as they can plan ahead the structure and components needed. Read more about it here.

Principle for Mac

Priniciple helps us visualise interactions between screen elements. It’s the fastest tool for prototyping interactions. It has its limitations and intricacies but at the end of the day, there’s no better competitor when it comes to quick prototyping.

After Effects

https://dribbble.com/shots/4492717-Cont-Paris-Store-Sketchboard

Not everything can be done in Principle. Like the simple drawing effect above, or the touch cursor animation. And EVERYTHING can be done in After Effects. It just takes a lot more time.

InVision

A global standard for prototyping. We use it for both prototyping as well as client-customer communication and feedback. When on a project, we synchronise our screens constantly to stay tuned ourselves and keep our clients in the loop at the same time.

InVision Craft

This one comes in handy and after some time, it might become your second nature. InVision Craft is a plugin for synchronising screens with the web app on the go right from Sketch window. It can also populate Sketch layers with dummy data (like headings and articles) to speed up the process.

Abstract

Abstract is a cloud-based solution and a Sketch extension for organising design files. It’s basically a github for designers. You have a master file from which you branch out whenever you want to add something to it, and then you merge everything once it’s been reviewed and accepted. We’ve been using it practically since its launch last year. It allows us to collaborate in a single file without worrying about overwriting each other’s work.

Zeplin

This one is considered to be one of the fastest and fun-to-use design hand-off apps among developers. As a designer, you’ll use it quite often too. Luckilly, updating screens to Zeplin takes only seconds.

Avocode

Yet another design hand-off software. It’s much slower than Zeplin but it has some perks that developers might love, like folder structure for exporting assets in bulk or a flattened raster. When you’re done with crafting an interface, or maybe you’re just in the middle of it, you hand it off by synchronising everything with Avocode.

Monosnap

Monosnap helps us take snapshots, record screen, and make notes directly on the images all in one app.

Slack

We use Slack for all internal communication. We value it’s versatility and ease of use. And the custom emojis, we love them.

Trello

A very popular, powerful, and yet easy to use project management tool. Depending on the project type or/and budget, we use either lean or agile approach. Trello serves both.

JIRA

We use JIRA for setting up and managing SCRUM. This tool is not always practical for small projects due to the time needed alone to properly plan a sprint. However, it does prove its worth with big and long-lasting projects.

Pizza

We use this tool a lot.

GIF intermezzo

Luckily, this doesn’t occur on Macs recently.

There’s no one best piece of software

Nowadays, where an interactive prototype has become a standard, we’re more than sure that you use at least two apps for design.

If you’re planning on joining our design team, the list above is all you need to know about our software setup. If you’re familiar with it, awesome. If you don’t know one of them, it’s also cool — we’ll teach you.

Ninjas know it takes a number of tools to get a job done.

Now you know the tools.

--

--