Cada año, vemos que comienzan a surgir nuevos elementos y estilos en el diseño de sitios web.

Algunos elementos, cuando se incorporan de forma reflexiva, ayudan a contar historias y explicar su empresa. Otros elementos funcionan para mejorar la apariencia del contenido en un dispositivo específico. 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.  Cree fácilmente páginas de sitios bellamente diseñadas con el complemento del sitio web de HubSpot. Pruébelo aquí gratis.

Pero con tantas opciones para elegir, puede ser un desafío determinar cuáles son [realmente que vale la pena considerar. Para ayudarlo a reducir su enfoque, hemos detallado ocho elementos importantes del diseño de sitios web modernos que puede incluir para mejorar el rendimiento de su sitio.

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

Elemento # 1: tipografía única y grande [19659007] 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.

Fuente: Movimiento UX

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

Elemento n. ° 6: imágenes de productos gigantes

Es posible que haya notado que muchos sitios web B2B están comenzando a mostrar imágenes de productos grandes en sus sitios para resaltar las diferentes características o partes de sus productos. Esto no es una coincidencia

Para darle una mejor idea de lo que estamos hablando, echemos un vistazo a la página del producto para HubSpot Website Platform :

Hay una gran imagen destacada en la parte superior de esta página, y mientras se desplaza hacia abajo en la página hay imágenes de productos adicionales en profundidad. Las imágenes también son receptivas y su objetivo es garantizar una experiencia optimizada para los espectadores que provienen de diferentes dispositivos, como mencionamos anteriormente.

¿Por qué es útil?

Las imágenes de productos más grandes ayudan a los diseñadores a resaltar las diferentes características de un producto de una manera más eficiente y efectiva.

Este enfoque refuerza los beneficios de una función al brindar la oportunidad de resaltar los más valiosos piezas. Por ejemplo, en la segunda imagen, notará que hay números en la imagen que corresponden con los beneficios de ciertas características.

Estas imágenes grandes también son fáciles de escanear. Ayudan a los visitantes a generar una comprensión sólida de lo que hacen las diferentes características del producto al transmitirlas a través de imágenes en lugar de palabras.

Elemento # 7: Diseño de tarjetas

Con el auge de Pinterest, diseñadores y vendedores se han fascinado con las tarjetas . Las tarjetas individuales ayudan a distribuir información de forma visual para que los visitantes puedan consumir fácilmente pedazos de contenido del tamaño de un bocado sin sentirse abrumados.

La página de inicio de Brit + Co sirve como un gran ejemplo de diseño de tarjetas en acción:

Al dividir diferentes contenidos en tarjetas, los usuarios pueden elegir qué artículos ellos quieren expandirse Esto ayuda a mantener la página de inicio sintiéndose limpia y organizada, sin depender de una tonelada de texto.

¿Por qué es útil?

El diseño de tarjetas se está volviendo cada vez más popular entre los sitios web B2B y B2C porque ayuda a entregar trozos de información fácilmente digeribles para los usuarios. El uso de este diseño en su sitio puede ayudar a destacar varios productos o soluciones uno al lado del otro.

Ten en cuenta que tus cartas deben ser receptivas. Esto significa que a medida que el tamaño de la pantalla se vuelve más pequeño o más grande, el número y tamaño de las tarjetas se deben adaptar según corresponda.

Elemento n.º 8: Producto corto o Videos de funciones

Además de los videos de fondo, las empresas también comienzan a usar producto corto o videos de características para resaltar un caso de uso específico. Estos videos cortos son excelentes para darle vida a su solución, sin abrumar al visitante con una larga experiencia que deben pasar.

Un ejemplo fuerte de esto proviene de la gente de InVision . Muestran este breve ilustrador de lo fácil que es usar su producto arrastrando y soltando un diseño directamente en su página principal:

¿Por qué es útil?

Según Inc . Revista 92% de los clientes de B2B miran videos en línea, y 43% de los clientes de B2B miran videos en línea cuando investigan productos y servicios para sus negocios . Por lo tanto, las empresas B2B necesitan crear videos que expliquen sus productos porque influyen en el proceso de toma de decisiones del comprador.

Estos videos cortos le permiten a su cliente potencial comprender rápidamente el valor sin ver una experiencia realmente larga y profunda. Claro, ambos tienen valor, pero los videos más cortos permiten una comprensión rápida que es mejor para la parte superior del embudo.

 master inbound marketing con las clases de capacitación de la academia hubspot



Source link