La forma en que consumimos la web cambia nuestra manera de diseñar sitios. Los dispositivos móviles y la tendencia hacia el diseño adaptativo obligan a los diseñadores a buscar formas de maximizar la experiencia web para todos, sin importar qué dispositivo utilicen.
Echa un vistazo a nuestra última publicación: 11 tendencias de diseño web cautivadoras para 2023
Estas 17 tendencias —16 para este año (2016), más 1 para el futuro— responden directamente a las formas cambiantes en las que navegamos por la web.
1. Microinteracciones
Desde presionar el botón de un ascensor hasta darle "me gusta" a una foto en Instagram, todos realizamos montones de tareas de una sola acción cada día, generalmente sin pensarlo mucho. A estos momentos simples de interacción los llamamos microinteracciones.
Las microinteracciones bien diseñadas pueden ser determinantes porque, a pesar de su simplicidad, suelen ser muy potentes. Fijar una foto inspiradora, dar "me gusta" a un estado ingenioso y retuitear un mensaje impactante se han vuelto tan comunes que ni siquiera necesitamos mencionar los sitios web que los crearon.
Cuando se hacen bien, las microinteracciones ofrecen una forma intuitiva de interactuar con un sitio web. Cuando se hacen mal, pueden causar frustración debido a una funcionalidad inesperada, o simplemente por ser demasiado extravagantes.
A medida que los diseñadores optimizamos nuestras experiencias web, veremos —y crearemos— más microinteracciones que nos ayuden a simplificar las acciones que debemos realizar.
Pero, ¿cómo saber si tus microinteracciones ofrecen la simplicidad y potencia que la gente espera? Bueno, esta hoja de trucos de Dan Saffer, autor del libro de O’Reilly Microinteractions: Designing with Details, puede ayudarte:
Descarga el PDF de la hoja de trucos de microinteracciones
2. Dependencia de las imágenes sobre el texto
A medida que el diseño web evoluciona, la importancia de las imágenes de alta calidad solo irá en aumento. Un buen texto refuerza cualquier sitio web, pero si algo se puede decir con una foto, una animación o un video corto, podría ser una muy buena idea hacerlo así.
El contenido escrito sigue siendo invaluable para el SEO, pero con cada pieza de contenido que añadas a tu sitio, pregúntate siempre: ¿existe una forma más atractiva, concisa y compartible de transmitir esta idea?
En general, el texto funciona mejor para eliminar la ambigüedad a la que son propensos los métodos de comunicación visual.
También vale la pena recordar que no siempre es una cuestión de "una cosa o la otra". Si quieres diseñar y publicar de forma accesible que priorice la experiencia de cada usuario, querrás combinar contenido visual y escrito. De esa manera, todos podrán disfrutar de tu contenido de la mejor forma para ellos.
3. Diseñar con datos reales (es decir, contenido)
Claro, los prototipos se ven muy bonitos. Pero con sus imágenes de lujo y sus textos de lorem ipsum colocados con precisión, representan una realidad idealizada. Como los electrodomésticos de una casa de muestra, los prototipos son tan funcionales como una televisión de cartón.
Diseñar con datos reales nos da una comprensión más profunda de cómo funcionará una página. En parte porque saca a la superficie todos esos "problemas" que los diseñadores se esfuerzan por evitar en sus prototipos, como titulares demasiado largos, imágenes de baja calidad, etcétera.
Diseñar con contenido real ofrece tanto a redactores como a diseñadores una mejor perspectiva de lo que deben hacer. Si aún no lo has hecho, echa un vistazo a "Por qué tu proceso de diseño debería empezar por el contenido". El CMS de Webflow te ayuda a diseñar prototipos funcionales con contenido real, dando a diseñadores y redactores una idea mucho más clara de cómo funcionará un sitio web.
4. Scrooooooooooooooooolling
Con la multitud de tamaños de pantalla que existen, el término "por encima del pliegue" ha perdido su significado.
Aunque antes se consideraba un mal diseño, la funcionalidad intuitiva del scroll largo en dispositivos móviles le ha otorgado una aceptación generalizada. Facilita la navegación al eliminar los clics adicionales necesarios para revelar el contenido. Las transiciones llamativas y los diseños diferenciados por secciones transforman lo que podría ser un camino monótono en un proceso de descubrimiento fascinante.
El scroll largo cambia el diseño de UX, abriendo la puerta a enfoques más narrativos y modelos de interacción más sencillos.
5. Sitios web y aplicaciones conversacionales/bots
Muchos escritores de ciencia ficción han imaginado una distopía futura donde la humanidad cae bajo el dominio de robots tiranos. Pero en la realidad, la inteligencia artificial ha sido bastante útil en el desarrollo de sitios web y aplicaciones. Lo siento, Isaac Asimov.
Nadie quiere navegar por una compleja serie de menús para hacer algo. La conversación hace que la experiencia sea mucho más sencilla. Las aplicaciones y otros servicios web están utilizando este enfoque más natural para que pedir productos, recibir asesoramiento financiero o reservar una habitación de hotel sea tan fácil como enviar un par de mensajes de texto.
Además, han surgido varias herramientas para ayudar a quienes no saben programar a crear sus propios bots, así que es probable que veamos muchísimos más en los próximos años.
Una pregunta especialmente interesante surge con el auge de los "bots": ¿cómo cambiará el papel del diseño web/UI/UX a medida que esta nueva forma de interfaz gane popularidad? Al fin y al cabo, en la mayoría de los casos, ya existe un diseño bien construido que envuelve la experiencia conversacional. Eso significa que las palabras en sí mismas se convierten en la interfaz de usuario principal.
Lo que nos lleva naturalmente a la pregunta: ¿será 2017 el año del "diseñador de contenido"?
6. La muerte del menú hamburguesa
Los menús hamburguesa son un tema divisivo. Al igual que la política en año electoral, no recomendamos hablar de ellos después de unas copas en compañía variada. Especialmente si dicha compañía incluye diseñadores de UX.
Es cierto, los menús de hamburguesa ahorran un espacio muy valioso en pantallas pequeñas.
Pero desde el punto de vista de la usabilidad, los menús de hamburguesa tienen sus problemas. Poca gente reconoce siquiera el icono. E incluso quienes lo hacen, no saben qué esperar cuando se abre el menú, dada la cantidad de formas en que puede desplegarse esa interacción. Además, son ineficientes, ya que añaden un paso extra al proceso de navegación por un sitio.
Por último, también ocultan la amplitud de un sitio, anulando así el contexto de cada página y su lugar dentro del conjunto. Con la navegación visible en pantalla, la gente puede hacerse una idea general fácilmente y ver sus opciones. Sin ella, esa orientación de conjunto resulta mucho más difícil.
Aplicaciones como Spotify han abandonado sus menús de hamburguesa en favor de una navegación simplificada, y esperamos ver mucho más de esto a medida que avance el año.
7. Notificaciones push de escritorio
Todos hemos experimentado el poder de las notificaciones push. No importa dónde estés ni qué estés haciendo, es muy difícil ignorar ese pequeño sonido o vibración. Es muy difícil no sacar el teléfono y ver quién te está llamando.
Y ahora, muchos sitios web intentan llevar ese poder al escritorio. Si aún no lo has visto, suele manifestarse como un pequeño elemento tipo modal que se desliza desde la parte superior del navegador, preguntándote si el sitio puede enviarte notificaciones de escritorio, al estilo de Slack.
Tiene todo el sentido del mundo: al fin y al cabo, estás en el sitio, listo para interactuar con él. ¿Por qué esperar a que se suscriban al boletín y luego esperar a que realmente lo abran, cuando pueden contactar contigo aquí y ahora?
Dicho esto, estos modales siempre parecen saltar en cuanto se carga el sitio, así que es difícil decir que sí a una petición tan prematura e invasiva. (Muy parecido a la típica ventana emergente de boletín). Quizás el próximo año veamos cómo se perfecciona esta técnica para que sea más eficaz y útil.
8. Vídeos explicativos de productos
Existen desde hace tiempo, sí. Pero su importancia no hará más que crecer en los próximos años.
Con una duración de unos 90 segundos, los vídeos explicativos de productos ofrecen una forma rápida y concisa de destacar las virtudes de un producto determinado. Con locuciones informativas y animaciones ingeniosas, estos vídeos pueden servir a empresas de cualquier tamaño para que la gente sepa exactamente por qué sus productos son geniales.
Algo que las marcas deberán tener en cuenta al utilizar estos vídeos es que pueden ser inaccesibles para algunos públicos si no incluyen subtítulos. Además, mucha gente (incluyéndome a mí, Ed.) simplemente se niega a ver vídeos en sitios de marketing, así que no conviene depender solo de ellos para explicarlo todo.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
9. Duotonos
Las imágenes en duotono se crean "imprimiendo" una imagen en escala de grises con un segundo color que no sea negro. Esta técnica tiene sus orígenes en la impresión y encaja muy bien con una estética de diseño web minimalista.
Las imágenes en duotono son ideales para fondos de cabecera porque dan vida sin distraer demasiado del contenido ni crear problemas de legibilidad. Un esquema de color duotono sencillo también puede ser una forma estupenda de crear una página limpia y coherente, especialmente cuando intentas presentar varias imágenes muy diferentes en el mismo lugar (como logotipos o fotos de los miembros del equipo).
10. Tipografía estilizada
Un enfoque de diseño minimalista deja espacio para usos más artísticos de la tipografía. Los tamaños extremos, las fuentes personalizadas, las tipografías tradicionales usadas de formas poco convencionales y las letras altamente estilizadas pueden tener un impacto enorme. Y con el mayor acceso a opciones tipográficas que ofrecen Google Fonts y Adobe Typekit, ya no hay necesidad de conformarse con la típica sans serif de siempre.
Combinar tamaños de fuente puede tener un gran impacto en el aspecto y la organización de una página. Hay palabras que pueden ocupar una página entera. El uso de fuentes de tamaños muy diferentes crea una jerarquía que, a su vez, ayuda a los usuarios a entender el sitio web y a encontrar el contenido que buscan. Las fuentes más grandes enfatizan el mensaje principal de una página, mientras que las más pequeñas guían naturalmente la vista hacia el mensaje secundario. Los diseñadores están creando páginas visualmente más dinámicas mediante el uso creativo de diferentes tamaños de fuente.
Las tipografías exclusivas también han ganado un nuevo protagonismo en nuestras vidas. Antes limitadas a los logotipos, materiales impresos y guías de estilo de las marcas, las fuentes a medida ahora desempeñan papeles clave en las interfaces que vemos a diario. La tipografía San Francisco de Apple, Bookerly de Amazon Kindle, Roboto de Android e incluso la fuente sans de UPS son excelentes ejemplos del efecto que la tipografía puede tener en la identidad de una marca. Diseñar una familia tipográfica completa puede ser costoso y llevar mucho tiempo, pero puede marcar una gran diferencia a la hora de distinguir a tu empresa.
Las fuentes tradicionales también se están reutilizando de formas más creativas. El texto aparece ahora en forma de máscaras, donde las letras se recortan sobre una imagen, invirtiendo el enfoque tradicional de superposición de texto. También estamos viendo un resurgimiento de fuentes desgastadas con aire "vintage", a medida que las marcas adoptan una estética DIY para captar a ese público tan importante amante de lo artesanal y lo auténtico.
Llenar una página con fuentes cargadas de florituras puede ser excesivo, pero cuando se usan con buen gusto, este tipo de tipografía puede crear un ambiente potente y dar vida a una página.
Por otro lado...
En marcado contraste, también estamos viendo el inicio de un retorno a las fuentes del sistema en algunas plataformas importantes, incluida GitHub. Aunque las fuentes personalizadas ayudan a crear una web mucho más diversa y hermosa, también pueden afectar negativamente al rendimiento. Demos gracias de que las fuentes del sistema actuales están a años luz de Arial y Helvetica.
11. Esquemas de color vibrantes
A medida que el diseño plano y minimalista ha ganado popularidad, los colores brillantes también han ido en aumento. Como señala sitepoint.com, estos esquemas de color más vibrantes no se limitan solo al diseño web, sino que también se encuentran en el diseño de moda, los gráficos meteorológicos y el diseño de interiores.
Los diseños basados en tarjetas o contenedores se han vuelto más populares, y el uso de colores vibrantes en estos bloques crea una estructura audaz. Los colores brillantes también ayudan a que los elementos de la interfaz, como los botones y la navegación, resalten en la página. Por último, las paletas brillantes pueden tener un fuerte efecto de marca: es imposible pensar en Huge sin que te venga a la mente el "rosa brillante", o en Google sin sus "colores primarios".
Existe un arte en el uso eficaz de esquemas de color vibrantes, y es fácil pasarse de la raya con un caleidoscopio de tonos mareantes que te recuerden a un viaje psicodélico.
12. Diseños de cuadrícula rotos
Los sitios web simétricos pueden ser hermosos en su sencillez, pero la geometría estricta también puede resultar limitante. Las cuadrículas rotas son una forma de relajar el diseño sin perder el sentido del orden visual. Este tipo de estructura rompe con lo convencional y su frescura mantiene el interés de los usuarios. Eso sí, ten cuidado: demasiado caos puede acabar en una confusión de contenido.
Romper la cuadrícula, con sentido
Recomendamos encarecidamente sacudir tus sistemas de cuadrícula, pero asegúrate de hacerlo con un propósito. Ninguna decisión de diseño debería estar motivada por un "porque queda bien". En su lugar, piensa en cómo romper la cuadrícula puede significar algo para tu marca y ten ese significado presente mientras desarrollas tu diseño.
Por ejemplo, el sitio web de Epicurrence rompe la cuadrícula para sacudir nuestras percepciones habituales sobre la relación entre imagen y contenido. Y es más que un simple truco de diseño: al fin y al cabo, esta "no conferencia" también busca cambiar tu forma de pensar sobre los eventos del sector.
Ninguna decisión de diseño debería estar motivada por un "porque queda bien".
13. Narrativa dinámica
Las empresas se esfuerzan por conectar con sus clientes. Al fin y al cabo, la gente no quiere interactuar con una entidad fría y sin rostro; quiere interactuar con personas reales. La narrativa dinámica utiliza vídeo, gráficos y texto para crear un viaje interactivo que ayuda a las personas a comprender mejor una marca, a las personas que hay detrás y el valor de su misión.
Lo mismo ocurre con los productos. Nada surge de la nada, sin historia. Siempre hay un trasfondo, y ofrecer a la gente un vistazo a esa historia añade dimensión y profundidad a lo que, de otro modo, podría ser solo un software más.
14. Chat directo con soporte
Chatear con los clientes y responder a sus preguntas ayuda a personalizar la presencia web de una empresa. Aplicaciones como Intercom modernizan la experiencia de soporte al reflejar cómo funciona la mensajería en redes sociales como Facebook. La posibilidad de obtener ayuda inmediata también ayuda a generar confianza en una marca.
El chat se convierte así en una herramienta eficaz para ayudar a los clientes a resolver sus problemas. Para quienes no se sienten cómodos con la tecnología, un representante puede ayudarles ahora de forma remota mediante la navegación conjunta o el uso compartido de pantalla. Además, elimina la necesidad de buscar y navegar por densa documentación técnica, lo que reduce la fricción.
El chat directo también puede ayudar a convertir a nuevos usuarios de una forma muy contextual. Al fin y al cabo, si estás intentando resolver un problema concreto y de repente recibes un mensaje que te ayuda a superar exactamente ese problema, tu confianza en el producto se disparará.
15. Ventanas emergentes de registro a pantalla completa
Las ventanas emergentes tradicionales han pasado de moda. ¿Las sustituirán las de pantalla completa?
En lugar de interrumpirte justo cuando pensabas que el consejo n.º 3 se estaba poniendo interesante, estas ventanas de pantalla completa desplazan el contenido hacia abajo, ocupando toda la pantalla. La fluidez del desplazamiento hace que sea menos molesto, y el diseño a pantalla completa ofrece más espacio para incluir contenido realmente persuasivo. Además, no hace falta cerrar la ventana manualmente: basta con seguir haciendo scroll para continuar.
Dado que el marketing por correo electrónico es tan importante, conseguir que los clientes interesados se registren es más crucial que nunca. Y aunque quizás no sean la solución perfecta en un mundo ideal donde los blogs nos dejen registrarnos solo si queremos, al menos son un poco menos molestos.
16. Ilustraciones e iconografía personalizadas
Sí, puedes encontrar montones de recursos visuales de stock bien diseñados para tus proyectos. Pero para destacar de verdad, necesitas crear algo único. Contar con alguien que cree imágenes e iconografía personaliza tu sitio web y proyecta tu personalidad. Además, demuestra que realmente has dedicado tiempo y mimo al diseño.
Los gráficos de stock son uno de los sellos distintivos de la aburrida homogeneidad que muchos perciben en el mundo del diseño web. Crear recursos visuales personalizados que hablen directamente con y para tu contenido es una forma de escapar de la trampa del diseño de comida rápida. Esperemos ver mucho, mucho más de esto.
17. Mirando al futuro: realidad virtual para la web
Puede que esté solo en sus primeras etapas de desarrollo, pero la navegación web en realidad virtual será algún día una... bueno... realidad. El equipo de WebVR de Mozilla imagina una web de realidad virtual donde cada sitio pueda ofrecer a las personas una realidad inmersiva en 3D totalmente distinta a la web a la que nos hemos acostumbrado. Como la mayoría de las tecnologías de realidad virtual, a WebVR todavía le queda camino por recorrer antes de ser fácilmente accesible para la mayoría de la gente.
Dicho esto, no hay mejor momento para pensar en el futuro que ahora mismo.
¿Qué tendencias has visto en 2016 y qué crees que nos depara el futuro?
La web rebosa de enfoques innovadores en diseño y contenido, así que seguro que se nos ha escapado algo. ¡Cuéntanos qué has visto este año y qué te gustaría ver más en los comentarios de abajo!
