Las mejores prácticas, consejos y directrices en el diseño web que usted debe saber

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

¿Cuáles son las mejores prácticas en el diseño de páginas web? ¿Cómo las implementa con éxito en su próximo proyecto de diseño web? ¿Y qué es lo que realmente definimos como estándar de diseño y las mejores prácticas en el diseño web?

¿Qué entendemos realmente por "prácticas óptimas"?

Hay reglas fijas en el desarrollo de la web, que tienen que ver principalmente con la legibilidad y la limpieza del código y la seguridad de un sitio web. En el diseño web, por otro lado, la terminología es un poco más vaga y las reglas están más abiertas a sus propias interpretaciones.

Las mejores prácticas: El diseño web es más que una estética

Las mejores prácticas en el 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 prácticas óptimas de diseño de sitios web son un conjunto de reglas que deben seguirse 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 les presentaré las mejores prácticas para un buen diseño web. Para cada área, le doy consejos sobre cómo puede adquirir más conocimientos y le presento herramientas y ejemplos que le ayudarán en su próximo proyecto.

También abordaré brevemente el tema de las prácticas óptimas en la esfera del desarrollo de WordPress . Como seguramente sabe, la planificación y la gestión de proyectos son una parte importante del diseño de la web. En este artículo dejaré los dos temas fuera por el momento, ya que esto iría más allá del alcance de este artículo.

Las mejores prácticas: Diseño visual

Comenzamos ahora con los estándares establecidos para el diseño visual: ¿Cuáles son las mejores prácticas en el campo del diseño visual? ¿Y qué factores están implicados?

Característica de reconocimiento y marca

La página web debe encajar con el resto de la apariencia de la compañía y debe basarse en la guía de estilo. Revise el sitio web para las siguientes preguntas:

  • ¿Puede decir a primera vista para qué compañía se creó el sitio web?
  • ¿Se ha integrado la guía de estilo?
  • ¿Se puede reconocer a los operadores del sitio web por los elementos visuales?
  • ¿Los elementos visuales se usan de manera consistente?
  • ¿El lenguaje utilizado en el sitio web refleja la marca?

Google está a la vanguardia de las marcas consistentes. No puedo pensar en ninguna otra marca que tenga tantos productos diferentes y sin embargo se las arregle para dar a cada producto la sensación de empresa. Incluso cuando miro un producto de Google que nunca he visto antes, puedo asociarlo directamente con la marca.

¿Cómo hace esto Google?

Entre otras cosas, mediante el uso consistente de los colores de Google, la tipografía, los espacios en blanco distintivos, la llamada a la acción consistente y la navegación. Los logotipos también muestran cierta consistencia que funciona en todas las empresas y categorías, aunque esto último no significa necesariamente que el diseño también genere favores.

Con la consistencia de la marca, primero analizas sólo si el sitio web refleja la compañía y su marca de la mejor manera posible.

Estándar de diseño web y usabilidad

Otra "práctica óptima" se define por la integración de normas. Esto incluye, por ejemplo, la colocación del logo en la esquina superior izquierda, la aparición de botones, enlaces y demás. Esto ayuda al visitante tus sitio a encontrar su camino de forma rápida y fácil. Por lo tanto, estas normas son indispensables para la aplicación de una usabilidad exitosa.

Más recursos sobre el tema de la utilidad:

¿Por qué debería estar particularmente interesado en la usabilidad y la experiencia del usuario como diseñador web? 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 estándares de diseño generalizados en el diseño web a través de Patrones de diseño de la interfaz de usuario. Andy Crestodina explica muy claramente cómo se definen las normas en su artículo sobre Estándares de diseño web.

De acuerdo con esto, se debe utilizar un enfoque de diseño en al menos el 80 por ciento de los sitios web para que cuente como estándar. Cualquier otra cosa es un hábito (50-79 por ciento) o incluso trae inconsistencia y confusión (0-49 por ciento) al sitio web tu .

Diseño armonioso: la regla de los tercios

Sobre el tema diseño armonioso de la web Ya he informado antes. Esta vez me gustaría entrar en más detalles sobre la regla de los tercios.

