If you look hard enough, you might notice a few subtle differences:

The image on the right:

Has a larger shadow. Has a darker gradient. Has the word “in” on the top line of the paragraph.

The image on the left is a screenshot from Sketch, and the image on the right is a reproduction on iOS. These differences arise when the graphics are rendered. They have the exact same font, line spacing, shadow radius, colors, and gradient attributes — all of the constants are identical.

As you can see, some aspects of the original design can be lost during the conversion from the design file to real code. We’re going to explore some of these details so you can know what to watch for and how to fix them.

Why We Care

Design is critical to a successful mobile app. Especially on iOS, users are accustomed to apps that work well and look good.

If you’re a mobile app designer or developer, you know how important small details are to the end user experience. High-quality software can only come from people who care deeply about their craft.

There are many reasons why apps might not look as good as their original designs. We’re going to investigate one of the more subtle reasons — differences in rendering between Sketch and iOS.