Webdesign-Best-Practices

Mejores prácticas de diseño web, consejos y directrices que deberías conocer

¿Cuáles son las mejores prácticas en el diseño web? ¿Cómo implementarlos con éxito en tu próximo proyecto de diseño web? ¿Y qué definimos como normas de diseño y mejores prácticas en el diseño web?

¿Qué entendemos por "Best Practices"?

En el 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 algo más confusa y las normas están más abiertas a las interpretaciones individuales.

Best Practices: 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 de 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. También son directrices para una mayor claridad y una mejor experiencia de usuario.

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

También trato brevemente el tema de las Best Practices en el desarrollo WordPress. Como probablemente sepas, la planificación y la gestión de proyectos son una parte importante del diseño web. En este artículo, dejaré de lado ambos temas por ahora, ya que esto iría más allá del alcance de este artículo.

Best Practices: Diseño visual

Comenzamos ahora con las normas establecidas para el diseño visual. ¿Cuáles son las Best Practices 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 debe seguir la guía de estilo. Por lo tanto, consulta el sitio web para las siguientes preguntas:

  • ¿Puedes saber a primera vista para qué empresa se ha creado el sitio web?
  • ¿Se ha integrado la guía de estilo?
  • ¿Son los elementos visuales reconocibles para el/la operador/a del sitio web?
  • ¿Se utilizan los 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 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 consigue Google?

Entre otras cosas, mediante un uso coherente de los colores de Google, la tipografía, un espacio en blanco distintivo, una llamada a la acción y una navegación coherentes. Los logotipos también muestran una cierta coherencia que funciona en todas las empresas y categorías, aunque esto último no significa necesariamente que el diseño también vaya a provocar likes.

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

Estándar de diseño web y usabilidad

Otra Best Practice es la definida por la integración de normas. Por ejemplo, la colocación del logotipo en la esquina superior izquierda, el aspecto de los botones, los enlaces, etc. Estas ayudan a los visitantes de tu sitio a orientarse rápida y fácilmente. Por lo tanto, estas normas son indispensables para la aplicación de la usabilidad con éxito.

Otros recursos sobre el tema de la usabilidad

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

¿Qué define una norma de diseño web?

Definimos estándares de diseño generalizados en el diseño web a través de patrones de diseño de interfaz de usuario. Andy Crestodina explica cómo se definen las normas de forma muy comprensible en su artículo sobre las normas de diseño web.

Según este hecho, 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%) o incluso aporta incoherencia y confusión (0-49%) a tu sitio web.

Diseño armonioso: La regla de los tercios

Ya he informado sobre el tema del diseño web armonioso. En esta ocasión me gustaría profundizar en la regla de los tercios.

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

En la creación de sitios web, la regla de los tercios también ayuda a colocar la información más importante de forma que el o 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 nodos también son especialmente adecuados para colocar mensajes importantes y llamadas a la acción.

En Photoshop, puedes utilizar la herramienta de corte "crop-tools" y la configuración de la "Rule of Thirds" para comprobar y ajustar rápida y fácilmente tus diseños. Para ilustrar la regla de los tercios, he echado un vistazo al sitio web de  Marqeta:

Mejores prácticas

El producto y su mensaje están bien distribuidos entre los nodos. En este caso, el diseño podría ser un poco más eficiente desplazando 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 ocupa el tercio inferior del diseño, mientras que el producto se muestra bastante centrado. Aquí podríamos replantearnos la colocación del CTA.

Los llamados "heatmaps" (mapas de color) también ayudan a saber dónde miran y hacen clic principalmente los/as visitantes de tu sitio. La herramienta Crazy Egg, por ejemplo, ofrece aquí un servicio (de pago).

Otra forma de comprobar tu diseño es la llamada prueba de desenfoque o "blur-test". Aquí se le quita la nitidez al diseño (por ejemplo, con la ayuda de Photoshop y el "Gaussian Blur" - 12%). 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 la CTA. ¿Sigue siendo reconocible como tal?

Mejores prácticas de diseño web

Para ello, he vuelto a utilizar el sitio web Marqeta. El CTA de la derecha y el producto destacan especialmente, seguidos del mensaje y, por último, el logotipo y el segundo CTA:

Mejores prácticas de diseño web

He rebajado aún más la versión móvil para probar lo que queda. Aquí, el producto llama la atención en primer lugar, seguido del CTA y el logotipo. Puedes hacer esta prueba en la totalidad del sitio, preferiblemente todavía en la fase de diseño. Aquí puedes analizar rápida y fácilmente qué elementos de tu diseño destacan y decidir si es lo que quieres.

