Tendencias de diseño web. Ventajas de la navegación no estándar. Colores atrevidos y vibrantes

Descubra las tendencias, técnicas y herramientas de diseño web que dominarán el 2018. Traducción de un artículo de John Williams.

La creatividad es una conversación que comenzó hace mucho tiempo y continúa desde que aprendimos por primera vez a recrear los elementos de nuestro mundo en ocre y carbón en las paredes de las cuevas. Hemos aprendido a infundir significado incluso a figuras abstractas talladas en arcilla con palos.

Las tendencias de diseño son solo los temas principales de esta extensa, caótica y polifónica conversación. Ya sea que decidamos aceptarlas o resistirnos a ellas, nuestra creatividad va de la mano con las tendencias. ¿Qué es la innovación sino una desviación del estándar? ¿Y cómo determinar un estándar, sino la tendencia del año pasado?

Entonces, recientemente me reuní con el equipo de diseño ( Jonn Williams, Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff) y les pidió que miraran dentro de sus bolas de cristal de realidad virtual y vieran cómo sería el diseño en 2018. 🔮

1. Marcado roto

El diseño, en el que siempre confían los diseñadores en la búsqueda interminable de hacer que un diseño sea "atractivo", aporta armonía y lógica, pero se convierte en una limitación en sí mismo.

A veces simplemente queremos alejarnos del marcado, ¿vale?

Esto no significa que el diseño dividido elimine por completo la presencia del diseño en sí: los diseñadores permiten que las imágenes y los elementos de texto se muevan DENTRO y A TRAVÉS de bloques y áreas que generalmente están separadas rígidamente en diseños más estándar y familiares. Aquí es donde las imágenes y el texto normales comienzan a superponerse y converger, creando a menudo yuxtaposiciones inesperadas y hermosas de formato rasterizado y de letras.

Es difícil decir si tales efectos son intencionados o si se trata simplemente de un "encantador" error de diseño...

¿Continuar?

13. marcado CSS

En última instancia, como profesionales de la experiencia del usuario (UX), nuestro trabajo es brindar una experiencia útil y agradable para todos.

En otras palabras: nuestro trabajo gira en torno a la inclusión. Hagamos de 2018 un año para que todos nos concentremos en hacer el trabajo al máximo.

16. Algo más sobre el formato de vídeo

Lo ves en todas partes: sitios de noticias que prácticamente insisten en que veas el vídeo en lugar de leer el texto, Snapchat, luego Instagram, Facebook. ¡Por supuesto que Excel se pondrá al día pronto!

Pero como la mayoría de la tecnología, es un arma de doble filo. Miles de periodistas han perdido sus empleos debido al cambio masivo del texto al video.

Y las perspectivas tal vez no sean tan buenas para los medios. Según la Revista de Periodismo de Columbia:

Los editores que pasaron al formato de vídeo perdieron la mayor parte de su audiencia en sólo un año al producir vídeos genéricos y desechables.

El periodismo independiente está sufriendo sin él (gracias, Trump), pero el paso al vídeo no ha ayudado precisamente. Una nota positiva: según Digiday, "el coste por impresión de los vídeos es mucho mayor que el precio mostrado". En un mundo ideal, esto significaría que los periódicos y las noticias de texto podrían desaparecer, pero, por supuesto, eso no sucederá.

Vale la pena recordar los puntos fuertes del texto:

• Es rápido;
• Es barato;
• El texto sigue siendo el formato principal para la mayoría de los mensajes en línea.

¿Sorprendido? Te animo a que busques en las principales redes sociales. A menos que selecciones Instagram, Pinterest o Snapchat, probablemente verás mucho texto. E incluso en las plataformas enumeradas, el texto sigue desempeñando un importante papel de apoyo.

Incluso si una imagen “vale más que mil palabras”, rara vez cubre el contexto: quién, qué, cuándo, dónde, por qué y cómo. Esto nos lleva al siguiente punto:

17. El crecimiento del texto UX continúa

Cualquiera que influya en el diseño se convierte en diseñador. Esto incluye desarrolladores, gerentes e incluso abogados corporativos. Todo el mundo es diseñador.

Toqué un poco este tema el año pasado, pero hoy me gustaría centrarme aún más en el crecimiento de la disciplina llamada text UX.

