As technology is evolving and so is our understanding of how products should work ideally, new UX/UI tools and trends appear. An inexperienced designer or a novice entrepreneur may have difficulties when highlighting the main, vital information. In this extensive interview Fingers Media app design company designers Daria and Denis shared the UX/UI best practices, mobile app design tips and examples of real working products.
Denis Dyagilev - 5+ years of experience in UX/UI and graphic design, 10+ projects at Fingers Media
Daria Bazarova - 4 years of experience in UX/UI and graphic design, 5 projects at Fingers Media
Let’s start our interview with the tools you use. What do you use for inspiration, design and organizing your work?
Denis: Lately I’ve been replacing most of the tools with Figma, which is used to create all our company’s projects. This solution has become a standard, because the functionality is suitable for all UX design best practices. And it’s constantly expanding, adding even more features and mobile design tips.
Figma is specifically made for creating interfaces. There are such UX best practices like clickable prototypes and opening them on a device at the same time. We often use the Smart Animate feature, which allows for creating interface animations in a prototype. These mobile design tips make the prototype closer to the final product and give detailed instructions to developers.
Figma also makes it possible to work with vectors. But working with rasters is not so convenient in Figma, so it doesn't entirely replace Adobe Photoshop in this case. And I mostly use it for two things: visualization and compositing. If you need to remove image background, make presentation mockups or do composition of several elements for splash screens or a mobile app itself, then there is nothing better than Photoshop.
Among other Adobe products, I also use Illustrator for vectorization and preparing illustrations for animation, and After Effects for creating complex animations of illustrations and logos. On Windows, I also used Vector Magic - an excellent application that allows for converting raster images to vectors.
I stopped using Behance and Dribbble for inspiration and new ideas, because they mostly have little to do with reality. I prefer to look at the applications of the major players on the market and analyze the weaknesses and strengths of their interfaces. As for staying organized and productive, I use YouTrack and Google Drive office suite.
Daria: One of my inspirations for UI best practices is Muzli, which can be installed as a browser extension and set up as a homepage. My every morning starts with recommendations of top trending projects. I also use Behance and Dribbble for following the best studios and designers. I personally find a lot of mobile app design tips there. As for the work itself and design, I use Figma and Adobe tools, such as Photoshop, Illustrator.
How do you choose and create a mobile app’s brand identity: logo, icons, color palette, typography?
Denis: It’s quite a complex matter. Different clients come to us with completely different projects. Sometimes clients come to us with an existing brand identity, sometimes - only with an idea in mind, and sometimes a mobile app design is developed by us, while an app identity is created by a design studio.
If a client comes with their own identity, or it is an established company that already has a brandbook, then we just use their main colors, corporate fonts, patterns, etc. As for color palette, we usually choose one active bright color, and the other colors are mostly white and shades of gray. We can also add colors for indication, such as red and green, to help the user understand whether steps made are correct or not, respectively.
For example, our project Getblogger. It is a platform for a better business interaction between bloggers and advertisers. The founders already had a ready-made web platform and corporate style. When creating the mobile app, we use mobile ux best practices to introduce new items, but it all fits in with their style.
If a client comes to us without any brand identity, most often they already have an idea of a project’s name. One of the UX design best practices is not to go as deep into this work and spend weeks as large design studios, but we always provide a client with the best result in a short time.
It's hard to talk about identity in general, because each time it is something unique: both the project itself and the client's requirements. Our clients from the startup Shares came to us with just a name and a project idea to make an application for convenient stock trading with the ability to copy investment portfolios of platform experts. Initially the name was Alfa Team. At the UX design discovery phase, we prepared a number of other options, so they decided to change the concept and came up with the name Shares. Within just two days we prepared a new logo and a presentation. The main idea of the logo was to combine the visual images of graphics visualizing market shares and the capital letter S in the name.
In order to emphasize this idea, we made a number of animations for the presentation, including an animation for the app loading screen. As a result, clients were happy, and the logo was accepted without any further changes.
Another example is the project Lookoshko. This is an app for making a shopping list in terms of both the best cost and route. We’ve made a logo, which was represented by the wordmark ‘Lookoshko’ (meaning a basket, made of thin wooden strips and most often used for picking up mushrooms and berries) + the brand sign in the form of a basket with a handle. We suggested the name to be in Russian, so that it is perceived well by Russian-speaking recipients. The initial idea was for the brand sign to be the icon of the application, and the handle of the basket to repeat the shape of the Russian letter ‘Л’ (English ‘L’).
However, the client had an idea to incorporate the main purpose of the application into the name, which was to LOOK for the best bargains. That's why we decided on the Latin alphabet version - 'Lookoshko'.
The main color of the app is orange, which looks very nice and fresh. It's a great active color for the interface. There’re UX/UI best practices for a background of ads and case studies, as by adding some veggies, dairy or other groceries, it all looks juicy and extremely delicious. We also styled the pattern for the mobile app. It's made up of a lot of circles that intersect and create a braid-like pattern looking like a basket. We used UI best practices and highlighted the active elements in orange. These are our UX best practices that help to guide the user and give them an understanding of the main elements on the screen. We created a tagging system and allocated a separate color for each product category, which allows the user to navigate faster in the search.
Daria: First of all, after receiving the client's basic requirements, goes the UX design discovery phase - research of similar projects and competitors. If we are creating a mobile app, we take into account not only the design of existing mobile apps, but also that of websites and web platforms. In addition to competitive analysis and client requirements, we analyze the target audience and create visual associations.
For instance, in our own company project Donate, we had an auditory concept of the similarity between the words ‘donate’ and ‘donut’, which we later used in the design of the application.
As for a logo, we move from different visual solutions, make it understandable for the user and develop the concept in detail. So we should not just draw a logo without any background, but start from the concept and the main idea of the project and move to the visual images. For example, in Donate, the main visual image is a donut, which we include in various illustrations in a form the user can understand.
Do you consider trends when creating your designs? For example, glassmorphism, neumorphism, gradient. Or do you only focus on a specific project, an idea and the client's requirements?
Denis: Many designers, including me, are skeptical about trends, such as neumorphism, that are emerging now. Currently there is no strong base in the form of a clear concept or development tools for them. As an example, in the early 2000's skeuomorphism was the main trend in interface design. Its main idea was a transfer of real-world objects into a virtual interface. For instance, if we make a button in an interface, it has to look like a real button, if we make a note taking application, we make the background look like a real paper, or if we make a compass application, it has to look like a real compass. This trend appeared due to the technological advances in devices of those years. It became possible to draw shadows, gradients and glares. And it was easier for people to navigate in familiar images and shapes. Over time, the trend began to fade because it was too cluttered for the interface and everyone switched to a more flat design. The essence of all trends in design is that people like the change of the picture in front of them, and that's why the same trends come and go. Dark theme, gradients, 3D icons - it's all been there before. For example, I recently updated macOS to Big Sur (a system announced in 2020) and most of the icons are not flat again. Do I apply such trends in my work? Occasionally yes, but it's not fundamental to the visual style of an app.
As for the color palette, one year pastel colors are trending, and then another year it’s the very bright ones I would recommend not trying to follow all the trends. There is a certain type of design that always looks good. If we take as an example typographic posters from the '60s and '70s and remove the trace of time, it will look like some fashionable, hipster project by a popular designer. Time goes by, but the basics of design don't change. Simplicity of form and lettering are mobile app design best practices. Now the main task of the designer is to change the color every year. For example, all the apps were white, and now let's make them black and say that the dark theme is great using them at night. Or the main color was some kind of pastel, and then a gradient was added to make the app look fresh. People seem to be coming up with something new, but if you dig deeper, you can find the same solutions decades ago.
Daria: From my point of view, the use of trends most often depends on the target audience of an app or a site. For example, if we are making an app for bloggers, of course we can include some design trends to make it more pleasant to use and more exciting to try some new features and animations. If we are creating an app for an audience with less sense of design or for a company with a determined corporate identity, then it will be as clean, native and simple as possible.
Also trends depend on the updates of iOS and Android platforms. As soon as, for example, iOS kits are updated, there are new elements and features as well as changes in the old ones. We keep track of all this and try to incorporate these native things into projects’ design.
You’ve mentioned such things as ‘clean image’, ‘uncluttered, clean design’. What do you personally consider a clean design?
Denis: Designers always walk a fine line between trying to remove everything unnecessary and leaving the design functional. The problem is that if we remove everything from the interface, it won't be an interface anymore, because you won't be able to interact with it, but it will be a very clean design. If we fill the interface with various elements, symbols and small details, it will be functional, but it will also be inconvenient and unpleasant to use because it will be cluttered.
Clean design is one of the mobile ux best practices and is about balance. It comes from the fact that we clearly understand what the user needs on each specific screen, which elements are primary and which are secondary, what the user's attention should be focused on and what can be ignored. We hide some details in the card itself and leave other details in the preview to facilitate the choice. The same goes for the icons on the bottom bar, where we put only the most important app screens. And all the account info and settings we try to put upwards, where a finger can hardly reach and the user will go only when necessary.
Generally speaking, I like Dieter Rams' quote: ‘Good design is as little design as possible’. These mobile design tips help to not get overwhelmed with decorations and make the design easier and cleaner. But there is one nuance. In terms of graphic design, there has to be an interesting detail that will make it real design. If we just write a word on a white canvas, it’s not going to be interesting. But if we add detail to some letter that alludes to that word, that becomes a design. Nowadays you can see that most logos are very simple in form and contain minimum detail. A message is conveyed by as few means as possible, and this is something to be followed.
There is, of course, the flip side of the coin - the simpler the design, the less it is understood by the average user. So you have to consider the target audience. Good design, in my opinion, must both convey a message to the user and look aesthetically beautiful.
Daria: I would also add that there is such an idea as "design for design’s sake", which most often will be understood only by designers. Clean is, first of all, convenient UX and beautiful UI and their compatibility.
If everything is reconciled and aligned, fonts and font sizes are chosen right, color palette and illustrations go together, everything is readable and easy to use, then this, in my view, is clean design.
You've already mentioned ‘the main elements’ in design. What are the main ways you highlight and emphasize them?
Denis: In graphic design, there are a huge number of tools that can be used to draw attention. I try to reduce their number within the same project to make design look more coherent. Lately, the main tool I've been using is color contrast. It allows to separate background from text, or emphasize a button or icon and make it stand out as the active element. If you look at our projects like Getblogger and CartaMe, you won't find any shadows.
I used to think that shadows were the most careful way to highlight an object, but now I realize that shadows clutter and overwhelm a design. I occasionally use a thin outline to mark the boundaries of elements, which looks nicer. I would suggest not cluttering your design with such ways of emphasis.
Daria: There is also another important way of emphasis as the size and shape of fonts. For example, in the project Donate, we’ve used a rounded font in the logo, and adhering to this rule and concept, there are no right angles anywhere. Corners of cards and buttons are also rounded, which makes the main elements stand out and connects them to the concept of the app. Very often the main elements of the UI depend on and are defined by an app's brand identity.
What design elements help the user navigate in the app and make it clear what to do and where to click?
Denis: The first element that helps the user understand what to do is, of course, text. That's the thing that guides the user through screens and helps to understand what's going on and how to interact with it all. The next element is icons. Most often it's a simple illustration of an action. I try to make the screens free from lots of buttons with text and add more understandable icons. When the user is looking at an icon, it should be clear what will happen when they click on it. In addition to this, there are buttons, in which we can apply both text and icons. And I have already mentioned the color emphasis of the main buttons, which should be used. And the last element is illustrations and photos.
Daria: In the case of navigation elements, it is good to use standard solutions and not to make up too much new stuff, as it might confuse users.
For example, the tab bar/menu bar always works well. Every user already knows intuitively that for switching between screens, you need to use the menu at the bottom. Native icons like the More Options icon or holding down the key for deleting helps a lot too. So we can just edit such native features a bit, change the shape and color of the icons. However, we should leave the action that the user is already used to and do not let them get confused and have to learn all functionality of a new application all over.
What elements are used to make mobile apps more engaging and interactive?
Denis: This is where fine-tuning together with app gamification and use of various bonuses begins, in order to make the user visit an app more often. In some projects we create a large number of illustrations that help the user understand quickly what actions are expected from them, and also set the mood for the entire app, making it brighter and more joyful. For instance, in the scooter-sharing app, not only does a boring popup displaying info about a ride appear, but there is also a nice illustration of a boy with a scooter, which looks cool. And for a group ride, the illustration is different - with several people.
Another cool thing was added to the payment screen. It’s a wallet, in which the balance is displayed with illustrations of notes and coins, i.e. if the user adds 5 rubles, a five-ruble note appears in the wallet. The maximum displayed is 50 rubles. It may seem that this detail has no effect on the app and the user experience. But in fact, it affects engagement and encourages the user to drop in different amounts to see how it will be displayed, as well as to find out what the limit of the wallet is.
Our other project, the CartaMe app, has a newsfeed. We borrowed the Instagram recommendation system for it. Offers from stores to which the user is subscribed are displayed first, and then recommendations are generated based on the user's preferences.
We can come up with various engagement triggers to ensure longer usage time for any kind of project. In the UX design discovery phase, we usually use a UX journey map to figure out how to make it more comfortable and what we need to add for more engagement.
Daria: Initially the user finds an app in the App Store/Google Play or with the help of ads. So I think the engagement process starts with splash screens and a logo, which the user has to like in order to proceed with installing the app. If even before the installation the screenshots of the app make it seem nice and convenient, app design has already done its job to a large extent.
To engage the user after they have started to use the app, there should be carefully chosen and visually pleasing illustrations and animations that evoke emotions and make the user look at the screen longer. And of course there should be custom elements that do not repeat from application to application, and personalization (for example, addressing the user by name, unique tips and notifications for a particular user).
In the Donate app we used a tab with user achievements, where, for example, when subscribing to a new project the popup appears ‘wow! you subscribed to the first project. congratulations’, and when donating ‘well done! you donated to the third project’. So the user discovers new achievements, and we support them in it and remind about it in every possible way.
For more personalization, we also use such elements as a quick survey via a chatbot or filling out a small questionnaire. This approach of user study and content customization is used in almost all streaming services (both music - Spotify, and video - Netflix). The settings in the app also usually include many personalization elements: language, voice, notifications, theme (light/dark). For instance, in the player of the Flow meditation app, we've added settings such as music volume, speaker’s gender and voice volume.
Denis:
I would also like to add that in theory the number of features and design elements is unlimited, but it is not always possible to implement what you want. Designers need to have a good understanding of the clients’ needs, their budget and required deadlines, as well as constantly interact with developers. Most of the time I consult our developers about animations and their implementation. They try to fully represent what I created, and I, in return, try to make their work easier and adapt the design as much as possible. That's the secret to a great project.