Optimizar el contenido y el SEO

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

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

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

Google también da menos puntos si tus frases son demasiado largas y más puntos si están conectadas por las llamadas "transition words".

También son interesantes las aportaciones sobre el tema del SEO:

Accesibilidad web y sitios web sin barreras

La accesibilidad de la web sigue siendo, por desgracia, un tema marginal y demasiado a menudo ignorado. Aquí también hay formas sencillas de pensar que ya podríamos considerar en el primer diseño. Por ejemplo, ¿utilizas predominantemente los colores para resaltar la información? 

Puedes comprobarlo fácilmente observando la siguiente imagen en blanco y negro:

Mejores prácticas de diseño web

En este caso he vuelto a analizar el mismo sitio web. Incluso sin colores, el mensaje se transmite con claridad. El CTA superior a la derecha podría ser problemático en términos de contraste.

Para comprobarlo con seguridad, existe el "Comprobador de Contraste". 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 para determinar los colores y su intensidad de contraste. Aquí puedes probar directamente diferentes combinaciones de colores. La proporción se da directamente y tiene las posibilidad de seleccionar las fuentes y también el estándar WCAG.

El uso de colores para representar visualmente la gestión de errores puede causar problemas. Por ejemplo, los elementos de forma. Los errores suelen representarse resaltando en color la Input Box. Para alguien con una deficiencia de color, esto puede llevar a que no se reconozcan los errores y, por lo tanto, no se solucionen. 

Hay que tenerlo en cuenta a la hora de planificar y, por tanto, asegurarse siempre de que hay 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 web WordPress accesible.

Otros recursos

"*"indica que los campos son obligatorios

Me gustaría suscribirme a newsletter para estar informado sobre nuevos artículos del blog, ebooks, funciones y noticias sobre WordPress. Puedo retirar mi consentimiento en cualquier momento. Ten en cuenta nuestra Política de privacidad.
Este campo es de validación y no debe modificarse.

Resolución y diseño web responsivo

Probablemente no haya ninguna regla en el diseño web que se mencione más a menudo (y también se ignore más a menudo) que la de"mobile first".

Con este enfoque, el contenido se crea para los dispositivos móviles y luego se adapta en consecuencia para los más grandes. Lo contrario es diseñar para escritorio y compañia, y luego adaptarlo en consecuencia para dispositivos más pequeños. 

Se me ocurren otros dos enfoques:

  • La creación de un sitio web distinto para dispositivo móvil y para escritorio y acceder al lugar correspondiente dependiendo del dispositivo elegido.
  • Mostrar el sitio web como versión de escritorio en el teléfono móvil

El primero puede ser el enfoque correcto (dependiendo del proyecto), pero no está muy extendido, ya que es resulta bastante costoso y requiere mucho tiempo. El ú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 "Best Practices". Puedes encontrar más consejos sobre la 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 te puede mostrar rápidamente qué dispositivos se utilizan principalmente cuando se accede a tu web. 

La idea 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. Puedes leer más sobre esto en el artículo Mobile-First UX Design Is No Longer a Trend.

El siguiente cuadro muestra claramente qué pantallas se utilizan para acceder a internet con mayor frecuencia. Esto puede ayudarte a decidir para qué quieres optimizar tus sitios web, pero ten en cuenta que esta generalización solo puede servir de orientación. Incluso estas estadísticas no pueden sustituir una investigación de tus grupos objetivo.

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

Best Practices para WordPress

WordPress Codex

WordPress te ofrece un número increíble de posibilidades para presentar tus diseños en la web. Incluso en este caso hay normas y Best Practices sobre las que podrías basarte.

WordPress Codex

WordPress ofrece un códice general que puede ayudarte a dominar este tema.

Plugins y themes WordPress

A la hora de elegir el plugin y el theme adecuados, 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 el theme seguirán desarrollándose en el futuro. Las herramientas WordPress que se desarrollan regularmente suelen tener un soporte técnico más activo. También es más probable que sigan siendo compatibles con futuras versiones de tu sitio.

Actualizaciones y seguridad WordPress

Tu actualización periódica de los themes y los plugins reduce la vulnerabilidad a los accesos no deseados. Los errores se resuelven y tus sitios web se adaptan al entorno técnico en constante cambio. Los plugins de seguridad, como WordFence, también ayudan a hacer un seguimiento 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. 

Best Practices en el diseño web: Tus dudas

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

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

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