Lo que es popular en los sitios en 2018: 7 tendencias principales en diseño web

En este artículo hablaremos sobre tecnologías VR, juegos, mapas interactivos y otras características recientes que se utilizan en el diseño web. Todo esto con ejemplos reunidos en sitios y concursos para diseñadores web, así como en la cartera de los mejores estudios y agencias digitales. En general, leer, mirar, inspirarse.

Animacion

La animación en los sitios se puede encontrar en la década de 2000. Pero durante los últimos años, ha pasado del estado "por belleza" a una solución que ayuda a entregar información de manera más efectiva que el texto y las imágenes.

Amoladoras industriales

Al llegar al sitio de la compañía alemana WEIMA, que produce molinos industriales y prensas para residuos, comprende de inmediato lo que se ofrece, cómo funciona y por qué se necesita.

En la primera pantalla, se demostró el funcionamiento de las máquinas. Y los consejos que aparecen al pasar el mouse sobre las imágenes revelan las principales ventajas del equipo.

Compañía de seguros

En el sitio de promoción de la compañía de seguros "Arsenal" con la ayuda de SVG-animation se ilustran los eventos asegurados más comunes. Y el estilo isométrico en el que están representados permitió una representación más precisa de la arquitectura y los automóviles, creando un efecto 3D.

Fabricante de equipos y productos químicos.

Medlex fabrica y suministra reactivos químicos, equipos médicos y detergentes. Las pantallas en la página principal del sitio muestran los servicios, y la animación hace que las ilustraciones sean más vívidas.

Para obtener más ejemplos del diseño de servicios, consulte el artículo de Alexey Alexandrov "Cómo diseñar la página de servicios: un ejemplo de 14 compañías de diferentes áreas de negocios".

Subasta en linea

En el sitio web de la porción de la subasta de Internet, un artista puede subastar una imagen y un coleccionista del otro lado del mundo puede comprarla. Y con la ayuda de la animación, explica la compleja mecánica y las etapas del sistema.

Interactivo

Los últimos años empezaron a aparecer sitios cada vez más interactivos. El usuario tiene la oportunidad de ponerse en contacto con los elementos de la página: empujar, estirar, conectar, dibujar, etc. Estas soluciones siempre ayudan a destacar y captar la atención.

Canal de entretenimiento

Adult Swim es un bloque en el canal Cartoon Network. En él de 11 a 6 de la mañana shows y caricaturas para adultos. En la primera pantalla del sitio dedicado a este canal, puedes quedarte durante unos cinco minutos, estirando la cara elástica del personaje principal de la caricatura "Ricky and Morty".

Estudio web

En el sitio web de AERO web studio, el cursor imita el mapa de calor "Yandex.Metrica", una de las principales herramientas para analizar a los comercializadores de Internet. Esto es probablemente todo lo que necesitas saber sobre esta página. Desplácese más lejos.

Agencia de branding

El nombre de la agencia de marca Revelé traducido del latín significa revelar lo desconocido.

Y la compañía ha reflejado su posicionamiento no solo en el nombre, sino también en el sitio. Los círculos interactivos, que ocultan el contenido, tienen que ser rechazados para leer el texto. Y para ver la información en la sección con contactos, debe borrar la página con el cursor.

Sitio personal del ilustrador

En la primera pantalla del sitio personal del ilustrador, vemos siete puntos dispersos al azar. Se pueden conectar en cualquier secuencia, después de lo cual las líneas se convierten en un personaje divertido. Y a todas las combinaciones con las que puedes conectar los puntos, se dibujan varias ilustraciones. En mi opinión, tal decisión habla del propietario del sitio mejor que cualquier texto de venta y UTP.

Juegos y pruebas

En términos de ruido de información, solo los visitantes más motivados profundizan en el contenido. Por lo tanto, el mismo comportamiento del usuario moderno empujó a los diseñadores y diseñadores a esta tendencia. De hecho, a diferencia de la lectura, a todos les gusta jugar y tomar exámenes en Internet. Esto aumenta la asistencia, ya que el resultado se comparte con amigos y se comparte en las redes sociales.

Empresa de reclutamiento

Para la Copa Mundial de la FIFA en Rusia, Ancor reclutó voluntarios y empleados que utilizaban HR-Landing para recolectar solicitudes para vacantes. Y para aumentar la cobertura, implementaron la mecánica de juego.

Desde la segunda pantalla se nos ofrece ir a la sección cerrada con el juego, que es una arcada 2D normal. Y permiten atrapar a un aficionado al fútbol desnudo corriendo en el campo, saltando por encima de los obstáculos en el camino (honestamente, no pude alcanzarlo. Si tienes éxito, escribe en los comentarios qué sucede).

Lavado de autos

En el sitio web del lavado de autos puede tomar una prueba de broma, que le informará sobre la relación con su automóvil. Y la posibilidad de compartir los resultados aumenta las preguntas divertidas y los gifs.

Parque acuatico

Y el último ejemplo son los mini juegos en el sitio del parque acuático. Los visitantes tienen la oportunidad de caminar por el territorio con toboganes, piscinas y paseos por la playa. Y así que fue aburrido, los desarrolladores idearon muchos interesantes interaktivov. Puedes rodar desde la colina más alta, disparar un cañón de agua o nadar en una bola transparente. Tales decisiones no solo involucran a los visitantes, sino que lo más importante se transmite por medio de las emociones.

Efectos de paralaje

Probablemente haya visto sitios donde, al desplazarse, los objetos en primer plano y fondo se mueven a diferentes velocidades, creando la apariencia de la trinidad. En realidad este es el efecto de paralaje. Se generalizó con el advenimiento de las tecnologías CSS3 y HTML5, permitiéndole crear efectos más interesantes y animados. Ahora, comenzaron a aparecer cada vez más sitios, en los que sirven no solo para la decoración, sino también para ayudar a revelar las ventajas o transmitir información.

Remaches

"K2 Expert" - tienda de accesorios y hardware en línea. Con el fin de vender de forma rentable su producto estrella, lanzaron un sitio de promoción de remaches. Y el remache en el sentido literal y figurativo está en el centro de atención. A lo largo de la página, permanece estática, mientras que el resto del contenido se desplaza. Esta técnica, literalmente, llama la atención del visitante hacia la página, sin lanzarla a la última pantalla.

Marca de relojes

En la página que representa la línea de relojes, esta técnica se utiliza para demostrar de manera más efectiva el producto. Cuando nos desplazamos por la página, el mecanismo del reloj adquiere detalles y aparece una descripción de cada uno de ellos.

Empresa cosmética

Más de una vez apareció en la nominación "Sitio web del día" en la empresa de cosméticos Awwwards Mowellens. En su sitio web, el paralaje crea una simbiosis con transiciones suaves y una animación agradable a la vista. Esto hace que el recurso sea único y memorable.

Realidad virtual

Esta es la recepción más difícil de implementar de toda la lista, pero es una de las más comunes. Para crear un espacio virtual en el sitio, utilizan todo un conjunto de tecnologías, como WebGL y WebVR, modelado y texturizado 3D.

Estudio digital

Studio Little Workshop se ocupa del uso de la tecnología VR para empresas. Para demostrar sus servicios, crearon un sitio web con una sala virtual, donde revelaron todo el potencial de las tecnologías propuestas.

Cine vr

En la página dedicada al cine virtual CINEVR, se le ofrece comprar un boleto para la sesión de la película que le guste y verla con la ayuda de las gafas VR. Y para brindar todos los beneficios de esta tecnología, el sitio ha implementado un espacio de cine en 3D interactivo.

"Kaspersky Lab"

En honor al vigésimo aniversario de "Kaspersky Lab", se lanzó un proyecto para predecir el futuro.

Cualquiera puede compartir su visión de lo que nos espera en 2050. Y las mejores ideas se agregarán al sitio.

