Mejores prácticas de diseño web

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

¿Cuáles son las mejores prácticas en el diseño web? ¿Cómo implementarlos con éxito en su 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 mejores prácticas?

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 reglas están más abiertas a las interpretaciones individuales.

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 mejores prácticas en el diseño web son un conjunto de reglas que hay que seguir para satisfacer las expectativas generales de los usuarios. También son directrices para una mayor claridad y una mejor experiencia del usuario.

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

También trato brevemente el tema de las mejores prácticas en el desarrollo de WordPress. Como probablemente sepa, 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.

Mejores prácticas: Diseño visual

Comenzamos ahora con las normas establecidas 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 marca

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, consulte el sitio web para 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?
  • ¿Son los elementos visuales reconocibles para el operador 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, los espacios en blanco distintivos, las llamadas a la acción y la 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 suscitar likes.

Con la coherencia de la marca, 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 "mejor práctica" 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. Éstas ayudan a los visitantes de tussitio 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ía interesarse por la usabilidad y la experiencia del usuario como diseñador web? Puede encontrar enfoques más completos sobre el tema de la usabilidad en 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 los estándares de forma muy comprensible en su artículo sobre los estándares de diseño web.

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%) o incluso aporta incoherencia y confusión (0-49%) al sitio web tu.

Diseño armonioso: la regla de los tercios

Ya he informado sobre el tema del diseño armonioso de la web. En esta ocasión, me gustaría examinar más de cerca 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 le ayuda a colocar la información más importante de forma que el 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, puede utilizar la "Herramienta de recorte" y la configuración de la "Regla de los tercios" para comprobar y ajustar rápida y fácilmente los diseños de tu. Para ilustrar la Regla de los Tercios, he echado un vistazo al sitio web de Marqeta:

Mejores prácticas

Tanto el producto como su mensaje están bien distribuidos por los nodos. Aquí, 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 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 "mapas de calor" también le ayudan a saber dónde miran y hacen clic principalmente los visitantes de tussitio . La herramienta Crazy Egg, por ejemplo, ofrece aquí un servicio (de pago).

Otra forma de comprobar el diseño de tues la llamada prueba de desenfoque. Aquí se le quita la nitidez al diseño (por ejemplo, con la ayuda de Photoshop y el "Desenfoque Gaussiano" - 12%). Si los usuarios 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 de Marqeta. La CTA de la derecha y el producto destacan especialmente, seguidos del mensaje y, por último, el logotipo y la segunda 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 de la CTA y el logotipo. Puede hacer esta prueba con la totalidad de sitio- preferiblemente todavía en la fase de diseño. Aquí puede analizar rápida y fácilmente qué elementos del diseño de tudestacan y decidir si es lo que quiere.

Optimizar el contenido y el SEO

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

Hay que 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 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 también da menos puntos si las frases en tussitio son demasiado largas y más puntos si están conectadas por las llamadas"palabras de transición".

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, ¿utiliza predominantemente los colores para resaltar la información? 

Puedes comprobarlo fácilmente mirando tuen blanco y negro:

Mejores prácticas de diseño web

Para ello, he vuelto a analizar el mismo sitio web. Incluso sin colores, el mensaje se transmite con claridad. La ATC superior derecha podría ser problemática en términos de contraste.

Para comprobarlo con seguridad, existe el "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, la 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 la posibilidad de seleccionar las fuentes y también el estándar WCAG con el que desea alinear tu.

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 entrada 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í puede encontrar más datos y recursos interesantes sobre el tema de la accesibilidad, así como valiosos consejos para crear un sitio web de WordPress accesible.

Otros recursos

Consentimiento*
Este campo es de validación y no debe ser modificado.

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 que 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 co. y luego adaptarlo en consecuencia para dispositivos más pequeños. 

Se me ocurrenotros dos enfoques:

  • Cree un sitio web distinto para cada dispositivo móvil y de escritorio y acceda a él en consecuencia.
  • Mostrar el sitio web como una 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 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". Puede encontrar más consejos sobre la optimización para móviles aquí.

El móvil primero no tiene por qué ser siempre el camino correcto: La investigación sobre el grupo objetivo y su comportamiento en Internet puede mostrarle rápidamente qué dispositivos se utilizan principalmente para acceder a tusitio . 

La idea es que no sólo se preparen los contenidos de forma visual, sino que también se tengan en cuenta los cambios en las condiciones externas. Puede leer más sobre esto en el artículo Mobile-First UX Design Is Longer a Trend.

El siguiente cuadro muestra claramente qué pantallas se utilizan para acceder a Internet con mayor frecuencia. Esto puede ayudarle a decidir para qué pantallas quiere optimizar los sitios web tu. Pero tenga en cuenta que esta generalización sólo puede servir de orientación. Incluso estas estadísticas no pueden sustituir una investigación de tusgrupos objetivo.

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

Mejores prácticas para WordPress

Códice de WordPress

WordPress le ofrece un número increíble de posibilidades para presentar los diseños de tuen la web. Pero incluso en este caso hay normas y buenas prácticas que se deben seguir.

El códice de WordPress

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

Plugins y temas de WordPress

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

Actualizaciones y seguridad de WordPress

tuLa actualización periódica de los temas y los complementos reduce la vulnerabilidad a los accesos no deseados. Los errores se resuelven y los sitios web tuse adaptan al entorno técnico en constante cambio. Los plugins de seguridad, como WordFence , también ayudan a hacer un seguimiento de tusitio 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 en el diseño web: tuPreguntas

¿Qué preguntas tienes para Sonja? ¿Qué buenas prácticas puede recomendar usted mismo? No dude en utilizar la función de comentarios. ¿Quiere más consejos sobre diseño y desarrollo web? Entonces síganos en Twitter, Facebook o a través de nuestro 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á.