Mejores prácticas de diseño web, consejos y directrices que debe conocer

8 min.
Mejores prácticas de diseño web

¿Cuáles son las mejores prácticas en diseño web? ¿Cómo aplicarlos con éxito en tu próximo proyecto de diseño web? ¿Y qué es lo que definimos como estándares de diseño y mejores prácticas en el diseño web?

¿Qué entendemos realmente por mejores prácticas o "Best Practices"?

En términos de desarrollo web, hay reglas fijas que tienen que ver principalmente con la legibilidad y la limpieza del código, así como con la seguridad de un sitio web. En cambio, en el diseño web, la terminología es un poco más confusa y las reglas están abiertas a propias interpretaciones.

Mejores prácticas: El diseño web es algo más que estética

Las mejores prácticas de diseño web son una mezcla de diseño visual, diseño de la experiencia del usuario, accesibilidad y redacción de contenidos, con un enfoque en el SEO.

Las "Best Practices" en el diseño web son un conjunto de reglas que hay que seguir para satisfacer las expectativas generales de los/as usuarios/as. Además, son directrices para una mayor claridad y una mejor experiencia del/la usuario/a.

En este artículo, te presentaré las mejores prácticas para un buen diseño web. Para cada área, te daré consejos sobre cómo adquirir más conocimientos y presentaré herramientas y ejemplos que servirán de ayuda para tu próximo proyecto.

También comento brevemente el tema de las mejores prácticas en el desarrollo de WordPress. Como probablemente sabrás, la planificación y la gestión de proyectos son una parte importante del diseño web. En este artículo dejo de lado ambos temas por ahora, ya que esto sería demasiado para el presente post.

Mejores prácticas: Diseño visual

Comenzamos ahora por los estándares establecidos para el diseño visual: ¿cuáles son las mejores prácticas en el diseño visual? ¿Y cuáles son los factores que cuentan?

Reconocimiento y branding

El sitio web debe encajar con el resto de la imagen de la empresa y debería seguir la guía de estilo. Por lo tanto, verifica el sitio web según las siguientes preguntas:

  • ¿Se puede saber a primera vista para qué empresa se ha creado el sitio web?
  • ¿Se ha integrado la guía de estilo?
  • ¿Los/as operadores/as del sitio web pueden reconocerse fácilmente por los elementos visuales?
  • ¿Se utilizan elementos visuales de forma coherente?
  • ¿El lenguaje utilizado en el sitio web refleja la marca?

Google está muy por delante cuando se trata de una marca o "branding" consistente. No se me ocurre ninguna otra marca que tenga tantos productos diferentes y que, sin embargo, consiga dar a cada uno de ellos la sensación de empresa. Incluso cuando miro un producto de Google desconocido hasta ahora, puedo asociarlo directamente con la marca.

¿Cómo lo hace Google?

Esto incluye el uso coherente de los colores de Google, la tipografía, los espacios en blanco prominentes, las llamadas a la acción y la navegación coherentes. Los logotipos también tienen una cierta coherencia que funciona en todas las empresas y categorías, aunque esto último no significa necesariamente que el diseño vaya a suscitar "me gustas".

Con la coherencia de la marca, lo primero es analizar si el sitio web refleja la empresa y su branding de la mejor manera posible.

Estándar de diseño web y usabilidad

Otra "Best Practice" se define por la integración de estándares. Por ejemplo, la colocación del logotipo en la esquina superior izquierda, el aspecto de los botones, los enlaces, etc. Estas ayudan a los/as visitantes de tu sitio a orientarse rápida y fácilmente. Por lo tanto, estas normas son indispensables para lograr una usabilidad apropiada.

Más recursos sobre usabilidad:

¿Por qué deberías interesarte por la usabilidad y la experiencia del usuario como diseñador/a web? Puedes encontrar enfoques más completos sobre el tema de la usabilidad en este artículo y en https://www.usability.gov/.

¿Qué define un estándar de diseño web?

Definimos los estándares de diseño más utilizados en el diseño web mediante patrones de diseño de interfaz de usuario. Andy Crestodina explica de forma muy comprensible en su artículo sobre estándares de diseño web cómo se definen los estándares.

Según esto, un enfoque de diseño debe utilizarse en al menos el 80% de los sitios web para que cuente como estándar. Todo lo demás es una costumbre (50-79 por ciento) o incluso aporta incoherencia y confusión (0-49 por ciento) a tu sitio web.

Diseño armonioso: la regla de los tercios

Ya he dado información sobre el tema en torno al diseño armonioso de la web. Esta vez me gustaría profundizar en la regla de los tercios.

