11 errores de diseño que suelen cometer los compradores de temas de WordPress

¿Alguna vez te encontraste creando un sitio web con un tema de WordPress, pero el resultado final no se parecía en nada a la demostración del tema? Enumeré 11 errores de diseño comunes que los creadores de sitios web suelen pasar por alto.

Encontraste el tema de WordPress perfecto. La demostración del tema se veía impecable. A tu cliente le gustó mucho y estuvo de acuerdo contigo para hacer una compra. Lo compraste, lo instalaste y comenzaste a editar el tema según las necesidades del cliente.

Cambiaste el logotipo, cambiaste los colores del tema, insertaste las imágenes del control deslizante y el contenido, pero al final, el sitio web que creaste no se parece en nada a la demostración. Sabes que algo anda mal, pero simplemente no puedes detectar qué. ¿Suena familiar?

Durante los últimos 5 años, trabajando como diseñador en el negocio de temas de WordPress, vi innumerables ejemplos de hermosos sitios web creados con nuestros temas de WordPress.

Pero de vez en cuando, veo un sitio web con una base sólida pero con un par de pequeños errores de diseño que arruinan la experiencia general. Estoy hablando de pequeñas cosas que cualquiera puede arreglar fácilmente.

Sé que es difícil detectar estos defectos, especialmente si no eres diseñador. Por esa razón, decidí escribir una publicación de blog sobre cómo mejorar el sitio web de su cliente para que se vea aún mejor.

Marque esta publicación de blog y revise la lista a continuación la próxima vez que vaya a crear un sitio web con un tema de WordPress. Solo te tomará una o dos horas eliminar todas las imperfecciones, pero el resultado se verá un 100% mejor.

1. Pobre contraste de texto en el control deslizante

He estado hablando sobre lo que se debe y lo que no se debe hacer con respecto a las imágenes deslizantes, así que ahora seré breve. Los principios son simples:

• Si el color del texto en el control deslizante es blanco, elija un fondo oscuro. Si el texto del control deslizante es oscuro, elija un fondo claro.
• Asegúrese de que el área donde aparece el texto no tenga demasiado ruido visual de fondo. El fondo desordenado reduce la legibilidad del texto en el frente y podría perderse una propuesta de valor principal escrita en el control deslizante.

Afortunadamente para ti, la mayoría de nuestros temas incluyen la opción de un fondo sólido semitransparente detrás del texto. Nuestros temas de WordPress más nuevos también tienen una sombra aplicada a todo el texto en el control deslizante, por lo que el contraste es aún mejor.

2. Imágenes deslizantes demasiado grandes

Cuando miro los sitios web creados con nuestros temas de WordPress, a menudo noto que los usuarios usan imágenes deslizantes demasiado grandes. Tener una imagen deslizante que ocupa el 100 % de la altura de la pantalla solo es aceptable si eres fotógrafo y las fotos son tu producto final. En otros casos, manténgase en el lado seguro y siga las recomendaciones del tema. Conservará el equilibrio visual perfecto de su sitio web.

3. Pobre espacio blanco (negativo)

El espacio en blanco o negativo en el diseño web es un espacio en blanco entre widgets, bloques de texto, imágenes o cualquier otra parte del sitio web, que ayuda a organizar todo y ofrece un flujo claro y lógico para el usuario final.

No importa cuánto lo intentemos, cómo a prueba de balas todos los aspectos posibles del tema de WordPress, los usuarios siempre encuentran una manera de destruir el espacio en blanco.

Afortunadamente para usted, estamos utilizando un poderoso Page Builder en nuestros temas, lo que significa que puede ajustar sus espacios en todo el sitio web con facilidad. Page Builder le permite cambiar los rellenos del widget, los rellenos de la fila y le permite modificar el tamaño del medianil entre columnas.

No voy a hablar de detalles y prefiero darte algunos ejemplos prácticos.

