Video summary

The Easy Way to Fix Boring UIs

Main summary

Key takeaways

Technology

Overview

The video teaches a practical, “easy way” to fix boring UI designs by adding depth using:

  • Color layering (multiple shades of the same color)
  • Shadow techniques

The same approach works in both light mode and dark mode by using variables for colors and box shadows.

Core technique: Color layering for depth

  1. Start with an otherwise “average” flat UI (e.g., navigation).
  2. Create 3–4 shades of the same color.
  3. Increase lightness incrementally (example: lightness +0.1).
  4. Layer the lighter shades on top of key UI elements to create a sense of depth.

The presenter also references a prior/related “colors” video for foundational concepts.

Core technique: Realistic shadows (two-step / multi-level)

Instead of relying on a single shadow, the video recommends building depth with shadows more realistically:

  1. Top highlight shadow
    • Made using a light border or glow, or a light inset shadow
  2. Bottom shadow
    • A dark shadow beneath

Combining soft/light (top) and dark (bottom) produces a more realistic 3D feel.

Additional guidance includes:

  • Adjust pixel offsets (“bump these values by a few pixels”) to increase depth.
  • A “level higher” option: increase offsets a few more pixels for stronger depth.
  • Among shadow strengths, the smaller shadow is often the most natural.

How the approach is applied to UI components (examples)

1) Profile / card UI

  • A basic profile card can look boring.
  • Apply the 2-step process:
    • Layer lighter colors on important elements
    • Add the small two-part shadow for the “light hits from above” effect
  • Add a bigger shadow on hover (noted as best in light mode).

2) Navigation layout with selected tab

  • Use a background color slightly lighter than the page.
  • Highlight the selected tab with a lighter shade.
  • Mute text/icon colors for non-selected items.
  • Ensure tab text/icons match the lighter layered color changes (increase lightness for those too).

3) Dropdowns

Add depth by combining:

  • Gradient
  • lighter inner shadow on top

A “shiny highlight” at the top complements linear gradients, matching a top-light assumption.

4) Radio buttons UI redesign

  • Wrap the group in a lighter card.
  • Add spacing and highlight options.
  • Emphasize the selected option using:
    • improved typography / hierarchy
    • selected-card depth via the same light-top inset + dark-bottom shadow idea
  • Tip: icons (SVG copy/paste) can further improve beyond basic styling.

Light theme “big picture” restructuring example

A larger dashboard-like UI (sidebar + cards + graph + table) is improved by:

  • Creating clearer hierarchy:
    • Use a darker background while keeping main elements visible
    • De-emphasize certain sections (e.g., table and graph) by darkening them appropriately
  • Layering depth:
    • remove borders on lighter elements (separation comes from color layering)
    • use small shadow on smaller cards and bigger shadow on bigger cards (context-dependent)
  • Table “inset depth” example:
    • dark inset shadow on top
    • light inset shadow at bottom
    • add a slightly darker background to sell the recessed effect

Dark theme and theming strategy

  • The same improvements apply to dark mode.
  • The video claims dark-theme examples can work on light theme too.
  • Implementation principle:
    • use color/shadow variables to map:
      • “bg light / bg dark”
      • matching box shadows per theme

A simplified redesign workflow:

  • base: set page to bg-dark
  • separate sections with bg-light
  • interactive elements: use bg-light
  • add rounding, padding, and shadows per section

“Why bother?” message (motivation)

The presenter argues that perfecting tiny UI details may not be worth it—but depth improvements:

  • “take a few lines of code”
  • create a noticeable “night and day” transformation

Analogy:

  • Moving from “normal to high settings” looks big.
  • “High to ultra” isn’t as visibly beneficial.
  • Depth is framed as the sweet spot payoff.

Sponsor (learning platform)

  • Brilliant is promoted as a learning app.
  • Key claim: hands-on problem solving is 6x more effective than lecture videos.
  • Mentions free access and an annual premium discount (20%) via the creator’s link/code.

Main speakers / sources

  • Primary speaker: The video narrator/creator (name not provided in the subtitles)
  • Sponsor/source mentioned: Brilliant (learning app: brilliant.org/sided)

Original video