En pocas palabras, un escritor de UX se centra en el contenido de las interfaces de usuario, principalmente para productos digitales y aplicaciones web más grandes. Ahora, cuando le explico a la gente que escribo contenido para productos de empresas como Webflow y, en el pasado, LinkedIn, suelen decir "¿qué?"

Tenga la seguridad: las interfaces de usuario están llenas de contenido escrito. Y este contenido suele jugar un papel clave en la comprensión:

• ¿Qué puedes hacer en la interfaz de usuario?
• Cómo hacerlo;
• ¿Qué restricciones y dificultades encontrarás en el camino?

Pero el texto en UX puede hacer mucho más. Las palabras en una interfaz también pueden ser una herramienta poderosa para dar forma a las percepciones de la marca. Piensa en todos los tweets que has visto o en todas las páginas 404 con frases ingeniosas.

Esto se hace evidente en el formato de la interfaz de usuario: el chatbot. Estas interfaces de usuario constan únicamente de palabras. Las palabras se convierten en la interfaz de usuario. La personalidad detrás de un chatbot (o una marca) solo puede expresarse a través del lenguaje, tal vez salpicado de emojis cuidadosamente elegidos.

Como escritor experimentado de UX, me alegra mucho ver que esta disciplina gana más reconocimiento. Se lo merecía hace mucho tiempo.

18. Diseño. Sistematización

¿Cómo se pueden codificar, ampliar y consolidar los éxitos del diseño en múltiples productos y entornos de marca?

Los sistemas de diseño se centran en traducir la estética y los enfoques de funcionalidad de una marca en componentes modulares que se pueden ensamblar para satisfacer (idealmente) cualquier necesidad única de interfaz de usuario. Cuando se codifica un lenguaje de diseño, se simplifica la toma de decisiones, se reduce el tiempo de desarrollo y se libera a los diseñadores para trabajar en proyectos más simples donde aún no se han establecido patrones de diseño.

Y las marcas, por regla general, siguen la tendencia. UXPin lanzó Systems, una herramienta para crear y mantener sistemas de diseño. Shopify lanzó Polaris. UX Power Tools ha lanzado una biblioteca que intenta hacer de Sketch una herramienta viable (ya veremos).

19. Los principios son lo primero

El mundo del diseño lleva mucho tiempo obsesionado con el debate sobre el huevo o la gallina: primero el contenido o primero el diseño.

Siempre he estado del lado del contenido de la primera parte del argumento. Y no sólo porque sea un "chico contento". Simplemente me parece que la lógica pura concreta el mensaje antes de decidir cómo empaquetarlo.

Pero últimamente, a medida que pasé del desarrollo de estrategias de contenido para resultados específicos a un trabajo más orientado a sistemas (estrategia de contenido a nivel de marca), creo que nuestro trabajo no debería comenzar con el diseño o el contenido.

Debería empezar con principios.

Todo lo demás (cómo se ve, cómo funciona, cómo suena) debe surgir de un conjunto de principios claramente definidos y articulados. En otras palabras: los principios proporcionan la razón.

Por ejemplo: en Webflow, nuestra misión es capacitar a diseñadores, emprendedores y profesionales creativos para que den vida a sus ideas en línea. Esta misión afecta todo lo que hacemos, incluso la creación de estándares de voz y tono.

Cada vez que preparé una de estas listas de tendencias, me sorprendió lo limitado que estoy por el Año +1 y lo difícil que es priorizar áreas.

Es por eso que omití algunos obvios, como AR y VR, que hasta la fecha tienen un impacto limitado en Internet. ¿Qué agregarías a esta lista?

Cada año aprendemos algo nuevo sobre diseño y 2016 no es una excepción. El artículo que escribimos el año pasado tuvo tanto éxito que decidimos hacer algunas predicciones para 2017, ¡así que comencemos!

Nuevo artículo publicado →← ¡Lee e inspírate!

Las tendencias de diseño están influenciadas por los medios, la tecnología, la industria de la moda y, más recientemente, la usabilidad. La tendencia aparece lenta, paulatinamente, penetrando en todos los ámbitos del diseño, y luego desaparece exactamente de la misma forma. La mayoría de las tendencias de diseño no duran más de uno o dos años. El diseño en 2017 continuará las tendencias que comenzaron en 2016 con algunos cambios nuevos agregados; este sentimiento es bien conocido y familiar y es posible que lo hayas notado en los últimos años. La principal influencia sigue siendo el Material Design de Google, con cambios menores.

