Tabla de Contenido
- 1. Psicología del color en dental
- 2. El sistema de color en tu web odontológica: base, secundarios y acento para convertir
- 3. Accesibilidad en tu web dental
- 4. Dirección fotográfica: qué fotografiar y cómo
- 5. Antes/Después con cabeza (legal y estética)
- 6. Integrar color y foto en la UX
- 7. Performance: formatos, compresión y coherencia
- 8. Checklist (paleta + sesión de fotos + revisión final)
- 9. FAQs
Psicología del color en dental
En dental, el color calma primero y convence después. Busco transmitir higiene, serenidad y precisión clínica sin parecer frío.
- Blanco como lienzo: base neutra que sugiere limpieza y amplía visualmente.
- Azules suaves (#E7F0FA–#2A6FB6): tranquilizan y aportan rigor. Evito azules chillones.
- Verdes claros (#E9F7F0–#2D8A6D): salud/frescura; ideales para bloques informativos.
- Acentos templados (naranja coral #FF7A59, amarillo miel #FFC857 o rosa empolvado #F7C7D9): en pequeñas dosis para destacar acciones y estados.
- Grises/beige cálidos (#F7F7F7, #EDEBE7): separan secciones sin “pintar” la página.
Regla de oro: 70% base clara (blanco/gris cálido), 20% secundarios (azul/verde), 10% acento.
El sistema de color en tu web odontológica: base, secundarios y acento para convertir
Un sistema evita el “arcoíris accidental” y hace escalable la UI.
Tokens recomendados
- –color-bg: Blanco / #FFFFFF
- –color-surface: Gris muy claro / #F7F7F7
- –color-primary: Azul medio / #2A6FB6
- –color-secondary: Verde medio / #2D8A6D
- –color-accent: Naranja coral / #FF7A59
- –color-text: Gris antracita / #222
- –color-muted: Gris / #6B7280
Usos prácticos
- CTA principal (“Pedir cita”): fondo accent + texto blanco; hover: oscurecer 8–12%; focus: anillo de 2 px del primario.
- Links: primario; hover subrayado; visited más oscuro.
- Éxito/alertas: verde para confirmaciones; rojo suave #E45B5B en errores con texto claro.
- Fondos de sección: alterna blanco y surface para ritmo visual.
El acento no grita: guía al CTA y desaparece. Si todo es acento, nada destaca.
Accesibilidad en tu web dental
No es negociable: WCAG 2.2 AA.
- Contraste: texto normal ≥ 4.5:1; texto grande (≥18 px/semibold) ≥ 3:1.
- Estados visibles: :hover, :focus y :disabled diferenciados (color + subrayado + anillo).
- Tamaños táctiles: botones/links ≥ 44×44 px en móvil.
- Tipografía legible: base 16–18 px, interlínea 1.5, anchura de línea 60–80 caracteres.
Pequeños ajustes de luminosidad al acento suelen ser suficientes para cumplir contraste sin perder personalidad.
Dirección fotográfica: qué fotografiar y cómo
Las fotos reales del equipo convierten mejor que cualquier stock perfecto.
Plan de rodaje (mínimos)
- Equipo: retratos profesionales (sonrisa natural), medio cuerpo, fondo neutro/ubicación real; incluye nº de colegiado en la bio web.
- Clínica: recepción, sala de espera, box en uso, esterilización, radiología; planos desde esquinas para dar amplitud.
- Tecnología: instrumental, radiografía digital, escáner intraoral (en uso).
- Acción: doctor/paciente (modelo o paciente real con consentimiento), gesto empático, guantes correctos, higiene impecable.
- Detalles: manos trabajando, marcas de confianza (sin “claims” médicos dudosos).
Iluminación y edición
- Luz continua y suave; evita dominantes verdes/azules fluor.
- Balance de blancos coherente en toda la serie; contraste moderado.
- Composición limpia, espacio negativo para superponer copy/CTA.
Antes/Después con cabeza (legal y estética)
- Consentimiento informado por escrito, revocable; anonimiza si procede.
- Misma iluminación, distancia y encuadre en el antes y en el después.
- Nada de “resultados garantizados” ni porcentajes absolutos; añade contexto (tiempos, cuidados).
- Peso optimizado (WebP/AVIF) y marcados como no indexables si lo exige tu política.
Integrar color y foto en la UX
- Hero: fondo claro, foto real del equipo, titular empático y CTA acento.
- Secciones de tratamientos: iconos/mini fotos sobre surface, microcopy sin jerga, CTA intermedio.
- Testimonios: marco en verde suave; foto mini del paciente (si procede).
- Mensajes de confianza (esterilización, financiación, urgencias): cajas con borde del primario.
- Coherencia multicanal: paleta y estilo fotográfico alineados con Google Business Profile y redes.
Performance: formatos, compresión y coherencia
- Formatos: WebP/AVIF + srcset responsivo; JPEG solo si hay incompatibilidades puntuales.
- Compresión: 70–80 de calidad; héroes ≤ 180–220 KB; fotos interiores ≤ 120 KB.
- Lazy-load para todo salvo hero; LCP < 2,5 s en móvil.
- CDN y caché activas; nombra archivos con semántica (equipo-dental-madrid.webp).
- Color management: exporta en sRGB; evita perfiles raros que mutan tonos en navegadores.
Checklist (paleta + sesión de fotos + revisión final)
Paleta
- 70/20/10 (base/ secundarios/ acento).
- Contraste AA en botones, links y textos.
- CTA “Pedir cita” en acento con hover/focus definidos.
Fotos
- Equipo (retratos consistentes).
- Clínica (recepción, box, esterilización, tecnología).
- Acción (doctor-paciente), con consentimiento.
- Edición uniforme (WB/contraste) y peso optimizado.
UX/Accesibilidad
- Botones ≥44 px, foco visible, tipografía 16–18 px.
- Hero con foto real + microcopy de tranquilidad.
- Core Web Vitals en verde (móvil).
Legal
- Textos de privacidad/cookies; Consent Mode activo.
- Autorizaciones para testimonios y antes/después archivadas.
En una web de dentista, la paleta adecuada reduce ansiedad y las fotos reales construyen confianza. Con un acento bien medido que guía al Pedir cita, una dirección fotográfica profesional y estándares de accesibilidad/performance, la estética deja de ser subjetiva y se convierte en resultado de negocio.
FAQs
¿Qué color uso para el CTA?
Un acento cálido (naranja coral/amarillo miel) que contraste con tu base clara y cumpla AA. Úsalo solo en acciones clave.
¿Cómo aseguro el contraste correcto?
Prueba ratios con herramientas (busca 4.5:1 para texto normal). Ajusta luminosidad del acento o del texto hasta cumplir.
¿Qué fotos son imprescindibles?
Equipo, clínica (incluida esterilización), tecnología en uso y 2–3 escenas de atención. Si sumas antes/después con permiso, mejor.
¿Y si no puedo hacer sesión ahora?
Usa temporales del equipo real con móvil (luz de ventana, fondos claros) y agenda la profesional. Evita stock médico “perfecto”.
👉 ¿Quieres que definamos tu paleta y plan de fotos y lo dejemos publicado en una semana?
Diseño web para clínicas dentales — MarcLoic.com
Artículos relacionados
