¿Qué causa la gran discrepancia entre lo que cobran algunos desarrolladores de WordPress en comparación con otros? Responder esta pregunta requiere considerar la razón principal por la que quiere un sitio web.

Algunos desarrolladores se centran en el producto final literal: la combinación de código que resulta en un diseño de sitio web bastante agradable.

Pero los desarrolladores con conocimientos de marketing se preocupan por algo más que construir algo que se vea bien. Actúan como consultores de clientes que buscan lograr objetivos específicos con sus sitios web.

El diseño web está estrictamente conectado a sus objetivos de negocio

El diseño web está estrictamente conectado a sus objetivos de negocio

Con esto en mente, contratar a alguien para construir un sitio web que no parece estar interesado en / no hace preguntas sobre sus objetivos finales es una bandera roja. Es importante destacar el hecho de que incluso el más bello diseño web puede no ser ideal cuando se trata de conseguir que los visitantes se conviertan en clientes.

Dicho esto, el 94% de la gente juzga su credibilidad basándose en el diseño de su sitio web.

Así que, en lugar de eso, necesita enfocarse en usar su diseño para ofrecer la experiencia de usuario ideal. Debe facilitar a los visitantes la búsqueda de la información que buscaban visitando su sitio web en primer lugar y guiándolos hacia las actividades de conversión de objetivos.

Estas mejores prácticas de diseño web se centran en la intersección entre la creación de un hermoso sitio web y uno que sirva para su negocio.

¿Qué define las mejores prácticas de diseño web?

Seguro que todos tenemos opiniones diferentes a nuestra madre sobre lo que significa un sitio web bien diseñado.

El diseño web no es sólo cuestión de estética. Es un mundo mucho más complicado en el que UX, accesibilidad y objetivos de negocios deben conectarse. Mire estas mejores prácticas de diseño web! ✍️🔝Click to Tweet

Pero controlemos las opiniones de todos por medio de los expertos.

Según Orbit Media, se pueden agrupar las mejores prácticas de diseño web en estas tres categorías básicas de estándares:

Veamos cómo desarrollar prácticas de diseño web basadas en cada uno de estos estándares:

Estándares de marca

Los sitios web que carecen de una marca consistente pueden ser estresantes para interactuar y causar confusión. Por lo tanto, no debe sorprender que un 38% de los visitantes hayan dicho que dejarán de participar en un sitio web si el contenido o el diseño no es atractivo.

Teniendo en cuenta que la apariencia no lo es todo, aquí hay algunos principios básicos de diseño a considerar para crear un sitio web que la gente quiera usar:

Balance

El equilibrio es el principio de diseño que prescribe cómo distribuir eficazmente los elementos visuales. En general, un diseño equilibrado se ve limpio y natural y tiene una buena simetría (aunque eso no es necesariamente una condición de equilibrio).

Puede incorporar el equilibrio en el diseño de la web en cuanto a la disposición de la página.

Centrar el texto u otros elementos a través de la página es una forma fácil de hacerlo. En general, las páginas web están construidas en un sistema de cuadrícula, lo que crea una forma de equilibrio. Puede usar la propiedad de flotación CSS para posicionar elementos y equilibrarlos a lo largo de la página.

El equilibrio puede lograrse de tres maneras:

1. Diseño simétrico

Ejemplo de diseño simétrico

Ejemplo de diseño simétrico

Disponiendo los elementos de manera uniforme a través de la página web. Por ejemplo, si tiene un elemento pesado a la izquierda, debería tener un elemento pesado a la derecha. Como ya se ha mencionado, el centrado es la forma más fácil de lograr la simetría, pero a veces puede resultar plano o aburrido.

Para evitar que la página se vea monótona, puede crear un equilibrio usando diferentes elementos, como equilibrar una imagen grande con un bloque de texto. También existe un tipo de equilibrio simétrico llamado equilibrio radial, en el que los objetos irradian desde un punto central.

2. Diseño asimétrico

Ejemplo de diseño asimétrico

Ejemplo de diseño asimétrico

