Objetivo del proyecto
Construimos la landing page institucional para Instituto MenteVitta centrado en atraer pacientes de Teresina-PI para servicios privados en Psicología, Psiquiatría y Neuropsicología. La copia, ya proporcionada por el cliente, se reorganizó en un embudo claro que termina en varias CTA “Agenda tu cita”.
Identidad visual
| Elemento | Escola | Función |
|---|---|---|
| paleta | Azul grisáceo (#38536E) + gris claro | Transmite confianza y serenidad. |
| CTA | Verde brillante (#0FAA34) | Alto contraste, sugiere avance/salud. |
| tipografía | Blanco y gris oscuro | Legibilidad sobre fondos oscuros y claros. |
| Imágenes | Fotos del espacio, personal y pacientes atendidos | Humanizan y refuerzan la autoridad. |
| patrón decorativo | Líneas orgánicas y logotipo de marca de agua | Crean cohesión estética y ligereza. |
Estructura de la página
| Bloquear | Contenido | Propósito |
|---|---|---|
| héroe | Titular “Cuidar tu mente es transformar tu vida” + foto de la clínica + Dr. Andreas Bastos (CRM) | Impactar y mostrar credenciales |
| Sobre el Instituto | Imagen del equipo + texto “Un nuevo concepto en salud mental” | Generar confianza institucional |
| Especialidades | Control deslizante: Psiquiatría • Psicología • Neuropsicología + CTA | Áreas de actividad actuales |
| Bandera de la agenda | Horario de apertura (lun-sáb 8:00-20:00) + botón verde | Convertir |
| Enfoques clínicos | 3 cartas: TCC, ABA, Psiquiatría | Educar sobre los métodos |
| Equipo de expertos | Carrusel con fotos de profesionales | Prueba social de experiencia |
| Servicio presencial y en línea | Texto corto + CTA | Cubre todos los públicos |
| Medio ambiente | galería de oficinas | Demostrar comodidad y bienvenida |
| Pie de página | Dirección (Av. Universidade, 7350, Teresina-PI), contactos, sello de WhatsApp | Cerrar con credibilidad |
Los CTA verdes reaparecen después de cada bloque decisivo, lo que garantiza un siguiente paso obvio.
Experiencia móvil y UX
- Móvil primero: los controles deslizantes se deslizan al deslizar el dedo; Las tarjetas se apilan verticalmente.
- Botones ≥ 44 px (apto para pulgares).
- La tipografía base de 16 px y el contraste AA garantizan una lectura sin zoom.
- El botón de WhatsApp flota en la esquina inferior derecha a lo largo del desplazamiento.
Mejores prácticas de rendimiento y SEO
| factores | Implementación |
|---|---|
| Velocidad | Imágenes WebP + carga diferida; CSS crítico en línea. |
| Semántica | H1 único, H2 por sección, listas en <ul> con iconos. |
| Palabra clave de enfoque | “Psicología y psiquiatría en Teresina” distribuida (~1%) en título, meta, introducción y subtítulos. |
| Enlaces | Botones para WhatsApp/calendario con rel="no seguir". |
| Accesibilidad | Texto alternativo en imágenes y alto contraste en CTA. |
Resumen:
La landing page Instituto MenteVitta combina un ambiente acogedor, una presentación clara de los servicios y múltiples CTA ecológicos. El diseño lleva al visitante a través del ciclo confianza institucional → especialidades → equipo → programación, utilizando evidencia visual e información objetiva para fomentar la reserva de citas en persona o en línea.