Qué tendencias de diseño web nos esperan en 2017

01. Diseño semiplano

Durante los últimos años, el diseño plano ha sido el más popular en el mercado del diseño web, pero ahora, bajo la influencia del Material Design, se está volviendo cada vez más unidimensional. Esta transición comienza con algunas sombras claras, lo que lo convierte en un diseño semiplano. La evolución del diseño plano desde el estilo minimalista se está moviendo hacia nuevas tecnologías en desarrollo. El diseño plano sigue ahí, pero ha sufrido algunas mejoras.

El sombreado suave añade profundidad y complejidad sin arruinar la sensación del diseño plano. Esta es una nueva característica agregada a la tendencia plana y continuará desarrollándose en 2017.

Proyecto: Recurso | Herramienta UI/UX para servicios web
Autores: Ruslan Latypov; Gráficos LS; Antón Mishin; Valery Gurkov

Proyecto: Lista de reproducción del oyente

02. Fotografías en movimiento (Cinemagraphs)

Los cinemagraphs no son esas animaciones GIF que vemos en todas partes en Internet. Los cinemagraphs son imágenes fijas con elementos menores de movimiento. Esta técnica hace que una foto simple sea más realista.

03. Más 3D

Definitivamente el 3D se está moviendo en nuestra dirección y veremos esta influencia en todas las áreas del diseño. Con las tecnologías VR/AR acelerando rápidamente, este campo se está desarrollando bastante rápidamente.

Proyecto: LUV.IT

Proyecto: Premios anuales abiertos

Proyecto: Airmax '17

Proyecto: NIKE F.C. | Bolas de oro 3D en el mundo real

Proyecto: Mejor tu marca

04. Animaciones

La animación está cada vez más presente en el diseño web, el formato puede ser cualquier: WebGL CSS, GIF, SVG o vídeo. La animación ha sido una de las tendencias de diseño web más importantes del último año, no dudes en utilizarla.

Proyecto: Los niños de Nickelodeon eligen al presidente

Proyecto: Aplicación AR Virtual Fitness Coach

Proyecto: ZH OURO- Río 2016

05. Sitios/páginas de destino de una página

En 2017, veremos el crecimiento de los sitios de una página debido a su potencial para fines de marketing y su capacidad para dirigirse mejor a los visitantes.

Si necesitas una página de destino, puedes pedírmela →

06. Formas geométricas, patrones, líneas y círculos.

Esta tendencia comenzó en 2016 y definitivamente continuará en 2017. Puedes personalizar tu sitio simplemente agregando algunas formas modernas, ya sea planas o con una sombra suave.

Proyecto:

Proyecto: Marca de la agencia DRAP

Proyecto: Pfizer: activo y mayor de 50 años para The New York Times

07. Colores valientes

Utilice colores brillantes para destacar. El material y el diseño plano combinan bien con colores brillantes. Puedes utilizar la paleta de colores proporcionada por Google para seleccionar y combinar los colores que desees.

Proyecto: Edris — Logotipo diseñado por MiLo

Proyecto: Renderizado: sitio web de demostración adaptable para Adobe

Proyecto: b2mach

08. Desplazamiento y paralaje innovadores

Esta es una gran idea visual que agregará singularidad a cualquier sitio web. Desde paralaje multicapa hasta paralaje de video, todo es posible con el complemento D.ex Multilayer Parallax. Este producto fue desarrollado íntegramente por el estudio Milothemes bajo la dirección de Loredana Papp y Mihai Baldean. Esta disponible para compra en Envato Market / codecanyon.net

Este es un complemento de WordPress que te permite crear hermosos bloques Parallax con más de una capa. Sea creativo y combine capas en el estilo que desee. Hemos creado 12 ejemplos diferentes en la guía de complementos para facilitar su primera introducción al maravilloso mundo del paralaje. ¡Juega con capas!

09. Transiciones de color

Los degradados son una de las tendencias más importantes en este momento. La tendencia comenzó a ganar popularidad en 2016 y continúa creciendo rápidamente después de que grandes marcas, como Instagram, decidieron cambiar su logotipo e imágenes de un color a una transición multicolor (degradado). Desde logotipos hasta botones o superposiciones de imágenes, esta tendencia está en todas partes.

