5 Elementos y tendencias modernos de diseño de sitios web

Si bien no es necesario incluir todas las tendencias que surgen en su sitio web, muchas de ellas tienen el potencial de mejorar la experiencia de sus visitantes.

Elemento # 1: tipografía única y grande

La ​​mayoría de las empresas tienen una fuente o tipografía particular que utilizan para ayudar a sus clientes a identificarlas de inmediato frente a sus competidores. En los últimos años, los diseñadores han recibido una gran selección de fuentes para elegir, lo que facilita a las marcas expresarse con mayor precisión a través de la tipografía.

Por ejemplo, El New Yorker se reconoce instantáneamente mediante el uso de una fuente única, Adobe Caslon Pro . Mientras que fuentes más únicas, como Blokletters-Balpen, han comenzado a ser utilizadas por empresas nuevas y de tecnología como Zero .

¿Por qué es útil?

La tipografía usa una tendencia de diseño en todo el sitio web para llevar a los lectores a diferentes partes de la página. Por ejemplo, El sitio web de The New Yorker guía a los visitantes de una sección a otra en función de la tipografía y el tamaño de fuente.

Al crear la marca de su empresa, su elección de tipografía puede indicar indicios sobre quién es usted. ¿Eres divertido o serio? Funcional o informativo? Independientemente de la fuente que elijas, asegúrate de que tu diseñador considere su aplicabilidad en navegadores y computadoras. Elegir una fuente que no sea compatible con navegadores y computadoras comunes podría significar que su sitio web se muestre torpemente en diferentes dispositivos.

 

Elemento n. ° 2: Imágenes de héroe grandes y receptivas

No es necesario ir más allá del popular sitio web de publicación Medium.com para ver un ejemplo de una imagen de héroe grande:


Las imágenes grandes como esta eliminan el concepto de arriba y abajo del pliegue. Al enfocarse solamente en la imagen con texto en lugar de un CTA o botones sociales, Medium crea una fuerte experiencia visual que lo alienta a desplazarse hacia abajo para leer más.

Las imágenes de héroes grandes a menudo se colocan en segundo plano con texto y otro contenido superpuesto en la parte superior, como en el sitio web de Uber. Independientemente del enfoque que utilice, las imágenes grandes pueden ayudar a contar visualmente su historia sin tener que depender únicamente del texto.

¿Por qué es útil?

Sus clientes vienen de todas partes y tienen grandes expectativas. Es posible que no esté seguro de si está buscando su sitio web desde su teléfono, tableta o computadora de escritorio. La imagen que Medium usa arriba es extremadamente poderosa, pero si solo fuera visible desde las computadoras de escritorio, muchas personas podrían perderla.

Dicho esto, asegurarse de que sus imágenes sean receptivas lo convierte en una buena experiencia para el usuario. Los visitantes del sitio web pueden ver diferentes imágenes, ya sean el fondo o las imágenes del producto, y poder obtener la misma experiencia sin importar de qué dispositivo provengan.

Elemento n. ° 3: Vídeos de fondo

Los videos que se reproducen automáticamente en segundo plano pueden agregar mucho a una página. Se pueden usar para contar una historia y reducir significativamente la cantidad de otro contenido que se necesita para explicar su negocio.

Tomemos el sitio web de Wistia por ejemplo. Cuando aterriza en su página principal, un video grande comienza a reproducirse automáticamente en segundo plano, y al hacer clic en el botón Reproducir, obtiene una mirada más profunda a Wistia:

Este video de fondo es una manera brillante de hacer que el visitante se comprometa a través del video principal.

¿Por qué es útil?

Los videos de fondo se enfocan en atraer al visitante desde el momento en que aterriza en su página. El video le permite a su visitante comprender los puntos clave de su empresa sin tener que leer una sola línea de texto.

Además, nuestro cerebro procesa el video 60,000 veces más rápido en comparación con el texto. Mientras que las personas a menudo dudan en leer bloques de texto pesados, los videos aparecen sin esfuerzo y se pueden consumir muy rápidamente. También ayuda a que las velocidades de conexión aumenten y que los tamaños de los dispositivos móviles crezcan, lo que mejora las experiencias de video.

 

Elemento n.º 4: Diseño semiplanas

En 2013, Apple cambió radicalmente al diseño plano. En pocas palabras, el diseño plano es cualquier elemento que no incluye o da la percepción de tres dimensiones, como las sombras. No solo el diseño plano es más fácil de comprender para los usuarios, sino que también puede cargarse más rápidamente en sitios web sin elementos complicados o excesivamente técnicos.

Siguiendo los pasos de Apple, muchas otras organizaciones, tanto grandes como pequeñas, se han desplazado al diseño plano. Sin embargo, compañías como Uber han puesto su propio estilo al agregar sombras y dimensiones sutiles. Como puede ver en la imagen a continuación, las cajas tienen un elemento de profundidad con sombras a su alrededor, sin exagerar:

Cuando se desplaza sobre cualquiera de los cuadros en la página de inicio de Uber, la sombra desaparece y alivia la imagen que está detrás.

¿Por qué es útil?

El diseño plano ayuda al visitante a comprender su contenido más rápidamente, y agregar algunos elementos de profundidad puede darle vida. Independientemente de si diseña completamente su sitio web utilizando un diseño plano o utiliza sombras y otros elementos, es importante ser coherente en todo su sitio web. Asegúrese de que su página de inicio, páginas de productos y cualquier otra sección clave de su sitio web utilicen las mismas claves de diseño para que los visitantes puedan comprender instantáneamente lo que están viendo.

 

Elemento # 5: Menús de hamburguesas

Es probable que la mayoría los sitios web con los que entra en contacto tienen un largo menú de opciones para elegir. La ventaja de esto es que el menú puede llevar al visitante directamente a donde quiere ir. Sin embargo, la desventaja es que generalmente ocupan una tonelada de espacio valioso en la pantalla.

El menú oculto o hamburguesa cambia esto. Este menú era común en aplicaciones web antes de llegar al diseño web: incluso en Google Chrome puede encontrar un menú de hamburguesas en el lado derecho.

¿Te preguntas por qué se llama menú de hamburguesas?

Si usas tu imaginación, las tres líneas que están apiladas una encima de la otra parecen hamburguesas. Get it?

¿Por qué es útil?

Las páginas de su sitio web deben tener una ruta clara para que el usuario las tome. La eliminación de una navegación ocupada hace que la experiencia sea más limpia y libre de distracciones. Estas experiencias mejoradas ayudan a mejorar la probabilidad de que el usuario encuentre la información que necesita para completar una acción deseada.

 

 

 

 

 

 

 

 

Fuente: www.veememedia.com