Tendencias de desarrollo de sitios web. Diseño táctil y natural. Redes Sociales Profesionales

En Nochevieja, alguien adivina la suerte utilizando posos de café y se echa las zapatillas al hombro. Y los diseñadores están tratando de sondear el futuro e identificar tendencias que se convertirán en el tema principal de 2017. Intentémoslo también. Nos basaremos no sólo en el gusto y en el hecho de que “lo diga el director de arte”, sino también en el análisis.

1. El vídeo es un elemento funcional

Los textos son demasiado difíciles, necesitas concentrarte. Las imágenes no son informativas. Y el vídeo es el tipo de contenido que un usuario moderno de Internet está dispuesto a consumir y disfrutar. Y cuando le cuente una historia al usuario (por ejemplo, cómo funciona el complejo proceso de desarrollo de un sitio web), úsela. Filme y muestre cómo un analista hace prototipos y un diseñador dibuja maquetas. Sumerge al usuario en la historia y responde las preguntas que pueda tener.

Y deje de publicar videos en todas partes donde el cliente pide algo impresionante dentro del presupuesto. Vídeo de belleza: la esperanza rota del usuario. Mira y espera que le muestren algo útil, le cuenten una historia. Pero no. Por tanto, como elemento decorativo del diseño web que no cumple una función útil, el vídeo se mantiene en 2016.

Sí: Un vídeo que responde a las preguntas de los usuarios y resuelve problemas del sitio web.
No: El video está de fondo porque es hermoso y todos lo hacen así.

2. Cinemagramas en lugar de vídeos

Utilice cinemagramas. Son más interesantes que las imágenes estáticas, pero no dan falsas esperanzas a los usuarios, como los vídeos sin historia ni propósito.

¡Con cuidado! Los cinemagramas son terriblemente pegajosos.

3. Gráficos de fuentes

Otra alternativa a los vídeos y las imágenes son los gráficos de fuentes. Decora el sitio y lo hace más informativo. La principal preocupación aquí es el contenido de calidad. Pero esa es una historia completamente diferente.

4. Los iconos son el principal elemento decorativo

¿Por qué necesitas imágenes, videos y cambios de fuentes, si puedes agregar "wow" a los íconos que ya estarán en el sitio? En serio, agrega alguna animación personalizada y termina el día. Serás la más trendy.

5. Infografías adhesivas

El problema para los usuarios es que se vuelven menos diligentes. Y olvidadizos como peces de colores: fueron al sitio, luego el teléfono parpadeó (oh, una falsa alarma, solo un destello de luz solar), regresaron al monitor y no recuerdan qué estaban haciendo aquí. Y se van.

El problema empeora cada año. Por tanto, la tarea del diseñador es enganchar al usuario y obligarle a interactuar con el contenido, aunque sean estadísticas aburridas. Especialmente (!) si se trata de estadísticas aburridas.

Anímelo, píntelo con colores brillantes, obligue al usuario a interactuar con él; haga todo lo posible para atraer al usuario y no soltarlo hasta el final de la página.

6. Navegación combinada

Una técnica que está ganando popularidad, que combina el desplazamiento horizontal y vertical, también alegrará la aburrida vida cotidiana del usuario, le interesará y le obligará a interactuar cuidadosamente con el sitio.

7. Evitar el menú de hamburguesas

En el 99,9% de las previsiones de diseño web para 2015 y 2016, los autores prometen que este año los diseñadores seguramente abandonarán el menú de hamburguesas. Así. Bueno, apoyemos la tradición y digamos también: en 2017 el menú de hamburguesas no estará de moda, no hagas eso, ¡uf!

El problema del icono de las tres barras es que no es intuitivo. Es reconocido por kalachi experimentados que ya han interactuado con él y saben lo que se esconde detrás del símbolo. Pero en Internet están apareciendo más recién llegados: tanto renacuajos muy pequeños como personas mayores. Y el icono del menú de hamburguesas no les resulta familiar ni comprensible. Sólo podrán descubrir qué esconde y dónde diablos está el menú después de pasar por una experiencia dolorosa.

Seamos realistas: es poco probable que puedas abandonar por completo el menú de hamburguesas. Pero antes de hacerlo, busque una posible alternativa en cada proyecto.

estudio-spoon.co.jp

8. Marco alrededor del sitio.

Una solución popular es no ampliar el sitio para que ocupe toda la pantalla, sino colocarlo en un marco ordenado. Es agradable y hay espacio libre que se puede usar para la navegación (por qué no, ya que el menú de hamburguesas está muriendo).