Más difícil de hacer bien, el diseño asimétrico implica la distribución desigual de los elementos en una página. Por ejemplo, puede tener un elemento grande en el centro, que se equilibra con uno más pequeño más lejos.

Puede usar otros elementos de diseño, como el color o la textura, para equilibrar un diseño asimétrico.

3. Fuera de balance

Ejemplo de diseño fuera de balance

Ejemplo de diseño fuera de balance

Este tipo de diseños sugieren movimiento y acción, lo que puede hacer que la gente se sienta incómoda. Si su sitio web tiene la intención de hacer pensar a la gente, entonces un diseño fuera de balance es para usted.

Composición

El término composición se refiere a la colocación y organización de los elementos de diseño.

Composición

Composición

La Regla de los Tercios se usa comúnmente para crear una composición equilibrada, especialmente con fotos.

Espaciamiento

Los elementos deben estar espaciados uniformemente para que los usuarios puedan diferenciar secciones o bloques.

El papel del espaciado en el diseño de la web

El papel del espaciado en el diseño de la web

También debes introducir el espacio negativo o el espacio entre y alrededor del sujeto de una imagen. El espacio negativo puede reducir el ruido visual, aumentar la legibilidad y aportar equilibrio.

Puede introducir un espacio negativo añadiendo márgenes y relleno alrededor de sus elementos de diseño.

Punto focal

Llama la atención sobre un elemento

Llamar la atención sobre un elemento

Cree un área de enfoque donde quiera llamar la atención. Debería ser la parte más importante de su página, y lo ideal sería que cada página se centrara en un solo punto focal importante.

Color

El color es un elemento de diseño importante cuando se trata de la marca. Lo ideal es que entre en el proceso de diseño web con una comprensión de los colores que quiere asociar a su marca.

Para el diseño web específicamente, ayuda empezar con una tabla de estado de ánimo para su marca.

Ejemplo de la paleta de colores de Kinsta

Ejemplo de la paleta de colores de Kinsta

Elija un color primario y secundario (el color secundario puede complementar o contrastar el color primario), y un tono más claro y más oscuro para cada uno. Limita el uso del color para que los diferentes acentos no se conviertan en un adefesio.

Adobe Color proporciona una excelente herramienta gratuita para probar varias combinaciones de colores para crear una paleta de trabajo para los elementos del sitio web.

Además, al decidir sobre el color, es importante considerar a los daltónicos, que incluyen hasta el 4,5% de la población mundial.

Ejemplo de cómo se vería un diseño normal para los usuarios daltónicos

Ejemplo de cómo se vería un diseño normal para los usuarios daltónicos

Hay tres tipos de daltonismo (daltonismo total, visión a dos colores y visión a colores deficiente), así que asegúrese de que su diseño sigue siendo utilizable en consideración a aquellos que no pueden diferenciar los colores.

Contraste

Al elegir el color, es importante ser consciente de las proporciones de color y el contraste.

El contraste de color se refiere a la diferencia de luz entre el primer plano y el fondo. El uso de colores suficientemente contrastados permite distinguir fácilmente la visibilidad del sitio web. En general, utilice opciones de color de alto contraste, como el texto negro sobre fondo blanco, para que su sitio sea legible.

El mal contraste puede ser problemático

El mal contraste puede ser problemático

La relación de contraste es el valor numérico asignado a la diferencia de contraste entre los elementos de la página.

Las Directrices de Accesibilidad al Contenido Mundial (WCAG) 2.0 recomiendan una relación de contraste de 4,5:1 para el texto normal. WebAIM comparte algunas combinaciones predeterminadas que se ajustan a la relación de contraste ideal para ayudarle a visualizar esta mejor práctica de diseño web.

Para ayudar a navegar usando esta proporción, asegúrese de que cuando diseñe su sitio web, esté imaginando a todos los públicos (incluyendo aquellos con problemas de accesibilidad). Es más fácil hacer esto que planear para abordar estos temas después del hecho.

Considere todos los aspectos del sitio web con los que la gente interactuará, incluyendo encabezados, pies de página, menús – todos los cuales deben ser fácilmente visibles para ser utilizables.