10. Navegación móvil (diseño responsivo)

En 2015 y 2016 se produjo un aumento significativo de las visualizaciones desde dispositivos móviles. Las tabletas y los teléfonos inteligentes son ahora la opción preferida para navegar por la web, superando a las computadoras de escritorio y portátiles, y la tendencia continúa. ¡Cualquier sitio web que no tenga un diseño web responsivo debe actualizarse lo antes posible!

Proyecto: Animación de sitio web responsivo

11. Gráficos e ilustraciones personalizados

La fotografía de archivo sigue siendo bastante popular, pero en 2016 surgió una nueva tendencia que seguirá creciendo en 2017: el uso de gráficos e ilustraciones personalizados. Si desea un sitio web único y hermoso que cualquier visitante lo recuerde, colabore con diseñadores digitales. Esto significa menos fotografías de archivo e imágenes más originales y únicas.

12. Uso creativo del espacio neutro y la cuadrícula

En los últimos años, el diseño web se ha inclinado más hacia columnas y cuadrículas ordenadas y organizadas, pero en 2016 podríamos ver un cambio significativo hacia capas irregulares y diseños ultramodernos.

13. Contar historias (Storytelling)

Los sitios web ahora están empezando a contar historias para conquistar al cliente. La gente tiende a recordar historias más que leer información simple (seca).

Más vídeo sobre narración de historias de Business of Youth:

14. Carga gradual de contenidos (Lazy Loading)

Lazy Loading retrasa la carga de imágenes en páginas web largas, esto permite que la información aparezca en un punto específico mientras se desplaza hacia abajo, lo que reduce el tiempo de carga de la página.

15. Dividir contenido

El contenido dividido ahora es popular en el diseño web responsivo; divide la pantalla en 2 o más partes. Una pantalla dividida de un sitio de este tipo mostrará al espectador varios mensajes igualmente importantes en un bloque de sitio. Esta tendencia apareció en 2015, pero en 2017 seguirá creciendo y, muy probablemente, la verás en muchos sitios.

16. Formularios de pantalla completa

No es necesario navegar a otra página para completar un formulario porque los sitios nuevos utilizan formularios de ancho completo que se adaptan al diseño responsivo.

17. Vídeos por todas partes

El contenido de vídeo ha aumentado durante el último año y la gente se ha vuelto más exigente con los vídeos de alta calidad. Un vídeo en un sitio web puede ser breve y repetirse automáticamente, mostrando un producto o un proyecto cinematográfico a gran escala que mantendrá al espectador involucrado en la historia.

Proyecto: colinas

18. ¡El SEO es importante! (El SEO es importante)

El SEO es muy importante para un sitio web, por lo que un sitio web bonito sin un buen SEO seguirá siendo un outsider.

19. Navegación oculta

Los menús de hamburguesas generan mucho debate a favor y en contra de lo difícil que es para los usuarios encontrar el menú, pero una cosa es segura: esta tendencia llegó para quedarse y la gente eventualmente se acostumbrará a este tipo de menús.

20. Pequeños detalles de diseño

Centrarse en los detalles es muy importante este año. Pequeños detalles como puntos de navegación, etc. Centrarse en los pequeños detalles hará que el trabajo sea completo.

Proyecto: Barometa - Plataforma de empleo de próxima generación

21. Tendencias en el diseño de logotipos

21.1. Minimalismo

Todas las grandes marcas están avanzando hacia diseños más sencillos y minimalistas y esta tendencia ha llegado para quedarse.

21.2. dibujado a mano

Esta tendencia ha estado en el centro de atención durante los últimos años y este estilo es ideal para empresas hipster. Se utiliza para peluquerías (barberos), cafeterías, restaurantes, artículos de arte y artesanía.

21.3. Espacio negativo

Esta es una vieja tendencia, pero la hemos visto cobrar fuerza en los últimos años y seguirá creciendo en 2017, por lo que definitivamente vale la pena echarle un vistazo más de cerca.

21.4. Recortar

No hay nada más minimalista que esta tendencia. Muestra sólo lo suficiente con indicar en el logo para reconocer la empresa, y nada más.

21.5. Geometría