teletipo.online

9. Más emojis

Cuanto menos esfuerzo dedique el usuario a reaccionar, más dispuesto estará a hacerlo. Y no se les ha ocurrido ninguna reacción más simple que los emojis. Por ahora en los sitios web solo te puede gustar el contenido, lo máximo es regalar un Facebook Emote. Pero es hora de cambiar a emoji, compañeros diseñadores.

10. Diseño de materiales

Sí, todavía está con nosotros.

11. Más dispositivos móviles primero

Cada vez hay más usuarios que ven sitios web desde teléfonos móviles, por lo que cada año los clientes aceptan más fácilmente el enfoque Mobile First. Ya no se considera un experimento extraño, sino un método que se justifica por sí solo. Así que prepárate para una avalancha de sitios del mismo tipo, pero tan convenientes para teléfonos móviles.

12. Más microinteracciones

Los sitios web absorberán más funciones de las aplicaciones móviles. En 2017, habrá microinteracciones increíbles que te harán temblar los dedos. Como un corazón en Twitter... bueno, ¡es una obra de arte! Quiero presionarlo para siempre. Habrá más de esto en Mobile First y en proyectos clásicos.

13. Las CTA son aún más intrusivas

El diseñador despierta la belleza por la belleza sólo en la mesa y en Dribbble. En otros casos (en aquellos por los que se paga dinero), los especialistas en marketing le respiran con dificultad, que necesitan algo más brillante aquí y un botón más grande allá. Parece que en 2016 hubo un punto de inflexión y un replanteamiento de estos requisitos: espere bloques de CTA grandes, jugosos y llamativos en 2017. De modo que los especialistas en marketing no tienen nada que añadirles.

strv.com

14. Nostalgia por los 80

En la refinada Internet, los diseñadores echan de menos los píxeles de las lámparas, el sonido de ocho bits de los descodificadores y el ruido de los televisores de tubo. Y compensan su añoranza por los años 80 y 90 en el diseño de sitios web. Esté a la moda: agregue colores ácidos, interferencias y fallas a sus proyectos.

retrominder.tv

15. Evite las fotografías de archivo

Las imágenes de archivo ya nos han puesto los dientes de punta, en serio. La carta de hamburguesas es peor y es más fácil sustituirlas. Así que filmemos el nuestro.

El siglo XXI está en el patio, kamon. Los teléfonos se han vuelto tales que toman fotografías de alta calidad. Por lo tanto, no es un problema filmar a los empleados o el proceso de trabajo ahora mismo en su teléfono. Lo principal es el tiempo y las ganas de realizar un buen proyecto.

16. Verdes

Los chicos de Pantone creen que el color de 2017 es este pequeño verde Greenery. Escuchémoslo y agreguémoslo a nuestra lista.

17. Un nuevo enfoque para la creación de prototipos

Cualquiera que sea el maravilloso diseño que dibujes, lo principal es presentarlo de tal manera que enamore al cliente. O al menos lo vio como lo ve usted.

Un diseño estático apenas puede hacer frente a esta tarea, por lo que en 2017 es necesario mejorar sus habilidades de presentación. De modo que inmediatamente, antes del diseño, el cliente ve todos los bancos inventados y no los imagina en su mente. De lo contrario, imaginará algo mal y creará expectativas que los desarrolladores no podrán justificar.
Ahora bien, ya no es común que un diseñador simplemente dibuje y muestre una imagen. Debe poder manejar cualquiera de las herramientas de creación de prototipos para crear una plantilla interactiva o mejorar sus habilidades de animación.
Aquí tenéis vuestro arsenal para el próximo año, compañeros. Pero no pelees con un cliente que quiere un videoteléfono. No coloques elementos de píxeles y emojis donde necesites un comercio electrónico limpio y minimalista. Y no bombardee a los clientes reacios en Skype con enlaces a este artículo. Utilice las tendencias con prudencia o no las utilice en absoluto. De todos modos, en tres años estarán completamente actualizados :)

En 2016, muchas empresas rediseñaron sus sitios web, reduciendo el número de opciones de navegación. Esta tendencia continuará en 2017.

Los menús de encabezado de página que anteriormente incluían entre 5 y 7 opciones ahora ofrecerán entre 3 y 4 opciones.

Menos opciones facilitan que el usuario encuentre la información que necesita y evita la "parálisis de elección".