Algunas herramientas que puede usar para comprobar las proporciones de contraste de color incluyen:

Tipografía

La tipografía del sitio es otra consideración de marca importante.

Si bien existen muchas fuentes diferentes para encontrar posibles fuentes para usar en su sitio web, primero deberá considerar las opciones que se mostrarán de manera consistente, independientemente de las fuentes que el usuario final tenga instaladas en su computadora.

Google Fonts ofrece una amplia variedad de fuentes gratuitas seguras para la web con las que puede contar para que se muestren correctamente, independientemente de las fuentes/programas instalados por el usuario. Asegúrese de incluir fuentes en su tabla de estado de ánimo para ver si coinciden con su estética de color.

Si tiene problemas para encontrar combinaciones, las fuentes de Google pueden sugerir emparejamientos populares. También puede usar un sitio como FontPair para obtener sugerencias.

Intente limitar el peso de las fuentes que utiliza, ya que tener que cargar demasiados archivos puede contribuir a reducir la velocidad de la página. En ese sentido, considere la posibilidad de alojar localmente las fuentes de Google para introducir beneficios adicionales de rendimiento.

Tipografía pobre vs. tipografía ideal

Tipografía pobre vs. tipografía ideal

Cuando se trata de seleccionar elementos tipográficos basados en las mejores prácticas de diseño web, como regla general, utilice fuentes sans-serif para los encabezamientos y fuentes serif para el contenido. Como mínimo o no utilice fuentes decorativas para el contenido del cuerpo, ya que será difícil de leer.

Además, no se sienta tentado a usar una gran variedad de fuentes diferentes en su sitio web. Una buena regla general es usar una fuente para su logo, otra para sus menús/encabezados, y una más para el contenido del cuerpo. En ese sentido, intente emparejar fuentes que se complementen entre sí, como las de la misma familia de fuentes.

Jerarquía de elementos

La jerarquía se refiere a la disposición de los elementos de diseño que muestran la importancia relativa. Esto se logra manipulando elementos como el contraste visual, el tamaño y las ubicaciones para llamar la atención.

Ejemplo de jerarquía de elementos

Ejemplo de jerarquía de elementos

Por ejemplo, el contenido debe desglosarse en bloques lógicos para que los usuarios puedan distinguir las secciones entre sí.

Esto puede hacerse mediante el uso de encabezamientos de contenido, que no sólo facilitan a los usuarios el salto a las partes que desean leer, sino que también dividen grandes cantidades de texto en trozos legibles, de modo que los lectores de pantalla puedan determinar el contexto de cada sección.

Si busca algunas ilustraciones visuales útiles de estos conceptos de diseño y más, el blog de Tilda Publishing cubre algunos de los errores de diseño de páginas web más comunes y cómo corregirlos.

Mejores prácticas de diseño/formato en la web

Según la investigación de Orbit Media, hay algunos estándares comunes de diseño web que se observan en los 50 principales sitios web de comercialización.

Estándares de diseño web

Estándares de diseño web

Por «estándares» se entiende que el 80% de los sitios web utilizan un enfoque de diseño similar:

A continuación se presentan algunas de las mejores prácticas de diseño web para elementos comunes del sitio:

Imágenes

Las prácticas óptimas de diseño de páginas web para el uso de imágenes podrían inspirar muchos volúmenes de consejos, pero centrémonos en lo mínimo en este debate sobre las prácticas óptimas de diseño de páginas web:

Navegación del sitio web

Los usuarios esperan poder encontrar fácilmente el contenido que están buscando en un sitio. Por lo tanto, es importante que la navegación por el sitio web sea simple y directa.

La navegación en un sitio web es un término general que se refiere a la arquitectura de enlaces internos de un sitio web. No olvide que el principal objetivo de la navegación es ayudar a los usuarios a encontrar fácilmente el contenido relevante de su sitio web.

La arquitectura de enlaces internos de su sitio constituye la base de su mapa del sitio, lo que ayuda a los motores de búsqueda a acceder más fácilmente a su contenido. Se ha descubierto que tener un sitio bien diseñado donde el contenido es fácil de encontrar afecta positivamente el tráfico del sitio web que obtendrá de los motores de búsqueda (junto con una mayor probabilidad de obtener enlaces de sitios de Google).

