Book Summaries | Refactoring UI - Creating Depth

January 6th, 2024

Refactoring UI - Creating Depth (Chapter 6)

This summary will serve to further cement my learnings taken when reading the sixth chapter of Refactoring UI, titled Creating Depth, and I hope will provide some learnings to you as well.

Creating Depth

• Emulate a Light Source:
  • Emulating a light source is crucial for creating the illusion of raised or inset interface elements.
  • Understanding the fundamental rule involves recognizing how light interacts with surfaces.

Simulating Light in a User Interface

• Raised Elements:

  • Create a button with a raised appearance by revealing a slightly lighter top edge.
  • Enhance the effect with a small dark box shadow below to simulate shadows in the real world.

• Inset Elements:

  • Design a “well” component to feel recessed by incorporating a slightly lighter bottom edge.
  • Add a small dark inset box shadow above to convey depth and realism.

Avoiding Excessive Tweaking

• Maintain Clarity and Simplicity:
  • While simulating light can be fun, avoid spending excessive time trying to obtain photo-realism.
  • Strive for designs that are clear and simple, providing a better user experience.

Use Shadows to Convey Elevation

• Establishing an Elevation System:

  • Define a set of shadows to maintain design consistency and workflow efficiency.
  • Optimal shadow options should be well-balanced, with a range of choices.

• Combining Shadows with Interaction:

  • Dynamically use shadows during user interaction to provide visual cues.
  • Adjust the shadow size or remove it to reflect the element’s position on the z-axis.

• Shadows Can Have Two Parts:

  • Employ two shadows for nuanced effects, simulating both direct light source and ambient light difficulties.
  • Adjust shadow subtlety based on the object’s elevation, maintaining realism.

Even Flat Designs Can Have Depth

• Creating Depth with Color:

  • Adjust element colors in flat designs to convey depth - lighter for raised effects and darker for recessed.
  • Color remains a powerful tool for creating distance, even in non-flat designs.

• Using Solid Shadows:

  • Introduce short, vertically offset shadows with no blur radius for depth without compromising a flat aesthetic.
  • Solid shadows can make cards or buttons stand out without introducing complex visual effects.

Overlap Elements to Create Layers

• Effective Overlapping:

  • Enhance depth by strategically overlapping elements in a design.
  • Overlapping elements can create visually appealing layers in interfaces.

• Avoiding Clashes:

  • Prevent clashes when overlapping images by providing an “invisible border.”
  • Maintain the appearance of layers without compromising visual harmony.