Las mejores prácticas de diseño web para PYMES ¡Conquista a tus usuarios y a Google!

Si como PYME tienes una web o estás pensando en tenerla, lo primero que debes saber es que… En internet, no basta con estar, hay que “saber estar”.  

Y para “saber estar” has de trabajar el diseño de tu página web desde tres frentes: tu marca, tu usuario y Google. 

Solo así tendrás una presencia digital consistente y una marca que genere confianza. Y cuando hay confianza, hay ventas. 

Hoy te mostraré algunas prácticas y estrategias de diseño web que te van a ayudar a construir un sitio de confianza y, en definitiva, a cumplir tus objetivos de negocio. 

Los tres pilares del diseño web

Antes de nada, aclaremos algunos conceptos: ¿qué no es una web?

• No es solo una página bonita
• No es un catálogo de productos y servicios
• No es un cúmulo de palabras claves 

Una página web es la oportunidad para que tu cliente potencial te conozca, para construir significados en torno a tu marca, para diferenciarte y posicionarte en el mercado y en los buscadores.  

Es un punto de contacto donde puedes ganarte la confianza de tus usuarios y conquistarlos. 

Por esta razón, debes trabajar el diseño de tu web desde una perspectiva global que abarque los tres pilares que te avanzaba: tu marca, tu usuario y Google. 

Pilar 1: tu marca

Tu sitio web es la tarjeta de presentación de tu empresa, tu oficina, tu local comercial, tu escaparate digital, un punto de venta, de conversación con tus clientes reales y potenciales. Es tu “todo digital”. 

Por tanto, has de aprovechar este espacio para mostrar tu propuesta de valor y tu universo de marca (valores, personalidad, identidad visual, identidad verbal…) y demostrar tu Know-How.

Usuario

Tu usuario, tu buyer persona debe estar en el centro de tu estrategia.       

Todo lo que digas o hagas has de hacerlo pensando en él. 

La web de tu pequeña o mediana empresa ha de ofrecer una experiencia de usuario satisfactoria y plasmar a la perfección lo que puedes hacer por él, cómo le vas a ayudar, y cuáles son los siguientes pasos que tiene que dar para seguir contigo. 

Google

En realidad, satisfacer a Google es tan simple como satisfacer a los usuarios.  Sencillamente complejo. 😉

Si juegas bien tus cartas del posicionamiento SEO y aportas valor a tus visitas a través de tus contenidos ganarás puntos ante el gran buscador. 

Tu diseño de tu web ha de respirar tu identidad de marca, reflejar tu propuesta de valor y factor de diferenciación, y trabajar el posicionamiento orgánico, para que cuando tus usuarios te busquen, te encuentren. 

Veamos ahora cómo trabajar cada uno de estos aspectos. 

1. Branding: construye una marca coherente 

En el diseño web hay dos factores claves que debes trabajar en tu marca, independientemente del tamaño de tu empresa.

• La identidad visual: la proyección visual de tu marca
• La identidad verbal: lo que dices y cómo lo dices

Identidad visual

Es la identidad gráfica de tu marca y está compuesta por el logo, las tipografías, paleta de color, elementos gráficos y tratamiento fotográfico.

Todo ello conforma el universo visual de la marca.

Identidad verbal

¿Cómo habla tu marca? ¿Qué va a decir y cómo lo va a decir? 

¿Eres un negocio cercano, divertido, formal, técnico, disruptivo?

Los elementos que conforman la identidad verbal son: 

• El naming: el nombre de tu marca
• El tono de voz: la forma en que te expresas y comunicas con tu entorno
• El mensaje de marca: qué quieres transmitir y cómo adaptas este mensaje a tus diferentes audiencias y canales
• El territorio verbal: es un resumen de la identidad verbal que recoge recursos lingüísticos, palabras claves, qué se puede decir y qué no…

Con la identidad verbal son las palabras las que ayudan a construir tu marca, a conectar con tu audiencia y a diferenciarte. 

2. Usuario: aporta valor, una buena experiencia, y conquista a tu audiencia

Antes de crear contenido para tu web has de tener claro qué quieres contar en ella y a quién se lo vas a contar. 

¿Quién es tu buyer persona?

El usuario debe estar en el centro de tu estrategia, y, por tanto, las temáticas de tus contenidos deben responder a sus necesidades. 

A su vez, el tono de voz y tus valores de marca han de estar alineados a los suyos. 

El diseño, los contenidos, y los productos o servicios que ofreces…  Todo ha de estar pensado para que tu usuario navegue con facilidad, consuma contenido relevante y encuentre en tu empresa la solución que necesita. 

