Design Stack: The tools we use to design our apps

Icons of all the tools we use to design apps.

There’s something satisfying learning about new tools to improve your design workflow.

It also serves as a great introduction to UX design and design in general.

At Bitfactory GmbH we do software; mobile and web apps primarily. The company’s got 10+ employees and I am the one designer in the team. However, we’ve got experienced founders that know a thing or two about designing apps as well.

In the beginning, it took a while to figure out a process that fitted our needs. And though it definitely has room for improvement, we’ve found our workflow with some of the following tools.

Affinity Designer / Affinity Photo

The Affinity Designer and Photo are the better (and much cheaper) alternatives to Adobe’s Illustrator and Photoshop.

Apple Motion 5

Once you get the hang of it, you’d be surprised at how capable Apple Motion 5 in making animations.

Screenshot of Apple Motion for UX design

Giphy Capture

Need a quick GIF from a cool animation you did? Put Giphy Capture on, record it playing and voila. Easier than that you can’t get it.

Google Team Drives

Google Team Drives changed the game. No more sharing folders mess. Everything project goes into its own Drive. All our files just end up in the Google Team Drive. Ready to be pulled down with the Google Drive File Stream application.

Handbrake

We sometimes get videos of clients that are not compressed. We can’t use that in our software. Handbrake is the best tool to compress videos.

Screenshot of compression tool Handbrake

ImageOptim

The file size of the assets I provide to the developers is usually unnecessarily big. I run them through ImageOptim to remove the bloated data they hold. It sometimes saves 80% of the file size!

Screenshot of compression app ImageOptim

Sidenote: We’re trying to move away from rasterised assets and completely rely on SVG. If you like to compress SVG, I recommend SVGOMG by Jake Archibald.

IntelliJ IDEA

The IDE we use for programming projects. I mainly use IDEA to brew up some HTML and CSS to help the developers out.

Our IDE of choice. IntelliJ IDEA.

Invision

InVision is the ultimate rapid prototyping tool. There. I’ve said it. With Craft, we upload from Sketch, create the supposed flow and test it.

It’s also a great tool to share design proposals with the client. As the client really gets a feel of the app when clicking around in the prototype.

Screenshot of the web app Invision for prototyping

Atlassian’s Jira

The company’s project management tool. Jira helps track our progress and manage our individual tasks. With several overviews to provide the transparency and understanding of what the whole company is up to. It is a huge part of our process. Nothing happens without a ticket to ensure there will never be confusion.

Keynote

Put your app designs in Apple’s Keynote. Add invisible buttons to the screens, link it to another slide. Then export it as a clickable PDF prototype. Who knew!

MAMP

I sometimes need to check out early work of developers. I am not terminal savvy. I like GUIs. So I use MAMP to start up my server environment. Don’t judge.

Overflow

Overflow is a well-designed app that lets you create great User Flow diagrams.

Screenshot of Overflow: the User Flow app

PixelSnap

With PixelSnap I can measure everything on my screen. Just click ‘Find Dimensions’ on your Mac’s menubar and voila: virtual rulers that measure the distance between all elements on your screen.

Sketch

Sketch is the tool we use for interface design. The time I spend in this app is proportionate to my career in design. And I love it. There are several old and new competitors on the market, and Sketch will always have a special place in my heart.

Screenshot of Sketch, our design tool.

In a future post I will do a list of what plug-ins I use in Sketch, however, I would like to list one here.

Crystal

The Crystal app functions as an iOS Sketch Mirror alternative for Android. It allows me to always keep an eye on what I design on the big screen works on the phone’s screen.

Slack

Slack is where all of our communication goes. All the employees are on there. You will find channels about specific topics and our current projects.

Trello

Trello is a project management (Kanban style) tool I love. Used for my own personal projects, as well as some task management with clients.


Keep learning:

Geffrey van der Bos is a cognitive designer with focus on User Interfaces and Front End Development. Currently working in Stuttgart Germany, for Bitfactory GmbH.