• En la mayoría de los casos, los creadores de sitios web usan muy poco espacio en blanco, lo que no permite que el contenido respire, por lo que, por lo general, cuanto más espacio en blanco apliques, mejores resultados obtendrás.
• Mostrar la relación entre elementos con espaciado. Los elementos que van juntos, por ejemplo, el título de la publicación del blog y la fecha de la publicación, deben estar más juntos que los elementos que tienen un propósito diferente, como la fecha de la publicación del blog y el encabezado de la página.
• Sea consistente con el espaciado. Eso significa que cada fila de su sitio web debe tener la misma cantidad de espacio en blanco en la parte superior, inferior, izquierda y derecha.

Entonces, se trata de widgets. Deben tener la misma cantidad de rellenos y márgenes aplicados, sin importar en qué parte de la página aparezcan. La consistencia traerá equilibrio a su sitio web y se centrará en lo que importa: el contenido.

4. Mala compatibilidad con dispositivos móviles

El procedimiento y las reglas son las mismas que en el escritorio anterior. Aún debe prestar atención al espacio en blanco, pero para dispositivos móviles, hay un par de reglas adicionales:

• Uno de ellos es un diseño amigable con los dedos. Dado que los dedos son nuestras herramientas para movernos por el sitio web mientras navegamos en el móvil, debemos adaptar la página a ellos. Cuando diseñamos un tema de WordPress, nos aseguramos de que los botones y los elementos en los que se puede hacer clic no sean más pequeños que 50 px. Si está agregando elementos de terceros al tema de WordPress, asegúrese de que sean lo suficientemente grandes. Además, asegúrese de que esos componentes procesables no se peguen demasiado para evitar errores de clic.
• Optimice las imágenes para la velocidad. Muchas personas acceden a sitios web sobre la marcha, lo que significa una conexión poco fiable y, a veces, deficiente. Intente eliminar la carga lenta del sitio (en dispositivos móviles) y optimice sus imágenes.
• Pruebe su sitio web en un dispositivo móvil real. Puede cambiar el tamaño de la ventana del navegador para ver la vista móvil, pero cuando haya terminado con todos los ajustes, observe cómo se ve el sitio web en el dispositivo móvil real.

Los sistemas operativos, los navegadores y la experiencia general del usuario diferencian entre computadoras de escritorio y dispositivos móviles y podría generar algunas desigualdades.

Google desarrolló una prueba compatible con dispositivos móviles, una herramienta para verificar si su sitio web es compatible con dispositivos móviles.

Nos aseguramos de que cada uno de nuestros temas de WordPress lo pase con facilidad.

5. Usar colores que simplemente no van de la mano.

Elegir la combinación de colores adecuada es complicado. Si tienes talento, puedes seguir tu instinto. De lo contrario, utilice las herramientas hechas especialmente para eso.

Te voy a mostrar un ejemplo:

La mayoría de nuestros temas de WordPress están hechos de colores primarios y secundarios. Si su logotipo se parece al de Shell, la decisión de elegir el color principal y el secundario es simple. El rojo se utilizará como color principal para las llamadas a la acción. El amarillo será un color secundario, utilizado para fondos y elementos de apoyo.

Si su logotipo se parece al de Starbucks y está hecho de un solo color, deberá encontrar el secundario.

Una opción es elegir el mismo color verde tanto para el color primario como para el secundario, pero lo desaconsejaría encarecidamente.

Si no tienes el instinto de un diseñador y elegir las combinaciones de colores es difícil para ti, tengo una solución para ti, llamada Coolors. Es una herramienta fácil de usar para crear hermosas combinaciones de colores.

