Calorie Calculator app

What Is Mobile App Branding?

As usual, let’s start with terminology. In one of our previous articles, we have already defined branding as a set of marketing and psychological techniques and steps to promote a product, service, persona, etc. setting a brand.

In its turn, a brand is an image created with a set of distinguishing features and promoting awareness and recognizability of the product or service on the market, it’s what people think and know about it.

So, mobile app branding is how users will perceive the app interacting with it: its visual image, its communication, and its reputation.

Slumber app

Questions to Consider

Building the brand for your app, first of all, you answer the questions traditional for building up any brand:

• Who is going to use your app and why are they going to use it?
• What is the USP of your app? What makes it unique compared to others?
• What is the look of your app? What is the main message it transfers with its visual symbols like logo, colors, illustrations, mascots, etc.?
• What feelings and emotions does your app wake in its users?
• What is the tone and voice of your app? Is it formal or informal? Does it communicate with a user as a friend, expert, mentor, or someone else?
• How will users get information about your app? What are the channels of communication between the app and the user?

The answers to these questions will allow for forming the general approach that influences all the sides of work on the app design, development, and promotion. Branding will have an impact on user experience logic and transition, colors and typography, graphics and animation, copy, and style. It will define which channels and methods of promotion will set the shortcuts from the app to a user. Therefore, to make mobile branding effective, you have to answer these questions before design and development start. In this case, all the effort will be put in one complex direction and the brand image will be integral and consistent.

For example, here’s the Cuteen app: here the mobile app brand is targeted at teenage girls which determined the solutions on naming, original graphics, and interaction patterns.

Mobile App Branding Strategies

After you’ve defined who is the target audience of the app, what problems it solves, and what message it sends to the world, it’s time to build a brand image step by step. Let’s check some strategies and features essential in this process. For sure, all of them should be based on user research and market exploration to find the original solutions.

Logo and App Icon

One of the core elements of branding is a logo which is a visual symbol representing the brand. There are different types of logos:

• Symbol: an image of a high symbolic potential associated with an app brand name, functionality, or area of usage
• Logotype (Wordmark): artistic lettering featuring the full name of the brand
• Lettermark: the first letter of the brand name presented in an artistic manner
• Combination mark: two techniques used simultaneously – symbol/lettermark and wordmark
• Emblem: it inscribes the wordmark or lettermark presenting the name of the brand into the symbolic image.

Logo animation and app icon for Uplyfe mobile application

Talking about mobile apps, the important thing to think about is the correlation of the logo with an app icon. An app icon is an interactive brand sign that presents the application on different platforms supporting the original identity. In most cases, it features the logo of the app designed according to the requirements for this kind of icon. As an app icon is placed on a very limited amount of space, big wordmark or complex emblem logos can’t be used effectively. So, app icons tend to feature symbols or lettermarks.

However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. Another approach may be used for the apps presenting well-known brands with already recognizable logos: in this case, designers will have to adapt the well-known logo image to the form of an app icon while inside the app they will use its full form, for example, on a splash screen. Here’s a splash screen for Toonie, featuring app mascot and a logo wordmark.

Keywords

One more good way to make the branding consistent is by making a set of keywords for it. They can be divided into several groups according to their role.

Descriptor keywords will identify and describe your brand, so all the participants of the creative process will understand what image the app has to get and what message it has to send. These keywords define the core features users should catch immediately from the looks and interactions. For example, in this set you may define the app as “funny, entertaining, bright”, or “helpful, simple, minimalist”, or “business, luxury, exclusive” and so on, and so forth.

Brand keywords present the set of words people will use to find your app. It’s not only the original name but also different variants of its extension as well as typos. For example, in the case of our Upper application, the list will include Upper, Upper App, Upper to-do app, Upper mobile app, Uper, UPPER, and so on. This list will be helpful for SEO issues and promotional campaigns if you plan any.

Brand-Plus keywords are the combinations of a brand name with qualifying words or phrases. For example, for our Toonie Alarm app, we have Toonie stickers, Toonie mascot, Toonie tutorial, Toonie special offer, Toonie for iOS, Toonie stickers for iMessenger, Toonie landing page, and the like. They form another collection helpful for both SEO and content creation.

Copy: Name, Slogan, Style

For sure, these points would better be agreed upon before the actual creative process of design and development. The thing is that naming in terms of strong competition is another big challenge and it has a huge impact on all the following solutions about design, marketing, and communication with users. Except for deciding on the name which you find reflecting the benefits of the brand and memorable, you will need to ensure about:

• availability of this name in AppStore and PlayMarket (if it’s not available, you’ll have to find the variants which may belong to your brand and brand-plus keywords or start from zero and find another name)
• a domain name for a website or landing page you will have for the app (in case, the app is an independent product rather than the supporter for an existing brand)
• presence of the app name on the Internet (there may be other non-app brands already using this name and hard to compete with).

Moreover, the name of the app will influence the general stylistic concept, choice of colors, ideas for a logo and mascots, design of app icons, and many other things. So, if you make a decision at the start, you will save many hours of redesign later. Still, this path is just a recommendation, not a cure-all: there are many good examples when apps are renamed right in the process of creation or even after the launch successfully, but in this case, you should be ready for additional working hours and some effort on remaking other assets.

One more point in this section is the slogan, a catchy brand tagline sending the message about core app benefits to the user. In branding for a mobile app, it may seem not crucial as sometimes there is no place within the app for much copy. However, try thinking beyond the app itself: you’ll definitely need a slogan for outer channels to promote the app. It may be used in social networks, promo videos, reviews, landing pages, emails, etc.

And another thing to think about is UX-writing and copywriting style for the app. Copy sets the tone and voice of communication and sets the type of relations with a user. So, it’s vital to reach an understanding of how the app will talk to the users and keep this style across all the channels within and out of the app. Some minor changes are acceptable for various channels but the general communication should feel consistent from one point to the other.

Graphics

