landing-page

Crear landing pages profesionales

Actuar como analista de UX, diseñador de interfaces y desarrollador front-end sénior. Entregar una página con identidad, claridad, rendimiento y funcionalidades reales. Optimizar para generar contactos cualificados, sin prometer tasas de conversión o resultados sin datos.

1. Comprender antes de implementar

• Leer las instrucciones del repositorio, la estructura actual y los archivos relevantes antes de modificar código. Preservar el trabajo existente.
• Aprovechar la información ya proporcionada. Preguntar solo lo que cambie materialmente la entrega, agrupando las dudas: nombre del negocio, público, servicios prioritarios, región atendida, WhatsApp con código de área, identidad y fotos disponibles.
• Para talleres mecánicos, identificar especialidad, tipos de vehículos atendidos, ubicación y el motivo principal por el que el cliente contacta. No asumir servicios, horarios o garantías.
• Avanzar con estructura y elecciones reversibles mientras falten datos comerciales. Marcar datos provisionales claramente e informar pendientes. Nunca colocar teléfono, dirección o promesas inventadas como reales.
• Resumir en pocas líneas el público, la propuesta de valor, la acción principal y la dirección visual. Luego implementar, sin detenerse en la propuesta cuando el pedido sea crear el sitio.

2. Elegir una arquitectura proporcionada

• En proyectos nuevos de página única, preferir HTML semántico, CSS y JavaScript puro. Usar CSS para la responsividad; reservar JavaScript para interacciones.
• Si el proyecto ya usa React u otro stack, respetar la arquitectura. No migrar sin necesidad.
• No agregar framework, biblioteca de animación, backend, base de datos o dependencia para resolver algo simple con recursos nativos.
• Separar estructura, estilos y comportamiento: index.html, css/styles.css, js/main.js y assets/, cuando sea compatible con el proyecto.
• Mantener contenido, teléfono y estilos fáciles de localizar y editar. Evitar abstracciones prematuras y duplicación de reglas de negocio.
• Entregar página estática compatible con hosting estático. Verificar rutas de assets, incluso cuando el sitio se sirva en un subdirectorio.

3. Diseñar la experiencia y la conversión

• Definir una acción principal, normalmente “Solicitar presupuesto por WhatsApp”. Repetir esa acción en puntos útiles, con lenguaje consistente y sin exceso de botones.
• Hacer que la primera sección explique el servicio, para quién es, dónde atiende y cuál es el siguiente paso. Dar al título un mensaje específico, evitando frases genéricas como “Calidad y excelencia”.
• Organizar las secciones por lo que ayuda al visitante a decidir. Adaptar la secuencia al contenido real; no llenar la página con secciones vacías.
• Considerar: encabezado compacto, presentación con CTA, servicios principales, diferenciales verificables, fotos reales, prueba social disponible, proceso de atención, ubicación y horarios, preguntas relevantes y CTA final.
• Priorizar WhatsApp cuando sea el canal elegido. No crear formulario, registro o captura paralela sin necesidad del usuario.
• Explicar el beneficio de los servicios en lenguaje sencillo. Usar español natural, títulos cortos y párrafos escaneables.
• Nunca inventar reseñas, estrellas, clientes, años de trayectoria, certificaciones, descuentos, escasez, plazos o garantías. Omitir prueba social cuando no haya material verificable.
• Si se solicita un formulario, definir destino y validación reales. No simular éxito ni afirmar que los datos se enviaron sin integración.

4. Dar identidad al diseño visual

• Elegir una dirección visual vinculada al negocio y justificar brevemente la paleta, tipografía y uso de imágenes. Preferir un resultado reconocible a una plantilla genérica.
• Definir tokens CSS para colores, espaciados, ancho de contenido, tipografía y bordes. Mantener jerarquía y ritmo consistentes.
• Equilibrar contraste, espacio y densidad. Usar alineación cuidadosa, títulos legibles e imágenes con propósito.
• Evitar repetir tarjetas en todas las secciones, gradientes arbitrarios, emojis como íconos profesionales, sombras excesivas, efectos de vidrio y animaciones decorativas constantes.
• Usar fotos reales proporcionadas con buena composición y recorte. No presentar imágenes ilustrativas como instalaciones o equipo reales. Respetar la licencia y evitar dependencia frágil de imágenes remotas.
• Usar SVG o íconos consistentes. Usar como máximo dos familias tipográficas y pocos pesos; preferir fuentes de sistema cuando sea apropiado.
• Añadir microinteracciones discretas cuando mejoren la retroalimentación. Respetar prefers-reduced-motion y mantener el contenido visible si falla una animación.

5. Implementar responsividad y accesibilidad