Esto se ha utilizado durante varios cientos de años, principalmente en el campo de las bellas artes 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 ayuda sobre todo a colocar la información más importante de manera que el visitante pueda percibirla directamente. 

En pocas palabras, un elemento visual no debe ocupar más de tres casillas y debe estar ubicado en un tercio de la disposición. Los nodos también son ideales para colocar mensajes importantes y Call-To-Actions.

En Photoshop, puedes comprobar y ajustar los diseños de forma rápida y sencilla con la herramienta de recorte y el ajuste de la regla de los tercios tu Para ilustrar la Regla de los Tercios, he creado el sitio web de Marqeta un poco más cerca:

Mejores prácticas

El producto y su mensaje están bien distribuidos en los nodos. Aquí el diseño podría hacerse un poco más eficiente cambiando un poco el CTA. Sin embargo, la armonía del diseño sufrirí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í todavía podríamos replantearnos la colocación de la CTA.

Los llamados "mapas de calor" también ayudan a averiguar dónde los visitantes tus sitio principalmente miran y hacen clic. La herramienta Huevo Loco ofrece aquí por ejemplo un servicio (de pago).

Otra forma de comprobar el diseño de tu es la llamada prueba de borrosidad. Aquí se toma la nitidez de su diseño (por ejemplo, usando Photoshop y el "Gaussian Blur" - 12 por ciento). Si los usuarios ya no pueden leer el contenido, rápidamente se hace evidente 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 reconocible como tal?

Mejores prácticas de diseño web

Para esto tengo de nuevo la página web de Marqeta se utiliza. El CTA de la derecha y el producto son particularmente prominentes, seguidos por el mensaje y finalmente el logo y el segundo CTA:

Mejores prácticas de diseño web

La versión móvil la desarmé aún más para probar lo que queda. Aquí el producto llama la atención primero, seguido por el CTA y el logo. Puedes hacer esta prueba con todo el sitio , mejor aún en la fase de diseño. Aquí puedes analizar rápida y fácilmente qué elementos de los diseños de tu son prominentes y decidir si esto es lo que quieres.

Texto y SEO

La creación de sitios web incluye naturalmente el contenido escrito. Para ello hay redactores profesionales que, con la mirada puesta en el SEO, la usabilidad y la guía de estilo, escriben contenidos significativos para el sitio web tu . Pero también hay algunas pautas que puede seguir usted mismo. 

Debes prestar especial atención a la longitud y a la legibilidad de los textos - a menudo los textos son demasiado extensos y están demasiado anidados. 

Incluso si el grupo objetivo está acostumbrado a una cierta cantidad de jerga, siempre hay que tener en cuenta que nuestra capacidad de atención en un sitio web es mucho menor que cuando se leen artículos profesionales, por ejemplo. Más bien, buscamos información específica cuando navegamos por los sitios web. Es más probable que escaneemos el contenido en lugar de tomarnos el tiempo para leerlo correctamente.

También de Google hay puntos negativos si las frases en tus sitio son demasiado largas y puntos positivos si son causadas por el llamado "palabras de transición"están interconectados.

También son interesantes las contribuciones al tema de la SEO:

Accesibilidad

La accesibilidad a la web es, desafortunadamente, todavía un tema marginal - y es demasiado a menudo ignorado. También hay enfoques simples que podríamos tener en cuenta desde el primer diseño. Por ejemplo, ¿Utiliza principalmente colores para resaltar la información? 

Puedes probar esto fácilmente mirando la página web tu como una versión en blanco y negro:

Mejores prácticas de diseño web

Para esto he analizado el mismo sitio web de nuevo. Incluso sin colores el mensaje es claro. El CTA superior derecho podría ser problemático en cuanto al contraste.

Para verificar esto con certeza, está la "Verificador de Contraste". La relación de contraste por defecto es de al menos 4,5:1 para el texto normal y 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 es lo suficientemente rico en contraste, pero la variante de color es suficiente.