Developing a strong app brand, it’s vital to give it the pinch of originality even if it sells something very basic and widely-spread. Custom graphics play the premier violin here. They will make the app unique attracting users’ attention. Don’t forget that aesthetic satisfaction is one of the strongest factors of desirability.

In this aspect, consider using the following graphic content:

• logo (described above)
• mascots (symbolic memorable characters communicating to a user on behalf of the app)
• custom illustrations (visual prompts on functions and processes, theme illustrations)
• branded interactive elements (loaders, splash screens, tutorials, etc.)
• photos (not only inside the app but also high-quality photos of the app for its promotion)

Loading animation with custom graphics for Event Planner app

Product Video

Video content is more and more popular today, in the era of YouTube and Snapchat. The branding for the mobile app is not an exception. A product or explainer video is a short animated presentation of app features and advantages, informs about special steps of interactions and shows its problem-solving potential. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually does it in a way of telling a story. For example, here’s an explainer video we made for OffCents mobile app.

Personalization and Onboarding

User onboarding is the set of techniques and interactions whose objective is to comfort users and give the first concise introduction to the product. There may be textual prompts, tooltips, tutorials  – and all of them can carry the slight signs of branding in both copy and graphics. All these details shape the positive user experience and support brand loyalty with happy users.

Personalization is a users’ ability to customize some features and interactions according to the individual users’ needs. Among the examples, recently we shared a case study on Recipe App which enables users to set personal goals and exclude the unwanted types of food or ingredients to customize their list of recipes.

Another example is Upper App which enables users to choose among various skins to make the app looks correspond to their preferences.

Gamification

Gamification applies game mechanics into the non-game environment, in particular, mobile applications. Challenges, badges, leaderboards, bonuses are effective methods of user motivation. Applying graphics in brand stylistics, they support brand awareness and make the app interface easily recognized. Even more, such virtual or even real rewards encourage users to share their success with friends both online and offline – this way, they become another channel distributing information about the app and witnessing positive user experience.

Help and Support

No man can make a good coat with the bad cloth. Real branding is not only about attracting attention and making an incredible first impression. It’s about all the experience users will have. So, take care of how they will the support they need at any step of interaction, especially in the case of complex mobile products like social networks or e-commerce.

Landing Pages

Landing page is a tool of great importance for building the mobile app branding and online presence. It plays a crucial role if the case is mobile-only and the app doesn’t correlate with a website. In general, it is a web page designed with a focus on specific relatively narrow goal and a quick way of accomplishing a particular action. So, for a mobile app, the goal will be app installation and the landing page will concisely cover its benefits and functions. What’s more, you can create multiple landing pages for one app based on various segments of the target audience with geographic, gender, psychographic, demographic and behavioral targeting. It is an effective way to reach users and give them a quick presentation of the app which will tell them more than just screenshots on the AppStore. Here’s the example of a landing page designed for a dating mobile service.

Landing page for a dating app

Mobile banking app landing page

Landing page for Vertt, car sharing service app

Social Networks

One more channel supporting branding strategy for a mobile app is social networks. Promotional campaigns, reviews and public pages for the apps should not be seen only as a direct sales channel from which users will directly install the app. Social networks are first of all the big channels of brand awareness and brand recognizability so don’t neglect their influence.

Brand Ambassadors and Opinion Leaders

This strategy for mobile app branding is also based on socializing. There’s still no better advertising than the recommendation from people whom you trust. Social networks with their huge and diverse audience form the growing trend of marketing with opinion leaders (individuals or businesses that are able to influence public opinion in their area) and brand ambassadors (an influential person hired to present the brand and build its positive image and strong awareness). Choosing this direction, remember two things:

• opinion leaders mostly care about their audience and reputation so they won’t promote what they don’t like or don’t find good for their audience, even rejecting profitable offers
• opinion leaders and brand ambassadors will waste your money if the product is half-baked. You may get the big traffic from the campaign and attract many users but if they get something with numerous bugs or lorem ipsum here and there instead of real copy, it will have a bad influence on the brand image in general. Positive experience first. Presentation and promotion after it.

Tasty Burger app

So, it’s easy to see that making mobile app branding deals both with app UI/UX and outer channels of reaching users. Neglecting one of the directions you risk failing another. Greatly designed and developed app will die unknown if target users don’t get the information about it. Amazing and well-performed marketing campaigns will waste your money if the app is trash. Only together they will build up a strong app with a loyal audience.

Useful Reading

6 Creative Stages of Branding Design

Mobile App Design: Big Guide into Types of Mobile Applications

UX Design for E-Commerce: Principles and Strategies

Relations of Branding and UI Design

Business-Oriented Design. Explore the Target

Design for Business: User Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

Originally written for Tubik Blog

Сообщение How To Build a Strong Mobile App Brand появились сначала на Design4Users.

Project

User interface and interaction design for an iOS application tracking plant watering.

Process

Have you ever forgotten to water plants at home? Being busy with hundreds of tasks, we sometimes miss very basic things and then regret not doing them on time. With pieces of nature, the effect may be even more crucial as they can get sick or even die without proper care. The task for the interface concept of a mobile app was aimed at helping users having plants at homes or offices: first of all, it had to remind users of watering when it’s needed as well as keep the data about watering.

As we mentioned in diverse articles devoted to UX design, high-quality user interfaces should harmonically satisfy four basic aspects:

• usability: the app is convenient, clear, logical and easy to use
• utility: the app provides useful content and solves users’ problems
• accessibility: the app is convenient for different categories of users
• desirability: the app is attractive and problem-solving, it retains users and creates a positive experience which they are ready to repeat.

Based on that, Tubik designer Anton Morozov under art-direction by Ernest Asanov set the goal to make the application not only problem-solving but also informative to broaden its utility. Also, the appearance of the app was an object of thorough attention: as that was definitely the app for daily use, why wouldn’t designers add a pinch of elegance and sophistication to grow desirability and aesthetic satisfaction?

After the flow of UX wireframing, the designer planned the following set of basic functionality for the app:

