Why iOS Developers Need to Know Basics Of UI Design

Our company puts forth a lot of effort and tries to create all the necessary conditions for engineers to want to develop and conquer new horizons. This time we want to share the experience of our lead iOS team. This article will tell why it’s also important for developers to understand the basics of the design craft.

Moreover, it will be helpful not only for junior and middle-level iOS-developers but also for startups, product owners, and everyone involved in mobile apps development—as a minimum, to broaden your horizons. You will learn the basic principles and approaches on which app design is based. This will allow you to find a common language with other team members faster and develop a better UX/UI.

Why Other Experts Need to Understand the Basics Of UI Design

Our minds work so that beautiful design always captures and attracts our attention. But what is beauty in terms of digital design? First, it’s how a product looks on users’ screens—and that’s the UI. Secondly, it’s how easy it is to use—and that’s UX. At NIX United, we believe that each component has to be made with intelligence and soul to create a perfect product.

We should never forget that users are our best friends, and design is crucial to gain their praise. But how does this apply to the developer? If there is a designer, a business analyst, a marketer, or other specialists in the team who set precise tasks, then those specialists only have to write quality code.

However, this favorable situation is not always the case. In addition, these non-technicians do not thoroughly know the details of the iOS platform or the features of native design. It also happens that the specifications may not cover all of the state, flow, and alternative application cases. The list of such cases could go on for a long time.

In an incomplete team, the developer has to understand the design of the platform and application. Such a case is not so rare. First, it can be your own project. Second, it happens in startups that do not have enough money to hire designers. Third, it is common when you need a proof of concept or minimum viable product to check the idea’s feasibility.

But in all of these cases, the design also matters. It matters how those who interact with such solutions—beta testers, investors, customers—will appreciate and accept it. What we mean is that people trust a product that looks good, associating its beauty with quality; this is our psychology.

Here are a few more real-life examples in which a developer would benefit greatly from a basic knowledge of design principles:

Demystifying Design

Often developers do not understand the principles behind a design solution and miss things that are unimportant in their opinion, but in reality are very important. This can negatively affect the quality of the application, spoil team relationships, and slow down the development process.

Technical Background

The reverse situation—mobile developers are aware of how the iOS platform is developing, its main aspects of work, and the release of new cool features. Designers most likely don’t have such a deep understanding of the topic. For example, they may be Android users or recently switched from web to mobile design.

Force Majeure Solution

Let’s take an example from life—due to a lack of experience, the designers didn’t consider that an app downloads data from the network, which can cause delays, error cases, and empty states. Therefore, developers need to solve the problem by themselves in case the designer isn’t available or has higher priority tasks.

Finding the Best Option

Suppose the designer has chosen an overly-expensive design regarding its technical implementation. In that case, you can offer a compromise—it won’t look much worse, but it will be much cheaper. This shows that you, as a seasoned expert, have decreased the entire load on the team and optimized the project cost, which the client will appreciate a lot.

As you read this article, you might think, “That’s what I’d like to do. But I’m a techie, not a creative person.” In reality, however, the theories about the division of such types are myths. Some people are great at technical tasks and can be creative at a high level. And if you’re not very good at design, you just don’t yet know where and from what angle you need to look.

For the most part, design is a matter of skill. There are as many rules in design as there are in programming. Of course, it takes talent and flair to create masterpieces, as in any area of life. However, by acquiring core knowledge and applying them in practice, anyone can cope. In addition, with experience, you will understand the design better and better.

What Is The Best Place to Start?

Let’s start with a treasure trove of knowledge, Apple’s Human Interface Guidelines (HIG). This is a massive collection of information about all native components, native design principles, and frameworks for macOS and other Apple products. It’s a must-read for beginners, but even experienced developers will find these guides useful. They are voluminous and constantly updated, and it is worth periodically refreshing them in your memory. For example, if you encounter new or atypical technology, the HIG is sure to contain recommendations on how to work with it, best practices, and what is best not to do.

