Introduction

With the introduction of iOS 7, Apple introduced a significant redesign that impacted many elements of the iOS ecosystem, including app icons, launch images, and naming conventions. This article delves into the specifics of these changes while addressing how developers can maintain compatibility with older iOS 6 icons.

iOS 7 App Icons

Designed with a fresh and modern aesthetic, iOS 7 app icons were marked by their minimalistic style, using lighter and more vibrant colors, flat design approaches, and subtle gradients.

Design Guidelines for iOS 7 Icons

Shape and Size

• Shape:
  • iOS 7 introduced a grid system for app icon layout to ensure consistency in design.
  • Icons follow a squircle (square vs. circle) shape, which supports edge-tocorner alignment and equal spacing between icon boundaries.
• Size:
  • The standard app icon size in the App Store was set as 1024x1024 pixels.
  • Actual sizes in use include 180x180 pixels for iPhone with Retina HD display, and 120x120 pixels for standard Retina display.

Design Tips

• Embrace simplicity: Focus on a single object or theme, eliminating extraneous details.
• Use vibrant colors and consistent line weights.
• Avoid gratuitous textures and shadows, embracing the flat design philosophy.

Naming Convention

• App icon files should be named [email protected] for iPhone 6 Plus or later, [email protected] for Retina displays.
• Universal applications for both iPhone and iPad may include respective icon assets such as [email protected] for iPad Retina display.

Launch Images

Launch images, also known as splash screens, offer a seamless transition when opening an app by simulating the first screen of the app.

Guidelines for Launch Images

• iOS 7 introduced automatic sizing, scaling, and dynamic layout features, which required high-resolution assets for different devices.
• For design consistency, Apple strongly recommended that the launch image only displays the initial screen view and avoids including text or branding (which differs from an app icon).

Sizes and Naming

• Launch image size specification varies:
  • iPhone 5/5s/SE: 640x1136 pixels.
  • iPhone 6/6s/7/8: 750x1334 pixels.
  • iPhone 6/6s/7/8 Plus: 1242x2208 pixels.
  • iPhone X and above: 1125x2436 pixels.
• File naming convention typically follows structured and descriptive identifiers like [email protected] (for iPhone 6).

Keeping iOS 6 Icons

Designing for iOS 7 does not mean abandoning users on older platforms such as iOS 6. Supporting these users involves including assets adjusted for the older skeuomorphic design style.

Design & Asset Management

• Continue to include differentiated assets in the project structure to ensure backward compatibility.
• Developers can use conditional checks (using UIDevice.current.systemVersion ) to handle dynamically loading appropriate assets depending on the OS version.

Example of Asset Naming

Technical Best Practices

Asset Catalogs

• Make use of Asset Catalogs with Xcode to organize your graphics logically and efficiently.
• Asset Catalogs can automatically serve the correct graphic for different devices, making it easier to support multiple iOS versions.

Avoiding Hard-coded Image Sizes

• Use Auto Layout and image scaling options provided in the newer iOS to avoid using hard-coded image dimensions directly within code.

Conclusion

The transition from iOS 6 to iOS 7 involved significant changes in design principles and resource management. Understanding these changes and how to adapt to them while maintaining backward compatibility is essential for ensuring a consistent user experience across different iOS versions. Practicing good design principles, employing asset catalogs, and maintaining distinct sets of resources for various iDevices help achieve visual and functional consistency across all supported platforms.