Our design software stack

At Octobot, we care for the interfaces of our products as much as we care for the cleanliness of our code. Therefore, we try to use the best possible tools that might help us in the process of building wonderful UX and UI experiences.

In this post, I will list three of these tools, along with the main advantages we found in the daily use of each of them.

Sketch

Sketch was a game changer regarding apps designs. While the Adobe Suite is wonderful for graphic design or photography retouch, Sketch is thought from its core as the perfect tool to create wonderful apps as easy as it can be.

Some of its main advantages are:

• Pixel perfect: With Sketch is super easy to keep track of the measures on a design, providing a wonderful and easy way to see the pixel distances between elements.
• Styles: As you do in CSS, in Sketch you can define global styles for the different elements (like titles). This allows the designers to try different styles globally, without having to update each of the elements. Great time saving!
• Symbols: Similar to styles, in Sketch you can create symbols (like buttons). This also allows the designers to try different styles globally, since once you modify a symbol, the changes are replicated to each of the instances of that symbols. Another time saving!
• Art-boards and Pages: Instead of creating multiple files for different sections, or different versions of a design, in Sketch you can keep all the elements and versions on the same file. Whit this, is super easy to keep track of the design evolution and compare different ideas.
• Asset export: Sketch provides a super easy way to export all the asset, even in different resolutions (1x, 2x, etc) and extensions.

Zeplin

While Sketch it’s thought for designers, Zeplin it’s though for developers. Think about Zeplin like a Sketch, but on a diet. Once the design is ready to be coded, the development team can pick it on Zeplin, and get access to the details of the design in an easy and clear way, saving time on the code tasks and reducing the differences between the original design and the final app.

Some of its main advantages are:

• CSS: Zeplin gives you the CSS code of the elements on the design, reducing time on the CSS codifying task, and reducing the mistakes of a wrong style definition.
• Pixel perfect: Zeplin shows each of the measures in a design in a super easy way, reducing the possibility of set wrong sizes in the final product.
• Web base: While Sketch only works on Mac, Zeplin has a web based version. This enables all developers, no matter which OS they use, to be able to work with the Sketch files.

Invision

Invision is the perfect tool to show our design work to our clients, and get feedback from them. It’s also a great tool to demo how the app is going to look and work to our clients, before coding a single line of code.

Some of its main advantages are:

• Comments: Clients can add comments directly on the designs, making it super simple to understand the client’s feedback.
• Presentation mode: Clients and designers can interact with a design at the same time, reviewing screens, adding comments and making notes live.
• Devise wrapper: Invision can present the designs on the media that is going to be used. For example, if you are designing a mobile app, you can wrap your design on a mobile phone in order to see it in the most realistic way.
• Links: You can create links zones in your designs, making it possible to interact and navigate over the different screens, allowing the client to feel how the final app is going to look and work.

I hope these tools can help you in your design journey!