Si eres un artista o diseñador, puedes dibujar un espacio de realidad virtual para tu proyecto futurista. Para hacer esto, descargue una cuadrícula especial en el sitio, con la ayuda de la cual dibuja una ilustración, y luego cárguela a su cuenta personal. Luego, su ilustración se proyecta en una esfera y se coloca en un globo interactivo, donde cualquier visitante puede verla.

Mecánica personalizada

Ahora los diseñadores se están alejando cada vez más de los estándares de construcción de sitios, rechazando las páginas planas, el desplazamiento vertical y la navegación familiar.

Esta tendencia no está vinculada a una tecnología o recepción en particular. En diferentes ejemplos - diferentes soluciones. Todo depende de la idea que quieras transmitir.

Empresa de energia

En lugar de una descripción aburrida del trabajo realizado, RTE diseñó una cartera en forma de un mapa interactivo con los proyectos en los que participaron. Y cuando se desplaza sobre cada uno de los objetos aparece una descripción detallada.

Editor

Las páginas inclinadas en el sitio web de la editorial Rhombus Press, imitando la impresión de la imprenta, rompen todos los cánones de usabilidad. El menú clásico tampoco está disponible: puede acceder a otra sección haciendo clic en el área en una de las esquinas de la pantalla.

Sin embargo, la naturaleza conceptual del sitio lo hace mucho más interesante y memorable que cualquier otro sitio de publicación.

Empresa de logistica

En las secciones del sitio web de la compañía de transporte GUS-TRANS, viajamos moviendo el círculo en la línea con el mouse. Una buena metáfora visual y una presentación no estándar ayudan a la empresa a destacar.

Ilustraciones

Esta tendencia está cobrando impulso desde 2017 y es probable que continúe en 2019. Una gran ventaja de las ilustraciones es que, a diferencia de las fotos de archivo, hacen que la página sea única y memorable.

Conferencia

Sitio promocional de la conferencia creativa Epicurrence №8, celebrada en el Parque Nacional Yosemite. Atrae a diseñadores, ilustradores, animadores y otros sabores creativos. Allí hacen lo que quieren: crean proyectos conjuntos, van a escalar, pescan, buscan el tesoro, y por la noche se reúnen alrededor de la fogata para conversaciones inspiradoras.

En general, el diseño del sitio dedicado a este evento, el diseñador reaccionó no menos creativo. Para transmitir las emociones correctas, pintó ilustraciones temáticas, inspiradas en la belleza de la reserva y la atmósfera del evento.

Portafolio de ilustradores

Mariano Pascual es un ilustrador y diseñador argentino. En lugar de un sitio de tarjetas de visita estándar, dibujó una parodia del sistema operativo, representando una página con su escritorio, ventanas, cesta y navegador. Resultó divertido y no muestra para mostrar su trabajo.

Servicio de préstamo online.

Creddy - un servicio para obtener préstamos e inversiones a interés. Las ilustraciones en el sitio son una metáfora para los clientes y las empresas. Las imágenes en ellas crean la impresión de una empresa plástica y abierta. Y para transmitir las emociones correctas a cada audiencia, utilizaron dos colores de acento: rojo, en la sección para prestatarios, gris, para inversores.

Marca de ropa

La página dedicada a la nueva colección Gucci Spring-Summer 2018 es una secuencia continua de ilustraciones, complementada con animación y momentos interactivos. Y al hacer clic en cualquier cosa en las imágenes, vamos a su tarjeta en la tienda en línea.

Que sigue

La mayoría de las tendencias de moda se basan no solo en la visión de los diseñadores, sino también en el comportamiento del usuario. Ahora a la gente no le gusta leer, a todos les gusta mirar y participar. Por lo tanto, las tendencias modernas en los sitios web se reducen a la visualización e interactiva. Esto puede ignorarse, y puede adaptarse a las realidades modernas y obtener resultados a un nivel superior. La elección es tuya.

Loading...

Deja Tu Comentario