• adding plants to the app
• reminders and notifications about watering
• getting information and recommendations about conditions and care for particular kinds of plants
• tracking stats of watering and plans for next week.

Let’s check how the layout was designed and what flows of interactions were planned for the mentioned goals.

Adding items to the app, a user gets his/her own directory of the plants which need to be watered now and then. The left screen on the picture below shows the collection of items that were added by the user: it is shown as a set of tabs. The title above the tab gives the name of the plant while on the tab users can instantly see the notification when the next watering is expected for this position. The icon of drops in the top right corner of the tab helps to set the visual association with water and informs a user that the plant on this tab will need watering soon. In contrast, the lowest tab on the presented screen shows the icon of a tick which means that this item has been recently watered.

This way of data organization lets the user quickly scan the state of things right from this screen if there’s no time or need to move to the screens of every particular plant. The background of each tab features an easily recognizable photo of a natural object. And to add a new item, users need just to take a photo, as it’s seen on the right screen below.

The tab bar is highly functional and simple: it includes three most demanded zones of interactions. “My Plants” opens the directory of the ones tracked for watering, “Add New” allows to create a new item and “My Profile” goes to all the history and stats data.

Adding a plant takes just short seconds. When a user has taken a photo with a smartphone camera, the application recognizes it and offers the data from the app catalog of plants: it includes the name, the background picture and the data of care conditions like temperature, humidity and light rates comfortable for this type. The user may add it to his/her set of tracked plants and it will get seen on the screen with the user’s collection. In case there is no data about a particular plant in the app database, the user can create a new item and add it to the app catalog. This approach has two big benefits: firstly, it will strengthen the app with the ability to add user-generated content; secondly, it will inform app creators and support which types of objects have to enlarge the original app database.

Here’s the animation showing the interactions described above.

Now let’s look into some details of watering tracking itself. When the date comes, the user gets a notification that the item needs to be watered. Opening the screen of that plant, users see:

• the name and the background picture of the plant in the upper part of the screen,
• the interactive zone with the tabs of other plants ready for watering,
• the contrast light tab in the lower part of the screen including information about the plant which can be pulled up to open.

The interactive zone with the tabs of other plants ready for the watering can also be extended. In this case, it opens the graph showing the progress – aka watering workload – for the current week. This zone is presented on the dark background which makes the graph look stylish and deep and also sets the good level of contrast with the information tab below presented on the light background. The information tab is grounded on light and airy solution: in combination with bold sans-serif fonts in the interface, it provides a high readability level and contributes much to the effective visual hierarchy of the layout.

When the plant is watered, the user just needs to tap on the icon with drops and it will transform into a tick.

Slight unobtrusive animation makes the interactions live and enhances the general usability of the user interface.

Working on the concept of mobile user interface aimed at solving simple but everlasting problems of everyday life, the designer made the screens informative, efficient, and stylish. First of all, the app of this kind could be helpful at home, taking over the responsibility of a reminder and tracker. Moreover, it could effectively help workers of the offices, public and private gardens or parks, landscape firms, and services – all those who are in charge of taking care of plants and supporting the beauty of nature around us.

Recommended Reading

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

Slumber. Mobile UI Design for Healthy Sleeping
Letter Bounce. UI Design for Mobile Game
Real Racing. UX and UI Design for Mobile Game
Manuva. UI/UX Design for Gym Fitness App
Cuteen. UI/UX Design for Mobile Photo Editor
Tasty Burger.UI Design for Food Ordering App
Home Budget App. UI for Finance
Upper App. UI Design for To-Do List
Health Care App. UI for Doctors
Toonie Alarm. Mobile App UI Design

Originally written for Tubik Blog

Сообщение Design Case Study: Watering Tracker. Mobile UI for Home появились сначала на Design4Users.

What is information architecture in UX?

Information architecture in design can be defined as a science of structuring content of the websites, web and mobile applications, and social media software. The science aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. This way you can form a skeleton of a layout ensuring the sufficient user experience. Information architecture is a guarantee of a high-quality product since it reduces the possibility of usability and navigation problems. IA skills are essential for professional designers since UX and information architecture go hand in hand on the way to create a user-friendly product with a clear navigation system.

Keep product goals in mind

Definition of product goals is a core stage that influences every team working on the project, be it developers or designers. So, before you start building the website information structure, you need to learn what your client expects from the website or mobile application. To achieve the product vision and see the whole picture, the product goals should be established. They should respond to the product strategy, be understandable to all the members of the creative team, and achievable. Awareness of the goals gives a clear idea of what the tasks are and where to start. When the goals are set, designers can agree on the content elements and the purposes with the clients so that they could avoid possible misunderstandings resulting in additional work hours in the future.

Conduct user research

IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. To learn more about potential users, designers are recommended to conduct user research. It’s a process of collecting information about the consumers of the product via various techniques. When the data is gathered, the design team analyzes it and works on the optimal solutions which will make the product user-friendly and attractive.

User research helps to dive deep into the details of the core target audience to understand their needs and psychological peculiarities. Considering the preferences of the users, designers are capable of creating a user-friendly product that will stand out from the crowd and draw potential customer’s attention.

Consider cognitive psychology principles

To comprehend the nature of the visual perception and the factors affecting users’ attention, designers learn the сognitive psychology principles. It is the science studying information processing that goes inside people’s minds. Cognitive psychology experts state that there are various ways of data perception and different factors influencing people’s attention.

Based on cognitive psychology studies and principles, designers developed many techniques helping to create powerful content. In article Psychology in Design, we described some effective psychological principles often applied in design including Gestalt principles and recognition patterns. The former theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups according to their similarity, continuation, or closure. Speaking of recognition patterns, people visiting a website or using an application are expecting to see certain features associated with the definite kind of product. That’s why designers apply various recognition patterns to help users be oriented in the structure.

Plan the navigation system

Information structure and navigation are two essential components of any digital product. In one of our UX Glossary articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfil their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through content.