Esta tendencia es de la vieja escuela, pero es uno de esos estilos que nunca morirá.

21.6. Arte lineal

Esta tendencia es popular entre las empresas de nueva generación.

Autores: Sam Healey; Andrea Schlaffer; Jacek Janiczak

21.7. Patrones

Los patrones son la nueva tendencia y esta repetición es una forma inusual de hacer que una empresa sea memorable y diferenciarla de sus competidores. Esta dirección original también se puede utilizar en la presentación de logotipos.

Autores: Nick Edlin; Stanislav Alenikov; Lucas Gil Turner

21.8. Logotipos animados

El diseño en movimiento es una tendencia popular hoy en día y podemos verlo en todas las áreas del diseño.

Autores: Javier Miranda Nieto; El Woork Co

21.9. Antiguo

El estilo vintage todavía está de moda. Aunque esta tendencia lleva mucho tiempo siendo popular, todavía tiene algo que decir.

Autores: Roman Dodonov; Ideas de Mingo arriba; Lo intentaré más

21.10. Transiciones de color

Los degradados están por todas partes este año y los logotipos no son una excepción.

21.11. Ilustraciones en logotipos

Las ilustraciones son una buena manera de crear un logotipo único y personal para su empresa. Se están volviendo cada vez más populares este año.

Autores: Bodea Daniel; Jacek Janiczak

21.12. Fotografía en logotipos

La combinación de imágenes y tipografía es muy popular ahora. Trabajan muy bien juntos y crea un contraste entre ellos.

22. Tendencias tipográficas

22.1. Tipografía grande, atrevida y hermosa

La tipografía puede ser el elemento más importante a la hora de crear un diseño sorprendente. Este año la tipografía será negrita (negrita) y grande con títulos destacados.

Autores: Alexander Laguta

Autores: Quim Marín

Proyecto: Serie Baugasm - Paquete 4

22.2. Degradados/transiciones de color en tipografía

Los degradados son sin duda una tendencia hoy en día y también los encontrarás en la tipografía.

22.3. Jerarquía visual

La jerarquía en tipografía es importante en cualquier dirección de diseño. El tamaño y el ancho de la fuente pueden indicar fácilmente qué palabras o títulos tienen prioridad, así que utilice este factor al crear sus textos. También debes recordar que puedes lograr una jerarquía visual clara mediante la ubicación y el color del texto.

22.4. Tipografía pequeña

El texto muy pequeño suele estar rodeado por un espacio de color opuesto, pero puedes crear una diferencia visual entre el color o la imagen para que el texto se destaque. También puedes utilizar animación para ayudar a que tu texto se destaque.

Autores: Slava Oleinik; Bahá Samir; Digital ingenioso

Proyecto: Serie Baugasm - Paquete 4

22.5. Tipografía animada

La animación se utiliza ahora en todas partes y la tipografía no es una excepción. Si utiliza software de movimiento, no puede equivocarse este año.

Proyecto: Tipografía animada Gotham Pro gratuita

22.6. La tipografía se encuentra con la fotografía

La combinación entre texto y fotografía puede producir excelentes resultados. Mira estos fantásticos ejemplos.

22.7. Formas geométricas y tipografía.

Las formas geométricas pueden funcionar bien con la tipografía para crear un hermoso diseño.

22.8. Emparejamiento de fuentes

Utilice dos o más fuentes juntas. Esto sigue estando de moda en 2017.

———————————

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 alguna vez fue, 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 aquí hay 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 adaptarla 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.

El 11 de octubre tuvo lugar una conferencia a cargo del director de arte del estudio Vintage Web Production Olga Shevchenko, dedicado al diseño web y tendencias digitales en 2018. Olga es miembro del jurado de Awwwards y cada día revisa cientos de nuevos sitios desarrollados por agencias y diseñadores de todo el mundo. Esto le permite mantenerse al día con los últimos desarrollos y tendencias en desarrollo y diseño web. Grabamos los mensajes principales de la conferencia y puedes leer la versión completa en el enlace.

Resultados 2017

Creo que antes de comenzar a analizar 2018, deberíamos recordar las novedades en la web en 2017. Ucrania se está desarrollando activamente, pero aún está por detrás de los principales actores del mercado, tanto en términos de tecnología como de calidad de diseño. Por lo tanto, si el año que viene logramos implementar al menos algunas de las tendencias digitales globales de 2017, esto ya será un gran éxito.