Un buen ejemplo de un nuevo enfoque es Ikea. En las capturas de pantalla a continuación puede comparar las versiones antigua y nueva del sitio web de la empresa.

Versión antigua:

Nueva versión lanzada en 2016:

1. Rechazo del menú de hamburguesas

Un menú de hamburguesas no le da al usuario ninguna idea de la profundidad del sitio o la aplicación. Como resultado, sigue desorientado.

Spotify ya abandonó el menú hamburguesa en su aplicación. Más empresas seguirán su ejemplo en 2017.

1. Duotonos

El uso de duotonos hace que el diseño del sitio web sea minimalista y permite mantener la atención del usuario en el mensaje principal o en la navegación.

En 2017, esperamos un uso más activo de duotonos en lugar de fondos a todo color.

1. Diseño táctil

La desventaja del desplazamiento de paralaje es que ralentiza la velocidad de carga de la página.

En 2016, la animación se consideraba una tendencia prometedora. Este año, sin embargo, la atención de los desarrolladores se centra en el rendimiento. Desde este punto de vista, el desplazamiento de paralaje no es la solución más óptima.

1. Acción significativa

Uno de los principios básicos del diseño de materiales es la "acción significativa". Google cree que "la acción debe ser significativos y apropiados, sirven para atraer la atención y mantener la continuidad"..

La aplicación Tumblr es un buen ejemplo de este principio. Ganó el Premio Material Design de Animación 2016.

1. Evite imágenes de archivo de baja calidad

Los sitios web de las empresas deben invitar a los usuarios a interactuar y reflejar los valores de la empresa. Ya no hay lugar para imágenes de archivo aburridas y de baja calidad. Como esto:

1. Menos aplicaciones, más PWA

La tecnología PWA (Progressive Web Apps) permite que un sitio web funcione como una aplicación. Incluyendo fuera de línea. Ya lo utilizan publicaciones y empresas tan importantes como The Washington Post, Airberlin y Flipkart. Este año la popularidad de la tecnología crecerá.

1. Fuentes de Google

Google creó una biblioteca de fuentes de código abierto en 2010. En 2016, mientras seguía trabajando en Material Design, la empresa también mejoró su servicio Google Fonts. Como resultado, las vistas previas de fuentes se han vuelto más rápidas y su personalización más fácil. La sección Destacados contiene fuentes que combinan bien con el diseño de materiales.

En 2017, aún más diseñadores web trabajarán con las fuentes de Google.

1. Minimalismo

Esta tendencia combina muchas otras tendencias mencionadas anteriormente. Minimalismo significa énfasis en el rendimiento (velocidad) y la usabilidad. En este enfoque la tipografía, el contraste y el espacio juegan un papel importante.

Ryan McCready, editor de contenido del servicio de diseño infográfico Venngage, habla sobre lo que es popular en el diseño gráfico en este momento y qué técnicas se han abandonado este año.

Colores atrevidos y vibrantes

En los últimos años, muchos líderes tecnológicos han utilizado colores apagados y fáciles de leer. Por eso intentaron crear un esquema de diseño muy claro y mostrar que el futuro elegante y funcional que suele mostrarse en las películas de ciencia ficción ya ha llegado.

Este método ayudó a la empresa a pasar a una nueva etapa de desarrollo y unificar todas sus aplicaciones bajo un solo color. Al igual que con Spotify, este uso audaz de colores brillantes hizo que la marca se destacara.

La moda de los colores llamativos y brillantes en el diseño proviene de los principios de Material Design de Google. La empresa eligió un diseño plano, estilizado e intuitivo con la adición de "colores inesperados y enérgicos, así como fuentes e imágenes funcionales y agradables a la vista".

En general, muchas de las tendencias actuales de 2017 surgieron bajo la influencia de los principios de Material Design de Google.

También los usamos para hacer esta imagen promocional de libro electrónico. Como resultado, la imagen se volvió increíblemente popular.

Si tiene problemas para elegir los mejores colores para su diseño, siga leyendo para conocer algunos excelentes ejemplos de paletas de colores. Y no tengas miedo de utilizar colores que contrasten entre sí.

Negrita

La fuente en negrita atrae la atención de los lectores. Involuntariamente prestas atención a las inscripciones grandes y llamativas.

Mi ejemplo favorito es Wired. Utiliza diferentes fuentes para resaltar títulos específicos y mantener un orden jerárquico de información en la página.