¿Cuál es el objetivo de cada página?

Cada página que construyas en tu sitio web debe responder a un objetivo.

Por ejemplo:

• La home es un buen punto de partida para ir guiando al usuario en función de sus necesidades

Un objetivo podría ser que haga clic en uno de los CTA (que estratégicamente has colocado) o dirigirlo a una página más específica. 

• Con tu página de servicios quieres comunicar cuál es tu propuesta de valor

En este caso, un objetivo puede ser la consideración: despertar el interés del usuario para que te considere como opción. 

El tiempo de permanencia, el número de páginas vistas, entre otros KPIs, te darán pistas de si vas por buen camino. 

• Otra meta puede ser invitarle a descargarse un e-book o a una sesión de consultoría gratuita, o que se suscriba a tu newsletter.
• En la página de contacto, tu objetivo está claro, que se dirijan a ti 

Aquí puedes usar la clásica página de contacto (e-mail con mensaje, teléfono o dónde estamos) o bien, que agenden directamente una reunión o llamada. 

• Si tienes un e-commerce, lo que quieres es vender online. Sin embargo, puedes marcarte otros subobjetivos a cumplir: aumento del ticket medio, recurrencia, carritos abandonados, etc.

En cualquier caso, cada objetivo ha de tener asociado un KPI, para que puedas valorar si tu planteamiento funciona o no. 

¿Qué vas a contar? Marketing de contenidos y copywriting

Una vez has respondido a estas dos preguntas, entran en juego dos estrategias claves para llenar de valor tu sitio, comunicar tu propuesta y mostrar tu Know-How: el content marketing y el copywriting.

Marketing de contenidos

El marketing de contenidos es la estrategia para atraer y conquistar tu público objetivo ofreciéndole contenido relevante en el momento en el que lo necesita. 

El famoso “contenido de valor” ha de cumplir una doble función: dar respuesta a las necesidades de tus usuarios, y al mismo tiempo, facilitarte el cumplimiento de tus objetivos. 

Aplicados al diseño web, los contenidos pueden ser de dos tipos: estáticos y dinámicos. 

Contenido estático

El contenido estático son las páginas de tu web que apenas varían: home, contacto, quiénes somos, servicios, etc. 

Es decir, lo creas una vez, y aunque pueda requerir alguna actualización, en general, dura bastante tiempo. 

De hecho, es importante que analices cómo está funcionando este tipo de contenido y que hagas diferentes pruebas para optimizarlo al máximo y mejorar tus conversiones. 

Contenido dinámico

El dinámico es el contenido vivo de tu web, que se produce con recurrencia. Es el caso del blog. Generas contenido relevante para tus usuarios. 

El estático es el núcleo central de la marca. Este tipo de contenido se pone al servicio de la estrategia para generar autoridad, tráfico y posicionamiento.

Aquí, como veremos más adelante, es fundamental definir la estructura de la web para valorar cómo vas a distribuir el peso del contenido entre tus páginas de la web y el blog, es decir, entre el contenido estático y dinámico. 

¿Quieres aprender más sobre marketing de contenidos? 

Descárgate gratis este e-book en el que 12 profesionales han compartido generosamente su experiencia y conocimientos. 

Escritura persuasiva

El copywriting es el arte de escribir para convencer, y cuando hablamos de copywriting web, se trata de persuadir a los usuarios que visitan tu sitio. 

¿Cómo?

• Con una propuesta de valor única e irresistible
• Céntrate en los puntos de dolor de tu buyer y preséntate como solución
• Prioriza beneficios vs. características: no hables de tu producto o servicio, sino de lo que puede hacer por tu cliente
• Enriquece tus textos con verbos de acción: di adiós a verbos comodines como “hacer” o “decir” y utiliza power words. Por ejemplo: aprender, descubrir, controlar, imaginar…
• Aprovecha el poder de un CTA y dile a tu usuario lo que quieres que haga

A grandes rasgos podríamos decir que el marketing de contenidos es la estrategia que te ayuda a atraer y conquistar a tu audiencia, y el copywriting a convencerla de que pase a la acción y se quede contigo. 

Por tanto, a la hora de trabajar el diseño de tu web has de trabajar su contenido desde dos perspectivas: aportando valor y mostrando tu autoridad en el tema (estrategia de contenidos) y, por otro, persuadiendo a tu usuario (copywriting). 

En cualquier caso, el tándem de “contenido de valor y persuasión” no debe faltar en tu web. 

