Overview
Realistic Icons share the perspective, light source & palette of the Rich Icons. Their representation is not stylistically restricted by structural constraints. The primary goal is to provide a realistic representation of the metaphor that is true to the material attributes of the object that is being rendered.
The design treatment of Realistic Icons should be visually compelling and clearly communicate the action that it represents. The treatment given to the icon should ensure that the meaning is easily understood and enhances the overall user experience.
Color Palette
The extended Alta Color Palette is used for the Realistic Icon Style. Reference vibrant primary hues in the color spectrum. Add light or dark values to create volume for highlights and shadows.
The Gray and Neutral colors referenced in the Icon palette are also available for use with this palette.
Light Source
These icons use a light source that is top-down ( 90°) and gives the appearance of a strong natural light. Avoid heavily shadowed icons. Do not set shadow more than 25% opaque.
Composition
The icons should be designed to fit within a square, elliptical or triangular composition. Whenever possible, maintain the flat bottom horizontal plane to maximize the area for depicting an individual icon and to compliment the icon set within the application's launcher screen. Aligning all the icons in a set along a horizontal base will enforce placement of the images within the invisible grid on the device.
Form - simplicity versus detail
To maximize the readability of objects and symbols, designers should create the simplest images possible. Larger or more complex icons may benefit from a more realistic and detailed appearance, allowing people to quickly recognize what the icon represents. However, decreasing the icon's size and resolution to fit on smaller devices can make those same details blurry or unrecognizable diminishing the icon's effectiveness. Designers should keep in mind the balance between suggesting detail and adding too much visual complexity to the icons.
This icon style employs basic geometric shapes as the foundation for drawing icons. Whenever possible, construct graphics from simple geometric primitives: rectangles, circles and right triangles, and design to maximize the length of straight edges on the icon sides.
Avoid designing sharp corners, as they can tend to create unwanted visual "noise", but there is no predetermined radius specification. A corner can be as small as one or two pixels. Also be aware that rounding corners should not be so heavy that it compromises readability.
Icon Samples