Navigation of a digital product is based on the information architecture, so it’s vital to make sure it reflects and supports IA, otherwise the product may be unsolid. Therefore, designers are recommended to plan the navigation system while creating the information architecture of the product.

Don’t forget about visual hierarchy

To organize and prioritize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. Its main goal is to present the content on the carrier, be it a book page or poster, web page, or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment, etc. This allows users to see where the needed information is so that they could navigate easily.

Visual hierarchy plays a significant role in the visual performance and readability of the copy content in digital products. Giving tips on applying copy content in UI, we distinguished core aspects helping to build powerful visual hierarchy. One of the essential points to consider for designers is scanning patterns. Lots of studies have shown that before reading a web page people scan it to get a sense of interest. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, the UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns. Detailed information about scanning patterns you can find here.

Knowing the principles of visual hierarchy, designers can create effective information architecture placing the key components of the content on the most scanned spots making users take expected actions.

Things to consider

The science of information architecture may seem too complicated and demand much efforts but when you learn its basics and start applying them in design projects, you see how useful it is. Summing up the set of Tubik articles devoted to this theme, we’d like to single out a few main points.

• IA forms a skeleton of any design project for a digital product. Visual elements, functionality, interactions, and navigation are built according to the information architecture principles.
• Powerful IA is a guarantee of a high-quality product since it reduces possible problems of poor usability and navigation.
• Good information architecture is a foundation for efficient user experience.
• Information architecture is like a blueprint of the layout which needs to be generated by a visual scheme like a wireframe.
• Defining product goals is a core stage before IA creation.
• User research and cognitive psychology principles assist in predicting possible users’ reactions to the product and creating a user-friendly outcome.
• Clear visual hierarchy plays a significant role in the visual performance of the content.

Useful reading

Basics of Information Architecture for Designers

Information Architecture: Techniques for Designers

UI Design: How to Choose Between Light and Dark Theme

Best Practices on Effective Visual Hierarchy

Feel at Home. Tips on Effective Home Page Design

Originally written for Tubik Blog

Сообщение How to Apply Information Architecture in UX: Tips for Designers появились сначала на Design4Users.

No matter how challenging it sounds, designers strive to build effective mobile design because smartphones are a huge part of our life. The article describes essential principles for compelling mobile typography.

High level of legibility

Legibility is called a level of how distinguishable and recognizable the words and characters are in a text. The major objective of powerful typography is clear text which users perceive without efforts. Small screens and ambient light of mobile devices may become a problem on the way to creating legible typography. To avoid problems with legibility, designers need to consider all the factors influencing clarity of text.

Font size

In terms of mobile typography, the size does really matter. Some may think that on small screens tiny fonts will work best. It’s a misbelief. Small fonts on a bright mobile screen can make user’s eyes hurt from tension and bring a headache. Of course, modern devices allow screen zooming still it’s not always convenient for users to spare an unnecessary effort. Fonts in mobile UI should be big enough for users to read easily but not too big to save typographic hierarchy. The appropriate font size is a key to pleasing UX.

Leading

As we’ve mentioned in our previous article, leading is the spacing between the baselines of copy. In a mobile interface, leading is usually smaller compared to a desktop version. Wide leading may ruin the visual unity of text while too short space makes it badly legible. If a leading is done right, readers go fast from one text line to another and big pieces of copy become legible.

To-Do List App

Line length

To make body copy comfortable for reading in mobile interface, designers consider all the parameters including length of text lines. Optimal line length for a desktop screen won’t work same for mobile. Too long lines would go beyond screen borders, that is why designers are recommended to keep the number of character per line within 30-40.

White space

When design elements are tightly gathered in a bunch, the user interface looks messy and navigation is rather difficult. Designers need to give elements space to breathe bringing a relief to users’ eyes and mind. The size of mobile screens doesn’t allow using much of white space that’s why a balance between the elements has to be found.

Wine Year App

Fewer levels of hierarchy

Visual hierarchy is applied to organize content in interfaces clearly so that users could distinguish layout objects on the basis of their physical differences, such as size, color, contrast, alignment etc. Hierarchy divides content into levels assisting users to learn copy content gradually step by step without effort and get oriented in the digital product.

Web design usually contains three levels of copy content which include such elements as headings, subheaders, body copy, CTA buttons, and captions. However, small mobile screens don’t provide enough space for three levels, so designers apply only two. Elements of a secondary level such as subheaders step aside to make UI look clean.

Moneywise App

Simplicity of fonts

A key feature of effective mobile UI is simplicity. Design should be clear and the navigation easy to use, so font choices have to be based on the requirements. First of all, it is recommended to keep a number of fonts within two or three to make text look solid. Designers often stop their choice on two types of fonts for mobile interfaces because it requires fewer levels of hierarchy than web design.

Moreover, kinds of fonts should also fit a simple and clean style. Novelty and decorative fonts may look illegible on small screens. Designers regularly combine a serif and sans-serif fonts to create enough contrast of copy elements in the layout. In addition, it’s good to reduce effects like a shadow for mobile fonts. On desktop screens, they may work nice but will make small mobile screens look overloaded.

Book Swap Interactions

Delicate contrast

Contrast is an efficient tool for designers. It helps highlight vital UI elements as well as contribute a desirable level of text legibility. However, speaking of mobile interfaces, contrast may play a bad joke. Small screens, ambient light, and short fonts make a contrast image look unpleasant for users’ eyes. Reducing contrast between the background and copy elements, designers help users feel comfortable while reading text on a mobile screen.

Contrast can be created not only via colors but with sizes of fonts to set visual hierarchy. Nevertheless, mobile interfaces are short of space for giant headings, that’s why size contrast should be also reduced.

Jewellery E-Commerce App

Responsive typography

People surf the Internet via all devices available today. That’s why responsive design is a key condition for a successful digital product. Typography is a vital part of design responsiveness. Wrong size, width, and placement of fonts have a big impact on a whole composition. Even the most insignificant changes may break the balance between all design elements.

