Design and prototyping tools: what we use to develop our apps

At our company, we consider creating the design as an integral part of the solution’s creation as a whole. We analyze the mobile app’s functions, the tasks it must accomplish, as well as the people who are going to use it. We also go on to examine the meaning and logic behind the future solution’s operation.

The same applies to our tools. In developing design, we use the most optimal tools for the established tasks.

Head of the design department Dina Milstein talks about the stages of True Engineering UI/UX mobile app development.

The design begins with a concept

At the start of the project, we develop the design concept on 5-10 screens and discuss it with the customer.

And here you are. Here we have agreed on the way the mobile app was going to look and what the basics of its operation would be. If it were like a fairy tale, it would be nice for it to end with "Then they got married and lived happily ever after", but in reality that is where the hardest and most painstaking part of all begins. It is no different in our case.

Prototyping UI/UX: paper and sketch

To get an idea of how the mobile app would work, we made the first sketches on paper and transferred them to Sketch. We switched from Photoshop to Sketch, an ergonomic interface development program. We did not necessarily abandon Photoshop, as it is perfect for working with rasters. The selection of tools always depends on the task to be performed. Everything has to be precise.

You need a digital brand book. If you don’t have one, make one

We are often approached by companies that already have their own visual style and solutions on the web, in mobile format, and in print. But an ad banner is obviously designed based on different rules and is not suitable for a mobile app. In that case, we adapt the visual platform to our task. If there isn’t a digital brand book, we make it from scratch.

Illustrations in illustrator

We make our applications "affectious", so that people find them not only convincing but also heartwarming. Therefore, we add illustrations to our applications when appropriate. The perfect illustrations tool, in our opinion, is the Illustrator program.

Interactive prototype: envision

When logic and style are ready, we present the solution to the customer. We use the animated prototype solution in Invision to present the idea. This boosts communication efficiency with both the customer and the developers.

At the first stage of design, it is not always clear what stands to be improved. The interactive prototype reveals logical flaws as well as behavioral problems.

The interactive prototype is an important step. Static images can be difficult for many to perceive as a working app, so the customer gets a tool that shows how the application would function. It motivates the customer to talk about his business processes and how these processes fit into the proposed scheme. It is easier to make edits at the product creation stage rather than during the finishing touches.

Animation and behavior: flinto

We demonstrate the behavioral nuances to the developers in Flinto, discussing the way certain things would work, for example – elements’ smooth appearance, transitioning between screens, and state changes.

Visualizing and moving onto development: Zeplin

Subsequently, we move in iterations: we get everything drawn, discuss it with the customer, and provide it to the developers in Zeplin. And so it continues until the final release: we methodically and diligently work on sections within the concept, all the while maintaining the original quality.

The process guarantees quality results

We are very scrupulous about the details and facts. Everything must correspond to the task and appear authentic so that the customer immediately matches what they just saw to their work processes.

At each UI/UX development stage, step by step, from the idea’s conception to the finished product, we form a clear, limited, fully developed element of the visual platform. The market is constantly improving on tools that already exist while continuously coming up with new ones. The main thing is to keep in mind why you need them in particular and what the specific results you plan to get are.