¿Cómo lo vas a contar? ¡Jerarquía visual al poder!

La forma en que presentes tu contenido puede marcar la diferencia en la experiencia de usuario y en su tiempo de permanencia. Y en esto tiene mucho que ver la jerarquía visual.

La jerarquía visual consiste en organizar y priorizar los elementos de la interfaz para que esta resulte intuitiva, fácil de usar y atractiva. 

Aquí tienes algunos elementos de diseño con los que puedes “jugar” para mejorar la experiencia de tus usuarios. 

1. Tamaño

Cuanto mayor sea el tamaño de un elemento, más atención atrae. 

Por ejemplo: en los encabezados (títulos y subtítulos), el tamaño de la tipografía variará en función de su relevancia. A mayor importancia, mayor tamaño de letra. 

2. Contrastes, sombras y colores

Utiliza los contrastes, sombras, colores o degradados para destacar los puntos importantes y guiar al usuario en su navegación. 

3. Deja que tus textos respiren. 

Utiliza espacios en blanco

Concede al usuario pequeños espacios de descanso visual. 

Combina párrafos largos y cortos

Y juega con ellos para dar ritmo al texto.

Alterna tus textos con imágenes

Para hacer más agradable la navegación. 

Pon títulos y subtítulos.

Además, de contribuir al SEO On Page, facilitará la comprensión de la página y la navegación del usuario. 

Usa cursivas y negritas

Para destacar conceptos y dinamizar tus textos.

Con estos pequeños detalles tus visitas se moverán cómodamente por tu web. Y ya sabes: usuarios felices, Google contento. 😉

4. Utiliza imágenes de calidad y representativas

Sigue las pautas marcadas en la identidad visual y no eches a perder tu web con malas fotografías, o imágenes sin sentido (si no aporta, sobra).

Y, por supuesto, y como veremos a continuación, todas las imágenes que subas han de estar optimizadas y bien dimensionadas. 

5. Ten en cuenta los patrones de lectura de tus usuarios

En el territorio digital los usuarios antes de leer, escanean.

De ahí que sean importantes los detalles de usabilidad que hemos mencionado. 

Pero, además, existen unos patrones de lectura muy marcados que representan el recorrido visual que una persona hace por la web:

El patrón Z (Z-pattern) 

Es el recorrido que hacemos habitualmente al leer, y nos da pistas sobre cuáles son las zonas y el contenido que debemos destacar y priorizar. 

• Comenzamos en la esquina superior izquierda y vamos dibujando una línea imaginaria hacia la derecha 

En la parte superior es donde debe aparecer el logo y el menú. 

• Luego bajamos en diagonal hacia la izquierda y volvemos a recorrer la línea imaginaria de izquierda a derecha

El usuario recorre los contenidos en diagonal y aterriza de nuevo en la parte inferior izquierda de la página. 

• La parte inferior es el final del recorrido

Es aquí donde debes terminar de conquistar al usuario y dar tus últimos argumentos o dejar tu Call To Action. 

Patrón F (F-pattern)

Cuando una página tiene más texto que imagen, el patrón F es el más habitual. 

En el patrón F, el usuario centra la atención en el primer párrafo y después recorre la web en horizontal desde el lado izquierdo, concentrándose en las primeras palabras de cada párrafo.  Los elementos de la derecha prácticamente se ignoran. 

¿Qué aprendizajes puedes extraer para el diseño de tu web teniendo en cuenta estos patrones?

• “Lo importante” siempre arriba. Es probable que tu visita no te lea hasta el final
• Cuida la usabilidad según hemos comentado: títulos, subtítulos, espaciado, etc. 
• Juega con imágenes, colores, tamaños, sombras, contrastes para destacar elementos
• Redacta textos concisos y directos
• Dile al usuario lo que quieres que haga
• En lo que se refiere a diseño web, menos es más: no redundes, no distraigas. Aporta claridad al usuario

¿Quieres saber más? No te pierdas este webinar de Max Camuñas y aprende a crear una web con gancho. 

Insertar video: https://youtu.be/4VfmVqEiiAw

3. Posicionamiento SEO y diseño web

Has construido una marca coherente y consistente. Es hora de que te vean.

El SEO es una estrategia a largo plazo cuyo objetivo es que aparezcas de forma natural en los primeros resultados de búsqueda.

En este sentido, tu web tiene que estar preparada para dar a los usuarios las respuestas que buscan; y que Google entienda que tu marca es la candidata perfecta para responder y aparecer en los primeros resultados de la SERP. 