Menú grande

Era una tendencia. Para muchos esto es imprescindible. Y ahora ya hay quien considera esto de mala educación. Después de la aparición de las hamburguesas, todos comenzaron a ocultar el menú debajo de un botón, lo que causó mucha controversia. Pero estas tres barras fueron la zona más roja en el mapa de calor de uso del sitio que compilamos después de investigar el comportamiento de los usuarios. Pero al final, después de hacer clic en la hamburguesa, apareció en la página un pequeño bloque con secciones del sitio, que no tenía sentido ocultar.

Por eso, en 2017 apareció un menú grande, que no está resaltado por un bloque en el lateral, sino por toda la pantalla. El principio es el siguiente: si estás ocultando algo, haz que luzca hermoso y abierto. Para que después de que el usuario encuentre el menú, quede más satisfecho de lo esperado.

Menú grande. Sitio web radioactivefilm.com

Ahora, un menú grande se ha convertido en un fetiche para los estudios mundiales, al igual que solía ser la página 404. Los diseñadores comenzaron a crear una composición de elementos, agregarle información adicional y el desplazamiento. No sólo añade estética al sitio, sino que también amplía la funcionalidad debido a su tamaño.

Efectos de moda

Glitch, morphing, geometría, explosión de color, minimalismo. Dasha Shapovala, la ideóloga de la Semana de la Moda Mercedez-Benz en Kiev, y yo discutimos sobre las tendencias de la moda y hablé sobre las nuevas tendencias en Internet. Y encontramos características comunes en áreas completamente diferentes.

Averigüemos qué significa ser popular, moderno y moderno en el diseño web en 2017. Para ello, veamos las principales tendencias en diseño web. La mayoría de ellos vagan de año en año y ya se han convertido en una parte integral de la creación de sitios web modernos. Esto se debe especialmente al desarrollo de las tecnologías móviles, los canales de comunicación y la mejora de los dispositivos. Por ejemplo, una tendencia como la movilidad de los sitios web se ha vuelto obligatoria. La comercialización de Internet también impone sus estrictas condiciones a los diseñadores y desarrolladores web. Al mismo tiempo, algunas tendencias se debilitan y se vuelven menos populares, pero aún permanecen bastante activas. También aparecen aficiones de moda propias de un período corto. Por ejemplo, el año pasado se trataba de iconos con una larga sombra de los objetos representados. Este año se han popularizado los patrones geométricos, también los veremos. Entonces, veámoslo en orden.

1. Diseño móvil y responsivo
Hoy, quizás, la tendencia más importante y obligatoria. El sitio debería verse igual de bien en todas las resoluciones de monitores, computadoras portátiles, teléfonos inteligentes y tabletas. Los motores de búsqueda, por cierto, controlan muy de cerca qué tan bien se adapta un sitio a varios dispositivos y, en base a esto, determinan su lugar en los resultados de búsqueda.

2. Tipografía activa
Ha sido una de las tendencias más populares desde hace varios años. Las fuentes grandes y la tipografía en el sitio tienen dos componentes. En primer lugar, la estética: las hermosas líneas, curvas y letras son en sí mismas un elemento decorativo y decorativo. Y en segundo lugar, esto es funcionalidad: con la ayuda de una fuente grande puede transmitir de manera inequívoca y clara la idea principal al visitante.

3. Vídeo en pantalla ancha
Sin duda, el vídeo a pantalla completa de fondo del sitio capta inmediatamente nuestra atención. Esta es una buena técnica para interesar al visitante. Los avances tecnológicos modernos facilitan la inserción de vídeos en un sitio web, lo que significa que los diseñadores utilizarán cada vez más esta técnica. Sin embargo, hay una advertencia: ver el vídeo sólo es interesante la primera vez; la segunda y la tercera vez resulta aburrido. Por tanto, esta técnica sólo es efectiva para nuevos visitantes.

5. Cinemagrafías
Una buena alternativa al vídeo de pantalla ancha y a las fotografías de fondo de gran tamaño. Los cinemagraphs son fotografías en las que se producen pequeños movimientos repetitivos. Suelen presentarse en formato gif y dan al espectador la ilusión de estar viendo un vídeo. Puede encontrar más información sobre cinemagraphs con muchos ejemplos en la selección.