Navegación del menú

Hay varios aspectos que conforman la navegación de un sitio web, pero su menú superior/principal debe ser un foco primario ya que será una de las primeras cosas con las que los usuarios interactúen cuando visiten su sitio web.

Hay diferentes heurísticas de diseño de menú de sitio web, pero las más populares incluyen:

Menú de navegación

Idealmente, esto está ubicado en el frente y el centro de un sitio web. Esto podría implicar el uso de un menú desplegable si hay varias categorías. Sin embargo, los menús desplegables no son recomendables, especialmente cuando se trata de SEO técnico (son más difíciles de rastrear). Además, se ha descubierto que a la mayoría de la gente no le gustan los menús desplegables.

Esto se debe a que el ojo humano trabaja más rápido que la mano, por lo que la gente encuentra molesto cuando ya han decidido sobre qué hacer clic y algo más se cae – lo que puede conducir a una disminución de las visitas a las páginas.

Menú de hamburguesas

El menú de la hamburguesa suele estar situado en la parte superior izquierda o derecha de la página. Aparece como un cuadrado con tres líneas que se pueden expandir con un clic. Sin embargo, muchos diseñadores desprecian el menú de las hamburguesas, que ha inspirado a los desarrolladores web a considerar nuevas formas de hacer que la navegación de los sitios web móviles sea divertida y funcional.

¿Cansado de experimentar problemas con su sitio de WordPress? Obtenga el mejor y más rápido soporte de hosting con Kinsta! Consulte nuestros planes

Aquí hay algunos consejos para diseñar la navegación basada en las mejores prácticas de diseño web:

Para un formato más conveniente, aquí hay una práctica infografía:

Mejores prácticas de diseño web para la navegación de menús

Mejores prácticas de diseño web para la navegación de menús

Estándares de codificación

Con tantos sitios web creados y consumidos en todo el mundo, ciertamente se necesita un conjunto normalizado de principios de codificación. Algunos aspectos de estas normas de la web incluyen:

SEO

El SEO puede ser usado para aumentar el número de visitantes a su sitio de forma orgánica (sin el uso de anuncios). Dado que es demasiado complicado profundizar adecuadamente en el SEO en una pequeña subsección de un artículo, eche un vistazo a nuestra lista de control de SEO y a nuestros consejos sobre los mejores plugins de SEO para WordPress para familiarizarse con este aspecto de las mejores prácticas de diseño web.

Tenga en cuenta que los siguientes consejos de estándares de codificación funcionan de la mano con el SEO.

Respuesta móvil

El diseño sensible se preocupa por crear una gran experiencia para el usuario, independientemente del dispositivo o el navegador que se utilice para acceder a su sitio web.

Hoy en día es más importante que nunca diseñar su sitio web para que responda, ya que más del 60% de los usuarios de Internet acceden a la red a través de sus teléfonos móviles, y la mitad de las transacciones de comercio electrónico se realizan a través de plataformas móviles. Además, el nuevo algoritmo de búsqueda de Google también da prioridad a los sitios para móviles.

Ejemeplo de diseño de respuesta

Ejemeplo de diseño de respuesta

El hecho de tener un sitio web receptivo no sólo ayuda a los usuarios a navegar más fácilmente por su sitio, sino que también contribuye a aumentar el compromiso y las conversiones. Los usuarios recomiendan marcas con las que tienen una experiencia positiva en los sitios de respuesta a la telefonía móvil y, a la inversa, no sólo dejarán de comprar a marcas con una mala experiencia en los sitios móviles, sino que también desalentarán activamente a otros a hacerlo.

Sin embargo, a pesar de la demanda de un sitio de respuesta, se estima que el 91% de las pequeñas empresas no tienen uno. Deberían, ya que diseñar un sitio web que responda a las necesidades de los móviles ciertamente vale la pena. El 62% de las empresas han informado de un aumento de las ventas después de diseñar un sitio que responda a las necesidades de los móviles.

