Con WordPress y un tema adecuado, es fácil poner en marcha un sitio en cuestión de horas. Sin embargo, crear un diseño que se vea profesional requiere trabajo, especialmente si no eres un experto en pintura virtual.
Afortunadamente, no es necesario ser un diseñador experimentado para crear un sitio web atractivo. Siempre que haga un esfuerzo por evitar algunos de los errores más comunes , sus diseños deberían verse tan bien como los de un profesional.
En este artículo, exploraremos qué hace un buen diseño web y ocho de los errores más comunes que cometen las personas durante el proceso.
¡Empecemos!
No existe un estándar universal para lo que constituye un «buen» diseño web, pero existen algunas mejores prácticas que muchos diseñadores web aceptan universalmente. Por ejemplo:
- Un buen diseño web se enfoca en lograr su objetivo .
- Un buen diseño web debe tener en cuenta la usabilidad .
- Debe resaltar los elementos clave de su sitio, así como su mensaje.
- Un sitio web bien diseñado debe ser fácil de navegar .
- Debe permanecer constante en todo un sitio.
- Debería mostrarse bien en los dispositivos móviles.
Hemos tocado algunos de estos temas en el pasado, y también discutiremos algunos de ellos a lo largo de este artículo. Ahora, hablemos de lo que no constituye un buen diseño web.
8 errores comunes de diseño web que debes evitar a toda costa
Si bien hay muchos errores que podría cometer al diseñar su sitio web, hemos decidido ceñirnos a los ocho más comunes y fáciles de evitar. Si hace un esfuerzo por eludir estos obstáculos, sus diseños deberían estar muy por delante del resto.
1. Mala legibilidad
Independientemente del tipo de sitio web en el que esté trabajando, es probable que el contenido escrito sea dominante. Si esto se aplica a usted, es importante hacer que cada una de sus publicaciones sea lo más fácil de leer posible, para no frustrar a sus visitantes.
Un ejemplo de un diseño con poca legibilidad.
Las personas pueden estar dispuestas a soportar párrafos largos e ininterrumpidos cuando se trata de libros, pero no se puede decir lo mismo de los sitios web. El contenido fácil de escanear permite a los visitantes dar sentido rápidamente a su escritura y encontrar lo que están buscando.
Hay muchas maneras de hacer que su contenido sea más legible, pero estas son las más sencillas de tener en cuenta:
- Separa tus publicaciones y páginas en secciones lógicas, usando subtítulos si es posible.
- Haga que sus subtítulos sean lo más descriptivos posible. Esto permitirá a los lectores escanear el contenido más fácilmente.
- Considere implementar un esquema de color que sea agradable a la vista . Después de todo, desea que los visitantes se queden y lean su contenido.
- Siempre que sea posible, use fuentes sans-serif para la mayor parte de sus publicaciones. Se ha demostrado que son más legibles que sus contrapartes serif.
Esto debería asegurar que su contenido no sea una tarea para leer desde el punto de vista del diseño.
Cómo puede ayudar Divi
Divi te permite abordar los problemas de legibilidad con facilidad gracias a sus personalizadores de temas y módulos . Puede acceder a estas dos funciones desde la pestaña Divi en su tablero, luego jugar con la configuración de fuente, el estilo de sus encabezados e incluso el tamaño de sus secciones si algunas de ellas son demasiado pequeñas para leer correctamente.
Si desea realizar más ajustes, siempre puede consultar la Configuración de diseño avanzado de cada módulo utilizando Divi Builder . Estas secciones contienen casi todo lo que necesita para mejorar su legibilidad (incluidas las que mencionamos anteriormente), y también puede obtener una vista previa de los cambios en su sitio web sin salir del creador.
Un sitio web no debería ser difícil de navegar, y cualquier usuario debería poder encontrar el contenido que está buscando sin tener que buscarlo. Si su sitio web no cumple con esos dos criterios, tiene trabajo que hacer.
Hay pocas cosas tan frustrantes como tener que navegar por un sitio web con una navegación sin sentido. Esto puede suceder si su barra de navegación está colocada en una posición extraña, incluye enlaces rotos o está organizada al azar. Además, esta frustración puede conducir a una tasa de rebote más alta , conversiones más bajas (ya que las personas no podrán encontrar lo que buscan) y menos visitas de retorno en general.
Un ejemplo de un sitio web sin menú de navegación.
Afortunadamente, la mayoría de los sitios web en estos días están bien informados sobre los beneficios de una navegación simple. Sin embargo, siempre vale la pena considerar los siguientes consejos para mantener el tuyo fácil de usar:
- Asegúrese de que su menú de navegación sea de fácil acceso. Recomendamos deshacerse de los llamados menús ‘ocultos’ o ‘emergentes’ a menos que estemos hablando de implementaciones móviles.
- Los usuarios deben poder descifrar a dónde los llevará cada enlace y la información que encontrarán allí.
- Si tu sitio web incluye varias categorías, es posible que debas implementar menús de varios niveles . En este caso, asegúrese de que su diseño implique una jerarquía clara entre los componentes.
Mucha gente tiende a juntar sus menús de navegación sin cuidado. Sin embargo, estos elementos pueden ser críticos para el éxito de su sitio y deben tratarse en consecuencia. ¡No cometas el mismo error!
Cómo puede ayudar Divi
Divi le permite ajustar su configuración de navegación sobre la marcha utilizando sus personalizadores de encabezado y módulo , que funcionan de la misma manera que las herramientas que discutimos en la sección anterior. Si prefiere cambiar los estilos de navegación por completo, puede hacerlo modificando la configuración del tema :
Finalmente, también puede modificar la configuración de navegación de su publicación, ya sea utilizando el Personalizador o el módulo de Navegación de publicación . Esta función le permite modificar qué publicaciones deben aparecer cuando los usuarios hacen clic en las opciones Anterior o Siguiente , así como ocultarlas globalmente o para dispositivos específicos.
3. Espacio negativo desequilibrado
Si se usa correctamente, el espacio negativo puede mejorar el contenido que rodea. Esto le permite guiar los ojos de sus visitantes hacia donde quiere que vayan.
Cómo usar correctamente el espacio negativo.
Por el contrario, no dejar suficiente espacio negativo alrededor de las secciones clave puede hacer que su sitio web se vea desordenado.
Un ejemplo de un diseño desordenado.
En este ejemplo, los usuarios pueden sentirse abrumados, lo que hace que se alejen de su sitio y de la competencia.
El espacio negativo también se puede utilizar para mejorar la legibilidad de su sitio. Puede lograr esto dejando algo de espacio extra entre cada subtítulo y usando imágenes y listas para dividir párrafos largos. El objetivo aquí es que su contenido se vea organizado y evite que los lectores se cansen. También puede aplicar algunos de estos fundamentos al diseño general de su sitio web para mantener las cosas limpias (como lo hemos hecho para nuestro blog).
Obtener el espacio negativo correcto puede ser complicado, pero es una de las formas más sencillas de lograr un aspecto moderno y limpio para sus diseños.
Cómo puede ayudar Divi
Las opciones de diseño avanzado y CSS personalizado de Divi te permiten modificar prácticamente cualquier elemento de tu diseño, incluidos los márgenes, el relleno y las canaletas para cualquier sección que elijas, lo cual es más que suficiente para ser creativo usando el espacio negativo:
Modificar cada una de estas opciones no podría ser más fácil. En la mayoría de los casos, todo lo que necesita hacer es establecer sus valores en píxeles, usar la función Vista previa para verificar si están en la marca y continuar ajustándolo si es necesario hasta llegar allí.
4. Una llamada a la acción (CTA) no optimizada
Los CTA vienen en muchas formas, como botones, encabezados e incluso texto sin formato. Sin embargo, su propósito es siempre el mismo: un aviso para que el lector actúe. Vea un ejemplo de cómo los usamos en nuestro blog:
Si sabe un par de cosas sobre el marketing en Internet, sabe lo importantes que son las buenas llamadas a la acción. Usar el mensaje correcto puede desencadenar aumentos significativos en sus conversiones y la forma en que las presenta es igual de importante. Por el contrario, no implementar CTA o usar palabras vagas puede hacer que sus conversiones se vean afectadas.
Cuando se trata de CTA, debe tener en cuenta dos cosas: ubicación y prominencia. Aquí está cómo hacerlo:
- Idealmente, debería intentar incluir CTA cerca del principio y el final de sus páginas. Esto le permitirá captar visitantes que están listos para convertir de inmediato y aquellos que están intrigados después de leer su contenido.
- Tus CTA deben destacarse del resto de tu página. Puede hacer esto aprovechando los colores contrastantes , los diseños de botones únicos o simplemente usando texto en negrita.
- Asegúrate de que sea fácil hacer clic en tus CTA, especialmente para los usuarios de dispositivos móviles. Por lo general, esto significa no hacerlos demasiado pequeños.
Prestar un poco de atención a tus CTA puede dar buenos resultados cuando se trata de conversiones. No importa si busca suscripciones por correo electrónico o ventas, las llamadas a la acción son vitales para sus esfuerzos.
Cómo puede ayudar Divi
El módulo Call to Action de Divi viene con casi todas las opciones de personalización que necesitas para asegurarte de que tus CTA se destaquen, incluidas las configuraciones que se ocupan del estilo y la optimización móvil:
Además, siempre puede buscar optimizar sus CTA utilizando la función de prueba dividida integrada de Divi, Divi Leads . Esto brinda una poderosa funcionalidad de prueba dividida a Divi y se administra directamente desde su tablero de WordPress.
5. Falta de optimización móvil
Asegurarse de que su sitio web sea compatible con dispositivos móviles nunca ha sido más importante. El tráfico móvil superó al de las computadoras de escritorio por primera vez durante 2016, y es probable que la tendencia no retroceda pronto.
Un ejemplo de un sitio móvil mal optimizado.
En pocas palabras, si no está optimizando sus diseños web para usuarios móviles, ahora sería un excelente momento para comenzar. De lo contrario, corre el riesgo de asustar a un segmento importante de su tráfico.
Afortunadamente, ya hemos cubierto varios de los elementos que debe tener en cuenta cuando se trata de optimización móvil, como:
- Legibilidad: asegurarse de que su contenido esté bien formateado es fundamental, ya que tendrá que lidiar con ventanas de visualización pequeñas.
- Navegación: su menú de navegación debe ser fácil de encontrar y usar, considerando que los usuarios móviles no tendrán acceso a un mouse.
- Optimización de CTA: al igual que sus menús, estos deben ser fáciles de detectar e interactuar.
Hay mucho más que decir cuando se trata de este tema, y ya lo hemos cubierto en profundidad en el pasado. Para obtener más información sobre el tema, consulte esta lista de diez consejos para la optimización del diseño web móvil .
Cómo puede ayudar Divi
Cuando se trata de optimización móvil, ¡Divi te respalda! El tema está optimizado para la capacidad de respuesta desde el primer momento, y siempre puede verificar cómo se ve su sitio en dispositivos móviles utilizando la función Personalizador de temas .
Sin embargo, si prefiere adoptar un enfoque más práctico, puede ajustar cómo se mostrará cada uno de sus módulos a través de sus menús de diseño avanzado dedicados . Esto le permite ajustar los controles de diseño para ventanas gráficas de escritorio, tableta y móvil.
6. Diseño inconsistente y desenfocado
Idealmente, todo su sitio web debe lucir un diseño uniforme con un enfoque claro. El uso de varios estilos en un solo sitio puede tener un efecto discordante e incluso puede confundir a los usuarios.
Además, crear una identidad única para su sitio web, como una paleta de colores y un estilo uniforme, mejorará su marca. Tome Facebook, por ejemplo. Llevan años luciendo el mismo estilo: limpio y con una paleta azul reconocible. Puede que no sea el diseño más elegante de la web, pero hace el trabajo y, a estas alturas, se asocia con la marca.
El estilo que usa en su sitio web es principalmente una decisión personal; eso está bien siempre que lo mantenga uniforme. Si tiene problemas con los detalles, siempre puede buscar inspiración en lenguajes de diseño visual como Material Design .
Cómo puede ayudar Divi
Todos los módulos de Divi tienen un estilo uniforme para que se vean geniales desde el primer momento. Sin embargo, también puede personalizarlos individualmente utilizando la Configuración de diseño avanzada y las funciones CSS personalizadas , y también guardar sus ajustes en su Biblioteca Divi para uso futuro:
El Personalizador de temas también le permite modificar la estética de todo su tema sobre la marcha e incluye opciones para cambiar su combinación de colores y estilos móviles, entre otras características.
7. Uso Incorrecto de Imágenes y Animaciones
Mucha gente piensa que incluir imágenes y animaciones siempre que sea posible en un sitio web es algo bueno. Si recuerda la moda de los sitios basados en Flash a principios de la década de 2000, debe saber de qué estamos hablando.
Confiar demasiado en cualquiera de estos tipos de medios no solo puede hacer que su sitio se vea desordenado, sino que también puede afectar sus velocidades de carga (y hay pocas cosas peores que un sitio web lento ). Además, también puede tener un impacto en la optimización de su motor de búsqueda (SEO) si se equivoca.
Un ejemplo de una animación innecesaria en una página web.
Por supuesto, casi todos los sitios necesitan algunos gráficos aquí y allá para mejorar su diseño, y la palabra clave aquí es «mejorar». Las imágenes o animaciones que elija incluir no deben distraer la atención de su contenido y solo deben usarse si son relevantes. Por ejemplo, en este artículo, solo hemos incluido imágenes para brindar contexto, no como el enfoque principal.
Finalmente, como discutimos en nuestro artículo reciente sobre tendencias de diseño web, también debe considerar reemplazar animaciones completas con microinteracciones siempre que sea posible. Son mucho menos intrusivos y aún le permiten resaltar acciones específicas para el usuario.
Cómo puede ayudar Divi
Muchos de los módulos de Divi vienen con animaciones de buen gusto integradas que no distraerán a los visitantes de tu contenido. Incluso puede agregar el suyo usando CSS si no se opone a arremangarse.
Además, algunos de los módulos de Divi, como Fullwidth Header , le permiten implementar la popular función de paralaje. Incluso puedes añadirlo manualmente a algunos módulos que no lo soportan por defecto, como es el caso de Divi’s Slider .
Por último, pero no menos importante, hablemos de los datos de contacto. Dependiendo del tipo de sitio web que estés diseñando, es probable que al menos algunos de tus visitantes quieran ponerse en contacto contigo o con quien esté a cargo. Asegurarse de que su información de contacto se muestre de manera destacada es la mejor manera de habilitar esto.
No hace falta decirlo, pero algunos sitios web se verán más afectados que otros si no hacen que su información de contacto sea fácil de encontrar. Por ejemplo, los detalles de contacto perdidos u ocultos en el sitio web de un servicio pueden costarle muy caro en oportunidades comerciales perdidas.
Para la mayoría de los sitios, recomendamos configurar un formulario de contacto simple , que debe estar disponible en su página de inicio, en su propia sección o en ambos:
Agregar su correo electrónico o teléfono a su pie de página, o un menú secundario, también puede ser un gran enfoque según el diseño de su sitio. Independientemente de lo que incluya, ¡la conclusión principal es que debe ser prominente!
Cómo puede ayudar Divi
Al igual que con la mayoría de las funciones clave, Divi proporciona el módulo Formulario de contacto que viene prediseñado con un formato optimizado. Hace un tiempo también lanzamos un paquete gratuito de diseños de página de contacto , que son de gran ayuda si buscas un diseño simple y moderno:
Si prefiere modificar su diseño manualmente, el módulo Formulario de contacto de Divi le permite agregar tantos campos como desee y diseñarlos individualmente. Incluso puede configurar mensajes de éxito para que sus usuarios los lean después de realizar un envío, todo sin salir de la configuración del módulo.
Conclusión
Los usuarios de WordPress tienen un tiempo más simple que la mayoría al armar un sitio web atractivo, gracias a su funcionalidad fácil de entender. Sin embargo, debido a esto, es fácil que las malas decisiones de diseño se filtren en su proyecto, lo que puede reducir fácilmente la calidad visual general.
En este artículo, le mostramos los ocho errores de diseño web más comunes que debe evitar durante su próximo proyecto. Recapitulemos:
- Mala legibilidad.
- Mala navegación.
- Espacio negativo desequilibrado.
- Una llamada a la acción no optimizada.
- Falta de optimización móvil.
- Diseño inconsistente y desenfocado.
- Uso incorrecto de imágenes y animaciones.
- Información de contacto ‘oculta’.
¿Cuál crees que es el error de diseño web número uno que todo usuario debe evitar? ¡Suscríbase y comparta sus pensamientos con nosotros en la sección de comentarios a continuación!
Imagen en miniatura del artículo por Meilun / shutterstock.com