This article was translated from Nathan Gitter’s original article

Find different

Can you see the difference between these two pictures?

  • The shadow range is larger;
  • Gradients are darker;
  • The first line of text in the paragraph has the word “in”;

The image on the left is a screenshot of the design Sketch, and the image on the right is a reproduction in iOS. These differences can occur during image rendering, even though the font, line spacing, shadow radius, color, and gradient properties are exactly the same for both images.

Why pay attention to detail?

Design is critical to the success of an App, especially on iOS, as users tend to prefer smooth and good-looking apps.

If you’re a designer or developer of a mobile app, you know how important detail is to the user experience. High quality software comes from deep consideration of every detail.

There are many reasons why an App doesn’t look as good as the original design, and I’ll explore the most subtle one — Sketch and iOS have different rendering styles.

Information lost in transformation

There are several UI elements that are significantly different in Sketch and iOS:

  • The font
  • shadow
  • The gradient

1, typography,

Fonts and typography can be implemented in many ways, and in this article I used UILabel to test and verify (” Text “for Sketch, Label for iOS).

Let’s look at an example:

Another subtle difference is that line spacing and word spacing are slightly larger in Sketch.

You can see the difference more clearly in the GIF below:

There are still differences in line spacing and word spacing, but these differences are very subtle. Note, however, that if the text needs to be aligned with other elements, such as background images, these differences will be visually magnified.

How to solve it?

Part of the problem is due to the default fonts on iOS: In San Francisco, when the iOS rendering system renders the default Font, the system will automatically adjust the Font spacing, which can be found on the Official Website of Apple. If you design the Font using SF, we strongly recommend the Sketch Plugin of SF Font Fixer to solve this annoying problem.

Tip: In the design, try to make the Textbox fit the size of the Text, do not use a large Textbox, and you can set it automatically, and then cut the width of the Text, if the Textbox has more redundant width, it is very easy to cause other restoration errors.

2, shadow

Unlike typography, which has universal design rules, the design of shadows varies from person to person.

Shadow Settings are tricky, and there are some differences in shadow parameters between iOS and Sketch, mainly due to the lack of a “spread” concept in CALayer in iOS, although this can be fixed by increasing the size of the layer that contains the shadow.


How to solve it?

Adjust the shadow parameters to match the design tip: reduce the rounded corners of the shadow and increase the opacity of the shadow, code as follows:

// old layer.shadowColor = uicolor.black.cgcolor layer.shadowColor = 0.2 layer.shadowOffset = CGSize(width: 0, height: 3) Layer. shadowRadius = 10 // New layer.shadowColor = uicolor.black.cgcolor layer.shadowOffset = 0.3 layer.shadowOffset  = CGSize(width: 0, height: 6) layer.shadowRadius = 7Copy the code

Of course, parameters vary with size, color, and shape, so we only need to make a limited number of changes here.

3, the gradient

The restoration of gradients is also a headache.

Of the three gradients below, only orange (top) and blue (bottom right) are different from the design.

The difference is more pronounced in blue, and the gradient is more vertical in iOS. The gradient of blue is defined by three colors, light blue in the lower left corner, dark blue in the middle, and pink in the upper right corner.

How to solve it?

Therefore, in iOS, if the Angle of gradient is found to be different from that of restoration, you need to adjust the startPoint and endPoint. You can fine-tune the startPoint and endPoint of the CAGradientLayer to adjust the difference between the design draft and restoration.

// 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)  
Copy the code

Of course, there is no universal magic formula here. It is all about constantly adjusting and narrowing the differences by hand.

Jirka Třeč ak published a great article explaining how gradiations are rendered in iOS that you can read up on if you want to read it in depth.

For more information

All of the differences between iOS and Sketch mentioned in this article were shown in a Demo, including each example in the illustration, as well as the original Sketch document, so you can see the differences more visually. You can show your team the difference between design and development in a way that leads to better applications.

The Demo address is github.com/nathangitte…

Tips:

Never believe that the same value will have the same result, although the number is the same, the visual representation is different. In the end, every good design is produced in continuous iteration, the good cooperation between the development brother and the design sister is also the key to ensure high quality products.