Las tendencias de diseño web más brillantes en 2016
El mundo del diseño web es brillante y diverso. Grandes cambios no ocurren aquí todos los años. Esto se confirma por el rápido crecimiento de la tecnología, que en los últimos años ha demostrado que las tendencias importantes en el diseño web en el futuro cercano se centrarán en mejorar los desarrollos existentes.El diseño plano se volverá más texturizado, las experiencias cinematográficas serán más comunes y el uso de bibliotecas de JavaScript permitirá más experimentación. Estamos seguros de que la creciente popularidad de WebGL y la realidad virtual nos permitirá transformar los sitios web que conocemos en algo nuevo con características interactivas interesantes.En este artículo, veremos las 11 tendencias de diseño web más grandes esperadas para este año. ¡Así que ponte cómodo y comienza a leer!1. WebGL (Biblioteca de gráficos web)
Entre los últimos logros está la notable tecnología WebGL (Web Graphics Library). Ella usa muchos sitios increíbles que han aparecido recientemente.De manera simple, WebGL es una forma de representar gráficos 3D y 2D interactivos en navegadores acelerados por hardware sin ningún complemento.1.1 Aplicación WebGL Interactive 3D
Experiencia Curiosidad (NASA)WebGL fue uno de los temas centrales de la conferencia SIGGRAPH 2015 . Puede ver la presentación en gráficos 3D y WebGL en este canal de YouTube.En el video de una hora y media, aprenderá sobre la aplicación web " Experience Curiosity " de la NASA, cuya creación marcó el tercer aniversario del aterrizaje del rover "Curiosity" en Marte. La aplicación permite a los usuarios "rodar" el rover tridimensional de la NASA en la superficie de Marte y "controlar" el brazo manipulador.Para crear este recurso, se utilizaron Blend4Web (un marco para crear aplicaciones 3D basadas en navegador) y Blender (un paquete para modelado y animación tridimensional).
El sitio web de Beloola utiliza three.js (biblioteca JavaScript)Beloola es la primera red social diseñada en forma de un mundo tridimensional. Se asemeja a Linden Lab en Second Life, pero no requiere ningún software especial que no sea el navegador en sí.1.2 "Video" 3D WEBGL
Angry Wife (Disp. Madeo)Otro tipo de 3D en WebGL es la promoción del juego Angry Wife . A primera vista, parece un video normal, pero no lo es en absoluto. De hecho, la escena 3D integrada en la página web utiliza la biblioteca de JavaScript three.js .
El proyecto "The Boat" de SBS TV (Australia)Australian SSB TV reelaboró la historia del escritor de Vietnam Nam Le "The Boat" y la convirtió en un video interactivo usando WebGL. La aplicación consta de varias partes con excelente animación e ilustraciones pintadas a mano. Three.js también se usa aquí , como en el ejemplo anterior.
Porque la recolecciónen la aplicaciónPorque recuerda la idea de crear una especie de máquina del tiempo, pero solo en relación con la música. Una gran cantidad de efectos de sonido están estrechamente relacionados con lo que sucede en la pantalla y dependen de las acciones del usuario. El proyecto se realiza utilizando PIXI en forma de una serie compilada de clips que se activan mediante diversos elementos interactivos.1.3 Visualización de datos con WebGL
Histografía (Matan Stauber) Lahistografía muestra eventos históricos de Wikipedia en una línea de tiempo interactiva (nota del traductor. Se requiere un navegador Chrome para funcionar) . Probablemente no parezca muy interesante, pero pruébelo usted mismo y se sorprenderá de cómo una gran cantidad de datos puede transformarse en una herramienta simple y receptiva.
"El Museo del Mundo" (desarrollado por el Museo Británico y Google)Una idea similar se implementó de una manera ligeramente diferente para la colección del Museo Británico. El proyecto " El Museo del Mundo " es el resultado de una asociación entre el Museo Británico y el Instituto de Cultura de Google. Los objetos históricos de la colección del museo se muestran en una "línea de tiempo" realizada en 3D con WebGL.Puede avanzar y retroceder en el tiempo a lo largo de los ejes Z o Y y continentes utilizando el eje X. Usando el menú, puede seleccionar etiquetas para objetos que se agrupan por temas clave (comercio, conflicto, etc.).1.4 animación 2D basada en WebGL
Nouvelles-Ecritures de FranceTVEl proyecto “ Nouvelles Ecritures ” (traductor aprox. “Modern Scrolls”) del canal de televisión francés FranceTV es un sitio con una implementación muy interesante de animación WebGL 2D en un navegador. La sensación de que está leyendo un pergamino ricamente ilustrado que se desplaza suavemente verticalmente. El proyecto se llevó a cabo con la ayuda de JavaScript bibliotecas Pixi.js .Desde un punto de vista técnico, es una animación continua en dos dimensiones que se ejecuta en un pseudo espacio 3D. ¡Se ve muy impresionante!2. VR (realidad virtual)
La realidad virtual (VR) es una tecnología relacionada que puede sacudir el mundo de los dispositivos en 2016. Quizás muy pronto todo se volverá mucho más interesante.¿Has oído hablar de Google Cardboard ? Con un teléfono Android y un trozo de cartón, puede tener una sensación de realidad virtual en casa. Google agregó a las gafas improvisadas una aplicación especial de Android: Cardboard Camera , que le permite ver fotos virtuales. Esta aplicación fue una de las mejores según The Guardian en enero de 2016.Sin embargo, si desea una mejor "realidad virtual", puede pre-ordenar la suite Rift VRde Oculus (aproximadamente $ 600). Hay un cruce entre Google Cardboard y Oculus: es el
VR GEAR de Samsung ($ 100).¿Hay alguna diferencia en el diseño web? Todavía no, pero eche un vistazo a WebVR (la API de JavaScript que proporciona acceso a dispositivos de realidad virtual) y algunos proyectos que utilizan esta tecnología. Se pueden encontrar ejemplos de trabajo en el sitio web de Mozilla VR . Esto es lo que los propios desarrolladores dicen: "Queremos crear un sistema de realidad virtual abierto y de alto rendimiento para los sitios".2.1 video VR
Catch the Dragon ("Catch the Dragon") de Peugeot Lapromoción Peugeot 208 es un gran ejemplo de la interacción de dispositivos de realidad virtual y video. Al inicio, se propone seleccionar la opción de visualización deseada: VR (para Google Cardboard) o video panorámico 360. Ambas versiones son completamente interactivas. Si utiliza un dispositivo con un giroscopio, deberá girar activamente la cabeza para "atrapar al dragón".3. Sistemas de partículas.
Lossistemas Deutser Particle en gráficos tridimensionales comenzaron a usarse desde los años 80 para emular algunos fenómenos naturales, como la niebla, el humo, el fuego, el agua, el césped y las nubes. Ahora con el advenimiento de WebGL, está disponible para los navegadores.Un ejemplo interesante de uso de partículas es la página web de Deutser . Observe cómo los elementos se separan y regresan en forma de figuras y símbolos, respondiendo a los movimientos del mouse. El resultado es realmente fascinante.4. Vistas panorámicas
Rainforest (Rainforest) por RegnskogfondetRainforest no es solo una imagen panorámica. Con cada paso, te sumerges cada vez más en la jungla con una vista completa de 360 grados.Aquí, paisajes tridimensionales de alta calidad, panoramas de pantalla completa. Sin embargo, la integración de elementos de navegación en la estructura del "mundo" parece mucho más interesante.5. Video en pantalla completa con escenas y elementos interactivos.
Milka's Christmas Express (Christmas Express) utiliza un conjunto de episodios de video separados por escenas interactivas.El sitio web de Christmas Express también explota la idea del video en pantalla completa, pero según tengo entendido, no hay nada que ver con WebGL.Seguirás los pasos para crear una carta de Navidad. 10 minutos para escribir un mensaje y un día para la entrega. Todo parece muy real, los detalles son perfectos e incluso la animación de la pluma sigue exactamente los patrones de las letras. Se proporciona humor navideño!6. Historias de animación.
La difusión de ideas a través de la narración animada no es nueva. Pero todavía hay una tendencia que evoluciona constantemente con el tiempo. Curiosamente, las transformaciones no solo están relacionadas con los aspectos visuales o técnicos.Para crear una buena historia animada, no es suficiente desarrollar un diseño y encontrar un artista. Se necesita valor para superar los estereotipos corporativos y las limitaciones de los titulares de derechos de autor. El resultado parecerá inusual, pero los sitios que usan esta técnica se destacarán claramente en el mundo de las páginas web corporativas.
Informe anual de Danish Crown (el mayor productor de carne de cerdo de Europa)Informe anualdurante el año pasado, del fabricante europeo de alimentos Danish Crown, estos no son los cuadros y tablas aburridos a los que todos están acostumbrados. La página del informe atrae a sus inversores en un lenguaje visual simple y audaz, que utiliza activamente humor abstracto e ilustraciones divertidas. El estilo del texto también está diseñado en expresiones simples y vívidas.Y esto es lo que dicen los representantes de la compañía: "No parece abstruso. No expresa la opinión de alguien, no transmite la tarea, no está lleno de términos. Esto no tiene nada que ver con los valores centrales promedio: respeto e iniciativa. Por esta razón, hacemos esto. Mostramos respeto e iniciativa ".
La decisión más fácil del mundoEste tipo de historia es más común en las páginas web de organizaciones de ONG. Entonces, el sitio web del Proyecto de Realidad Climática "La decisión más fácil del mundo "es una tira cómica interactiva sobre el cambio climático. El visitante responde preguntas simples y, dependiendo de sus respuestas, se muestra una película o se propone firmar una petición.Este ejemplo demuestra perfectamente qué tan bien se combina el diseño plano con las texturas.7. navegación lineal
Hace unos años, los diseñadores y desarrolladores hicieron todo lo posible para evitar la navegación lineal. El énfasis principal estaba en la conveniencia del menú y la simplicidad de moverse a través de las páginas del recurso.Ahora es imposible imaginar que el desplazamiento en el sitio alguna vez se consideró como algo fallido (sí, lo fue). Aunque todavía puede escuchar sobre el mítico "sobre la tapa" de algunos desarrolladores, clientes o diseñadores (nota traductor. "Sobre la tapa" es la parte de la página que es visible para el usuario sin desplazarse) .En este artículo, no destacamos los mejores sitios de tarjetas de presentación del año. Tratemos de encontrar algunas formas nuevas e interesantes que los diseñadores usan para crear navegación lineal en los sitios.
Video de portafolio delsitio web de Julien Belmonte FilmmakerJulien Belmonte contiene todas sus películas, y la navegación en ellas se realiza de manera muy exitosa. Las películas se mueven horizontalmente de izquierda a derecha y se resaltan una tras otra. En este caso, se utiliza una línea roja en movimiento que se asemeja a un marcador temporal.Casi no hay otra navegación. A menos que, en la sección "Acerca de", donde el texto se vea como los créditos finales de cualquier película.
Francesco Bertelli CSV en líneaFrancesco Bertelli ha ideado un enfoque innovador para su CSV en línea. El calendario interactivo usado se ve estéticamente agradable y es una herramienta efectiva para demostrar el propio crecimiento profesional.La interfaz le permite navegar rápida y fácilmente, tachando las fechas que ya ha explorado. Cuando selecciona el elemento deseado, la pantalla con información se abrirá en todo el navegador. Este enfoque enfoca la atención del visitante del sitio solo en el tema que necesita.8. Navegación de página
Este tipo de navegación se ha utilizado durante mucho tiempo. En el artículo anterior " Tendencias de 2013 ", el sitio web de Bagiga fue un ejemplo de este tipo de navegación: "pantalla tras pantalla" o " anterior / siguiente ".Leyendo libros ordinarios, pasamos página por página y algunos diseñadores intentan usar este hábito.
Fabricante de Masterpieces Elfabricante de joyas Imperiali Geneve utiliza un enfoque similar al de Francesco Bertelli, cuando la atención del usuario se centra en cada pantalla individual, que cuenta su propia historia. El sitio es lineal, pero sin desplazamiento libre. Te mueves de una pantalla a otra sin ningún intermediario.Utiliza navegación de diapositivas, con elementos de interfaz para el principio y el final de cada pantalla. Todo esto se parece más a las transiciones entre escenas de películas que al desplazamiento a través de un sitio de tarjetas de visita.
Museo Van Gogh en Amsterdam Untipo similar de navegación se utiliza en el sitio web del Museo Van Gogh en Amsterdam. El número de página y su número, flechas en combinación con transiciones de diapositivas entre pantallas, una sensación completa de que está leyendo un libro tradicional.Los diseñadores se esfuerzan por acercarse a nuestras soluciones habituales que utilizan fuentes de información tradicionales. Entonces, ¿qué es el diseño web en el futuro? Por lo tanto, el marco alrededor de la página es un viejo truco que, sin embargo, a menudo se usa.9. Página enmarcada
Los estudios han demostrado que esta tendencia se está volviendo más popular de lo que pensábamos al principio. Ideas similares en diseño web se han desarrollado durante mucho tiempo, pero nunca se han ejecutado con tanto gusto y gracia.
Ginger Bread Branch por The PNC Financial Services Group, Inc.El sitio está dedicado al primer frasco de tamaño completo hecho con galletas de jengibre reales. También es interesante como guía para enseñar economía. En este recurso, no solo se usa el marco dentro de la ventana del navegador, sino también la navegación de la página.
wlokssitio web Wloks ofertas gráfica de Activos elegantes y una manera única. En lugar de la interfaz electrónica habitual de fotos de archivo, este sitio utiliza un estilo interesante de catálogos impresos y murales falsos., con un marco y un menú de elementos ubicados en las esquinas de la pantalla.
Beer 34 Beer losproductores de Beer 34 han encontrado su solución única para controlar la pantalla en varias resoluciones, inspirándose en la infografía y la historia. Al mismo tiempo, se conserva el aspecto de la antigua etiqueta. Todo se hace de manera bastante simple y este es el ejemplo más encantador en este conjunto.10. Conociendo la Conversión CSS
Stand4humanrightsStand4HumanRights te invita a unirte a la comunidad agregando tu foto a un muro social que parece una enorme superficie curva. Luego puedes publicar en las redes sociales. El "muro social" se puede arrastrar y se basa en la transformación CSS. Parece interesante, sin embargo, requiere una gran potencia informática y no es tan sensible como cabría esperar.
Species In PiecesSpecies In Pieces utiliza animaciones CSS para su exhibición interactiva, que ofrece 30 especies en peligro de extinción de todo el mundo para explorar. Los modelos animales están formados por piezas separadas que se suman al moverse de un objeto a otro.(Nota traductor. Para trabajar requiere un navegador Chrome) .11. animación SVG
holohaloEn realidad, parece extraño que haya tan pocas páginas que usan la clásica tecnología de Gráficos Vectoriales Escalables (SVG) para mostrar algo más interesante que los iconos escalables para diferentes resoluciones. Holo Halo es una excepción a la regla y puede servir como fuente de inspiración para los diseñadores, mostrando lo que se puede hacer con SVG.Resumen
Sin duda, la tendencia líder en diseño web en 2016 es WebGL en todas sus manifestaciones: video interactivo, juegos, animación y visualización de datos. Se espera que la realidad virtual tenga un gran futuro, pero mucho depende de la disponibilidad de los dispositivos de realidad virtual.Otra tendencia común es el énfasis en los medios estándar. Esto se aplica a elementos pintados a mano, teñidos y escaneados como el proyecto The Boat. La tendencia a crear páginas web que se parezcan a libros impresos, revistas, pegatinas, carteles y cómics también es visible. Esto se logra a través de la navegación página por página, el uso de marcos e intentos de ver la pantalla del monitor como una "página" en lugar de una familiar "ventana".Y si logras dominar este gran artículo, obtendrás una pequeña bonificación: date una vuelta en Delahaye 165 :
Timeshift165 sitio web Source: https://habr.com/ru/post/es390413/
All Articles