Moreover, you can always send a link to HIG when you see a mockup that is not native, as in the examples below. Don’t hesitate to share such resources with designers if you see that their designs don’t match the native ones. They’re welcome because you’re helping them improve their skills.

The Most Common Mistake in Layout

A common mistake developers make is to underestimate the alignment in layout. There can be different reasons for this—a developer hasn’t paid attention to it, or it might have been difficult or inconvenient to layout as the designer drew it. As a result, the user’s perception of the design is significantly impaired. Remember that the proper alignment makes the application more visually pleasing to users.

A clear example of how the grouping of content and the actual proper layout solves the design problem. The chaos on the right side is entirely unrecognizable, while on the left side, everything is harmonious and clear:

What About Buttons

When working with any button, remember that the tappable area must be no smaller than 44×44 points according to guidelines. Unfortunately, one of the most common mistakes inexperienced designers make is that they don’t consider this. Possibly, they haven’t encountered the problem of hitting an interface element with their finger on mobile devices. Icons of 20×20 points will turn the user experience into a nightmare.

Note that typically call to action buttons are at the bottom of the screen. This is a result of how we hold the device. We usually use one hand and our thumb to do this. In the example below, the areas that we can easily reach are green. In red are the areas almost impossible to use without the help of the other hand.

However, we cannot say that placing any elements in the red zones is forbidden. We can’t allow so much space to be left empty on mobile screens. Therefore, we can place buttons that are rarely pressed, duplicated by gestures, or destructive buttons there. For the latter, the red area is the ideal place, because then the user has more chances to miss. However, in any case, destructive buttons should be closed by confirming alerts.

Working With Fonts

It’s about the size of the font. To avoid wasting time on manual selection, I advise you to use a small hack with a modular scale, and a prefixed sequence of harmonious text sizes.

Here is an online calculator for their calculations. You just need to set the base text size (for iOS, it is usually 11) and then choose one of the canonical coefficients to multiply the base value. After that, the system itself will calculate the necessary text sizes. Sometimes it’s worth playing around with the boldness of text or even combining fonts to highlight content. However, the latter can be difficult for novice developers.

When you work with custom fonts in iOS it is worth remembering a few nuances: make sure that the font is readable at all settings, that all styling and sizes look correct, including the most rarely used ones, and also check that the font supports all planned localizations.

There is a simpler and faster way when, for example, you create a RoC and don’t chase uniqueness. This is to take advantage of the styles that Apple offers us “out of the box.” A style is a combination of size, font, and its boldness. Apple styles can even use different fonts from the San Francisco family, which is native to iOS.

It’s Important to Choose Correct Colors

Another fundamental concept in UI is color. It is vital for the perception of information and emphasis.

The more tasks an application performs, the larger its color palette. If it will support Dark Mode, a shade is added for each color in Dark Mode. In this case, also keep in mind higher contrast settings. You should add two more shades for each color: one for the enhanced contrast of the light and one for the dark theme.

To make handling all the color variations easier, Apple suggests using a semantic approach to colors since version iOS13. Below is an example of such a color, taken “out of the box.” It is one of the fill colors—systemGray. From a code point of view, the semantic color looks like a standard color. But depending on the system, theme, or contrast settings, it adapts to a given mode.

A piece of advice—if you highlight some buttons in the same color throughout the application, do not use the same color for the non-clickable title. It confuses users—they think that the title is clickable too.

Remember Contrast

I would like to mention the issue of contrast. When choosing custom colors, it is worth keeping in mind people with color perception problems. The text on the right side of the illustration is hard to read, even for people without such issues. For people with special needs, it may be incomprehensible. The design should be convenient for everyone.

Contrastchecker will help you make your design so. It allows you to intuitively understand whether the text in front of you has good contrast or not and to determine the contrast mathematically in the form of a coefficient. Read more about palettes, color theory, and human perception of color in these articles:

Conclusion

Hopefully, we’ve shed some light on design for techies. As you can see, everything is structured and based on logic. Another foundation on which the mobile application is based is UX, which we will discuss in another article.