10 Las tendencias de diseño web más populares que necesita saber para 2017

La web es un espacio que evoluciona rápidamente. Las tecnologías y técnicas de desarrollo pueden ocurrir rápidamente. Las herramientas siempre mejoradas permiten una mayor libertad en el diseño de interfaces e interacciones. Y por esta razón, los modelos y técnicas de diseño web pueden comenzar a convertirse en tendencias en un corto período de tiempo. A continuación se muestra una lista de las tendencias de diseño web a tener en cuenta en 2017. No todo nuevo; Algunos son estilos que han ganado y/o mantenido su popularidad durante 2016. Se espera que continúen utilizándose para los nuevos sitios web lanzados en 2017.
También hay algunas nuevas técnicas y tecnologías que puede implementar en el diseño de su sitio. No se usan necesariamente ampliamente, pero es posible que desee aprovecharlas ahora para mantenerse frente a la curva. El color de color de color para un sitio web es increíblemente importante. Puede influir en las emociones, pensamientos y tasas de conversión de los visitantes. Entonces, ¿cuáles serán las tendencias de color para 2017? Pantone reveló el color de la greenería 2017. Fue elegido como símbolo de los nuevos comienzos; Un tono vigorizante y revitalizante. No espero que cada sitio web de 2017 sea verde, pero estoy seguro de que habrá más diseños web inspirados en él.
Si está buscando inspiración para las combinaciones de colores, puede ver algunas de las combinaciones de colores recomendadas por Pantone en el color del año 2017.

Debido a la popularidad de los materiales de diseño de Google, los colores y las combinaciones de colores recomendadas en esas pautas de diseño podrían tener una tendencia al alza en 2017. Estos colores son brillantes y atrevidos. Incluso fuera del diseño del material, ha habido muchos ejemplos de diseño web que incorporan colores brillantes. Esto no muestra señal de que se detendrá pronto. Puede usar sitios como material de diseño de paleta y materiales para ayudarlo a elegir un esquema de color de diseño. ¿Necesita ayuda para elegir un esquema de color para su sitio? El diseño del material de la paleta de colores ofrece un excelente punto de partida.

Duotone es una imagen de dos colores. He visto muchas de estas imágenes utilizadas en el último año y espero que este estilo se vuelva más popular en 2017. Sitios como Spotify han usado un efecto de alto efecto con gran efecto. Es posible que haya notado que el Duoton es un estilo popular para muchas imágenes en miniatura de video de YouTube. El sitio web de Adison Partners ha utilizado completamente el Duoton en el diseño de su sitio.
El retro moderno es si se trata de arte de píxeles, tipografía vintage o imágenes inspiradas en los años 80 y 90; Retro con una nota moderna es ahora. Ha tenido una mayor influencia en el diseño web en los últimos años, muchos sitios que usan este estilo.

Este CV interactivo de Robby Leonardi es un ejemplo brillante de un retro moderno. Ha combinado un estilo de arte de píxeles semi/moderno con el desarrollo lateral de un videojuego súper Marioesco.
Sitio web de la plataforma de Robby Leonardi.

Sweet Magnolia Gelato ha optado por el aspecto vintage, pero utiliza algunas animaciones atractivas. Esto le da al sitio una elegante sensación moderna, mientras mantiene un encanto de estilo más antiguo. La pendiente negra también optó por un aspecto vintage con una apariencia modular. El sitio tiene un aspecto rústico que funciona bien con lo que ofrece el mercado negro.
Los cinemógrafos de los cinemagraphs todavía son fotos con elementos que tienen movimientos repetidos. Han ganado popularidad recientemente y con razón; Un cine bien alcanzado puede ser visual. El cine puede ser GIF o archivos de video. Ambos pueden conducir a archivos bastante grandes si el cine es alto. CinemaGraph GIFS puede superar fácilmente 3 MB, por lo que puede pensar en enviar videos. Puede ver algunos maravillosos ejemplos de cinemagraphs en Flixel; Un servicio de alojamiento para este tipo de imagen o video. Eche un vistazo para ver algunos de los grandes trabajos que la gente hace. A continuación se muestra solo un ejemplo de muchos cines de alta calidad.

El diseño de material de diseño de Google está en el escenario en 2014. Se basa esencialmente en el principio de papel y tinta, traduciendo sus cualidades en un formato digital. Por ejemplo, el uso de sombras y bordes para indicar lo que debe tocar, como los botones.

¿Necesita ayuda para elegir un esquema de color para su sitio? El diseño del material de la paleta de colores ofrece un excelente punto de partida.
En los últimos años, el diseño de materiales ha aumentado en popularidad, con numerosos temas y plantillas creadas para CMS, así como marcos frontales, como Twitter Bootstrap. Una de las críticas que escuchará sobre el material de diseño es que muchos de los sitios construidos utilizándolo parecen muy similares; Quizás demasiado similar. Esto se debe a una adhesión demasiado rígida al estilo de material de diseño, en lugar de solo aplicar los principios. Anticipo que veremos muchos proyectos web más pequeños que adoptan material de diseño tal como es. No solo los principios del diseño de materiales, sino también el estilo real. Sin embargo, probablemente veremos que parte de la comunidad de diseño está activa contra el material de diseño, o al menos contra el estilo de estereotipo, al tiempo que implementa los principios. Un maravilloso ejemplo de material de diseño en su forma más pura es el material de diseño de material (sorpresa, sorpresa). Aquí puede ver la mayoría de los principios de material de diseño en acción.

