7 visual design lessons based on Big Sur Icons

Professional tips to make icons look great and distinguishable

My friend helped me work on a Big Sur icon, and I was honestly surprised by the number of visual design secrets he shared. Dmitry helped me with graphical concepts of Big Sur and visual design techniques. I’ll share my findings below.

1. Cinematic Backgrounds

Usually, I automatically put the light on top, which makes sense in most design cases. However, I was always afraid to work with “atmospheric” objects — reverse-lighted backgrounds for adding a cinematic effect. This effect works great to manipulate mood and set the scene for the objects.

2. Bevels and Highlights

As in 3D, to make objects look realistic, they need to have bevels that reflect colour. Do not be afraid to put 0.25 lines in the Figma App and design a lighting scheme (where it shines from and why). Bevels should be as subtle as possible, to be barely visible, the eye will still recognize them and complete the whole picture.

3. Highlights and Shadows

Balance of highlights and shadows is infinitely important. They help the object to be presented in the space. Each added shadow depicts the distance of the object, its possible dynamics, and material. For a realistic display, there should be several shadows: where the object contacts with the surface, where it reflects the light to the surface from the global light source, where it takes colour back from the area. Shadows can be added endlessly, the rationale is the final look of the picture. Shadows have their own temperature and colour that can be controlled if one wants to add realism.

4. Non-linear Gradients

Linear gradients don't look realistic, so it's worth trying radial gradients while shifting their angle to make them look more natural. Light is not always (and generally rarely) at its zenith.

5. Rhythm between elements

Many times I miss rhythm in my work while trying to improve each element one by one. But the composition works not only when the space between the elements corresponds to the hierarchy, but also when different elements lead you to comprehend the object itself better.

6. Structure of icons

The icons in the new version of macOS hold principles. I have thought they were like medals, with deepenings and heights. But we have concluded that they are more like watch dials, where there is stretched material under the main element and the distance between the material and the “background” (which gets a little higher and ceases to be the background). To display the correct structure, one needs to think about lighting several times.

7. Icon Perception

In icons, colour is perceived in the first place, and then the form. By spending time on the main colour (theme) of the icon, you can control how much it will stand out from the environment in which it will be used.

Subscribe to my Twitter, and my personal small newsletter: