Designing App Icons for Spatial Computing
This is a summary of key sections of the “Design for spatial user interfaces” video tutorial provided by the Apple Design Team.
This section focuses on the guidelines for designing or redesigning a great icon for spatial computing. App icons are similar to iOS, but take on a 3D effect in order to blend realistically within your Shared Space.
Use Multiple Layers
To achieve a captivating 3D effect, app icons consist of up to three layers: a background layer and up to two foreground layers. Unlike traditional 2D platforms that use layers for parallax effects, in spatial computing, flat layers create a 3D illusion.
Image Size and Background
Ensure that each layer is a square image with a size of 1024 by 1024 pixels. The background layer should be designed as an edge-to-edge square image. All layers will be cropped by a circular mask, giving the final icon a cohesive shape.
Automatic Glass Layer
When the layers are combined, an automatic glass layer is applied, adding depth, specular highlights, and shadows to the icon. This step enhances the three-dimensional appearance of the icon.
Centre Graphics and Avoid Overlapping Edges
To maintain a balanced composition, keep your graphics centred within the icon. When the icon is expanded, elements too close to the edge may appear off-centre.
Minimize Semitransparent Pixels
Avoid using large areas of semitransparent pixels in your layers. Layers with reduced opacity will blend with the shadow cast behind them, potentially causing unintended visual effects.
TL;DR
Designing or redesigning your app icon in 3D is achievable by following a few simple guidelines. Utilise multiple layers, ensuring each is a square image with a transparent background. Design the background layer as an edge-to-edge 1024 by 1024 pixel image, and let the circular mask crop all the layers. The system will automatically apply a glass layer, enhancing depth and highlights. Remember to centre your graphics and minimise the use of semitransparent pixels for a clean and visually appealing icon.