Como puedes intuir, el marketing de contenidos y el SEO funcionan como un “matrimonio” perfecto. 

Los contenidos aportan valor al usuario, y el SEO trabaja para posicionarlos. 

Al hablar de posicionamiento y de diseño web nos centraremos sobre todo en el SEO On Page. 

¿Cómo trabajar el SEO On Page en tu diseño web?

El SEO On Page es el conjunto de acciones que se realizan en una web para mejorar el posicionamiento. Por tanto, todo lo que hagas depende de ti y está bajo tu control. 

1. Arquitectura web 

La arquitectura web se centra en organizar, jerarquizar los contenidos y cómo se van a relacionar entre ellos (enlazado interno).

Su objetivo es que tanto los usuarios como las arañas de Google se muevan cómodamente por el sitio web y encuentren la información que buscan con facilidad. 

Aquí unos pequeños tips adicionales:

• Al trabajar el enlazado interno destaca el color de los enlaces para que el usuario entienda que puede ampliar información
• No olvides ponerlos para que se abran en una ventana nueva
• Los enlaces deben ser naturales
• Presta atención al anchor text (el texto destacado del hipervínculo)
• No sobrecargues tus páginas con demasiados enlaces
• Aprovecha el footer para trabajar el link juice de tu sitio

2. Palabras claves e intención de búsqueda

Las keywords son palabras estratégicas para tu negocio con la que te van a buscar tus clientes potenciales. 

Sin embargo, en SEO, detectar las “palabras claves objetivo” va más allá.

No solo tendremos en cuenta las keywords, sino también la intención de búsqueda de los usuarios. 

Existen varios tipos de intención de búsqueda:

Informacional (Know)

El usuario busca información específica.

• Puede ser un dato concreto

Por ejemplo: ¿En qué año se hundió el Titanic?

• O necesitar una explicación más amplia

Por ejemplo: ¿Cómo hacer crepes?

Comercial o informativa/ transaccional (Know/Do)

La persona ya está informada y ahora necesita valorar las diferentes alternativas para tomar una decisión. 

La consulta será tipo “los X mejores, comparativas, opiniones, etc.”

Transaccional (Do)

El usuario tiene claro lo que quiere hacer: comprar, descargar, etc. 

Por ejemplo: “comprar ordenador HP”, “descargar Hay Day”

De acción (Device action)

Es una variación de la intención de búsqueda “Do”.  

La persona quiere realizar una acción mediante control de voz: llamar a alguien, poner música, una alarma, buscar en Maps, ver videos de gatitos…

Navegacional (Website)

El usuario escribe el nombre de la marca directamente en el buscador. 

Por ejemplo: Nike, Facebook, SiteGround 

De localización (Visit in person)

El valor de la búsqueda está en la geolocalización del usuario. 

Tanto el contenido como el diseño web ha de estar optimizado teniendo en cuenta las palabras claves de tu negocio y la intención de búsqueda de tus usuarios. 

 3. Encabezados H1, H2, H3…

Como decíamos al principio es importante que los textos respiren, y en este sentido, los títulos y subtítulos van a facilitar la lectura de la página al mismo tiempo que trabajas el posicionamiento. 

• Que tus títulos contengan siempre la palabra objetivo o su alternativa semántica
• Mantén una jerarquía para estructurar la información de tus páginas

• La etiqueta H1 es el título de la página (que no el título SEO)
• Después están las H2 que son los apartados destacados
• Los H3 son subapartados de H2 y los H4, a su vez, de los H3

3. Title o Título SEO y Meta descripción

Tienes un sitio trabajado y contenido de valor. Google decide apostar por ti y te muestra en la SERP. 

¿Qué es lo que ve el usuario? Aún no ve tu web ni tu contenido. Lo que ve es la URL, el título y la meta descripción. 

Urls amigable

Crea URLs amigables y semánticas. 

Es decir, que sean fáciles de recordar y en las que se intuya su contenido. 

Por tanto, debe ser corta, descriptiva y, por supuesto, incluir la palabra clave. 

Otros consejos a tener en cuenta son:

• Siempre en letras minúsculas
• Evita los signos de puntuación, excepto el guion medio para separar las palabras de la URL
• Salvo que sea relevante para la keyword, no utilices artículos, preposiciones o conjunciones. 

Título SEO 

El title es lo primero que ve el usuario en los resultados de búsqueda. Por tanto, ha de ser lo suficientemente persuasivo para que el usuario quiera saber más. 

Asegúrate de que aparezca la palabra clave y que no supere los 60 caracteres. 

La meta descripción 

Es un resumen del contenido, y de nuevo, ha de tentar al usuario. 

Ha de contener también la palabra clave y no superar los 150 caracteres. 

4. Optimizar imágenes 

Las imágenes de calidad y representativas de tu negocio son un must en el diseño web. 

Pero, además, este tipo de contenido visual ha de estar optimizado y bien dimensionado para que la página cargue rápido y el peso o el tamaño no afecte a la experiencia de usuario, y a tu crawl budget (el tiempo que pasa el bot en tu sitio).

Renombra tus imágenes

No subas los archivos con nombre tipo 1254.png.

Renombra la imagen con un texto que explique brevemente su contenido. 

Optimización del peso

Procura que las imágenes pesen menos de 100 KB. 

Para ello, cuentas con herramientas online para reducir el tamaño sin perder calidad, como tinypng. com o plugins especiales para WordPress como Smush o EWWW Image Optimizer.

Optimización del tamaño

Tu web tiene unas dimensiones máximas. Lo ideal es que no supere los 1200 px. de ancho. 

Por tanto, las imágenes que subas no deben sobrepasar esa dimensión. 

Si, por ejemplo, subes una imagen de 1950 px. de ancho, para mostrarse al usuario se va a tener que redimensionar. Esto supone mayor tiempo de carga y además, es probable que la imagen redimensionada sea más pesada. 

Añade el Alt Text 

El Alt Text es una etiqueta HTML que describe la imagen.

Es información adicional y muy valiosa para los bots de Google, para los usuarios con discapacidad visual, y para describir la imagen si, por circunstancias, la página no carga bien. 

5. Velocidad 

Los usuarios esperan que tu sitio cargue en menos de dos segundos. ¿Estarás a la altura de sus expectativas?

La velocidad de carga es un aspecto del diseño web que debes cuidar, ya que influye tanto en la experiencia de usuario como en el posicionamiento. 

6. Diseño responsive 

Y, por supuesto, el diseño debe ser responsive y adaptarse a los diferentes dispositivos.

También asegúrate de que funciona bien desde distintos navegadores como Chrome, Firefox o Safari; y con diferentes sistemas operativos como Windows, Linux o MAC.

Otros factores que aportan confianza a tu sitio web

Textos legales 

Si queremos ganarnos la confianza de nuestros clientes, los textos legales son una forma de aportar tranquilidad. 

Los textos mínimos que debe tener un sitio son: el aviso legal y la política de privacidad. 

A partir de aquí, y según la peculiaridad del proyecto, debes contar con la política de cookies (si utilizas cookies propias o de terceros), o los términos y condiciones de ventas en un e-commerce.

Seguridad

Del mismo modo, la web ha de cumplir todos los protocolos y certificados que garanticen una navegación segura: 

• El certificado SSL tiene por objetivo garantizar una conexión segura entre el servidor de la web y el usuario, mediante la encriptación de datos.
• El protocolo HTTPS ofrece garantías al usuario de que está navegando por un lugar seguro.  
• También es importante alojar la web en un hosting seguro, que incluya activamente medidas de ciberseguridad y proteja a los propietarios de los sitios de cualquier ataque. 
• Por tu parte, utiliza contraseñas robustas y plugins de seguridad que mantengan a los hackers alejados de tu sitio. 

Social Proof

Trabajando en otra línea de confianza, nos encontramos el social proof o la prueba social. 

Incorpora un bloque en tu diseño que muestre testimonios y opiniones de clientes satisfechos. 

Conclusión

El diseño web forma parte de un engranaje perfecto que aúna diferentes estrategias con el objetivo de ofrecer al usuario una experiencia satisfactoria, memorable y convincente. 

✔ Cuida la estructura y navegación de tu sitio para que tus visitas se muevan con comodidad y entiendan fácilmente lo que ofreces. 

✔ Crea contenidos relevantes para atraer y educar a tu buyer, y ganarte el beneplácito de los buscadores y los primeros puestos en los resultados. 

✔ Utiliza el copywriting para “movilizar” a tu cliente potencial

✔ Sírvete del diseño para guiar a tus usuarios, destacar lo importante y que sepan siempre dónde están y a dónde ir.

✔ Adapta tu web a cualquier dispositivo, navegador o sistema operativo.

✔ Crea un sitio seguro y confiable. 

Si quieres que tu web venda y convierta, construye un sitio de confianza y trabaja todo tu ecosistema digital: marca, usuario y Google.