Sólo echa un vistazo:

Otro buen ejemplo del uso de fuentes llamativas es HubSpot. El texto está en primer plano y está respaldado por gráficos:

HubSpot entiende que cada año el tiempo que lleva absorber la información de un tweet tiende a cero. Por eso, para atraer la atención del lector, utilizan inscripciones breves y concisas en negrita.

Además, ahora cada vez más personas navegan por Internet desde teléfonos móviles. Debido a las pantallas de alta definición, existe una necesidad cada vez mayor de utilizar fuentes en negrita. Entonces, para retener a los lectores, debes entregar tu contenido de la manera correcta.

Buffer resalta los titulares a lo largo de todo el artículo, no solo al principio, lo que hace que los artículos sean más fáciles de leer en todos los dispositivos. Recomiendo utilizar este enfoque para artículos largos; de esta manera ayudará a los lectores a navegar por ellos.

Aplicamos este método al crear esta infografía. Llama la atención la combinación de fuentes en negrita y colores interesantes:

Fuentes de Google Fonts

He estado usando Google Fonts durante mucho tiempo porque son muy versátiles. Si necesito crear un diseño para una publicación en línea y luego agregarlo a una presentación, estoy seguro de que todas las fuentes funcionarán bien juntas. Todos se ven geniales en cualquier plataforma de blogs o sitio web.

Por cierto, ¡todas las 810 fuentes son absolutamente gratuitas! Oh, sí, a la gente le gustan las cosas gratis. También les gustan las cosas que son muy fáciles de usar. A continuación se muestra un ejemplo de combinación de varias fuentes populares de Google:

En nuestro sitio web utilizamos fuentes Roboto y Open Sans.

Fotos originales

Cada año crece la cantidad de contenido, al igual que la necesidad de imágenes de alta calidad. Para garantizar que las fotografías duren mucho tiempo, los autores intentan que sean lo más versátiles posible.

Sólo hay un problema: las mejores imágenes genéricas tienden a quedar obsoletas con el tiempo. Si sigues las novedades en el campo de la tecnología y el marketing, probablemente te resulte familiar esta foto:

Se utiliza en páginas de destino, blogs e incluso en publicaciones de Instagram. Para ser honesto, lo tomé para un sitio en el que trabajé hace unos años. Debido a la popularidad de este tipo de imágenes de archivo, la originalidad del contenido gráfico ha disminuido drásticamente.

Y la necesidad de utilizar fotografías claras y perfectas sólo empeoró la situación.

Cuando un lector ve la misma imagen por centésima vez, piensa que el autor del artículo no intentó ser al menos un poco original. Entonces, ¿por qué leer un artículo así?

Por eso debes utilizar imágenes originales. Deja de tomar fotografías populares y comienza a hacer las tuyas propias.

Estoy seguro de que todos los miembros de tu equipo tienen un teléfono con cámara. ¿Por qué no los usas? Tome fotografías de su oficina o logotipo y utilícelas.

Descubra si hay algún aspirante a fotógrafo entre sus compañeros. Dale un par de días para alquilar una oficina y tendrás suficientes fotos para todo un año.

Cuando creamos nuestro nuevo sitio web, tomamos fotografías de nuestros empleados y quedamos muy satisfechos con el resultado.

Imágenes e iconos dibujados a mano.

No sólo las fotografías deben ser originales, sino también los iconos y dibujos. Algunas marcas ya se han dado cuenta de esto y están tratando de destacarse entre la multitud de esta manera. Este enfoque añade un elemento personal y divertido al diseño.

Algunos dicen que esta tendencia parece poco profesional e infantil, pero definitivamente llama la atención. Como la mayoría de las tendencias de 2017, actúa como una alternativa al diseño limpio y estéril de los últimos años.

Dropbox utiliza ilustraciones dibujadas a mano en todas partes. Se convirtieron en parte de la marca de la empresa y la hicieron reconocible.

Estas ilustraciones crean un ambiente relajado y deleitan al niño que vive en el alma de cada uno de nosotros. Hacen que el producto parezca más asequible. Son especialmente eficaces en grandes empresas de tecnología como Dropbox.

Otro ejemplo exitoso de este enfoque es la empresa de colchones Casper. Casi todo su sitio se compone de dibujos dibujados a mano. Aquí está uno de ellos:

La tendencia también fue recogida por el servicio MailChimp. En el informe de 2016 también muestra dibujos similares.

Moz, una empresa que desarrolla software de marketing, inserta ilustraciones en el encabezado de los artículos:

En ocasiones nuestro amor por los dibujos se manifiesta en otros proyectos:

Regreso a las raíces del minimalismo

Si te pidieran que le explicaras a un extraño qué es el minimalismo, probablemente responderías que es cuando hay que abandonar lo decorativo en favor de la funcionalidad. Lo más probable es que inmediatamente pienses en una paleta de colores neutros compuesta por tonos de negro, gris y blanco.

Parece que el verdadero espíritu del minimalismo ha sido suplantado por el uso de aburridos esquemas de color en blanco y negro. Me parece que esto se hizo específicamente para compensar el pequeño tamaño de la pantalla y la baja potencia de los dispositivos móviles.

Pero en 2017 todo cambiará. El minimalismo volverá en su verdadera forma. Lo que significa que habrá más color. Hoy en día, los dispositivos móviles son tan potentes como los ordenadores, y algunos incluso tienen mejores pantallas.

Mi ejemplo favorito de diseño minimalista es el logotipo de la plataforma Medium. Sus creadores supieron combinar varios colores diferentes y aun así mantener un estilo minimalista.

Google hizo otro rediseño del logo a favor del minimalismo y una combinación de colores brillantes. Cabe destacar que fue esta empresa la que sirvió de catalizador para el surgimiento de muchas tendencias nuevas. Los diseñadores recortaron ligeramente la fuente e introdujeron un nuevo logotipo en forma de G que realmente me gusta.

En todo esto se siente el espíritu del minimalismo, pero la prensa no escribió sobre ello. La gente ha olvidado qué es el verdadero minimalismo. El logo no era incoloro y estaba hecho de una sola forma, por lo que nadie pensó que estaba hecho en un estilo minimalista.

El nuevo logotipo era brillante y llamativo, manteniendo al mismo tiempo un aspecto minimalista. Tras el rediseño, la gente de su entorno empezó a imitar a Google, como ya lo habían hecho antes en otros aspectos.

Nosotros mismos empezamos a utilizar un estilo más minimalista para el diseño de nuestros blogs.

El sencillo diseño de la imagen transmite fácilmente la información necesaria.

Usando GIF

A todo el mundo (bueno, a casi todo el mundo) le encantan los GIF. Nos ayudan en la conversación porque a veces pueden transmitir emociones mejor que el texto.

Además, no se necesitan programas especiales para reproducirlos. Los GIF suelen ser de tamaño pequeño y pueden incrustarse en casi cualquier lugar.

Son mejores que los vídeos y las imágenes, especialmente cuando se desea reducir el tiempo de carga y el tráfico de la página. Creo que su versatilidad hace que los GIF sean un elemento de diseño aún más útil.

Me gusta mucho poner gifs en la cabecera de un artículo. En lugar de poner una imagen aburrida allí, tómate un par de minutos y crea un GIF como este.

No es necesario que hagas ningún esfuerzo creativo especial para hacer esto, pero definitivamente atraerá la atención sobre tu publicación en las redes sociales. Aquí hay otro buen ejemplo del uso de GIF en el encabezado de un artículo.

Imágenes de dos colores

Se trata de una combinación de dos colores, normalmente muy brillantes o contrastantes, en una imagen. Para crear este tipo de imágenes tendrás que activar tus habilidades de diseño, pero vale la pena.

Sólo un diseñador muy hábil puede hacer cuadros tan hermosos en dos colores. Estoy seguro de que no puedo crear algo como esto, pero eso no significa que debas eliminar esta técnica de tus planes de diseño.

Es una creencia común entre los diseñadores que las tendencias serán una parte importante de su trabajo. Mantenerse actualizado con las últimas actualizaciones se considera imprescindible. Muchos diseñadores juzgan el trabajo de otros a través de la lente de las tendencias, y etiquetar algunos trabajos con #old puede verse como un insulto, como si un diseño no utilizara las últimas tendencias, lo que automáticamente lo haría menos valioso.

Sin embargo, hay razones para seguir las tendencias. Visitar sitios como Awwwards, FWA o CSS Design Awards puede inspirarte y, como resultado, ayudarte a mirar más allá de tus hábitos de diseño. Puedes aprender sobre nuevos mundos visuales, que luego puedes (conscientemente o no) integrar con un lenguaje gráfico. Ver trabajar a otros le ayuda a mejorar sus propias habilidades y a mantenerse actualizado con la última tecnología.

En los últimos dos años, se ha hecho evidente que muchos diseñadores están tratando de alejarse de las composiciones simples. Cada vez aparecen más trabajos de diseño abiertos, aparentemente caóticos, “rotos” y “cortados”. La glorificación de la cuadrícula, como lo fue alguna vez, está perdiendo su significado y las reglas se están cambiando deliberada y conscientemente. El contenido comienza a moverse, parece moverse, y sus partes a veces se superponen y entrelazan entre sí.

La evolución de Canvas y WebGL juega un papel importante en este proceso. Los diseños modernos suelen ser un poco desordenados y menos intuitivos que los minimalistas, pero ciertamente dejan una impresión duradera en los usuarios.

¿Qué más nos espera en diseño web en 2017? Aquí están mis predicciones.

composición abierta

Hasta hace poco, el mundo del diseño estaba dominado por composiciones “cerradas”, simétricas y estáticas. Desde 2016 han aparecido muchos sitios que se han alejado de este estilo. Las composiciones abiertas con elementos dispuestos libremente en algún lugar fuera de la pantalla están ganando popularidad; se pueden ver ejemplos de este tipo de trabajos en romainpsd.com, durimel.io o booneselections.com. La distribución de elementos en estos sitios da la impresión de que siguen viviendo detrás del monitor.

Asimetría

2016 también rompió la regla de simetría que ha dominado la industria durante bastante tiempo. Muchos diseñadores han creado diseños asimétricos que están lejos de estar perfectamente equilibrados en los lados izquierdo y derecho. Como ejemplos, me gustaría mostrarles el excelente sitio culture.pl, el caótico dada-data.net y el ya mencionado durimel.io.

Diversidad

Los diseñadores han creado composiciones más dinámicas que presentan más líneas diagonales que se cruzan (poigneedemainvirile.com, vanderlanth.io) o formas más complejas (residente.com/en, helloheco.com, predictiveworld.watchdogs.com).

La ilusión del caos

En 2016, muchos diseñadores comenzaron a alejarse consciente e intencionadamente del diseño minimalista. Existía el deseo de tener más libertad y un enfoque de diseño menos rígido. Detrás de esto, por supuesto, está la necesidad de cambio, pero también el habitual sentimiento de aburrimiento. En algún momento, todo el mundo se aburre de crear diseños sencillos con elementos sencillos.

Sin embargo, al analizar los proyectos de 2016, se nota que el caos parece ser solo caos. Los diseños siguen basándose en el clásico contraste de formas, colores, texturas, tamaños, etc. Lo que ha cambiado es la disposición de los distintos elementos y la armonía de dependencia entre ellos. Hoy en día, los títulos, iconos o bloques de texto se desplazan con mayor frecuencia, a pesar de la lógica banal. A pesar de que forman parte del mismo bloque temático, están separados y ubicados a una distancia decente entre sí. No están alineados al mismo borde y tienen respaldos diferentes.

Algunas figuras geométricas “suspendidas en el aire” tienen sólo una finalidad decorativa (melanie-f). Esto también es típico de elementos superpuestos. Los textos se superponen parcialmente con fotografías, como en e03.epicurrence.com y melville-design.com, o las imágenes se superponen entre sí, como se puede ver en olivierbernstein.com.

También es una técnica distintiva para romper la habitual armonía minimalista. Los títulos enormes contrastan marcadamente con estructuras y colores delicados y sutiles.

Fondos y patrones ricos

Cada vez aparecen con más frecuencia fondos y patrones en los que hay pequeños guiones, rayas o puntos.

Un patrón particularmente común es el patrón de cuadrícula, que proporciona un "marco" para otros elementos del diseño. Estos elementos se mueven en paralaje a lo largo de la cuadrícula y, a menudo, están ubicados de forma caótica.

Patrón de cuadrícula

Uno de los primeros sitios en los que apareció una cuadrícula de este tipo fue werkstatt.fr, que, sin embargo, no utilizó animaciones características.

En klimov.agency, brand.uber.com y maisonullens.com se muestra una forma ligeramente diferente de utilizar el patrón de cuadrícula. En estos casos, la rejilla tiene una función muy específica: hacer lógicos los movimientos de los elementos. Esto le permite racionalizar soluciones no estándar y proporciona respuestas a preguntas como "¿por qué los márgenes de la ilustración no coinciden con los márgenes del botón"? Esto crea un ritmo y al mismo tiempo justifica sus violaciones.

Detalles decorativos

Lo que realmente ha cambiado últimamente es el enfoque al detalle. Hay un alejamiento gradual del minimalismo. Hay muchos otros elementos que tienen únicamente funciones decorativas. Formas geométricas “voladoras” y fragmentos correspondientes. Los íconos lineales y endebles se separan ligeramente del contenido que ilustran. Los subrayados y las líneas se desplazan. Aparecen granulosidad y fallos, como en bigyouth.fr o kikk.be.

Los botones se crean con menos frecuencia como rectángulos claros con texto dentro. A menudo aparecen como líneas suaves y desplazadas, como las de dahllaw.dk o yasuhiroyokota.com. Otra opción de botón es un desplazamiento espectacular sobre Canvas, como en hpsoundincolor.com y cavalierchallenge.com.

Conceptos bien pensados: animaciones fluidas entre secciones

No hay nada nuevo acerca de las animaciones en los sitios web. Además, no se puede decir que contradigan el enfoque minimalista. Sin embargo, al igual que Canvas, son una parte importante de las mayores posibilidades en el diseño web. Y las nuevas oportunidades siempre son tentadoras porque te permiten hacer algo diferente, fresco y original.

La abundancia de animaciones elimina la marcada división de la página en secciones. El sitio cambia suavemente a medida que se desplaza. El contenido aparece y desaparece mediante animaciones suaves. Las secuencias de estas transiciones son cada vez más elaboradas. No se trata simplemente de efectos aleatorios entre bloques de contenido, sino de un concepto reflexivo en el que cada elemento aparece en el momento adecuado (Nationalgeographic.com, stylenovels.com). Las animaciones son parte del sitio web desde el principio, no solo un detalle agregado al azar.

Animaciones interesantes decoran diseños simples. Agregan nuevo valor y hacen que la página sea única. Se convierten en la esencia de todo el proyecto, como en Ifly50 o tennentbrown.co.nz. Las animaciones suelen crear una estructura hermosa y elegante en los sitios web: Cuberto.com, lookbook.wedze.com, skarv-fashion.com o corentinfardeau.fr.

tipografía variada

Las tendencias cambiantes también se pueden ver en las fuentes utilizadas. Hasta hace poco, Internet estaba dominado por fuentes simples y neogrotescas como Helvetica, Roboto, Lato u Open Sans. El neogrotesco, un poco más "decorativo", se utiliza con más frecuencia en los títulos, y se elige una versión más simple para el resto del texto. Las fuentes serif prácticamente nunca se utilizan.

En los últimos dos años, la situación ha comenzado a cambiar. Los diseñadores utilizan audazmente diferentes tipos de fuentes. Ahora están más dispuestos a trabajar con contrastes, combinando fuentes serif y sans serif.

Están sucediendo muchas cosas en la tipografía que se utiliza en los sitios web. Los textos están animados, divididos en letras individuales y en los textos se colocan varios efectos, imágenes y vídeos.

Mayores capacidades tecnológicas y decisiones más audaces están impulsando el crecimiento de la diversidad en la tipografía web.

fuentes geométricas

Las fuentes geométricas sans-serif se han vuelto muy populares, como la clásica Futura, ITC Avant Garde, Proxima Nova o las disponibles en la biblioteca de Google: Poppins o Montserrat. Estas fuentes son mucho más expresivas que las “invisibles” neo-sans serif. Se puede lograr un carácter más “agresivo” y expresivo de un sitio web utilizando un mayor grosor, como en el sitio bastante antiguo Hugeinc.com, pero con ejemplos más nuevos: secuencia.co.uk, startuplab.no o www.protest.eu.

fuentes serif

Muy a menudo, las fuentes serif se utilizan no sólo para el cuerpo del texto, sino también para títulos grandes. Se utilizan especialmente los decorativos, como los de duhaihang.com o jennyjohannesson.com. Otras fuentes populares incluyen las relacionadas con Bodoni o Didot.

Fuentes monoespaciadas (“máquina de escribir”)

El uso de fuentes proporcionales, que normalmente se asocian con las máquinas de escribir, es innovador. Ahora se pueden ver en sitios como admirhadzic.com, cuberto.com o designembraced.com.

Combinación de fuentes contrastantes

En 2016, era común alejarse de combinaciones de fuentes suaves y armoniosas para lograr un contraste más pronunciado. Las combinaciones expresivas se vieron realzadas por el alto contraste de los tamaños de los textos. Las fuentes grandes y decorativas se combinaron con fuentes geométricas simples, del mismo modo que los títulos geométricos se combinaron con fuentes serif en el texto del contenido.

