Cuando alguien me pregunta qué elementos de la página web son imprescindibles, no empiezo a hablar sobre el diseño, si no que lo hago por los objetivos. ¿Quiero captar leads, vender, reservar citas o simplemente explicar un servicio? Si quieres saber qué se necesita para hacer una página web debes conocer más que los elementos de diseño. Debes conocer los elementos de la página web que no se ven, es decir, sobre la configuración técnica y de rendimiento.
Actualmente, lo que no se ve es mucho más importa te que lo que si se ve, por lo que tenemos que planificar muy bien todos los pasos previos al diseño. Una vez realizada toda la planificación, pasaremos a centrarnos en los elementos de diseño que se incluyen en una página web.
Elementos de una página web que no se pueden olvidar
Si no has hecho nunca una, te preguntarás qué se necesita para hacer una página web. Hay algunos elementos que nos vienen solo al pensarlos (la información, imágenes...) pero hay muchos que son elementos técnicos que pasan desapercibidos. Antes de diseñar ninguno de los elementos de la página web, debemos tener claro algunos que no se ven pero son imprescindibles a la hora de crear un proyecto. En este caso, los que no se ven son incluso más importantes que todos los demás. Con estos elementos bien diseñados e implementados, evitaremos muchos problemas en el largo plazo:
Configuración previa
- Contrata un hosting de confianza con unas prestaciones acordes a tus necesidades.
- Compra un dominio, con el nombre de tu negocio.
- Conecta el dominio con el hosting y espera a que se propaguen los DNS (direcciones) para poder empezar a configurar.
Objetivos
- Define qué objetivo quieres conseguir con tu proyecto.
- Conseguir contactos para ofrecerles productos y servicios.
- Tener la máxima visibilidad posible.
- Mostrar información relevante para los clientes potenciales.
- Conseguir reuniones individuales con clientes.
- Otros en función de las características de tu negocio.
Seguridad y rendimiento
- Configura los certificados de seguridad y direcciones bajo protocolos seguros.
- Verifica que se realizan copias de seguridad diarias del contenido.
- Protege el acceso a tu web con contraseñas complejas y verificación en dos pasos.
- Asegura que proteges tu web contra spam y ataques de desprestigio.
Elementos de diseño
Cabecera (header):
- Coloca tu logotipo y si corresponde tu lema
- Facilita una llamada a la acción dentro de un lugar visible en todo momento o con un contacto a tu teléfono
Menú (navegación):
- Organiza la información de tu web y crea submenús si corresponden.
- Configura el menú para mantener la legibilidad en todos los dispositivos
- Piensa un diseño mobile-first que permita tener toda la información importante al alcance del pulgar.
- Crea las migas de pan si tienes un sitio complejo para que el usuario pueda ubicarse sin esfuerzo.
Footer (pie):
- Facilita la información legal del sitio (privacidad, cookies, términos).
- Muestra tus datos de contacto completos y redes sociales si corresponden.
- Coloca un CTA si tienes un sistema de captación de clientes.
Siempre creo todos los elementos en el orden en el que los muestro aquí, ya que me aseguran que las bases del proyecto están bien asentadas antes si quiera de crear cualquier texto de contenido.
El cuerpo que explica y convence
Dentro de los elementos de diseño que se incluyen en una página web, debemos comenzar haciendo referencia a la manera de organizar la información. Para poder organizar la información de manera atractiva, se suele proponer la estructura HERO que convierte las páginas de información de productos y servicios en verdaderas URLs de cierres de ventas. Para hacer esta estructura debemos tener los siguientes elementos:
- Sección Hero con propuesta de valor, beneficios y un CTA.
- Prueba social: muestra clientes previos con los que has trabajado y enlaza con sus proyectos.
- Bloque de beneficios con 3–5 viñetas cortas con información concisa.
- Explicación corta del producto/servicio con enlaces a detalle.
- Prueba de proceso en el que muestres cómo trabajas de manera resumida.
- Preguntas frecuentes sobre el producto/servicio que ayuden a clarificar las principales objeciones.
- Cierre con CTA que ayude a conseguir a los clientes potenciales.
Con la estructura HERO consigues poner al cliente como el protagonista de la historia, lo que hace que pueda identificarse con la información y se deje guiar por la experiencia de la marca que actúa como experta.
Elementos de diseño que se incluyen en una página web
A continuación, deberás trabajar en cada una de las páginas de producto/servicio los elementos de la página web que a priori son los primeros, pero como ves los dejamos para el final.
- Jerarquía y ritmo visual
- Usa titulares que guíen con párrafos cortos y redacción clara.
- Dale a cada elemento el espacio que se merece, no pegues excesivamente los elementos entre sí.
- Si la información es mucha, coloca un índice interactivo con enlaces al contenido.
- Tipografías
- Crea una organización de textos que destaquen en función de la importancia que tienen cada uno.
- Usa los formatos destacados solo si son necesarios.
- Color y contraste
- Usa tus colores de marca y asegura que tienes varios para crear contrastes.
- Asegura que los CTAs destacan por encima de todos los demás elementos sin problema.
- Imágenes y elementos multimedia
- Usa imágenes adecuadas al lugar en el que se vayan a colocar.
- Optimiza los formatos y los tiempos de carga lo máximo posible.
- Si usas vídeos, que sean cortos y que tengan subtítulos para mejorar la accesibilidad.
- Textos
- Usa textos más pequeños para información importante o la llamada "letra pequeña"
- Crea párrafos diferenciados en función del contenido a mostrar.
Si tienes unos pequeños conocimientos de cómo diseñar estos elementos de una página web podrás conseguir mucho mejores resultados con poco esfuerzo.
Consejos para CTAs y formularios
Los CTAs o llamadas a la acción son imprescindibles para poder darle al cliente ese empujoncito que necesita para acercarse a la compra. Necesitamos conocer los principales tipos de cada uno de ellos para poder elegir cuáles son los que mejor se adaptan a la información:
CTA aislado:
- Tipos:
- Primario: hace referencia al deseo principal del cliente y es algo más directo. Se usa en contextos muy cercanos a la compra. Por ejemplo: "quiero probar el programa"
- Secundario: es una alternativa suave, que nos permite colocarlo en sitios más alejados a la compra y que no parezca agresivo. Por ejemplo "resuelve tus dudas en 15 minutos"
- Fantasma: se camufla en el texto a modo de enlace y se usa en contextos que son especialmente delicados.
Los verbos en primera persona suelen funcionar muy bien en los CTAs ya que inconscientemente parecen palabras del propio cliente que revisa la información.
Formularios:
- Campos: minimiza los campos al máximo, pare recoger solo la información estrictamente necesaria.
- Fricción mínima: si usas funciones de autocompletado o dejas toda la información clara se reduce la desconfianza a rellenarlo.
- Privacidad y confianza: deja claro el propósito de rellenar el formulario y añade las cláusulas legales de los formularios
- Formatos: usa un formato adecuado en función de la información a mostrar, ya sea en pop-up, en página independiente o dentro del contenido.
En mi opinión personal, usa solo los formatos de pop-up cuando sean ofertas. Para formularios de recogidas de datos siempre es mejor incluirlo en el contenido, sin animaciones y como uno más de los elementos de una página web.
Elementos opcionales con impacto
Como información adicional a nuestra oferta de productos/servicios, podemos añadir ciertos elementos de la página web que complementan a la información principal. No suelen molestar demasiado visualmente y permiten conseguir un resultado mucho más funcional. Algunos de ellos son los siguientes:
- Blog: si vas a publicar con constancia y con intención, adelante. Si no, mejor crea una sección de recursos que sirven en cualquier momento.
- Buscador interno: imprescindible en catálogos y blogs grandes. Ayuda a que los clientes encuentren rápidamente lo que necesitan.
- Migas de pan: permiten al usuario encontrar dónde está en sitios con mucha información sin apenas esfuerzo.
- Sidebar: útil si se quiere añadir información relacionada en los apartados de blog
- Chat/WhatsApp: se suele usar para preguntas rápidas y acceder al soporte técnico.
- FAQ: reduce las objeciones de los clientes y los pasos necesarios para poder resolverlas.
Conclusión
Los elementos de la página web se eligen con un objetivo concreto. Cada uno de ellos cumple una función que en definitiva, es acercar al cliente a la compra. Si respetamos todos los elementos previamente mencionados, nos aseguramos de tener una buena base que funciona en los elementos de una página web. Muchas veces, menos es más, por lo que tienes que pensar cómo el cliente y darle justo lo que necesita, ni más ni menos. Si tienes una buena estrategia, tu web te aportará los resultados que necesitas para tu negocio.
