Product Craft Bible
Profundidad y Sombras
Inicio Fundamentos visuales Profundidad y Sombras
Fundamentos visuales

Profundidad y Sombras

8 reglas jakub.kr · hobday · refactoring uihobdayrefactoring ui
4

Profundidad y Sombras

8 reglas
55

Sombras multicapa en vez de bordes

Reemplazar bordes flat con box-shadows compuestos. La primera capa (0 0 0 1px) imita un borde, las siguientes agregan profundidad sutil. Se adaptan a cualquier fondo.

box-shadow:
0 0 0 1px rgba(0,0,0,.06),
0 1px 2px -1px rgba(0,0,0,.06),
0 2px 4px 0 rgba(0,0,0,.04);
jakub.kr · hobday · refactoring ui
Preferir
Ventas
$12,400
+12% este mes
Usuarios
843
Activos hoy
Conversión
3.2%
Promedio semanal
Evitar
Ventas
$12,400
+12% este mes
Usuarios
843
Activos hoy
Conversión
3.2%
Promedio semanal
56

Shadow blur = 2x shadow distance

Si la sombra se extiende 4px en Y, el blur debe ser 8px. A mayor elevación, menor opacidad. Esto aproxima el comportamiento natural de las sombras.

/* Baja elevación */
box-shadow: 0 4px 8px rgba(0,0,0,.1);

/* Alta elevación */
box-shadow: 0 8px 16px rgba(0,0,0,.08);
hobday
Preferir
Ana Torres
Product Designer
Solicita acceso al proyecto Rediseno Dashboard Q3 como editora.
Aprobar acceso
offset 4px, blur 8px (2x)
Evitar
Ana Torres
Product Designer
Solicita acceso al proyecto Rediseno Dashboard Q3 como editora.
Aprobar acceso
offset 4px, blur 4px (1x)
57

Sombras dual: ambient + directional

Las sombras naturales vienen de multiples fuentes de luz. Combinar una sombra grande/suave (luz ambiental) con una chica/nitida (luz directa).

box-shadow:
0 4px 6px rgba(0,0,0,.07),
0 1px 3px rgba(0,0,0,.1);
refactoring ui
Preferir
Mensaje enviado
Tu respuesta a soporte fue enviada correctamente. Te contestaran en 24h.
Ver hilo
Cerrar
Evitar
Mensaje enviado
Tu respuesta a soporte fue enviada correctamente. Te contestaran en 24h.
Ver hilo
Cerrar
58

Vertical offset siempre (luz viene de arriba)

box-shadow: 0 2px 4px no box-shadow: 0 0 10px. Sombras simetricas parecen un glow, no una sombra. El offset vertical crea sensación de profundidad natural.

refactoring ui
Preferir
Carlos Mendez
En línea
42
Tareas
94%
Completado
Evitar
Carlos Mendez
En línea
42
Tareas
94%
Completado
59

No sombras en dark mode

Las sombras son creadas por luz. En interfaz oscura, las sombras se ven forzadas o desaparecen. Usar brightness layering en su lugar: cada nivel de elevación = superficie ligeramente más clara.

hobday
Preferir
Revenue
$12,400
+12% vs last month
Active Users
843
+5% this week
Evitar
Revenue
$12,400
+12% vs last month
Active Users
843
+5% this week
60

Closer = lighter (en light y dark mode)

Dark mode: base #121212, card #1e1e1e, modal #2a2a2a, tooltip #333. Light mode: base #f0f0f0, card #fff. Cada aumento de elevación = superficie más clara. Simula física de luz real.

hobday
Preferir
Base
Nivel 0
Card
Nivel 1
Modal
Nivel 2
Tooltip
Nivel 3
Evitar
Base
Mismo color
Card
Mismo color
Modal
Mismo color
61

Límites de brightness entre container y fondo

La diferencia de brightness (B en HSB) entre fondo y container: max 12% para dark, max 7% para light. Basado en analisis de ~100 sitios bien diseñados.

hobday
Preferir
Light mode
Resumen semanal
12 tareas completadas de 15 asignadas.
B 94% a B 100% = 6%
Dark mode
Resumen semanal
12 tareas completadas de 15 asignadas.
B 3% a B 9% = 6%
Evitar
Light mode
Resumen semanal
12 tareas completadas de 15 asignadas.
B 78% a B 100% = 22%
Dark mode
Resumen semanal
12 tareas completadas de 15 asignadas.
B 1% a B 15% = 14%
62

No mezclar técnicas de profundidad

Decidir al inicio: soft shadows, hard shadows, o flat sin sombras. Aplicar consistentemente a todos los elementos elevados. Mezclar técnicas se ve inconsistente y no profesional.

hobday
Preferir
Dashboard
Vista general del proyecto
Soft shadow
Equipo
Gestionar miembros
Soft shadow
Ajustes
Configuración general
Soft shadow
Evitar
Dashboard
Vista general del proyecto
Soft shadow
Equipo
Gestionar miembros
Hard shadow
Ajustes
Configuración general
Flat border
En esta página