Lea el recurso de Kinsta sobre cómo hacer su sitio más amigable para el móvil, que incluye una lista de los mejores plugins de WordPress para el móvil para descargar, y asegúrase de revisar esta lista curada de los mejores temas de WordPress, donde podrá navegar a través de un montón de temas de respuesta.

Google también ofrece algunos consejos sobre cómo diseñar un sitio web receptivo.

Seguridad del sitio web

¿Otra práctica importante de codificación? Creando programas y sitios web seguros en los que los usuarios puedan confiar su información personal sensible. Contrariamente a la creencia popular, los hackers no buscan activamente sitios web específicos para piratear, por lo que incluso los sitios web pequeños son vulnerables a los ataques.

Info

Kinsta ofrece una garantía de seguridad con cada plan y, en caso de que algo malo ocurra, especialistas en seguridad arreglarán su sitio.

En general, WordPress es seguro, pero ayuda a tomar precauciones adicionales para mantener su sitio web seguro contra ataques.

Aquí están algunas de las mejores prácticas de seguridad del sitio web:

Para obtener más información sobre la seguridad de WordPress, consulta nuestro completo recurso sobre cómo mantener seguro su sitio de WordPress.

Velocidad de la página

Alrededor de la mitad de los usuarios esperan que un sitio se cargue en 2 segundos o menos, y si toma más tiempo que eso, el 40% de las personas no dudarán en rebotar de la página, (probablemente) para nunca regresar.

Además de las visitas al sitio web, la velocidad de la página es importante ya que también afecta a la conversión y a los ingresos. Por cada segundo de velocidad de carga de página añadida, las ventas caerán hasta un 27%. Aumentar la velocidad del sitio web puede evitar la pérdida del 7% de las posibles conversiones.

Aquí hay algunas maneras de hacer que sus páginas web se carguen más rápido:

Revise nuestro completo recurso para la optimización de la velocidad del sitio web.

Estándares de accesibilidad

La Internet fue diseñada para funcionar para todas las personas, sin importar el hardware, software, idioma que utilicen, su habilidad o ubicación. Sin embargo, muchos sacrifican la accesibilidad por un hermoso diseño.

La accesibilidad es clave para cada sitio web

La accesibilidad es clave para cada sitio web

La accesibilidad se refiere a la práctica de hacer que su sitio web sea utilizable por todos.

Además de las discapacidades que afectan el acceso, W3 dice que la accesibilidad del sitio web también es beneficiosa para:

La accesibilidad debería ser una preocupación de todos, ya que todos estamos afectados por ella de alguna manera.

Razones para hacer que su sitio sea accesible

¿Aún no está seguro de que valga la pena gastar su tiempo en accesibilidad en esta discusión sobre las mejores prácticas de diseño web?

Considere estas razones:

Cómo hacer su sitio web más accesible

Una manera fácil de hacer su sitio web más accesible es instalar el plugin de accesibilidad de WP, que añade características de accesibilidad, incluyendo:

Unos cuantos pasos adicionales a tomar:

Pensamientos finales: Mejores prácticas de diseño web para su próximo proyecto de sitio web

Los buenos sitios web no deberían definirse por un diseño objetivamente bueno. Igual de importante es la usabilidad del sitio, la facilidad de navegación y la accesibilidad. Armado con estas mejores prácticas de diseño web, tienes todo lo que necesitas para crear algo que se vea y funcione bien.

El diseño web no es sólo cuestión de estética. Es un mundo mucho más complicado en el que UX, accesibilidad y objetivos de negocios deben conectarse. Mira estas mejores prácticas de diseño web! ✍️🔝Click to Tweet

Sólo tenga en cuenta que estas son las mejores prácticas de diseño web. Es probable que no pueda seguir cada uno exactamente, dependiendo de la naturaleza de su sitio web. Pero antes de que pueda romper las reglas, ayude al menos ser consciente de por qué existen.

¿Nos hemos perdido algo importante? Comparta sus mejores prácticas de diseño web en los comentarios de abajo!


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes