Why Your App Looks Better in Sketch

Find the difference

Look at these two pictures - see the difference?

If you look closely, you will notice that they are slightly different. In the picture on the right:

1. Shadow more
2. Gradient darker
3. The word "in" on the first line, not the second

The left picture is a screenshot from Sketch, and the right one is a presentation of the same design on iOS. Such discrepancies appear when rendering the image. Fonts, line spacing, shadow radius, color and gradient options and all other constants are exactly the same.

As you can see, some aspects of the original design may be lost when translating the layout file into the actual code. Below we will consider some of these nuances, so that you know what you need to pay attention to and how to correct the situation.

Why is it important

Design is critical to the success of a mobile application. It is especially important on the iOS platform: its users are accustomed to products that not only work well, but also look good.

If you are a mobile developer or designer, then you yourself know how greatly the smallest details can affect the user experience. Only people who are truly serious about their work are capable of creating high quality products.

There are a number of reasons why the design in the application may not look as good as at the design stage. We’ll take a closer look at one of the less obvious reasons — the differences in rendering between Sketch and iOS.

Translation difficulties

Some of the interface elements show significant differences between Sketch and iOS. We will focus on the following three:

1. Typography
2. Shadows
3. Gradients

1. Typography

Typography can be of different types, in this example I will consider the one that corresponds to the Text element in Sketch and UILabel on iOS.

Let's see how they differ:


The main difference in the example above is how the text is broken into lines. For example, in the third fragment, which begins with “This text is SF Semibold,” in the design the first line ends with the number 25, and in the application with the word “points”. The same problem is observed in the text block - the line break does not match.

Another, less noticeable difference is that in Sketch, the leading (i.e. the distance between the lines) and the discharge (i.e. the distance between the characters) are slightly larger.

If you impose two options, all of these discrepancies are immediately evident:


Maybe it's in the font? Let's try replacing San Francisco with Lato (a very popular free font). Then we get the following result:


Already better!

Some discrepancy in line spacing and discharge remains the same, but it can be neglected. Nevertheless, be careful - if the text should be superimposed on other elements in a certain way, for example, a background image, these small inconsistencies may be noticeable.

How to fix it

Part of these problems are related to the default font on iOS - San Francisco. When rendering this system font, iOS automatically calculates the tracking value according to the size. A table for automatic calculation is available on the Apple website . There is a special plugincalled SF Font Fixer, which allows you to account for these values ​​in Sketch. I highly recommend it to those with San Francisco typeface design.

Note: Always make sure that in Sketch the text field runs exactly along the border of the text. This can be done by selecting the text, switching the “Fixed” and “Auto” settings, and then setting the desired field width. If there is excess empty space, this can lead to the fact that the layout will contain incorrect values.

2. Shadows

If there are universal rules for typography in layouts, as far as shadows are concerned, everything is spelled out not so clearly.


As you can see from the picture above, on iOS, shadows are larger by default. In these examples, it is most striking at the upper border of the rectangles.

Shadows are not easy, because they have different sets of options in Sketch and on iOS. The most important difference is that in CALayer there is no such category as spread, although you can work around this problem by increasing the size of the layer that contains the shadow.


Shadows can look completely different in Sketch and iOS versions. I came across cases when the shadow looked fine in the layout, but with the same parameters it turned out to be almost invisible when the application was launched on the device.


How to fix it You

have to tinker with shadows - to make them look as intended, you need to do manual debugging. In many cases, you need to make the radius a little smaller, and the transparency a little higher.

// old
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.2
layer.shadowOffset = CGSize(width: 0, height: 4)
layer.shadowRadius = 10
// new
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize(width: 0, height: 6)
layer.shadowRadius = 7

The scale of the necessary changes depends on the color, size and shape - in our example it was only necessary to correct the parameters a little.

3. Gradients

Gradients are also a headache.


Of these three examples, differences are visible only in the orange and blue gradients. In the case of the orange gradient, the flow in Sketch is more horizontal, but on iOS it’s more vertical. As a result, in the final application, the gradient looks generally darker than in the design.

In the case of blue, the difference is even more noticeable - the tilt angle in iOS is closer to 90 degrees. This gradient is based on three colors: blue in the lower left corner, blue in the center and pink in the upper right corner.


How to fix it

If the angle is distorted, then perhaps you need to change the start and end points. Try experimenting a bit with startPoint and endPoint in CAGradientLayer to fix these changes.

// old
layer.startPoint = CGPoint(x: 0, y: 1)
layer.endPoint = CGPoint(x: 1, y: 0)
// new
layer.startPoint = CGPoint(x: 0.2, y: 1)
layer.endPoint = CGPoint(x: 0.8, y: 0)

There is no magic formula here - you just need to change the values ​​and look at the result until the versions become identical.

Jirka Třečák left a great comment with links to materials that explain how gradients are rendered. Read if you want to study the problem more deeply at the code level.

See for yourself

I made a demo version of the application, which allows you to easily see how all these differences look on a real device. It includes all the examples above, the source code and the Sketch file, so you can play around with the constants yourself.

This is a good way to convey the problem to the team - just give them a phone and let them see for themselves. To go from picture to picture (as in gif-illustrations from this article), just click on the screen.


Download the open-source demo version of the application here .

conclusions

Do not take for granted that the same values ​​will produce the same results. Even if the numbers match, the visual representation may vary.

In general, after implementing any design, you need to do additional iterations. The joint work of designers and developers plays a decisive role in creating a quality product.