Diseño web moderno

En el Diseño Web cada año, vemos surgir nuevos elementos y estilos.

El Diseño Web Moderno (Tendencias de Diseño Web)

Algunos elementos del diseño web moderno – cuando se incorporan cuidadosamente – 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 se producen en su sitio web, muchos de ellos tienen el potencial para mejorar la experiencia de su visitante.

Pero con tantas opciones para elegir, puede ser difícil determinar cuáles son realmente vale la pena considerar. Para ayudarle 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.

Charla Online Gratis

8 elementos y tendencias del diseño Web Moderno

Elemento # 1: Tipografía única y grande

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

Por ejemplo, The New Yorker es reconocido al instante a través de su uso de la fuente única, Adobe Caslon Pro. Mientras que las fuentes más exclusivas, como Blokletters-Balpen, han comenzado a ser utilizadas por empresas de tecnología y start-ups como Zero.

¿Por qué es útil?

Tipografía utiliza una tendencia en el diseño web para llevar a los lectores a diferentes partes de la página. Por ejemplo, el sitio web de New Yorker lleva a los visitantes de una sección a otra basado en la tipografía y tamaños de fuente.

Al crear la marca de su empresa, su elección en tipografía puede indicar pistas sutiles sobre quién es usted. ¿Es usted divertido o serio? ¿Funcional o informativo? Independientemente del tipo de letra que elija, asegúrese de que su diseñador considere su aplicabilidad en navegadores y computadoras. La elección de una fuente que no es compatible con los navegadores y las computadoras comunes podría significar que su sitio web muestra torpemente en diferentes dispositivos.

Elemento # 2: Imágenes de Hero Grandes y Responsive

No tienes que ir mucho más allá del popular sitio web de publicación Medium.com para ver un ejemplo de una gran imagen de hero en el diseño web moderno:

Imágenes grandes como ésta elimina el concepto de arriba y debajo del doblez. Al centrarse sólo en la imagen con texto en lugar de un CTA o botones sociales, Medio crea una fuerte experiencia visual que le anima a desplazarse hacia abajo para leer más.

Las imágenes grandes del Hero también se colocan a menudo en el fondo con el texto y el otro contenido cubierto en tapa, como en el Web site de Uber. Independientemente del enfoque que utilice, las imágenes grandes pueden ayudar a contar visualmente su historia sin tener que confiar sólo en texto.

¿Por qué es útil?

Sus clientes vienen de todo el lugar y tienen grandes expectativas. Es posible que no esté seguro de si están encontrando su sitio web desde su teléfono, tableta o computadora de escritorio. La imagen que Medium usa arriba es extremadamente potente, pero si sólo fuera visible desde computadoras de escritorio, muchas personas podrían extrañarlo.

Dicho esto, asegurando que sus imágenes son sensibles hace una buena experiencia de usuario. Los visitantes del sitio web pueden ver diferentes imágenes, ya sean imágenes de fondo o de producto, y poder obtener la misma experiencia sin importar de qué dispositivo provengan.

Elemento # 3: Vídeos de fondo

Los vídeos que se reproducen automáticamente en segundo plano pueden agregar mucho a una página. Se pueden utilizar 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 automáticamente a jugar en segundo plano, y al hacer clic en el botón de reproducción, obtendrá una mirada más profunda a Wistia:

Este video de fondo sirve como una forma brillante de conseguir que el visitante se comprometa a hacer clic en el video principal.

¿Por qué es útil?

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

Además, el video es procesado 60.000 veces más rápido por nuestros cerebros en comparación con el texto. Mientras que las personas son a menudo reacios a leer bloques pesados de texto, los videos aparecen sin esfuerzo y se puede consumir muy rápidamente. También ayuda a que las velocidades de conexión estén aumentando y el tamaño de los dispositivos móviles esté creciendo, lo que contribuirá a mejorar las experiencias de video.

Elemento # 4: Diseño Semi-Plano

En 2013, Apple cambió fundamentalmente 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 sólo el diseño plano es más fácil para los usuarios de comprender, sino que también puede cargar más rápidamente en sitios web sin elementos complicados o demasiado técnicos.

Siguiendo los pasos de Apple, muchas otras organizaciones – grandes y pequeñas – han cambiado a diseño plano. Sin embargo, la empresa como Uber han puesto su propio giro en el estilo mediante la adición de sutiles sombras y dimensiones. Como se puede ver en la imagen de abajo, las cajas tienen un elemento de profundidad con sombras a su alrededor, sin exagerar:

Cuando se desplaza por encima de cualquiera de los cuadros de la página principal de Uber, la sombra desaparece y libera la imagen detrás de ella.

¿Por qué es útil?

El diseño plano ayuda al visitante a comprender su contenido más rápidamente, y añadir algunos elementos de profundidad puede darle vida. Independientemente de si diseña completamente su sitio web usando diseño plano o utiliza sombras y otros elementos, es importante que sea consistente en todo su sitio web. Asegúrese de que su página de inicio, las páginas de productos y cualquier otra sección clave de su sitio web utilizan las mismas señales de diseño para que los visitantes puedan comprender al instante lo que están viendo.

Elemento # 5: Hamburger Menus

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

El menú oculto, o hamburguesa, cambia esto. Este menú era común en las aplicaciones web antes de hacer su camino hacia el diseño web – incluso en Google Chrome se puede encontrar un menú de hamburguesas en el lado derecho.

¿Se pregunta por qué se llama un menú de hamburguesa?

Si usas tu imaginación, las tres líneas que se apilan una encima de la otra parecen hamburguesas. ¿Consíguelo?

¿Por qué es útil?

Las páginas de su sitio web deben tener una ruta clara para el usuario a tomar. La eliminación de una navegación ocupada hace la experiencia más limpia y libre de distracción. 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 # 6: Imágenes de los productos gigantes

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

Para darle una mejor idea de lo que estamos hablando, vamos a echar un vistazo a la página del producto para la plataforma HubSpot:

Hay una gran imagen destacada en la parte superior de esta página, y mientras se desplaza hacia abajo de la página hay imágenes adicionales del producto en profundidad. Las imágenes son también sensibles, que tiene como objetivo garantizar una experiencia optimizada para los espectadores procedentes de diferentes dispositivos, como hemos mencionado 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 acercamiento refuerza los beneficios de una característica proporcionando la oportunidad de destacar las piezas más valiosas. Por ejemplo, en la segunda imagen, notará que hay números en la imagen que corresponden a los beneficios de ciertas características.

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

Elemento # 7: Diseño de la tarjeta

Con el auge de Pinterest, los diseñadores y los vendedores por igual se han fascinado con las tarjetas. Las tarjetas individuales ayudan a distribuir la información de una manera visual para que los visitantes puedan consumir fácilmente piezas de tamaño mordedura de contenido sin ser abrumado.

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

Al dividir diferentes piezas de contenido en tarjetas, los usuarios pueden elegir los artículos que quieren expandir. Esto ayuda a mantener la página de inicio sensación 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 sitios B2B y B2C, ya que 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 resaltar varios productos o soluciones lado a lado.

Tenga en cuenta que sus tarjetas deben ser sensibles. Esto significa que a medida que el tamaño de la pantalla se hace más pequeño o más grande, el número y tamaño de las tarjetas mostradas deben adaptarse en consecuencia.

Elemento # 8: Vídeos cortos de productos o funciones

Además de los videos de fondo, las empresas también están comenzando a usar videos de productos o de funciones cortas para resaltar un caso de uso específico. Estos videos cortos son grandes en traer su solución a la vida, sin abrumar al visitante con una larga experiencia que deben sentarse a través.

Un ejemplo fuerte de esto viene de la gente en InVision. Ellos muestran este ilustrador corto de lo fácil que es utilizar su producto arrastrando y soltando un diseño directamente en su página principal:

¿Por qué es útil?

De acuerdo con la revista Inc., el 92% de los clientes B2B ven videos en línea, y el 43% de los clientes B2B ven videos en línea cuando investigan productos y servicios para su negocio. Por lo tanto, las empresas B2B deben crear videos que explican sus productos porque es influyente en el proceso de toma de decisiones del comprador.

Estos videos cortos permiten a su perspectiva para entender rápidamente el valor sin mirar una experiencia realmente larga, en profundidad. Claro, ambos tienen valor, pero los videos más cortos permiten la comprensión rápida que es mejor para la parte superior del embudo.


¿Tu Negocio ya cuenta con una Web que se adapta a MÓVILES? Cuando tus clientes te buscan en Google para saber mas de ti ¿Que encuentran?

No caigas en desventaja ante tus competidores, solicita una cotización para tu sitio web y ten una herramienta poderosa para ganar clientes.


Siguenos en:

Últimos artículos publicados