Vaya a su aplicación e inserte el código de color hexadecimal (en mi caso #006241) de su color primario en la parte inferior de la columna. Luego bloquéelo, haciendo clic en el ícono de candado y presione la barra espaciadora.

Consejo: ¿No sabes cómo obtener el código hexadecimal de tu logo? Echa un vistazo, si hay una extensión de Chrome útil para eso.

Mi resultado se parece a esto.

Como puede ver, todos los colores cambiaron, pero su color primario permanece igual. Si no obtuviste el color que te gusta, continúa presionando la barra espaciadora.

Si su único motivo para elegir el color secundario es usarlo en el sitio web y ese color no aparecerá en ningún otro lugar, no elija un color que sea demasiado poderoso. En nuestro caso, el naranja brillante está fuera.

Debe elegir un color más sutil, que no destruya su marca y que apoye sin problemas su color principal, en nuestro caso, el verde.

Mi elección personal sería el segundo beige (#d8c99b) porque funcionaría perfectamente con el verde y definitivamente no lo superaría.

Tal vez este color beige en particular no sea el color perfecto, pero es una opción lo suficientemente buena. Este es el por qué. Al elegir un color, intente pensar cómo se verá el texto oscuro o blanco en él.

En mi ejemplo, el texto oscuro se vería bien, pero agregar un poco más de contraste y elegir un color beige más claro lo haría aún mejor.

Afortunadamente para ti, la aplicación Coolors tiene otra gran característica. Puede seleccionar diferentes tonos de cada color. Pase el mouse sobre una columna de color y haga clic en el primer ícono, llamado "Tonos alternativos". Luego selecciona los tonos más claros o más oscuros y siempre ten en cuenta el contraste.

He hecho una demostración rápida de cómo estos dos colores funcionarían juntos. Para este propósito, tomé nuestro tema Adrenaline WordPress y lo convertí en el sitio web de Starbucks.

Me impresionó la rapidez con la que cambié el tema de Adrenaline WordPress a algo completamente diferente, literalmente en 2 minutos. Todo lo que tenía que hacer era cambiar dos colores, cargar la imagen de héroe personalizada y cargar un logotipo personalizado. Inténtalo tú mismo.

6. No desordene la navegación de su sitio web

Estructure la navegación de su sitio web de una manera legible y digestiva. Agrupa las cosas menos importantes en menús desplegables o inclúyelas en la barra superior o en el pie de página. Haga que la jerarquía de navegación sea lógica y asegúrese de que todos los mismos niveles del menú tengan la misma prioridad.

Por ejemplo, los términos y acuerdos suelen ser menos importantes que la llamada a la acción principal, por lo que no pueden aparecer ambos en el mismo nivel. Coloque los Términos en un pie de página y una llamada a la acción principal en el encabezado.

Mantén limpia tu navegación principal, con un máximo de 5 o 6 opciones.

7. El logotipo es demasiado grande

Hay una frase famosa, que todos recibimos de nuestro cliente en algún momento: "hacer el logotipo más grande". Su trabajo, como creador de sitios web, es educar a su cliente, que no es necesario tener un logotipo de 400 px de ancho porque los visitantes del sitio web no vienen a su sitio web para ver qué tan hermoso es su logotipo.

Cargue el logotipo en tamaño, recomendado por el autor del tema de WordPress. Probablemente saben mejor qué tamaño de logotipo funciona mejor con el tema en particular.

El logo es solo una de las muchas cosas en el sitio web y tiene que jugar armoniosamente con otros contenidos.

Si no me cree, mire cualquier marca importante en la red mundial y verá que el 98% de ellos tiene un logotipo, lo suficientemente grande como para admitir todo el contenido. El usuario necesita saber qué marca está detrás del sitio web, pero también debe centrarse en los servicios, las ofertas y la principal llamada a la acción.

8. Mala calidad del logotipo

Me pasó una vez que obtuve el logo en formato Microsoft Word (.doc). Lo que quiero decir es que los clientes siempre encontrarán la manera de sorprenderte.

En lo que respecta al logotipo, es importante tenerlo en las mejores condiciones posibles, con píxeles perfectos. Para ese propósito, necesitará un formato vectorial (.pdf, .ai, .svg, .eps). Luego, debe ir a su aplicación de vectores favorita (por ejemplo, Adobe Illustrator) y exportar ese logotipo al tamaño recomendado por el creador del tema. Esa es la mejor posibilidad para que obtenga el logotipo más nítido.

Si obtiene el logotipo en un .png, podría funcionar bien, pero puede perder algo de nitidez al cambiar el tamaño. Si el cambio de tamaño arruina el logotipo, vaya a fiverr.com e invierta $5 para volver a dibujarlo en un formato vectorial. Otra pequeña inversión para un gran resultado.

9. Mala calidad de imagen

La situación mejora cada año, pero todavía encuentro negocios que no están poniendo suficiente atención o recursos en fotos de calidad.

Si tiene un sitio web que vende un producto en particular, las imágenes de calidad tienen probablemente el mayor impacto en el prospecto y juegan un papel crucial cuando un cliente potencial decide si comprar un producto o no.

Si su cliente no le proporcionó fotos de alta calidad o si no las tiene, es su trabajo convencerlo de que invierta $ 100 y las compre en línea.

Una excelente fuente de fotos de alta calidad es Shutterstock, donde puede obtener 50 imágenes por $99 al mes. Es suficiente para un sitio web pequeño y tendrá un tremendo impacto en los usuarios de su sitio web y en la confianza general en la marca de su cliente.

Consejo: al elegir una foto, trate de evitar fotos genéricas, pulidas y poco realistas. Un ejemplo de eso es un chico caucásico, con dientes súper blancos y piel impecable.

Puede tener un efecto contrario, pero ciertamente no tendrá ningún impacto en los visitantes. Trate de encontrar imágenes con cierta autenticidad. Para hacerlo simple, use imágenes que tengan un aspecto y una sensación realistas.

10. No diseñar complementos de terceros

En el proceso de creación de un nuevo tema de WordPress, siempre investigamos el nicho para el que estamos creando un tema. Siempre estamos ansiosos por incluir todas las funciones necesarias en el tema, pero a veces su cliente solo quiere algo más. Ese es el momento en que los complementos de WordPress entran en juego.

Nada de malo con eso. Después de instalar e incluir el complemento en el tema de WordPress, observe cómo se ve en el front-end.

A menudo noto que nuestros clientes se olvidan de diseñar botones, formas y colores con el mismo estilo que el resto del tema.

Aplicar clases de CSS ya escritas a su complemento de terceros solo le llevará 10 minutos, pero al final tendrá un impacto significativo.

Si no tienes los conocimientos para hacerlo, podemos hacerlo por ti.

11. Mala legibilidad

Hay una afirmación famosa, que la tipografía es el 95% del diseño web, así que hazlo bien.

Si usa widgets de la misma manera que hicimos la demostración del tema, no habrá ningún problema, ya que ponemos mucho esfuerzo en una buena legibilidad, pero si está modificando el diseño y el estilo de las fuentes, haga asegúrese de seguir las siguientes reglas:

• Cada línea debe tener entre 60 y 80 caracteres , incluidos los espacios.
• Si está configurando una altura de línea personalizada, multiplique el tamaño de fuente con 1,4 a 1,6. Si tiene un tamaño de fuente de 16 píxeles, la altura de la línea debe estar entre 22,4 y 25,6.
• Deje suficiente espacio alrededor del texto.
• No utilice un color de texto demasiado claro. Todo lo que sea más brillante que #777777 tiene un impacto adverso en la legibilidad.
• No utilice fuentes más pequeñas que las recomendadas. Lo más bajo que puede ir es 14px, pero le recomendaría que elija 16px o 18px .
• Tenga cuidado con la instalación de fuentes personalizadas en el tema. Algunas fuentes están hechas solo para encabezados y no funcionan bien en tamaños más pequeños. Algunas fuentes están hechas para imprimir y no funcionan bien en las pantallas y algunas fuentes simplemente están mal hechas. Piénsalo dos veces cuando quieras reemplazar la fuente del tema predeterminado de WordPress por otra. Si aún desea cambiarlo, quédese en el lado seguro y elija los más populares.

• Utilice la alineación correcta. En el 95% de los casos, la alineación del texto a la izquierda es el camino a seguir. En otro 5%, le permito usar la alineación centrada, pero asegúrese de usarla solo para texto breve de apoyo.

La alineación a la derecha (excepto para los idiomas de derecha a izquierda) y la alineación justificada están fuera de discusión. Período.

Conclusión:

La próxima vez que haga un sitio web para su cliente, revise la lista anterior e intente corregir todas esas pequeñas imperfecciones. Tomará solo una o dos horas, pero al final obtendrá un resultado mucho mejor, lo que significa un cliente más feliz y una mejor referencia. Además de eso, nos harás un favor porque obtendremos un fantástico ejemplo en vivo para presumir.

Si tiene alguna pregunta, no dude en comentar a continuación.

EDITAR: este artículo ha sido traducido al holandés; avíseme en los comentarios a continuación si desea traducirlo a su idioma.