La tipografía creativa y audaz 2016 ha visto algunos usos muy creativos de la tipografía, y 2017 continuará superando los límites de lo que los diseñadores harán con la tipografía. Espere que el tipo ocupe más espacio en la pantalla, pero también vea más fuentes creativas que las fuentes web habituales a las que está acostumbrado.
Nurture tiene tipografía y videos combinados para crear un sitio web elegante y elegante. Se reproduce un video en segundo plano, visible solo por una sola letra de la palabra “Nuture”. El video y la letra cambian a medida que navega a través de cada una de las secciones de la página inicial.

Friends es una agencia de diseño estadounidense. Su sitio utiliza personajes grandes y audaces, que realmente señala como la característica principal. El diseño de diseño modular no es nuevo, pero ha ganado popularidad en los últimos años. Es un enfoque de diseño que utiliza un modelo de cuadrícula de bloque modular para la disposición de los elementos. Con respecto a los datos de las tendencias de Google, muestra que el interés de búsqueda del “diseño modular” ha aumentado desde principios de 2011. Espero que esta tendencia positiva continúe en 2017.

Build in Amsterdam ha creado un muy buen sitio web modular. El enfoque modular ayuda a definir claramente cada elemento de contenido.
La Universidad de Warwick también ha incorporado el diseño modular en su sitio web.

SVG ¿Estás cansado de los logotipos y otras imágenes terriblemente redimensionadas? Si es así, debe probar archivos SVG en lugar de formatos regulares de PNG y JPG. El formato SVG no es adecuado para todas las imágenes; Solo funcionarán con gráficos vectoriales, por lo que no puede infinitar ninguna foto. Sin embargo, para imágenes como logotipos, funcionan muy bien.

Los SVG han existido desde 1999, pero aún vemos que los formatos PNG y JPG se usan para imágenes cuando SVG sería el formato más adecuado.Sin embargo, todo parece cambiar.Probablemente verá que los SVG se mencionan más, y Google Trends muestra que el interés para los SVG ha aumentado de año en año en 2013. Anticipo un mayor uso de este formato en 2017, así como un aumento en los elementos escritos sobre este tema.¿Por qué deberías usar SVG?La razón principal es que su imagen SVG debe representarse perfectamente, independientemente de la escala.Además, las imágenes SVG tienden a tener archivos muy pequeños;
Excelente para la velocidad de su página. Si desea ver un SVG en acción, no se vea más allá del logotipo de WPMudev en la esquina superior izquierda de esta página. Si aumenta el uso de su navegador, verá que el logotipo no se pixelará, sin importar cuánto lo aumente. En cambio, el logotipo de WPMudev sigue siendo claro y alto. Flexbox Flexbox es un aspecto CSS3 que lo hace mucho más eficiente y predecible cuando se trabaja con aspectos de página que se mostrarán utilizando diferentes tamaños y dispositivos de pantalla. Flexbox ha ganado constantemente interés y, ahora respaldado por todos los navegadores modernos, es probable que use más desarrolladores front-end. Puede leer más sobre Flexbox en nuestras guías, comprensión de CSS3 FlexBox para una limpieza, hack sin hack y comprensión para el diseño moderno de sitios web de WordPress. El video 360 y VR 2016 fue el año VR. Se han lanzado numerosos auriculares VR para juegos, y 360 videos han aumentado el interés de búsqueda. Espero que los diseñadores piensen en formas interesantes de incorporar videos 360 en sitios web en 2017. Si aún no lo sabe, Google VR View es una API JavaScript que le permite agregar fácilmente 360 ​​experiencias de video a su propio sitio web. Puede leer más sobre Google VR View aquí. Para la nueva película de Blair Witch, se ha creado una experiencia de VR web 360 Interactive. Esto se ve mejor en dispositivos móviles utilizando un casco VR móvil.

Las microinteracciones de las microinteracias son momentos únicos y específicos, cuando un usuario interactúa con su sitio no tiene que ser un sitio web en sí, pero en nuestro caso, lo es. Estos momentos pueden ser acciones como apreciar una publicación, enviar un mensaje o completar un campo de formulario. El propósito de las microtinteraculaciones en este momento es proporcionar comentarios y orientación para el usuario, mejorando UX. Las microinteracciones se han vuelto cada vez más populares, y las formas en que se ofrecen comentarios y orientación a los usuarios se vuelven cada vez más creativos. Espere ver mucho más de esto en 2017. A continuación se muestra un ejemplo de micro-interacción Izhik Izhik. La animación es para una interacción similar y diferente. Puede ver la animación en Dribbble. Esto concluye nuestras tendencias de diseño web de 2017 en las que debe tener cuidado. Esperamos que esto le haya presentado nuevos modelos de diseño y tecnologías web que no sabía que se volviera popular. Diviértete diseñando tus sitios, pero recuerde que no tienes que usar algo solo porque está de moda. Asegúrese de que esto mejore la experiencia de los usuarios.

¿Cuáles crees que serán las tendencias de diseño web de 2017? Háganos saber en los comentarios a continuación.
Etiquetas:
diseño