6. Diseño plano
Otra poderosa tendencia de los últimos años. Los sitios web diseñados en colores planos tienden a ser limpios y claros. Pero recientemente ha aparecido un nuevo tipo de diseño plano: el semiplano. Esto es cuando todo el diseño está realizado en color plano y solo un elemento tiene sombra, degradado o textura. Por regla general, este elemento es un botón, al que se le da volumen o protagonismo para atraer la atención de los visitantes.

7. Microinteracción en el sitio.
Hoy en día, en el diseño web se presta mucha atención a la microinteracción de la funcionalidad y el diseño del sitio con el visitante. La esencia de esto es que el visitante pueda ver claramente el resultado de sus acciones en el sitio, ya sea ajustando la configuración del usuario, siguiendo un enlace, confirmando una operación, interactuando con íconos, botones, interruptores, contadores y otros elementos activos.

8. Animación de objetos.
Las capacidades de los modernos html5 y css3 le permiten utilizar un gran arsenal de efectos visuales en el sitio. Esto hace que la interacción con la página sea más interesante y emocionante para el visitante. Así que en el nuevo año también veremos los micromovimientos interactivos más inesperados de objetos, que normalmente reaccionan al movimiento del ratón. Quizás veamos ejemplos de animaciones más complejas.

9. Combinaciones de colores vibrantes
Los colores populares de moda de 2017 favorecen el brillo y la saturación. Los interesantes tonos originales de escarlata, mostaza, amarillo, esmeralda, azul intenso, así como rojo, lila y chocolate ayudarán a que su sitio se destaque y adquiera su propio estilo único.

10. Desplazamiento del sitio
Dado que el desplazamiento del sitio es ideal para dispositivos móviles, su presencia será significativa en 2017. Lo único es que el desplazamiento no deja espacio para la interacción del usuario y, por tanto, se produce un cierto cansancio por la carga interminable de contenidos. Quizás la tendencia gire hacia una combinación de elementos de control simples con desplazamiento.

11. Efecto paralaje
El paralaje es un cambio en la posición aparente de un objeto en relación con un fondo distante. En diseño web, este efecto se utiliza al desplazarse por un sitio, cuando los objetos y el fondo se desplazan a diferentes velocidades, lo que da como resultado la ilusión de tridimensionalidad. La tendencia es bastante estable, por lo que veremos sitios con paralaje más de una vez.

12. Diseño modular
El diseño modular, o una interfaz de tarjeta que consta de bloques de significado autónomos, ha sido popular desde hace algún tiempo. Esta tendencia es muy buena para los dispositivos móviles, ya que los bloques se alinean bien para cualquier resolución de pantalla. Pero en sitios grandes tienen el mismo aspecto y son difíciles de jerarquizar y estructurar.

13. páginas de una sola página
Los sitios web de una sola página, las páginas de destino y las páginas de destino se han convertido en una parte integral de la Internet moderna. Puede leer más sobre qué es una página de destino en el artículo y. En 2017, las páginas de destino pondrán un mayor énfasis en un botón que llama a la acción: realizar un pedido, llamar, registrarse, etc. Se eliminará todo lo demás que distraiga la atención de un visitante potencial.

14. Publicidad gráfica
También me gustaría señalar una cosa que recuerdo del año pasado, y lo más probable es que la tendencia continúe en 2017. Debido a la comercialización de Runet y al crecimiento del comercio en línea, ha aumentado la demanda de materiales promocionales gráficos para publicidad y promoción. ha aumentado significativamente: pancartas, avances, tarjetas, folletos.

15. Automatización de procesos típicos.
Todas las soluciones y procedimientos estándar del sitio web están siendo reemplazados gradualmente por procesos automatizados, lo que elimina la necesidad de comunicarse con el servicio de soporte o consultores en línea. En este sentido, está creciendo la popularidad de diversas aplicaciones y extensiones. Ahora puede comprar un producto o servicio, realizar un pedido, concertar una cita, reservar asientos, transferir dinero, completar un formulario o realizar una prueba; todo esto se puede hacer en línea con unos pocos clics del mouse.

