Una buena página web es visualmente atractiva y bonita, pero también es funcional. Esto es lógico, pero te sorprendería la cantidad de ejemplos que puedo darte de personas que no lo han hecho así y han terminado con webs muy bonitas pero que no convertían a su audiencia en clientes.  Por todo esto es imprescindible tener conocimientos de estrategia web y branding además de diseño visual a la hora de crear una web. 

Pero como en un simple post no cabe todo esto hoy voy a contarte cuáles son las claves para que tu web sea bonita y, a la vez, funcional. Con “bonita” por delante porque lo que a mí me gusta es el diseño, claro.

Cómo diseñar una web bonita y funcional para tu marca

Las claves para hacer una web atractiva pero que cumpla con su cometido (vender un servicio o un producto) pasan por:

• Estructurar correctamente las diferentes páginas de la web
• Adaptar los elementos del diseño a esta estructura (nunca al revés)
• Trazar una estrategia (Funnel de Ventas)
• PRO TIP: quédate hasta el final porque te voy a contar tres trucos que harán que tu web sea aún más funcional

Estructurar correctamente las diferentes páginas de la web

Estructurar bien las páginas dentro de la web significa organizar la arquitectura del sitio para que garantice que el usuario no se pierda. Lo que suelo hacer yo (y todos los diseñadores o programadores) es crear un mapa de sitio simple antes de empezar a construir nada. 

Un mapa de sitio consiste en distribuir las páginas principales de la web dentro de un mapa visual o esquema: HOME, SOBRE MÍ, SERVICIOS, CONTACTO, BLOG, LOGIN; y señalar cómo se relacionan. ¿La página de servicios es una sola página de ventas de todos los productos o cada uno tiene una página individual? ¿En la HOME hay más de un enlace que lleve a la pestaña “sobre mí”? 

Si en tu web no has tenido en cuenta este mapa de sitio para crear la estructura puede que el usuario se esté perdiendo al navegar por ella. Algunos errores muy comunes que se dan cuando no se ha trabajado la arquitectura son:

• Los contenidos no están diferenciados en bloques, sin llamadas a la acción, títulos destacados, listas, espacios…
• No se tiene en cuenta el número de clics o pasos que el usuario tiene que realizar para llegar hasta la información que busca. Cuantos más clics más probabilidad hay de que abandone la web sin comprar nada.
• Hay enlaces que no funcionan o llevan a páginas que dan error, algo fatal no solo para la funcionalidad de la página sino para el posicionamiento web, ya que a los buscadores como Google no les gustan nada los enlaces rotos.
• El logo situado al lado de la barra de navegación no tiene url. ¡La mayor parte de los usuarios pinchan aquí cuando quieren volver a la home! 

Además, déjame decirte que una web bonita con este tipo de errores de arquitectura… ¡se convierte en una web feucha! Sí, porque al final el usuario que se frustra y se va no la ve bonita si no es funcional. Por eso, siempre hay que adaptar el diseño a la estructura web, y nunca al revés.

Adaptar los elementos del diseño a la estructura web

Ahora que por fin tenemos una estructura web es hora de diseñar la web “bonita”. Las partes que hacen que una web sea atractiva son los elementos visuales:

• Fotografías
• Figuras geométricas, líneas…
• Tipografías y textos
• Paletas de color

Si has trabajado en el branding de tu web estoy segura de que ya tienes una idea de cómo elaborar estos materiales. Puede parecer baladí, pero lo cierto es que elegir una peleta de color, o una tipografía, o una buena foto… No es algo que se pueda hacer a la ligera. Cada elemento visual refleja ciertos valores y rasgos de la personalidad de tu marca. ¡Así que presta atención!

Te pongo algunos ejemplos para que comprendas mejor lo que quiero decirte:

• Una fotografía en la que aparezcas sonriendo, vestida de blanco y en un campo de trigo no inspira las mismas emociones que una en la que vistes con traje, tienes los brazos cruzados y en una oficina.
• Las líneas curvas inspiran suavidad, y las líneas rectas profesionalidad y rigidez.
• Las tipografías Script son más suaves, como si estuvieran hechas a mano, y reflejan calidez, maternidad o dulzura, mientras que las tipografías Sans son más limpias y sobrias, más profesionales y más serias. Puedes leer más sobre este tema en mi blog “Clasificación de las Tipografías”.
• Por último, las paletas de colores son un conjunto limitado de tonos que eliges para que representen a tu marca. No evoca lo mismo un amarillo chillón como el de McDonalds que un amarillo ocre (como los que yo utilizo, si te fijas). Por eso es muy importante darle prioridad a la paleta de colores de tu marca. En esta entrada te cuento una de mis metodologías preferidas para elegir las paletas de colores de las marcas con las que trabajo. 

Una vez dispongas de todos los elementos visuales que conforman tu marca es hora de adaptarlos a la estructura de la página para hacerla bonita.

Trazar una estrategia

Trazar una estrategia para tu página web es la mejor manera para que una página pase de ser solo funcional a una máquina de vender.

La mejor manera de trazar una estrategia en tu web es elaborando un buen embudo de ventas. 

¿En qué consiste? Pues como ocurre en los embudos, consiste en convertir un gran caudal de usuarios en clientes a medida que vayan pasando por las diferentes fases de conocimiento de la marca, desde el desconocimiento total hasta la compra. 

Existen miles de estrategias para elaborar un embudo de ventas. Mi favorita es dar la posibilidad al cliente de descargar algo gratuito en tu web que le aporte mucho valor a cambio de su correo. De esta manera puedes empezar a enviarle newsletters o campañas de email marketing con las que, poco a poco, irá conociendo a tu marca. 

PRO TIPS rápidas para que tu web sea bonita, funcional y ultra competitiva

Como colofón voy a darte tres trucos que te pueden salvar la vida (o la de tu negocio) por si aún te preguntas Cómo diseñar una web bonita y funcional para tu marca:

1. Acuérdate de adaptar tu web al RGPD (Ley de Protección de Datos). ¡Te evitarás una multa de 30.000 euros!
2. No te olvides de comprobar la velocidad de tu web (puedes hacerlo con herramientas gratuitas de auditoría web como Woorank.
3. Adapta tu web a todos los dispositivos (móvil, tablet, PC)