iOS 10 Design Guidelines for iPhone and iPad

While Apple calls iOS 10 their biggest release ever, most of the new features are consumer-facing, like Widgets, Siri/Messages integration, and expanded notifications.
For designers, the only noticeable design changes are bolder titles and bigger use of cards, as seen in native apps like Music and News. Whereas iOS 7 started with a widespread use of thin fonts, iOS 10 is going back to using bolder texts.

READ MORE

Advertisements

iPhone Screen Size and Web Design Tips

iPhone Screen Measurements

There are a few different values to consider when looking at the iPhone screen sizes. I’m going to get these values defined here so the chart below makes more sense:

iPhone Display Size (inches) – This is diagonal measure of the screen, from corner to corner, just like you’d measure a TV.

iPhone Screen Size (points) – These points are the size that the device is using for coordinates. If you’re designing for the web (using CSS or JavaScript) these values will be helpful. iPhones use Retina screens which have a higher pixel density. This means they take the larger iPhone resolution (mentioned above) and compress those pixels into a smaller space to make the image look sharper.

iPhone Rendered Pixels – This is the full number of pixels that are being rendered. This is the value you get when you apply the multiplier (1x, 2x, 3x) the device uses to the screen size in points. If you’re creating an image and want it at the max resolution, this is the size you’d use. I’ve also written an article on Retina images if you’d like to learn more.

iPhone Physical Pixels – This is the actual screen’s pixel resolution. The iPhone 6 Plus is using a a larger image resolution on a screen with a smaller number of physical pixels, so it needs to be downsampled to this size. This value is really only important in a specifications perspective, but shouldn’t really affect your designs.

Read More