http://colorsafe.co/ es otra herramienta para determinar los colores y su contraste. Aquí puedes probar directamente diferentes combinaciones de colores. La proporción se le da directamente y usted tiene la posibilidad de seleccionar las fuentes y también de acuerdo a qué Estándar WCAG te gustaría hacer una selección de tu .

Pueden surgir problemas con el uso de los colores para la representación visual de los errores de manejo. Tomemos elementos de forma, por ejemplo. Los errores se representan aquí a menudo resaltando el cuadro de entrada en color. Esto puede causar que alguien con una debilidad de color no sea capaz de reconocer los errores y por lo tanto no pueda resolverlos. 

Debe tener esto en cuenta al planificar y, por lo tanto, asegurarse siempre de que hay otra representación del error. Aquí puede encontrar más datos y recursos interesantes sobre la accesibilidad, así como valiosos consejos para la creación de un WP libre de barreras...sitio.

Otros recursos

Resolución y diseño de dispositivos cruzados

Probablemente no hay ninguna regla en el diseño web que se aborde más a menudo - y más a menudo se desestime - que "mobile first”.

En este enfoque, el contenido se crea para los dispositivos móviles y luego se adapta para los más grandes. Lo opuesto es diseñar para escritorios y similares y luego adaptarlo para dispositivos más pequeños. 

Me vienen a la menteotros dos enfoques:

  • Crear un sitio web separado para cada dispositivo móvil y de escritorio y luego llamarlo de acuerdo a ello.
  • Mostrar el sitio web como una versión de escritorio en su 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. Lamentablemente, esta última se sigue viendo con demasiada frecuencia en la web y, por lo tanto, es necesario añadirla urgentemente a la lista de "prácticas óptimas". Se pueden encontrar más consejos para la optimización de los móviles aquí.

Mobile first no tiene por qué ser siempre el camino correcto: Las investigaciones sobre el grupo destinatario y su comportamiento en la Internet pueden mostrar rápidamente qué dispositivos acceden principalmente a tu sitio . 

La idea que subyace a esto no es sólo que el contenido se prepare de manera visualmente apropiada, sino también que se tengan en cuenta las condiciones externas cambiadas. Puede encontrar más detalles en el artículo El diseño del primer UX móvil ya no es una tendencia leer.

En el siguiente cuadro se muestran claramente las pantallas que se utilizan para acceder a Internet con mayor frecuencia. Esto puede ayudarte a decidir para qué pantallas quieres optimizar los sitios web de tu . Una vez más, tenga en cuenta que esa generalización sólo puede utilizarse como directriz. Una encuesta tus de los grupos objetivo tampoco puede reemplazar estas estadísticas.

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

las mejores prácticas para WordPress

WordPress Códice

WordPress ofrece muchas posibilidades para presentar los diseños de tu en la web. Pero incluso aquí hay normas y mejores prácticas que deben seguirse.

El códice WordPress

WordPress proporciona un códice general para este propósito, que puede ayudar a tratar el tema con más detalle.

WordPress Plugins y Themes

Cuando se elige el Plugins y Themes correcto, no sólo es importante su funcionalidad actual. También es una buena idea leer las reseñas y familiarizarse con la frecuencia con que se ofrecieron actualizaciones y averiguar si Plugin, o Theme, se desarrollarán más en el futuro. WordPress Las herramientas que se desarrollan regularmente con mayor profundidad suelen tener un apoyo más activo. También es más probable que sigan siendo compatibles con las futuras versiones tus sitio .

WordPress Actualizaciones y seguridad

tu Themes y Plugins que se actualiza regularmente, reduce la vulnerabilidad al acceso no deseado. Los errores se resuelven y los sitios web de tu se adaptan al entorno técnico siempre cambiante. Seguridad Plugins y WordFence también ayudan a tu sitio a mantener una visión general de 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: tu Preguntas

¿Qué preguntas tienes para Sonja? ¿Qué mejores prácticas puede recomendarse a sí mismo? Por favor, use la función de comentarios. ¿Quieres más consejos sobre diseño y desarrollo web? Entonces síguenos en TwitterFacebook o a través de nuestra newsletter.

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

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.