Este estándar se ha utilizado durante varios cientos de años, principalmente en las artes visuales y más tarde en la fotografía. Aquí, como se muestra en el dibujo, el diseño se divide en 9 cajas de igual tamaño:

Diseño de interacción
Fuente: interaction-design

Durante la creación de sitios web, la regla de los tercios también te ayuda a colocar la información más importante de forma que el/la visitante pueda percibirla directamente. 

En pocas palabras, un elemento visual no debe ocupar más de tres casillas y estar situado en un tercio del diseño. Los puntos de bifurcación también son especialmente adecuados para colocar mensajes importantes y las llamadas "Call-To-Actions".

En Photoshop, puedes utilizar herramientas de corte ("crop-tools") y aplicar "rule of thirds", o regla de los tercios en español, para comprobar y ajustar rápida y fácilmente tus diseños. Para ilustrar mejor este estándar, miré con lupa el sitio web de Marqeta:

Mejores prácticas

Tanto el producto como su mensaje están bien distribuidos por puntos. En este caso, el diseño podría ser un poco más eficiente moviendo un poco el CTA. Sin embargo, la armonía del diseño se resentiría un poco:

Mejores prácticas

La versión móvil muestra claramente que el mensaje llena el tercio inferior del diseño, mientras que el producto se muestra bastante centrado. Aquí podríamos replantearnos la colocación del CTA (llamada a la acción).

Los llamados "heat maps" o mapas de calor contribuirán a delatar dónde miran y hacen clic principalmente los/as visitantes de tu sitio. La herramienta Crazy Egg, por ejemplo, ofrece un servicio (de pago).

Otra forma de verificar tu diseño es la conocida prueba de desenfoque o "blur test". Aquí extraes la nitidez de tu diseño (por ejemplo, con la ayuda de Photoshop y el efecto "Gaussian Blur" al 12 por ciento). Si los/as usuarios/as ya no pueden leer el contenido, rápidamente queda claro dónde está el foco de atención al ver el sitio web. Esta prueba también es adecuada para analizar el CTA. ¿Sigue siendo este reconocible?

Mejores prácticas de diseño web

Para ello, he vuelto a utilizar la página web de Marqeta. Destacan especialmente el CTA de la derecha y el producto, seguidos del mensaje y, por último, el logotipo y el segundo CTA:

Mejores prácticas de diseño web

La versión móvil la he exagerado un pelín más para probar lo que quedaría entonces. Aquí, el producto llama la atención en primer lugar, seguido del CTA y el logotipo. Definitivamente, puedes hacer esta prueba con la totalidad del sitio, preferiblemente todavía en la fase de diseño. De este modo, puedes analizar rápida y fácilmente qué elementos de tu diseño destacan y decidir si eso es lo que quieres.

Texto y SEO

La creación de sitios web implica indudablemente el contenido escrito. Para ello, existen redactores/as profesionales que, con un ojo puesto en el SEO, la usabilidad y la guía de estilo, escriben contenidos significativos para tu sitio web. Sin embargo, también hay algunas pautas que puedes seguir tú mismo/a. 

Hay que prestar especial atención a la longitud y legibilidad de los textos: a menudo, los textos son demasiado largos y enrevesados. 

Aunque el público objetivo esté acostumbrado a un argot concreto, siempre hay que tener en cuenta que nuestra capacidad de atención en un sitio web es mucho más corta que, por ejemplo, a la hora de leer artículos técnicos. Más bien, al navegar por las páginas web, buscamos información específica. Escaneamos el contenido, por así decirlo, en lugar de tomarnos el tiempo necesario para leerlo correctamente.

Google da menos puntos si las oraciones de tu sitio son demasiado largas y más puntos si están conectadas por "transitions words" o palabras de transición.

Posts interesantes sobre SEO que podrían interesarte:

Accesibilidad

La accesibilidad de la web sigue siendo, por desgracia, un tema marginal y a menudo ignorado. En este caso hay enfoques sencillos que ya podríamos considerar en el primer diseño. Por ejemplo, ¿utilizas predominantemente colores para resaltar la información? 

Puedes comprobarlo fácilmente mirando tu sitio web en blanco y negro:

Mejores prácticas de diseño web

Para ello, he vuelto a analizar la misma página web. Incluso sin colores, el mensaje se transmite con claridad. El CTA superior derecho podría ser problemático en términos de contraste.

Para comprobarlo con seguridad, existe un ayudante: "Contrast Checker". La relación de contraste por defecto es de al menos 4,5:1 para el texto normal y de 3:1 para el texto grande, como los titulares:

Mejores prácticas de diseño web
Mejores prácticas de diseño web

