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 el diseño web? ¿Cómo aplicarlos con éxito en su próximo proyecto de diseño web? ¿Y qué es lo que definimos como normas de diseño y mejores prácticas en el diseño web?

¿Qué entendemos realmente 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 un poco más confusa y las reglas están más abiertas a las 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 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. Además, son directrices para una mayor claridad y una mejor experiencia del usuario.

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

También cubro 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 post dejo de lado ambos temas por ahora, ya que esto excedería el alcance aquí.

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?
  • ¿Los operadores del sitio web son reconocibles por los elementos visuales?
  • ¿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 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 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" se define 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 tus sitio a orientarse rápida y fácilmente. Por lo tanto, estas normas son indispensables para la aplicación de la usabilidad con éxito.

Más recursos sobre 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 este artículo y en https://www.usability.gov/.

¿Qué define una norma 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. Cómo se definen los estándares, Andy Crestodina lo explica de forma muy comprensible en su artículo sobre 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 un hábito (50-79 por ciento) o incluso aporta incoherencia y confusión (0-49 por ciento) 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. Esta vez 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 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 Call-To-Actions.

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, me fijé en el 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 llena 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 tus sitio . La herramienta Crazy Egg, por ejemplo, ofrece un servicio (de pago) aquí.

Otra forma de comprobar el diseño de tu es la llamada prueba de desenfoque. Aquí se toma la nitidez de su diseño (por ejemplo, con la ayuda de Photoshop y el "Desenfoque Gaussiano" - 12 por ciento). 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 la página web de Marqeta. Destacan especialmente la CTA de la derecha y el producto, seguidos del mensaje y, por último, el logotipo y la segunda CTA:

Mejores prácticas de diseño web

La versión móvil la he desactivado aún más para probar lo que queda entonces. Aquí, el producto llama la atención en primer lugar, seguido de la CTA y el logotipo. Definitivamente, 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 tu destacan y decidir si es lo que quiere.

Texto y 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 el sitio web 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 los textos 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 tus sitio son demasiado largas y más puntos si están conectadas por las llamadas"palabras de transición".

También hay publicaciones interesantes sobre SEO:

Accesibilidad

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

Puede comprobarlo fácilmente mirando el sitio web tu 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. 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. Se le da directamente la proporción y tiene la opción de seleccionar las fuentes con y también según qué norma WCAG quiere alinear la selección tu .

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

Otros recursos

Resolución y diseño multidispositivo

Podría decirse que no hay ninguna regla en el diseño web que se aborde con más frecuencia -y que se ignore con más frecuencia- que "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 alinear el diseño con el de los ordenadores de sobremesa y co. y luego adaptarlo en consecuencia para los 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 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 mostrarle rápidamente qué dispositivos se utilizan principalmente para acceder a tu sitio . 

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 en 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 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 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 le ofrece un número increíble de posibilidades para presentar los diseños de tu en la web. Pero incluso aquí hay normas y buenas prácticas que debes seguir.

El Códice WordPress

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

WordPress Plugins y Themes

A la hora de elegir el Plugins y el Themes 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 Theme, seguirá desarrollándose en el futuro. WordPress Las herramientas 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 tus sitio .

WordPress Actualizaciones y seguridad

La actualización periódica detu Themes y Plugins reduce la vulnerabilidad al acceso no autorizado. Los errores se resuelven y los sitios web tu se adaptan al entorno técnico en constante cambio. La seguridad Plugins , como WordFence , también ayuda 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: tu Preguntas

¿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 boletín.

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 *.