Al mirar hacia 2017 —un año que esperamos no se vea empañado por la pérdida de tantos de los mejores artistas y talentos del mundo—, la gran pregunta que todo diseñador se hace debe ser: ¿qué definirá el diseño en 2017?
Echa un vistazo a nuestra publicación más reciente: 11 tendencias de diseño web cautivadoras para 2024
Con esto en mente, decidí preguntarles a los diseñadores de Webflow qué tendencias creen que dominarán el mundo del diseño digital en 2017. (Y escribí un pequeño comentario sobre sus opiniones).
Primero, escuchemos a Sergie Magdalin, director de diseño de Webflow.
1. Diseños que dejan brillar al contenido
La disposición de los elementos de diseño dentro de una estructura dada debe permitir al lector centrarse fácilmente en el mensaje, sin ralentizar su velocidad de lectura.
–Hermann Zapf
En los últimos años hemos visto un cambio radical en cómo se percibe el papel del diseño en los negocios. El diseño ha pasado de ser una etapa de "optimización" al final del proceso, donde los diseñadores aparecían para espolvorear un poco de "belleza" como si fuera polvo de hadas, a convertirse en una verdadera ventaja competitiva.
Ha sido una evolución increíble de presenciar.
Y un elemento fascinante de esa evolución ha sido el retorno al enfoque en el contenido: la esencia de la web. Los diseñadores de todo el mundo se han dado cuenta de que la gente visita los sitios web por su contenido —ya sean hilos de Twitter, artículos de lectura profunda o el último meme "generado por el usuario"— y que el papel fundamental del diseño es presentar ese contenido de una manera intuitiva, eficiente y "encantadora".
Esa es una de las razones del alejamiento del diseño esqueuomórfico hacia enfoques más "planos" y minimalistas, como se ve en la estética Material de Google y, en realidad, en toda la web y nuestros diversos dispositivos.
Por supuesto, como dice la tercera ley de Newton, a toda acción le corresponde una reacción igual y opuesta. Muchos diseñadores sienten que la tendencia del diseño plano le ha quitado el "alma" al diseño. Esperamos que esta conversación continúe durante 2017, pero deseamos que se convierta en un diálogo productivo que nunca pierda de vista el corazón de nuestro trabajo de diseño: el contenido.
2. Mejor colaboración entre diseñadores, y entre diseñadores y desarrolladores
A medida que el diseño ha adquirido un papel más importante e influyente en la configuración de las empresas, se ha prestado cada vez más atención a la colaboración de los diseñadores tanto con sus colegas diseñadores como con los desarrolladores.
El énfasis en la colaboración entre diseñadores ha surgido, en parte, debido a la magnitud de las aplicaciones web y móviles que estamos creando hoy en día. Plataformas gigantescas como Google, Facebook, Twitter y LinkedIn requieren no solo enormes equipos de diseño trabajando en aspectos dispares de la plataforma, sino también mejores formas para que los diseñadores estén en sintonía; y eso significa más colaboración y mejor comunicación.
Han surgido todo tipo de herramientas para facilitar esa colaboración, desde las plantillas y paneles compartidos en los planes de espacio de trabajo de Webflow hasta el lienzo compartido en tiempo real de Figma —y puedes apostar a que 2017 traerá tanto mejoras a esas plataformas como opciones totalmente nuevas.
En cuanto a la colaboración entre diseñadores y desarrolladores, se ha centrado mucha atención en la crucial etapa de entrega. Donde antes los diseñadores entregaban paquetes masivos de imágenes estáticas y especificaciones, ahora comparten visualizaciones dinámicas habilitadas por herramientas como InVision, Marvel y UXPin, o mejor aún, exportando código real listo para producción desde Webflow.
Como dijo recientemente Carson Miller en su artículo de TechCrunch “El futuro del desarrollo front-end es el diseño”:
Es solo cuestión de tiempo antes de que las herramientas de diseño y creación de prototipos reemplacen por completo al desarrollo front-end, produciendo sin problemas una base de código front-end de alta calidad para el framework que elijas.
Y en Webflow, ese es un futuro que nos entusiasma. Porque estamos ayudando a construirlo.
3. Flujos de trabajo mejorados entre diseño y desarrollo
A medida que las herramientas de diseño y creación de prototipos para la web ganan madurez y sofisticación, la entrega tradicional de archivos estáticos ha evolucionado hacia visualizaciones más dinámicas, que van desde archivos de Keynote animados hasta sitios web totalmente funcionales. Estos entregables más dinámicos acortan el ciclo de retroalimentación, mejorando la agilidad de los equipos de diseño y desarrollo a la vez que reducen la frustración. También facilitan una mejor comunicación con los clientes. De hecho, para muchos usuarios de Webflow, las reuniones con clientes se han convertido en sesiones de trabajo en vivo, donde los diseñadores pueden dar vida a sus ideas rápidamente para que todos puedan experimentarlas casi de inmediato.
A continuación, el diseñador de producto Gadzhi Kharkharov:
4. Tipografía grande y llamativa
A medida que el mundo del diseño llega al consenso de que debemos centrarnos en el contenido, cada vez más sitios web presentan líneas de texto inspiradoras y resonantes, con una tipografía tan grande y llamativa como el mensaje mismo.
Como habrás notado en las capturas de pantalla de ejemplo, "grande" y "llamativa" no se refiere necesariamente al grosor de la fuente. Más bien, se trata de dedicar un espacio importante de la pantalla a una declaración única, sencilla y completa sobre el producto o servicio. Y, refrescantemente, muchas de estas declaraciones parecen claras y directas, libres de las pretenciosas promesas de disrupción y grandeza que hemos visto tanto últimamente. (Vale, admito que "diseñar lo imposible" puede sonar un poco pretencioso).
En un mundo tan rápido, ajetreado y saturado de información como el nuestro, estas declaraciones concisas pero potentes se convertirán en el pan de cada día para empresas de todo tipo.
5. Diseños complejos basados en principios de diseño gráfico
Si queremos predecir la evolución del diseño web (al menos en términos visuales), deberíamos fijarnos en la evolución del diseño gráfico.
Durante los últimos años, el diseño web ha estado limitado por las restricciones de CSS, pero nuevas herramientas como flexbox y CSS grid permitirán diseños mucho más expresivos en la web.
Nuestro principal reto ahora es entender cómo deberían funcionar estos nuevos métodos de diseño web en el mundo del diseño adaptativo.
Puedes ver algunos ejemplos de lo que nos espera aquí (siempre que utilices un navegador compatible con CSS grid, como Firefox Nightly, Safari Technical Preview o Chrome Canary):
El laboratorio de diseño experimental de Jen Simmons
Observa el estilo tipo Merz de su sección principal, una clara referencia a la evolución del diseño gráfico y su diálogo constante con los movimientos estéticos.
Grid by Example
Dirígete a la página Learn Grid Layout para ver más ejemplos.
6. Más SVGs
Los SVG (gráficos vectoriales escalables) ofrecen a los diseñadores y desarrolladores web muchas ventajas frente a formatos de imagen más tradicionales como JPG, PNG y GIF.
Las ventajas clave de los SVG quedan claras con el propio nombre del formato: escalable y vectorial. En lugar de ser imágenes de mapa de bits o basadas en píxeles, los SVG están compuestos por vectores: descripciones matemáticas de la forma del objeto. Esto significa que los SVG son independientes de la resolución, por lo que se verán genial en cualquier pantalla y tipo de dispositivo. Ya no tendrás que preocuparte por adaptar todo a pantallas retina.
Pero eso no es todo. Los SVG también son geniales porque no requieren ninguna solicitud HTTP. Si alguna vez has hecho una prueba de velocidad en uno de tus sitios web, probablemente habrás notado que esas solicitudes HTTP pueden ralentizar mucho tu página. ¡Con los SVG eso no pasa!
Además, ¡puedes animarlos!
Ahora escuchemos al diseñador de producto Nathan Romero.
7. Herramientas de diseño basadas en restricciones
El diseño adaptativo ha transformado por completo la forma en que navegamos y creamos para la web.
Sin embargo, curiosamente, no ha cambiado mucho la forma en que funcionan las herramientas de diseño en general. Con excepciones obvias como Webflow, la mayoría de las herramientas de diseño populares te obligan a reconstruir la misma pantalla una y otra vez para diferentes tamaños de dispositivo y resoluciones.
En un sector que vive de la rapidez en el desarrollo, la ideación y los lanzamientos, esa enorme pérdida de tiempo es insostenible.
De ahí surge una nueva ola de herramientas de diseño (como Figma) que utilizan el concepto de restricciones para reducir el trabajo repetitivo que deben hacer los diseñadores al crear diseños para múltiples dispositivos. Estas herramientas se centran en las relaciones espaciales entre los elementos y se esfuerzan por preservarlas a medida que los dispositivos y los usuarios cambian el tamaño de los elementos compuestos.
Menos trabajo para los diseñadores, ¡todo un triunfo!
Y ahora, pasamos con Ryan Morrison, diseñador visual sénior.
8. Más color y más brillante
A medida que movimientos como el minimalismo y el brutalismo ganaron terreno en 2016, los diseñadores buscaron formas de infundir más personalidad a su trabajo sin perder esa estética depurada.
Y, en más de un caso, los colores brillantes y llamativos fueron la respuesta natural.
Ahí tenemos el rediseño lleno de color de Asana.
O el tan criticado, pero indudablemente revitalizador para la marca, rediseño del icono de la aplicación de Instagram.
Por no hablar de casi todo lo que hace Stripe.
Como puedes ver, tampoco se trata solo de colores brillantes y entusiastas. Los degradados también han vuelto con fuerza, mezclando y difuminando esos tonos exuberantes en espectros que recuerdan a un cielo de mediodía o a una puesta de sol espectacular.
Hay una especie de naturalismo sintetizado en este resurgir de tonos brillantes y degradados atrevidos, y personalmente espero ver más de esto en 2017.
Aunque quizás esta vez podríamos bajar el brillo un poco, ¿no? Te miro a ti, Asana.
9. Más enfoque en la animación
La animación ha desempeñado durante mucho tiempo un papel clave en nuestras interfaces digitales, y no hay razón para pensar que eso vaya a disminuir en 2017. De hecho, a medida que los diseñadores obtienen más y mejores herramientas visuales para crear animaciones atractivas y capaces de sacar una sonrisa, seguro que las veremos volverse más prominentes y refinadas.
Esta última característica será especialmente importante a medida que sea más fácil crear animaciones. En la Design & Content Conference de 2016, la experta en animación Val Head destacó que los diseñadores deben consultar la documentación sobre la voz y el tono de su marca al crear animaciones, para asegurarse de que refuercen el tono que buscan los creadores de contenido. Esto ayuda a garantizar que las animaciones cumplan funciones significativas y coherentes con la marca para los usuarios, en lugar de solo provocar migrañas.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
10. Diseños únicos
El año 2016, al igual que los años anteriores, estuvo marcado por un debate constante sobre si el diseño web estaba muriendo o perdiendo su alma.
Por muy dramático que sea el argumento de que el diseño web ha muerto, no se puede culpar a ningún creativo por buscar formas innovadoras de presentar contenido a los lectores. Y uno de los métodos más atractivos para romper con los diseños basados en cajas, a los que muchos culpan del diseño responsivo, es la rejilla rota.
Este enfoque busca una salida a los diseños meticulosamente alineados y "encajonados" que hemos visto mucho últimamente, mediante una variedad de técnicas que podrían parecer visualmente discordantes. Estas incluyen:
Superposición de elementos tipográficos y gráficos, como se ve en…
The Outline
Bauhaus-Archiv
Ubicaciones de imágenes y texto aparentemente aleatorias, como se ve en…
Epicurrence
Heco Partners
A continuación, Nelson Abalos, Jr., héroe de atención al cliente y anfitrión de los Webflow Workshops
11. Flexbox
Si aún no te has sumergido en flexbox, te espera una grata sorpresa. Este módulo de diseño CSS relativamente "nuevo" no solo ofrece una increíble facilidad de respuesta en su funcionalidad, sino que también tiene mucho sentido para los diseñadores visuales acostumbrados a manipular objetos en el lienzo con las herramientas de alineación y distribución que ofrecen programas como Sketch e Illustrator.
Y con todos los navegadores modernos (y no, no cuento a IE11) siendo ahora totalmente compatibles con flexbox, no hay razón para no empezar a usarlo, siempre y cuando tu audiencia no esté llena de fanáticos de IE.
Por supuesto, puede que te cueste un poco acostumbrarte a flexbox si te sientes muy cómodo con otros módulos de diseño muy diferentes. Así que, si necesitas ayuda para entender cómo funcionan las cajas flexibles, echa un vistazo a Flexbox Game.
¿Qué opinas, Waldo Broodryk, héroe de la felicidad del cliente?
12. Diseños complejos con CSS grid
Pisándole los talones a flexbox en la carrera por módulos de diseño más nuevos y mejores, llega CSS grid. Como dice Chris House, creador de “A Complete Guide to Grid”:
Grid es el primer módulo de CSS creado específicamente para resolver los problemas de diseño que hemos estado intentando solucionar con parches desde que empezamos a crear sitios web.
Aunque flexbox nos ayuda a resolver problemas de diseño web realmente molestos y antiguos, como el centrado vertical, no fue pensado para diseños de página completa. (Aunque es perfectamente capaz de hacerlo). Grid, por otro lado, fue creado para diseños de página completa. Y al igual que flexbox, te permite reorganizar fácilmente el orden del contenido para diferentes consultas de medios.
Grid aún no está listo para usarse en el mundo real, pero eso te da tiempo para familiarizarte con la especificación. Lo cual es genial, porque va a ser algo grande.
Si quieres empezar a jugar con CSS grid hoy mismo, aquí tienes cómo:
- En Chrome, ve a chrome://flags y activa "experimental web platform features"
- En Opera, ve a opera://flags y activa "experimental web platform features"
- En Firefox, activa layout.css.grid.enabled (o instala Firefox Nightly)
13. Un enfoque en el diseño para la entrega de contenido, personalización y conversión
Una consecuencia de centrarse más en el diseño como medio para entregar contenido de forma eficaz será el énfasis en hacer llegar dicho contenido a la persona adecuada en el momento oportuno, todo ello con el objetivo de aumentar las acciones deseadas, naturalmente. (¡Buenas noticias para todos los estrategas de contenido!)
La personalización del contenido ha sido un tema muy candente en los círculos de contenido durante bastante tiempo, pero nadie parece haber dado con la tecla exacta todavía. Básicamente, el objetivo es ofrecer contenido basado en características como:
- Datos demográficos: ¿Quién es el visitante (profesional o personalmente) y de dónde viene?
- Comportamiento: ¿Qué está haciendo el visitante ahora? ¿Qué ha hecho en tu sitio en el pasado?
- Contexto: ¿Qué dispositivo y navegador utiliza el visitante? ¿Cómo llegó a tu sitio? ¿Ha iniciado sesión o no?
Hemos visto algunos experimentos interesantes en esta dirección por toda la web, muchos de los cuales giran en torno a la personalización manual de recomendaciones de contenido por parte del usuario, la recomendación de lecturas "relacionadas" y algunas soluciones algorítmicas más parecidas a lo que Facebook es capaz de hacer.
Fubiz ofrece personalización manual a través de su "Creativity Finder", un formulario de estilo conversacional que te permite elegir entre una serie de opciones predeterminadas sobre ti, tu ubicación y lo que buscas. Es un poco "low tech", pero ofrece una sensación de control que la mayoría de las plataformas de contenido no ofrecen realmente.
Fubiz
Redshift
Un paso más allá es el nuevo blog Redshift de Autodesk, que profundiza en el nivel de control del usuario al ofrecer una serie de opciones de personalización manual como:
- Seguir temas y autores
- Feed personalizable
- Resaltado para comentarios y compartir
- Marcadores
En su mayoría son cosas que un lector experto puede lograr por su cuenta, pero Redshift simplifica drásticamente esas funciones. Y lo que es más importante, representa un cambio respecto a un paradigma que ve las publicaciones de blog como la versión de contenido del vaporware, convirtiéndolo más en un recurso de aprendizaje permanente.
Si gran parte de la funcionalidad de Redshift te suena familiar, puede ser porque está copiada en gran medida de Medium. A diferencia de Redshift, sin embargo, Medium tiene la ventaja de una base mucho mayor de lectores y escritores, por no mencionar una estrecha integración con Twitter, todo lo cual aumenta su capacidad para recomendarte contenido de forma algorítmica.
Todos estos métodos de personalización de contenido resumen la visión del diseño de producto como una forma de encontrar el punto de equilibrio entre las necesidades del usuario y las del negocio. Los lectores quieren poder guardar, compartir y personalizar el contenido que ven, y la empresa puede aprovechar esos datos de muchas maneras. Así que, todos ganan.
Por supuesto, vale la pena recordar que las conversiones no son la única métrica que puede impulsar la personalización de contenido. Personalizar la documentación de ayuda puede reducir el volumen de solicitudes de soporte. Los materiales educativos pueden reducir la tasa de abandono y mejorar el valor del tiempo de vida del cliente. Pero no es como si las conversiones fueran a dejar de ser valiosas.
Y ahora, mi opinión:
14. Más enfoque en la conversación (sí, bots, pero también...)
Podrías llamar al 2016 el año del bot, aunque si ha sido el comienzo del triunfo de los bots o solo un lanzamiento algo decepcionante es un tema muy debatible.
Dicho esto, si el volumen de lanzamientos relacionados con bots en Product Hunt y la profunda integración del Asistente de Google en Android sirven de indicio, en 2017 veremos muchos más bots apareciendo en tu vida.
Pero los bots son en realidad solo una instancia específica de una idea más abstracta y, por tanto, más generalizada: que la conversación es una interfaz. Y es probable que veamos esa idea dando forma a gran parte del mejor trabajo de diseño de 2017.
Qué significa esto exactamente, tendremos que esperar para verlo. Pero los posibles impactos incluyen:
- Un interés aún mayor en el lenguaje "humano" (¡más buenas noticias para los estrategas de contenido!)
- Mayores capacidades para que los redactores y estrategas de contenido actúen como diseñadores de UX y desarrolladores de bots
- Aún más inversión en el llamado "contenido generado por el usuario", comunidades creativas, foros, etc.
- Formularios más conversacionales o de lenguaje natural (actualmente, el formulario es la unidad fundamental del diseño de producto; en 2017, podríamos ver ese paradigma cambiar del formulario a la conversación)
- Intentos de transformar la sección de comentarios, de ser el alcantarillado de internet a convertirse en fuentes de "interacción" y contenido nuevo; un esfuerzo ya iniciado por el Coral Project
Con suerte, este interés continuo en los bots y la IA les ayudará a entender mejor de qué demonios estamos hablando.
15. La lucha contra las noticias falsas
La campaña presidencial de EE. UU. de 2016 nos enseñó mucho sobre cómo la web puede influir en las realidades sociopolíticas, y una de las lecciones principales fue:
La desinformación es rápida, fácil y barata de producir; muy rentable; y capaz de afectar gravemente la percepción pública de los candidatos.
Obviamente, no es algo que (la mayoría de nosotros) quienes creamos y distribuimos contenido web estuviéramos emocionados de ver revelado.
Pero cada problema representa una oportunidad. Y fiel a su estilo, diseñadores web, diseñadores de producto y desarrolladores de todo el mundo han aprovechado la oportunidad para arreglar esta ventana rota en particular. Aquí hay una pequeña muestra:
- Mark Zuckerberg de Facebook calificó el porcentaje de noticias falsas como "relativamente pequeño", pero pasó a describir 7 pasos que Facebook está tomando para ayudar a combatir la desinformación.
- Un grupo de estudiantes universitarios ha creado un plugin de Chrome llamado FiB que etiqueta las noticias como "verificadas" o "no verificadas" directamente dentro de la interfaz de Facebook.
- Google y Facebook han declarado que limitarán el flujo de dinero publicitario a sitios de noticias falsas a través de sus herramientas de publicidad.
- La popular cuenta de Twitter Saved You A Click lanzó un derivado llamado Saved You A Trick para identificar noticias falsas.
En última instancia, los métodos más programáticos y monetarios propuestos por Facebook, Google y el equipo de FiB resultarán ser los más escalables y efectivos. Pero, sin duda, también serán necesarios métodos más humanos, como un mayor compromiso con la ética periodística y herramientas y recursos diseñados para ayudar a las personas a ser mejores lectores.
Porque, como ocurre con cualquier intento de controlar el flujo de información, siempre existe la posibilidad de que el control se ejerza de la manera incorrecta. Y eso significa que en última instancia depende de nosotros detener la creación y difusión de desinformación.
16. Más vistazos al diseño (y al contenido)
A lo largo de 2016, varios equipos de diseño crearon y popularizaron sus propios blogs como una forma de ofrecer información sobre sus procesos y, quizás, humanizar la marca hasta cierto punto.
Este tipo de contenido solía centrarse principalmente en la contratación: atraer nuevos talentos transmitiendo cómo es diseñar, programar o escribir en una empresa en particular.
Pero en 2016, el enfoque pareció cambiar hacia 3 nuevas direcciones:
- Marca
- Humanización
- Utilidad
Estas 3 vertientes pueden ser bastante difíciles de separar, y los blogs de diseño más populares combinan las tres con mucho estilo. Además, suelen tener un enfoque particular que los distingue de ser simplemente "el blog del equipo de diseño de la Marca X". Pero, de nuevo, no siempre es evidente.
Con el éxito de los siguientes blogs de diseño y contenido, prepárate para ver muchos más en 2017:
Facebook.design
Enfoques: Procesos y herramientas
Several People Are Typing
Enfoques: Slack, productividad laboral y estrategia de contenidos
Google Design
Enfoques: Google, procesos, herramientas
Shopify UX
Enfoques: UX (es decir, diseño, contenido, desarrollo, investigación)
17. Un nuevo entregable de diseño —el código— creado de formas nuevas
En su artículo de TechCrunch “El futuro del desarrollo front-end es el diseño”, Carson Miller escribe:
La programación se verá radicalmente distinta en el futuro. De hecho, es posible que la línea entre diseño y desarrollo deje de existir.
Surgió una conversación sobre el artículo en Twitter, donde Austin Knight señaló:
Muchos diseñadores y desarrolladores que conozco preferirían trabajar de forma visual, pero lo hacen mediante código por pura necesidad.
Hay muchos factores detrás de esta realidad emergente, incluyendo
- La necesidad de un desarrollo de producto rápido e iterativo
- La necesidad de los usuarios de una mayor equivalencia entre resultados y entradas (es decir, la mayoría de los pintores no pintan con código)
- La creciente sofisticación de las herramientas de diseño sin código
Y como Webflow es uno de los últimos, apostamos todo por este futuro.
18. Realidad virtual… en la web
Dada nuestra tendencia ya consolidada a pensar en la web como una especie de realidad alternativa, esto suena un poco a Origen. Pero no se puede negar que la RV va a transformar la web en 2017, aunque los navegadores aún no estén listos para soportarla. Si tienes ganas de probarla, echa un vistazo al sitio Web VR.
¿Listo para poner tu granito de arena en el diseño web de 2017?
¡Entonces empieza a crear sitios web con Webflow! Es gratis empezar y te va a encantar la libertad creativa que te ofrece.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