Si especifico los tonos grises, el CTA no tiene suficiente contraste, pero en la variante de color es suficiente.

http://colorsafe.co/ es otra herramienta útil para determinar los colores y su intensidad de contraste. Aquí puedes probar directamente diferentes combinaciones de colores. Se te da directamente la proporción y tienes además la opción de seleccionar las fuentes que quieres utilizar así como el estándar WCAG deseado.

El uso de colores para representar visualmente el manejo de errores puede causar problemas. Por ejemplo, los elementos de forma. Los errores suelen representarse resaltando el cuadro de entrada en color. Para alguien con una deficiencia de color, esto puede llevar a que los errores no se reconozcan y, por tanto, no se resuelvan. 

A la hora de planificar, hay que tenerlo en cuenta y, por tanto, asegurarse siempre de que haya otra representación del error. Aquí encontrarás más datos y recursos interesantes sobre el tema de la accesibilidad, así como valiosos consejos para crear un sitio WP accesible.

Otros recursos en inglés

Resolución y diseño multidispositivo

Podría decirse que no hay ninguna regla en el diseño web de la que se hable con más frecuencia (y que se ignore muy a menudo) que "mobile first”.

Con este enfoque, el contenido se crea para dispositivos móviles y luego se adapta en consecuencia para más grandes. Lo contrario a esto sería adaptar el diseño para ordenadores de sobremesa y Cía. y luego configurarlo en consecuencia para los dispositivos más pequeños. 

Se me ocurren otros dos enfoques:

  • Crea un sitio web distinto para cada dispositivo móvil y de escritorio y accede a él correspondientemente.
  • Muestra el sitio web bajo la versión de escritorio desde tu móvil

El primer enfoque puede ser el correcto, dependiendo del proyecto, pero no está muy extendido, ya que es muy costoso y requiere mucho tiempo. Esto último, por desgracia, todavía se ve con demasiada frecuencia en la web y, por lo tanto, hay que añadirlo urgentemente a la lista de "buenas prácticas". Puedes encontrar más consejos de optimización para móviles aquí.

Mobile first no tiene por qué ser siempre el camino correcto: la investigación sobre el grupo objetivo y su comportamiento en internet puede mostrarte rápidamente qué dispositivos se utilizan principalmente para acceder a tu sitio. 

La idea detrás de todo esto es que no solo se preparen los contenidos de forma visual, sino que también se tengan en cuenta los cambios en las condiciones externas. Para saber más al respecto, no te pierdas el artículo Mobile-First UX Design Is Longer a Trend.

La siguiente tabla ilustra claramente qué pantallas se utilizan para acceder a internet con más frecuencia. Esto puede ayudarte a decidir para qué pantallas quieres optimizar tu sitio web. Ten en cuenta, no obstante, que esta generalización solo puede servir de orientación. Incluso estas estadísticas no deberían sustituir una buena investigación de tus grupos objetivo.

Mejores prácticas de diseño web
Fuente : https://www.hobo-web.co.uk/best-screen-size/

Mejores prácticas para WordPress

WordPress Codex

WordPress te ofrece un número increíble de posibilidades para presentar tus diseños web, pero incluso aquí hay estándares y buenas prácticas o "best practices" que deberías considerar.

El Códex de WordPress

WordPress ofrece un códice general que puede ayudarte a tratar el tema con más detalle.

Plugins y themes WordPress

A la hora de elegir tu plugin y theme ideal, no solo es importante su funcionalidad actual. También es una buena idea leer las reseñas y familiarizarse con la frecuencia de las actualizaciones e investigar si el plugin, o theme, seguirá desarrollándose en el futuro. Las herramientas WordPress que se desarrollan regularmente suelen tener un apoyo más activo. También es más probable que sigan siendo compatibles con futuras versiones de tu sitio.

Actualizaciones y seguridad WordPress

La actualización periódica de tus themes y plugins reduce la vulnerabilidad al acceso no autorizado. Los errores se resuelven y tus sitios web se adaptan al entorno técnico en constante cambio. Plugins de seguridad, como WordFence, también ayudan a mantener el control de tu sitio y su seguridad y a reaccionar a tiempo ante los problemas. Un certificado SSL debería estar integrado en cada sitio web. 

Mejores prácticas de diseño web: tus dudas

¿Qué preguntas tienes para Sonja? ¿Qué buenas prácticas podrías recomendar tú mismo/a? No dudes en utilizar la función de comentarios. ¿Quieres leer más consejos sobre diseño y desarrollo web? Entonces síguenos en Twitter, Facebook o a través de nuestra newsletter.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño y desarrollo web. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.