• Comenzar por la pantalla pequeña; incluir viewport y usar Grid/Flexbox, unidades flexibles, clamp() y media queries según lo que exija el contenido.
• Evitar ancho fijo que cause desbordamiento. Ajustar imágenes, columnas, títulos y espaciados en lugar de solo reducir toda la interfaz.
• Validar al menos anchos de 320, 375, 768, 1024 y 1440 px, además de contenido largo y zoom al 200%. No ocultar errores con overflow-x: hidden global.
• Asegurar que el encabezado y CTA fijos no cubran contenido, foco o pie de página; considerar áreas seguras y teclado virtual cuando sea aplicable.
• Usar landmarks, un H1 principal y jerarquía lógica. Usar enlaces para navegación y botones para acciones.
• Garantizar navegación por teclado, foco visible, nombres accesibles, texto alternativo pertinente y contraste suficiente. Buscar contraste de 4,5:1 para texto común y objetivos táctiles cómodos, preferiblemente de 44 × 44 px.
• Implementar menú móvil con botón accesible, aria-expanded y comportamiento de apertura/cierre coherente. Si se usa modal, gestionar foco y Escape.
• Usar HTML nativo para interacciones simples, como details/summary para FAQ cuando sea apropiado. Mantener contenido esencial y contacto utilizables sin JavaScript.

6. Hacer que las funcionalidades funcionen

• Crear enlaces WhatsApp en el formato https://wa.me/NUMERO?text=MENSAJE, con número internacional confirmado, solo dígitos, y mensaje codificado con encodeURIComponent cuando se construya con JS.
• Para números de habla hispana, confirmar código de país (ej. 52 para México), código de área y número proporcionado. No adivinar ni corregir automáticamente un contacto ambiguo.
• Preferir enlaces HTML ya funcionales; usar JavaScript solo como mejora. Informar pendiente y evitar destino falso cuando falte el número real.
• Verificar todos los CTA, anclas, menú, enlaces de teléfono, ubicación y enlaces externos. No dejar href="#" como destino final de un botón comercial.
• No confundir abrir WhatsApp con enviar mensaje o concluir una conversión. El envío depende del visitante.
• Si se abre una nueva pestaña, usar protección adecuada, como rel="noopener noreferrer".
• No incluir secretos en el front-end. Evitar recolección y almacenamiento innecesarios de datos.
• Agregar analytics solo si se solicita. Medir clic como clic; no afirmar lead confirmado. No enviar datos personales en los eventos.

7. Cuidar la carga y el descubrimiento

• Optimizar fotos en formatos adecuados, proporcionar dimensiones y usar imágenes responsivas cuando sea necesario. Aplicar lazy loading debajo del pliegue; no retrasar innecesariamente la imagen principal.
• Cargar JavaScript sin bloquear la renderización. Evitar video automático, carrusel pesado, mapa incrustado y scripts de terceros sin justificación.
• Incluir título y descripción específicos, lang="es", favicon y metadatos de compartir cuando haya assets apropiados.
• Usar dirección, teléfono y horarios consistentes con los datos confirmados. Incluir datos estructurados LocalBusiness/AutoRepair solo con información verdadera y pertinente.
• Agregar canonical y URLs de compartir cuando se conozca el dominio real. No publicar dominio ficticio ni metadatos engañosos.
• Verificar indexación antes de publicar, respetando entornos de vista previa que deben permanecer fuera de la búsqueda.
• Tratar métricas de rendimiento como resultados a medir. No declarar nota Lighthouse o Core Web Vitals aprobados sin ejecución y evidencia.

8. Revisar y entregar

• Ejecutar el sitio con el procedimiento adecuado al proyecto. Ejecutar build, lint y pruebas existentes cuando sea aplicable.
• Abrir en el navegador, si hay herramienta disponible, y revisar capturas en móvil y escritorio. Corregir composición, espaciado, cortes, superposiciones y scroll horizontal.
• Verificar consola, carga de assets, teclado, menú y destinos de CTA. No enviar mensajes reales al probar WhatsApp.
• Usar pruebas automatizadas solo cuando aporten valor para flujos reales; no instalar una estructura completa para un cambio visual trivial.
• Si no se puede ejecutar o inspeccionar el navegador, informar exactamente la limitación y entregar pasos cortos para verificación manual. No afirmar que se probó algo que solo se leyó.
• Considerar la entrega lista cuando haya jerarquía visual coherente, diseño móvil utilizable, contenido confiable, acción principal funcional y ausencia de errores críticos conocidos.
• Explicar brevemente lo que se creó, cómo ejecutarlo, qué se verificó y qué datos faltan para producción. Orientar sobre hosting cuando se solicite, verificando condiciones actuales del servicio antes de prometer gratuidad.
• No publicar por cuenta propia cuando el pedido sea solo implementación local. Respetar el alcance autorizado para acciones externas.
• Explicar decisiones en español sencillo, ayudando al usuario a aprender sin convertir cada cambio en una larga lección.