Creating typography for a digital product, designers need to consider how it will look on different devices. Planning such things forehead helps to avoid unnecessary problems in the future.

Cinema App

Prioritized content

To make mobile interfaces simple and useful, designers need to take care of the wise content organization. Users want to have a fast access to information they are looking for and mobile screens can make the process complicated.

Mobile UI has no room for unnecessary copy elements. There should be only essential content thoughtfully prioritized. Based on users’ needs and preferences, designers set a structure assisting people to navigate within the product and find what they are searching for. Text elements are prioritized by size changes as well as different width or kind of font.

Book App

Clear text rags

Depending on the type of a product, designers apply appropriate alignment for text blocks. It can be placed on the left, on the right, centrally or it can be justified. However, speaking of mobile design many experts often stop their choice on left side alignment. This kind forms text where the beginning of each line is placed equally and the rags look similar to stairways. Such a structure helps users easily go from one text line to another and scan text fast and easily. If body copy alignment is justified (text lines placed equally), it has no rags either side. The text with such structure is difficult to scan on a mobile screen.

Healthy Food App

Functional typography

While computer users do the clicks and scrolling to interact with products, mobile screens should provide much more functionality. There are many text elements in mobile interfaces that allow users to accomplish certain actions like buying a product, making a call, going to a website and others.

Designers need to make sure users understand how the text elements work and enable them to complete the actions. Functional typography should be highlighted among the other and clickable elements should be big enough to tap on them.

Menu Interactions

Things to jot down

• Minimalism. Mobile screens are short of space, so try not to overload it. Simple fonts, clean style, and a minimum of elements will do their job.
• Test the smallest first. Mobile devices have various sizes but the biggest problem is the smallest. Create your design based on how it will look on the tiny screens first. When it’s ready, you can easily adapt it to the bigger sizes.
• Avoid decorative and cursive fonts. They don’t render properly on the small screens. Moreover, decorative fonts overload interface with unnecessary details.
• Legibility first. Of course, it’s good to make beautiful catchy UI but sometimes all the colors, contrast, original fonts may hurt the legibility of copy content. A good-looking text is not enough. Make sure it is legible otherwise users won’t be able to read information and use your product properly.

Jewellery App

Every mobile UI design project is an interesting challenge. Meet it with the knowledge and the results will please you.

Recommended reading

Meaningful Mobile Typography by UXPin group

Mobile UI Design: 15 Basic Types of Screens.

7 Simple Rules for Mobile Typography

Typography in UI: Guide for Beginners

Originally written for Tubik Blog

Сообщение Mobile Typography: 8 Practices for Powerful UI появились сначала на Design4Users.

In the book “The More of Less”, Joshua Becker said: “You don’t need more space. You need less stuff.” Minimalism is often discussed nowadays in different spheres of life and work, and diverse directions of design are not the exception. Let’s see what are its benefits and points to consider.

What is minimalism?

Actually, minimalism is a word of broad meaning used in various spheres of human activity. Merriam-Webster dictionary defines it as “a style or technique (as in music, literature, or design) that is characterized by extreme spareness and simplicity”. Being applied to more and more fields, it saves its core traits: meaningful and simple.

Minimalism as a direction of visual design got especially popular in the 1960s in New York when new and older artists moved toward geometric abstraction in painting and sculpture. The movement found its impression in the artworks associated with Bauhaus, De Stijl, Constructivism and so on. In diverse spheres of visual arts, key principle of minimalism was leaving only essential part of features to focus the recipient’s attention as well as support general elegance. Lines, shapes, dots, colors, spare space, composition – everything should serve its function being thoughtfully organized. Today we can meet minimalism in a variety of life spheres: architecture, arts, photography, all kinds of design, literature, music and even food presentation.

“A shape, a volume, a color, a surface is something itself. It shouldn’t be concealed as part of a fairly different whole. The shapes and materials shouldn’t be altered by their context”, said Donald Judd, an American artist associated with minimalism. Working in this style, designers seek to make the interfaces simple but not empty, stylish but not overloaded. They tend to use negative space, bold color and font combinations, and multifunctional details making the simplicity elegant. The line dividing simple and primitive is very thin. That is why not all the designers take the risk of trying this direction: some may think it looks too decent, the others don’t find enough ways to show much with fewer elements.

Architecture Blog

Characteristics of minimalism

Main features of minimalism often mentioned by designers include:

• Simplicity
• Clarity
• Expressive visual hierarchy
• High attention to proportions and composition
• Functionality of every element
• Big amount of spare space
• High attention ratio to core details
• Typography as a significant design element
• Eliminating non-functional decorative elements

Surely, the list can be continued but even the given positions show that minimalism in UI sounds like user-friendly trend. Applied wisely, it helps users to see the core elements of the interface and makes user journey intuitive and purposeful. Moreover, minimalist interfaces usually look sophisticated and uncluttered bringing aesthetic satisfaction as one of the factors of desirability in UX.

Dance Academy landing page

Practices of minimalism in digital design

Today minimalism is one of the wide-spread trends in the design of websites and mobile applications. Main points to consider can be described in the following practices.

Flat design

As we mentioned in one of our previous articles, flat design became a great supporter of minimalism in modern digital products. The most prominent feature of this direction is applying flat 2-dimensional visual details as the opposite of highly realistic and detailed skeuomorphic images. Flat images usually use fewer elements and curves, avoid highlights, shadows, gradients, or textures. This approach allows creating images, buttons, icons, and illustrations which look neat in different resolutions and sizes. It lets designers enhance usability and visual harmony of user interfaces.

However, the terms “flat” and “minimalist” shouldn’t replace each other which often happens today. They are not the same. “Flat” deals with the style of icons, illustration, buttons, and other visual elements of the interface in the aspect of gradients, textures, shadows, etc. “Minimalist” has a much broader meaning and deals with the layout in general, its composition, color palette, contrast and all the techniques of visual performance applied to it. So, flat can be described as one of the design techniques applied in the minimalist approach to creating interfaces.

Cafe Coupon App

Monochrome or limited color palette