Tipografía enorme como parte de la imagen principal.

Algo muy interesante y común fue el uso de tamaños de texto muy grandes en las imágenes principales. Esto creó un contraste muy fuerte entre los titulares y el resto del contenido. Se pueden ver ejemplos en oursroux.com, femmefatale.paris o monsieurcaillou.com.

A veces, como decoración, se utilizan letras al principio, como coretinfardeau.fr o nurturedigital.com.

Un buen ejemplo de lo anterior es jennyjohannesson.com, que utiliza las cualidades decorativas de la fuente serif Goku.

Efectos adicionales aplicables a la tipografía.

Se puede observar una fuerte integración entre tipografía e imágenes, vídeos y animaciones. Las secciones individuales están conectadas: la tipografía interactúa tanto con el fondo como con otros elementos. La colocación aleatoria de tipografía en una imagen oscura es cosa del pasado. Hoy en día, los diseñadores construyen relaciones interesantes entre todos los elementos, tejen la tipografía en el fondo, la animan, etc.

Tamaños de letras grandes en textos

Cuando comencé mi viaje en diseño web, tenía el viejo hábito de usar tamaño de fuente 10 que adquirí cuando trabajaba en forma impresa. Sin embargo, rápidamente me di cuenta de que en la web el tamaño de lectura óptimo es 14.

Hoy en día, es evidente que los diseñadores utilizan fuentes mucho más grandes, especialmente cuando se trata de fuentes serif.

Ven al lado oscuro

En 2016, los diseñadores utilizaron diferentes colores. Pero se puede notar una tendencia a elegir tonos oscuros.

La tendencia de crear sitios web exclusivamente blancos se está volviendo menos popular y está dando paso a variaciones, texturas y patrones grises. Ahora es bastante común crear sitios más oscuros, donde el negro o una gradación del mismo llena el fondo y crea un ambiente ligeramente oscuro y grotesco.

Pese a ello, es difícil predecir cómo crecerá esta tendencia a lo largo del año. Sin embargo, los colores son parte de la identidad visual de las marcas, por lo que es difícil esperar que cambien fundamentalmente sus comunicaciones basándose únicamente en la popularidad de ciertas tendencias.

resumámoslo

2017 promete muchas perspectivas interesantes, pero también hay algunos peligros en el horizonte.

Personalmente, me temo que muchos diseñadores web pueden confiarse un poco cuando se trata de trabajar con Canvas. Agregue a esto nuevas tendencias y obtendrá muchos sitios web llamativos y oscuros para una amplia audiencia.

También me preocupa un poco el hecho de que muchas de las creaciones actuales no funcionarán correctamente en todos los navegadores y dispositivos móviles. Tuve la impresión de que estábamos de nuevo en el punto de partida. Ahora nos encontramos en una situación similar a la época en la que Flash, a pesar de dominar Internet, era culpado por su falta de capacidad de respuesta y sus altos requisitos de conexión a Internet.

Otra cosa que me asusta es el hecho de que las nuevas tendencias hacia la “deconstrucción” serán imposibles de aplicar a los clientes comerciales, o simplemente no se adaptarán a su perfil comunicativo. (Los sitios web gubernamentales o bancarios no pueden estar abarrotados).

Me pregunto cuánto tiempo pasará hasta que las nuevas tendencias se arraiguen en el mercado comercial. Vale la pena señalar que la gran mayoría de los sitios web que utilicé como ejemplos fueron creados para agencias, diseñadores y la industria creativa. Estos sitios a menudo establecen sus propias reglas y, por lo general, están a la vanguardia en comparación con otras industrias. A veces las tendencias tardan mucho en popularizarse en un nicho e irrumpir en el mercado comercial. Luego se suaviza un poco su forma para adaptarse a todos.

A pesar de todo esto, creo que 2017 parece muy prometedor en lo que respecta al diseño web. Decir que la era del minimalismo está llegando a su fin sería demasiado, pero definitivamente está experimentando cambios y desarrollo.

El minimalismo se volverá más complejo y detallado. Este año los sitios web utilizarán cada vez más Canvas. Veremos mucho caos, variedad de formas y expresión en proyectos futuros. Esta es una buena noticia para los diseñadores que están hartos de los estilos de diseño minimalistas Flat, Material o Metro.