16. Infografías
La representación gráfica en forma de infografías sigue siendo popular y demandada. Acompañar el texto con una hermosa imagen o ícono, combinado con elementos de diseño elegantes, hace que la infografía sea estéticamente atractiva. Las infografías comparativas son especialmente claras e interesantes visualmente, como qué pasó y qué pasó, sí y no, pros y contras, qué hacer y qué no hacer, etc. También puedes utilizar infografías para contar una historia paso a paso o presentar estadísticas aburridas de forma vívida.

17. Menú de hamburguesas
El menú de hamburguesa es un ícono visual de tres franjas horizontales, generalmente en la esquina superior del sitio, que al hacer clic abre o desliza el menú completo en el costado. Muchos expertos predicen que esta tendencia desaparecerá debido al hecho de que la mayoría de los usuarios inexpertos simplemente no entienden el propósito de este ícono. Por tanto, los diseñadores web tienden a favorecer la navegación simplificada. Pero, sin embargo, veremos el menú de hamburguesas más de una vez en sitios de nueva creación.

18. Iconos
Los iconos, como forma de presentar información y herramienta de visualización, han sido y siguen siendo una de las tendencias más populares y favoritas entre los diseñadores. Basta con colocar los iconos temáticos correspondientes cerca de los bloques con texto, y ahora todo el texto adquiere un orden y una estructura lógicos y visuales. Por eso, el año que viene seguiremos utilizando iconos de forma activa.

19. Apilamiento de cartas
El apilamiento de letras es texto en un cuadrado. De hecho, este es un ejemplo de una solución creativa compleja: es necesario presentar un texto extenso en un espacio pequeño. Al mismo tiempo, debe lucir bella y original. Este año también está de moda.

20. Botón en blanco
Para ahorrar espacio y espacio en los dispositivos móviles, hace algún tiempo apareció un botón en blanco: una inscripción grande con un contorno cuadrado alrededor de la palabra. Un botón de este tipo ofrece una visión general del fondo detrás del botón y al mismo tiempo conserva su funcionalidad como botón completo. Además, como elemento de diseño, este botón luce elegante y ordenado.

21. Evite las fotografías de archivo
Algunos expertos han notado que los diseñadores están empezando a abandonar las fotografías de archivo. Dado que los dispositivos modernos le permiten tomar una fotografía usted mismo de manera rápida y eficiente, puede evitar la impersonalidad y uniformidad del stock y tomar su propia fotografía única y crear su propio diseño único.

22. Ángulos inusuales en la foto.
Encontrar ángulos interesantes en las fotografías está disponible para cualquier propietario de un teléfono inteligente con cámara. En este sentido, la creatividad a la hora de crear fotografías está fuera de serie y podemos decorar el sitio con una imagen única con un ángulo de visión o una perspectiva inusual.

23. carrusel
El control deslizante de carrusel, que entró en vigor en el diseño hace varios años, sigue siendo popular y relevante a la hora de diseñar sitios web. Usando un control deslizante ancho, es conveniente rotar las noticias principales, así como presentar promociones actuales, colecciones y otra información relevante que el visitante ve inmediatamente al ingresar al sitio.

24. Audio y vídeo de reproducción automática
Pero esta tendencia viene de la década de 2000. Recuerdo que en aquel entonces estaba de moda reproducir un sonido cuando accedías a un sitio web. Y este para muchos. No puedo decir que el acompañamiento de audio me agrade, pero quizás un uso moderado resulte discreto. Bueno, el vídeo de reproducción automática es más bien un homenaje a la publicidad, para mí. Bueno, además del deseo de mantener la atención del visitante en el feed. No es la tendencia más agradable, pero sí comercialmente necesaria.

25. Patrones geométricos
Bueno, terminaremos nuestra revisión con una tendencia de moda a corto plazo en forma de varios diseños y patrones geométricos. Se hicieron inesperadamente populares a finales del año pasado. Bueno, otra forma de hacer que el diseño de tu sitio web se destaque y sea único.

Infografía “Tendencias en diseño web 2017”
Te ofrezco una infografía que presenta claramente todas las tendencias y tendencias en diseño web. Puedes descargar la imagen en tamaño grande usando este enlace en DeviantArt. Se abrirá una página en DeviantArt en una nueva ventana. Allí, haga clic en la palabra Descargar a la derecha de la imagen y guarde la imagen en su computadora.