Color is a feature of great potential in the design of interfaces as it can set both informative and emotional links between the product and the user. Designers working in minimalism tend to take the maximum from color choices, and in most cases, they limit the color palette to monochrome or minimal set of colors. This strengthens the chosen colors and doesn’t distract users with too much variety. Such an approach is efficient in interfaces concentrating users’ attention on particular actions like buying, subscribing, donating, starting to use, etc. Moreover, from the psychological perspective, the colors usually transfer particular associations and emotions perceived by users, so limited palette makes chosen colors stronger in this aspect.

Slopes Website

Bold and expressive typography

Typography in minimalistic design is seen as one of the core visual elements of not only informing users about the content but also setting the style and enhancing visual performance. Choosing the way of concise use for graphics, designers usually pay much attention to the choice of typography and never hurry in testing the pairs, sizes and combinations. As well as color, fonts and typefaces are seen as a strong graphic element contributing to general elegance and the emotional message it sends. On the other hand, readability and legibility do not lose their leading positions in the matter of choice.

Upper App

Choice limitation

One of the strong sides of minimalism in interfaces is enhanced user concentration. Being focused on functionality and simplicity, the pages and screens of this kind don’t usually overload users attention with decorative elements, shades, colors, details, motion, so in this way, they support high attention ratio and often let users quickly solve their problems and navigate through the website or app.

Birds of Paradise Encyclopedia

Prominent theme visual elements

Working on minimalist UI, designers do not apply many images, but those which are chosen to be used are really prominent, catchy and informative. This approach results in the long and thorough search of the “right” image which would cover all those functions and set the required mood instantly. The photo or illustration itself has to follow the principles of minimalism, otherwise, the choice of the wrong image can ruin all the layout integrity.

Architecture Firm

Concise and intuitive navigation

Navigation in minimalist interfaces presents another challenge: designers have to prioritize the elements rigorously in order to show only the elements of the highest importance. There are different techniques to hide the part of navigation, but doing this, it’s vital to ensure that users will find what they need easily. That is one of the reasons why minimalist approach can be criticized: not being presented properly and tested enough, solutions like hamburger menus and hidden layout elements can leave some users lost in the journey around the website. Obviously, it is not the good ground for positive user experience, therefore every solution about navigation should follow the philosophy “measure thrice and cut once”.

Adding air and using negative space

White space (also called negative) in digital design is the term which is more about space rather than color. In minimalism, it is one more effective way of adding elegance and marking out the core elements. Also, in terms of monochromatic or limited color palette, white or negative space plays a big role in creating enough contrast and supporting legibility.

Ice Website

Grids

Grid system in minimalist interfaces can be effective for making the layout look highly-organized, especially if the website presents a lot of homogenous content. Another benefit is that grids are responsive-friendly.

The Big Landscape

Contrast

Following the philosophy of limits and simplicity, minimalism depends much on contrast as a tool of good visual performance. The choice of colors, shapes and placement are often based on the contrast as the key feature.

Bjorn Website

Well, it’s easy to see that minimalism has a great number of benefits and presents a good approach to creating user-friendly interfaces. However, it doesn’t mean that minimalism should be applied everywhere: every goal should be achieved by the proper means. One thing is for sure: the more minimalistic is the interface, the more time and effort the designer should invest to make it clear and functional. Elegance and beauty of minimalism should support the global aim of providing positive user experience.

Recommended reading

The Characteristics of Minimalism in Web Design

The How and Why of Minimalism

6 Steps to Perfecting Minimalism in Web Design

Functional Minimalism for Web Design

Originally written for Tubik Blog

Сообщение Lean and Mean: Power of Minimalism in UI Design появились сначала на Design4Users.

Task

Redesign of UI for the mobile application for local user-to-user e-commerce.

Tools

Sketch, Adobe After Effects, Adobe Illustrator

Process

User Interface

To remind those who have missed our previous case study, Saily is a local community app allowing neighbors to buy and sell their used stuff. Although it is a sort of e-commerce app, it includes a strong feature of communication between users. One of the essential accents brought out by the Saily App team puts a deep focus on design and culture at the core of everything they do. User interface redesign of the app, accomplished by Tubik Studio designer Tamara, according to the client’s vision of the product needed to have a fun and entertaining feel and look. Bearing it in mind and setting the task to make the product trendy, clear, and easy-to-use, the designer created the new image for the Saily App, which presented a new visual concept and featured new functional points the clients wanted to add to the user experience.

Tubik Studio designer working on Saily App screens

In the process of research and analysis of the existing general concept of layout and transitions, the designer concentrated on UI solution which put bright accents at the most important features and provided fast and easy microinteractions. E-commerce is the process that a user needs to feel as clear and fast; in addition, the features should be informative and easily recognizable for quite a diverse target audience.

So, UI design points that must be thought out were the following:

• easily understandable layout and navigation
• recognizable icons
• graphic elements not creating an unnecessary distraction from the main points
• the process of inputting the data about the item, as simple and user-friendly as possible
• interface elements showing data about the item not looking overloaded but containing all the necessary information
• efficient communication available from any point of the application
• funny and entertaining graphic elements, all harmoniously supporting the same style concept and preferably original to create additional recognizability for the app.

The general stylistic concept, which was chosen to support the idea of a funny and uptown interface which should at the same time be informative and useful, moved around the light background and a lot of bright accents in navigation and notification elements of the interface. As it’s easy to see from the grand list above, due to this decision, the screens get a lot of air, and light background promotes good readability, which is essential in the case of an e-commerce app. Moreover, a light background gives an efficient field of presentation for any kind of item brought out to sales.

The search followed two directions: the search of the actual items and the search along with the requests that were made by other users. In requests, users left the information about the desired item. Also, the user could save the history of their own requests. Requests made by users gave the additional channel of easy matching sellers and buyers, letting them know what is actually on-demand at the time. Moreover, requests could be filtered by location, making the process of matching the buyer and the desired item even more efficient. The search field was hidden in the process of reviewing the content so as not to distract the user and open more space.

One of the decisions made to add some interesting visual features was the color highlighting of the content photos to make them look interesting and attract the user’s attention. Colors were used to visually support navigation via color-coding, creating conventions and increasing the level of usability. Categories in the navigation were represented with background photos and original icons.

All the icons for the app were unique and customized so that they could create harmony of visual perception with all the other graphic elements and, at the same time, add to the general originality of the visual design of the screens.

The tab bar includes the basic navigation elements enabling the user to activate feed, search, communication features, and add a new item or request.

All the items, as you can see, were organized along the cards. The card of the item showed all the necessary information about the thing for sale and enabled the potential buyer to connect with the seller at once. To visually present the item that users wanted to sell, they could upload and customize one to four photos, which the user could add from his/her own device gallery or take a photo right out of the app screen. The sharing function was transferred to a separate screen so as not to overload the card.

One more functional side of the application to mention is the features of chatting and planning. As the app is positioned as a highly social, simple and usable chatting feature was seen among the essentials and organized along the standard and common scheme of native chats without too much experimenting so that even the users without the frequent experience of communication via digital channels could feel comfortable with this chat.

Planning functionality was realized via “meetings” feature, which enabled a user to fix the time and day of meeting with the seller/buyer in the app calendar and see this information at the card of the item. In the “meetings” mode, the image of the item got smaller and moved to the field of the item description, while the bigger image featured the image of the meeting place and data.

So, the user’s feed could switch to three different modes and show the chats, meetings, and requests. In the own card of an item, the seller could also change the different status of the item to inform the users who could potentially get interested in it. Also, the application enabled the user to add some items to favorites so as not to lose their trace in the great bulk of items.

The user’s profile showed basic information like name, location, followers/following and also activation of the chatting function as one of the basics. The preview of the item card included the photo, the main description with the category color code, the price, and ability to add it to favorites right from the preview.

All UI solutions obtained via numerous discussions and iterations turned around the high level of usability and efficiency, which should be supported with all the visual elements available on the screen.

Illustrations

In the previous case study, we mentioned the Saily brand mascot, which is a funny little ghost having its own legend. The logo created for the brand by Tubik Studio designer Arthur Avakyan was just the start of the branding process, which continued with the next step of branding in UI design.

The mascot, as well as the other funny and user-friendly characters, were used in numerous funny illustrations, which presenting a sort of entertaining element, at the same time, became the tool of informing the user about the issues or problems demanding attention.

Also, the team of UI designer Tamara, illustrator Arthur, and motion designer Kirill created several animations that livened up the screens, supported a general cool style, and at the same time had the functions of informing the user about the state of processes such as pull-to-refresh animations or loaders.

Enable location animated screen

Enable notification animated screen

Pull down to refresh animation

Search Screen Animation

So, the Saily App project became a great and bright challenge for designers to make a trendy, funny, and attractive but highly efficient and informative application with a user interface aimed at a wide and diverse target audience and having a strong element of socialization.

Recommended Reading

If you are interested in seeing more practical case studies with creative flows for UI/UX design, here is a set of them.

Slumber. Mobile UI Design for Healthy Sleeping
Letter Bounce. UI Design for Mobile Game
Real Racing. UX and UI Design for Mobile Game
Manuva. UI/UX Design for Gym Fitness App
Cuteen. UI/UX Design for Mobile Photo Editor
Tasty Burger.UI Design for Food Ordering App
Home Budget App. UI for Finance
Upper App. UI Design for To-Do List
Health Care App. UI for Doctors
Toonie Alarm. Mobile App UI Design

Originally written for Tubik Blog

Welcome to read a case study on Saily Logo Design

Сообщение Case Study: Saily App. Designing UI появились сначала на Design4Users.

This time we are going to look closer at the Echo project. You could have seen some stages and elements of this work in Dribbble shots by Sergey Valiukh, the head of the Tubik team. Now it is high time we looked through the project in greater detail.

Tools

Pencil sketching, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Sketch 3.0, Pixate.

Task

The task at hand was very clear and at the same time quite broad: to create the social network enabling users to deal with music on their mobiles and other devices. According to this purpose, there were distinguished the following basic functions:

• To download and synchronize media-files from other online platforms and social networks such as YouTube, SoundCloud, Spotify, etc.
• To upload the files from the desktop library of media files
• To generate playlists in a fast and easy way
• To organize the stream in the image and manner of a radio station.

The author also considered the additional functions, one of which was to enable the simultaneous general streaming from several different devices, for example, when people gather at the party or anywhere they want to listen to music together.

Working on the task, the designer had to take into account two important pre-conditions:
– High level of competition as there are a lot of already promoted and popular music services on the web and app sphere
– The maximum possible level of adaptability and responsiveness of all the versions of the application that was expected to be used on all possible kinds of gadgets. It was vital to provide 100% adaptability of all the features in order to maintain a high usability level.

Process

User Experience (UX)

Music is an integral part of human life, but at the same time, that is not the sphere where people would like to make any additional efforts. For most listeners in most cases music is where a person relaxes or, vice versa gets energy — not the place for hard work demanding elaborate skills. The wider is the target audience of the music service, the simpler and clearer it should be. Everything the user needs here is clear navigation and fast work. However, considering the number of competitors in this market, it’s necessary to think also about something original in design so that the service can stand out from the crowd.

Taking all these issues into account, the designer started the work on the site from the research of existing products and creating the concept of user experience. The decision was made to begin with designing the mobile version which was supposed to be more widely used and simpler for the target users. The next stage of design was going to provide the implementation of the mobile version into the web.

Working out the screens

On the basis of the review and analysis of existing social networks, the following screens were planned:
– Launcher screens (educational steps animation)
– Sign-in screen (including login, registration, password recovery)
– User main screen (feed, profile, stream creation, audio files addition, search, slide menu)
– Screen of settings and editing profile

Let’s look into details of all the screens mentioned.

Launcher screens (educational steps animation)/ Sign-in screen (including login, registration, password recovery)

Launch of the application started with the slides which were animating while scrolling and the user got the basic description of the service. After the last slide the sign-up/sign-in screen appeared with the basic set of standard operations (e-mail — password — password recovery). The service was integrated into all widely used social networks so it provided direct logging in with the profiles on Facebook, Twitter, Google+, and so on. After registration, the application made it possible to link up all the user’s accounts in social networks to share the streams and see the friends’ streams. Therefore, after the user signs up, he/she is offered to follow the friends from other accounts or find new friends according to musical tastes.

User main screen (feed, profile, stream creation, audio files addition, search, slide menu)

The profile was designed to work in 3 different modes:
– DJ Mode (Party Mode) — allows users to download audio files, create playlists as well as send invitations to listen to the playlists for the limited number of people.
– Home Mode — allows users to play the songs from the playlist remotely on different devices within the radius of a room
– Listener Mode — allows users to download and listen to both own and friends’ playlists.

Screen of settings and editing profile

This screen contained standard settings: connect or disconnect with social networks, push notifications settings, changing the password, deactivation of the account, signing out.

Due to the fact that many screens were required and the convenient transition was needed, the designer chose to construct the application with slide menu. The sandwich button on the left enabled opening the menu panel for the transition to different sections. Also, there was a list of users recommended for following. These recommendations were based on musical tastes, location, circles of friendship, etc. In addition, there was a separate notifications screen that reflected the activity of the followers to the user’s posts in the service or in social networks.

In the iPad version, the split-view was implemented. The sandwich menu and slide menu were set on the left edge of the screen. The size of the posts adjusted to the tablet.

In the mobile application, the difference between Android and iOS is that the design of the upper bar (navigation bar for iOS and action bar for Android) has different functional abilities. In general, action bar for Android, in addition to navigation, includes filters, sharing, data about the current screen. Considering these UI peculiarities of the action bar for Android, the content of slide menus was reflected identically in both versions as the acceptable controller for both operating systems in the aspect of mobile applications. For Android version design was completed according to the guides of material design so the structure of the slide menu was the same as for iOS but the appearance was different.

For the web version of the service, the designer used a typical structure when the header and slide menu duplicated the functionality of the application with alterations on the size of the desktop for the web-version. Therefore, there were more posts visible in the feed in case of adaptation of the mobile applications to the web.

Everything mentioned above shows that the designer didn’t make the attempt to experimenting and that was motivated by the desire to provide the highest possible usability and utility level. As it has already been outlined before, the application was created for fast and easy usage in everyday situations, so from the user experience standpoint, any experiments and extreme innovations in the typical scheme of social network could scare users, make them feel the application confusing and result in poor user experience.

So, the main area of designing something original to distinguish the application was UI.

User Interface (UI)

The Blur effect was taken as the basis: the bars with data or statements blurred the background. The following animation was used on the player screen: the basic background showed the artwork, which presented the album cover for the composition playing. The background of the screen was blurred with the round unblurred central part, around which the effect of the rotating playing record was created with typical visual details.

Visual design of the screens was distinctly distinguished according to their functionality. The screens of entertaining character (feed, profile, navigation bar) were designed with wide application of blur effect: it was dimmed out and the text data was presented in white color. However, standard screen such as settings or profile editing were designed in the simple style with light background and dark text.

The feed screen reflected the stream of friends and included the artwork being the album cover for the composition playing, the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views, and online listening.

One more screen designed here was extended feed screen. Tapping or clicking on the stream, the user could obtain extended data including all the information from the feed screen described above together with a detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application.

Redesign

One of the most important stages while designing the UX/UI of an application or website is its testing. Practice shows that sometimes ideas, which look brilliant on the first glance, turn out to be absolutely impractical for target users. That happened with the first version of the Echo project described above.

Having analyzed the results of user-testing and having worked with focus groups, the author obtained the information that the original design doesn’t work as it was desired. The thing getting the most negative feedback from users was blur effect in extended feed screen. The screen looked dirty and the text seemed unreadable. Animation and non-standard effects demanded long loading that is unacceptable for such simple operations. The feed screen contained too little body of the stream with overloaded controllers whose functionality was not really essential on that screen.

So, on the basis of user feedback, there was made the decision to change the design of the screens. The solution found for them was the following: the blur effect was totally eliminated because its appearance in PSD was absolutely different from what was seen in real, especially low-resolution screens.

To provide a maximum of cleanness and simplicity, all the screens were designed with a light background, elegant and laconic custom icons. The feed screen contained less data and the posts had a bigger size. Extended feed looked much simpler although saving the idea of animation.

The transition from feed to extended feed was realized by tapping or clicking at the artwork on the feed screen: it was given in smaller size in feed and got bigger while transition proportionally to the whole screen and under it all the information about the post (the avatar and name of the user whose post is playing, location, the name of the song and the playlist it is downloaded from, the number of likes, views and online listening, detailed review of the comments, opportunity to leave the comment, make a repost or share in any social network linked with the application) was shown on the white background. To make it even more convenient, in the case of vertical scrolling of this screen the big image of the artwork hid into the navigation bar leaving the place for the content below.

Web-version was simplified to a one-page site with the functionality of viewing the screens and profile.

Work on this project gave the team valuable experience. It shows that modern UI/UX designer should always consider user’s needs and wishes that are vital in creating a successful experience and therefore provide a high level of desirability. Moreover, the Echo project also proved that a designer should always be ready to update or even redesign his work and this decision has to be based on real testing of the product.

More Design Case Studies

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

Watering Tracker. Mobile UI Design for Home Needs

Tasty Burger. Mobile App for Food Ordering

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce

Health Care App. UI for Doctors

Slumber. Mobile UI Design for Healthy Sleeping

Kubrick Life. Educational Biography Website

Designer AI. Dashboard and Graphics for Fashion Service

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Originally written for Tubik Blog

Сообщение Design Case Study: Echo. User Interface for Music App появились сначала на Design4Users.