20 tendencias de diseño web para 2019

Descubre las tendencias, técnicas y herramientas de diseño web que marcarán el diseño de sitios web y productos digitales en 2019 y más allá.

20 tendencias de diseño web para 2019

Índice de contenidos

Los diseñadores tienen una relación… ansiosa… con la idea de las tendencias. Por un lado, seguir a la multitud parece incorrecto; después de todo, ¿la creatividad no consiste en hacer cualquier cosa menos lo que hacen los demás? Bajo esta forma de pensar, el único valor de conocer lo que está de moda es saber contra qué te estás oponiendo. Por supuesto, no puedes simplemente hacer lo contrario a una tendencia. Pero conocer cuáles son las últimas tendencias en diseño web facilita comentarlas o criticarlas sutilmente.

Echa un vistazo a nuestra última publicación: 11 tendencias de diseño web atractivas para 2023.

Por otro lado, existe la idea de que "la creatividad es saber cómo ocultar tus fuentes", una cita a menudo atribuida a Albert Einstein, aunque es más probable que fuera acuñada por el humorista C.E.M. Joad. (Apropiado, ¿no?)

De cualquier manera, no es difícil saber qué está de moda. Solo levanta la vista de tu smartphone y echa un vistazo a tu alrededor, ¡o no!

Lo que importa es entender el cómo y el porqué del surgimiento y la adopción de las tendencias. Porque, al fin y al cabo, las tendencias tienen mucho que decirnos sobre nuestro momento cultural: lo que amamos, lo que odiamos, hacia dónde queremos ir. Cuanto más nos acercamos a entender esas cosas, más nos acercamos a meternos en la cabeza de los demás, a empatizar con ellos. Y, en realidad, a entendernos a nosotros mismos.

Después de todo, cuando los historiadores del arte, los críticos de moda y los diseñadores web del futuro miren hacia atrás a nuestra era actual, lo que verán y comentarán serán las tendencias más importantes de nuestros días. Cuando discutan la estética de la década de 2010, realmente estarán discutiendo lo que estaba de moda y lo que desafiaba las tendencias.

Las tendencias, entonces, son historia en proceso.

¿Prefieres ver tu contenido sobre tendencias?

Te cubrimos con un resumen rápido de esta publicación de la diseñadora, podcaster y vlogger Charli Prangely:

¡Gracias, Charli!

Ahora, veamos qué dirán los historiadores del futuro sobre el presente. Con un poco de ayuda de algunos creadores de tendencias modernos, empezando por Zack Onisko, CEO de Dribbble, papá genial y aficionado a la guitarra.

1. Ilustración tridimensional


Pitch homepage using the trend of 3D illustration to show 4 cartoon figures virtually rearranging interface elements.
Fuente

‍


Justo cuando pensabas que el futuro era plano, marcas como Pitch y Stripe están volcando su peso de marca en una forma de ilustración nueva y a la vez antigua: el 3D.

No contentos con el estilo de ilustración recortada popularizado por Slack, los diseñadores buscan añadir profundidad, realismo y formas orgánicas a gráficos diseñados para difuminar los límites entre el mundo digital y el físico.

En cierto sentido, esto agudiza el contraste entre los productos digitales y los seres humanos, incluso mientras los une en espacios imaginarios donde las personas pueden captar y manipular elementos digitales (como los gráficos e iconos en la sección principal de Pitch). No puedes evitar pensar en la popular afirmación de que la verdadera disrupción de Facebook es la forma en que nos convierte a nosotros, sus usuarios, en el producto, y preguntarte si los diseñadores no están rechazando subconscientemente esta noción.

Por supuesto, si ese es el caso, esto parece una evolución meramente incremental. Estos diseños no tanto devuelven a las personas su humanidad como las transforman de ilustraciones planas en dibujos animados.

Con eso en mente, quizás la animación mucho más realista de la tarjeta de crédito de Stripe ofrezca un vistazo a un futuro donde lo físico y lo digital puedan representarse como tales.

2. De la marca denominativa juguetona al logotipo serio, también conocido como la "helveticización" de la identidad de marca

En 2018, vimos a varias marcas muy visibles pasar de identidades de marca deliciosamente excéntricas a unas… ejem… esperadas… sans serifs.

O, como me gusta decir: todas las identidades de marca terminan convirtiéndose en una versión Helvetica.

Former Marketo logo on the left featuring a more "quirky" font and a more staid update on the right.
Logotipo antiguo de Marketo a la izquierda, el nuevo a la derecha. Fuente.
Former MailChimp log in cursive, camel case on the left and new, lowercase sans-serif logo on the right.
Posiblemente el cambio de marca más acertado: el MailChimp clásico a la izquierda, Mailchimp 2.0 a la derecha. ¡Fíjate también en el cambio de mayúsculas! Fuente.
Uber's old hyper-masculine, squarish typeface logo in allcaps on the left and new, custom, sans-serif typeface in titlecase on the right.
Uber, la marca que amábamos odiar a la izquierda, Uber intentando deshacerse de su pasado feo a la derecha. Fuente.

Eso sí, ninguna de las tres marcas que tenemos en mente se fue directo al recurso de siempre. Y una de ellas, Mailchimp, evolucionó en una dirección que, sinceramente, se siente más adecuada para una marca que ha hecho de su voz distintiva y sus activos visuales juguetones la piedra angular de su marketing.

Aun así, para cada una de estas empresas, los cambios de marca pueden sentirse un poco como una evolución demasiado familiar hacia lo que, sin faltar a la verdad, se podría llamar un corporativismo serio y aburrido.

Dicho esto, cabe preguntarse si este cambio de lo peculiar y reconocible a lo genérico y sin voz tiene que ver con la noción de fluidez cognitiva: la idea de que nos sentimos más cómodos con aquello que ya hemos experimentado antes.

Con las marcas más grandes y familiares del mundo presumiendo de logotipos sin remates (serifas), no es de extrañar que dar un paso en esa dirección se vea como el sello distintivo de una empresa que alcanza la madurez. En ese sentido, esta es una especie de metatendencia que esperamos ver una y otra vez, y es poco probable que 2019 sea la excepción.

3. Tipografía contorneada

Como cualquier marca impulsada por el diseño, aquí en Webflow somos grandes fans de la tipografía, así que siempre estamos atentos a las nuevas tendencias en texto (¡mira más abajo!).

Así que, cuando Zack señaló la tendencia emergente de la tipografía contorneada, nos lanzamos a ver qué nos deparaba esta novedad en las formas de las letras. Resulta que... estaba vacía.

Columbia sportswear co. logo uses outlined type for "Columbia
Fuente
Silver Island font-face update jumps on the trend of outlined type.
Fuente‍

Hay algo esquivo en este tipo de texto que está medio presente y medio ausente, que atrae y retiene la mirada de inmediato, exigiéndote que sigas las formas de las letras hasta su conclusión natural. Lo que la convierte en una técnica bastante útil para crear una marca memorable.

En un mundo donde las fuentes sans serif gruesas dominan el branding, una forma de letra visualmente más ligera ciertamente captura una sensación de lo tradicional, pero diferente. Lo cual, al final, es lo que toda marca nueva necesita: la sensación de ser revolucionaria y confiable a la vez.

4. El auge continuo del brutalismo

Lo dijimos el año pasado, y lo repetimos este año:

El futuro será brutal.

(¿Demasiado real? Lo sé. Perdón.)

Parece haber algo particularmente atractivo en la estética directa del brutalismo hoy en día. Ya sea como un movimiento pendular natural que se aleja del estilo "limpio" y minimalista que dominó la web recientemente —un rechazo a la amabilidad cursi de la voz e ilustraciones de un millón de marcas, una peineta a la cara de la llamada "web homogénea", o un acto de resistencia ante la mezcla cada vez más surrealista de realidad y ficción a la que la web nos expone a diario—, no se puede negar que el brutalismo ha salido de la subcultura del diseño para ponerse bajo los focos del branding.

¿Necesitas ejemplos? Aquí los tienes:

Poster concepts using the trend of brutalism with bold, uppercase, black-and-white, inverse lettering.
Conceptos de póster para un “Design Spike” en Asana.

Y esto va mucho más allá de los pósteres para reuniones internas y los conceptos iterativos. El reciente cambio de marca de Squarespace adopta el brutalismo a través de la estética visual cruda y la personalidad descarada de la ciudad de Nueva York:

White text on a black baground that repeats "slightly left of center" to create the illusion of stacked boxes.
Imagen de brand.squarespace.com.

La perdurabilidad del brutalismo sugiere una faceta interesante sobre el surgimiento y la adopción de las tendencias de diseño que me recuerda al fenómeno del pop punk de finales de los 90 (¡qué bien me siento al decir esto!): sea cual sea la tendencia, por muy “rebelde” o “descarada” que parezca a primera vista, puede ser —y será— absorbida por el mercado popular. Y ese crecimiento, desde una tendencia “subcultural” hasta convertirse en un pilar general, puede extenderse a lo largo de varios años.

Por mucho que me haya vuelto fanático de la audacia innovadora que el brutalismo intenta promover, le pediría una cosa a los diseñadores:

Recuerden por favor que hay personas ahí fuera a las que las animaciones frenéticas, llenas de tipografía fragmentada y mareante, junto con colores parpadeantes, les resultan extremadamente desorientadoras.

El diseño, como cualquier otra actividad creativa, no tiene por qué ser para todo el mundo todo el tiempo, pero ten en cuenta que si decides incluir este tipo de elementos en tu trabajo, estás decidiendo que tu trabajo no es para quienes lo encontrarán mareante, nauseabundo y abrumador.

Pero estos elementos no son necesarios para un diseño brutalista. Si buscas crear una versión accesible de la estética brutalista, echa un vistazo a las Guidelines for Brutalist Design de David Copeland, que nos recuerdan:

Por defecto, un sitio web que utiliza HTML según lo previsto y no tiene estilos personalizados será legible en todas las pantallas y dispositivos. Solo el acto de diseñar puede hacer que el contenido sea menos legible, aunque ciertamente también puede hacerlo más.
Guidelines for Brutalist Web Design with pink arrow pointing to copy that reads, "Raw content true to its construction"
La flecha rosa grande es mía.

5. Estilos de ilustración más diversos e iconoclastas

En su estudio de caso, increíblemente detallado y fascinante, sobre su trabajo para Slack, la ilustradora Alice Lee nos recuerda:

Suceden cosas realmente asombrosas cuando miramos más allá de nuestros colegas, competidores e industria inmediatos en busca de inspiración para nuestras ilustraciones.

Y aunque es fácil ver cómo el trabajo de Alice ha dado pie a un estilo ilustrativo cada vez más homogéneo entre las empresas de software SaaS y otras startups, no hace falta esforzarse mucho para encontrar a otros diseñadores, además de Alice, que exploran las ricas fuentes de trabajo en otros campos, desde el diseño gráfico hasta la fotografía y más allá.

Como el estilo de fotocollage que se está explorando en Medium e Intercom.

La página de inicio de sesión de Medium te introduce a su estilo único de ilustración editorial.
Observa la incorporación de la repetición brutalista en el contenido textual.

Pero también estamos viendo a gente inspirada por la fisicidad de las manualidades en papel:

Illustration of a person on a ladder holding a bucket, framed by curvy layers of paper-cut-out-like blobs in blues and white.
Paper Space por Outcrowd

Versiones tridimensionales del estilo de recorte mayoritariamente plano de Alice:

Cut-out style illustration of a genderless figure kneeling beside a pond where a paper sailboat floats.
Barco de papel por Gal Shir

Y en paisajes físicos/digitales increíblemente coloridos, como el que se ve en la página de inicio actual de CrowdRise:

Crowdrise landing page featuring a colorful, cut-out style illustration of people and their dogs in a dogpark.


No es difícil ver ecos del trabajo de Alice Lee para Slack en todos ellos; su voz se ha convertido en parte del zeitgeist del diseño moderno. Pero cada uno de ellos extiende su voz de maneras intrigantes y atractivas, mostrando el potencial creativo inherente a mirar más allá de lo que hacen los demás y abrir, aunque sea tentativamente, tu propio camino.

Incluso estamos viendo a diseñadores adoptar enfoques más abstractos y surrealistas para ilustrar ideas menos concretas, como mantenerse ingenioso:

Animated illustration of people on a float in various poses waving flags.
Ilustración de “Cómo mantenerse ingenioso” de Justin Tran.

O “marketing del ciclo de vida”:

Intercom blog post with a hero image that makes use of and abstract cut-out, collage-style illustration trend.


Como fanático del arte abstracto, espero con ansias ver más piezas expresivas y alusivas como estas apareciendo por toda la web.

6. Tipografía más aventurera y vintage

Si bien el diseño de logotipos puede seguir tendiendo a la homogeneidad, nosotros y Zack estamos viendo aparecer opciones más excéntricas, como la adopción por parte de Mailchimp de la (in)fame tipografía Cooper Black (¡famosa por los Tootsie Roll!) como fuente de su marca:

Mailchimp landing page with a yellow background, black text in Cooper Black, and an animated illustration on the right.


Abstract luciendo la deliciosamente gruesa Vesterbro Black (además de la Regular y la Heavy) en combinación con America Mono de Grilli Type:


Y la deliciosamente regordeta Recoleta en la reciente biblioteca de ilustraciones de Pablo Stanley (¡que está llena de ecos de Alice Lee!), Humaaans.


Señalamos el renacimiento de las fuentes serif en 2018, pero parece que 2019 podría estar dando un paso más peculiar y nostálgico, al menos en los titulares. Cada una de las fuentes de estilo retro mencionadas cuenta con una gama completa de pesos, lo que las hace perfectas para la flexibilidad que exige el trabajo editorial.

¡Gracias por detectar estas tendencias, Zack!

Nuestro siguiente colaborador es Sacha Grief, diseñador, desarrollador y emprendedor que vive en Kioto, Japón. Quizás lo conozcas por su fantástico (y minimalista) sitio curado y boletín informativo, Sidebar, o Vulcan.js.

Tuvo la amabilidad de escribir sus propios textos breves, así que aquí está la lista de tendencias de Sacha, en sus propias palabras:

7. Diseño inclusivo

Hero section of an essay titled, "5 ways inclusion fuels innovation"


Ya se han escrito muchas líneas sobre la importancia de la accesibilidad, pero cámbiale el nombre a "Diseño inclusivo" ¡y tendrás una palabra de moda totalmente nueva y sin dueño sobre la cual escribir libros y ensayos!

Bromas aparte, pensar en las necesidades de un grupo diverso de usuarios nunca es algo malo, y si hace falta un concepto de moda para ayudarnos a hacerlo, bienvenido sea.

Nota del editor: Como puedes ver en la captura de pantalla anterior, los defensores de estilos de diseño más inclusivos a menudo apelan a cómo el diseño inclusivo/accesible puede ayudar a las marcas a alcanzar sus objetivos comerciales. La lógica es sólida, pero no deberían tener que hacerlo por eso.

Es un acto simple de humanidad hacer espacio y adaptarse a los demás, y si integras el pensamiento inclusivo en tu proceso de diseño, los costos no son más que incrementales y, en última instancia, pueden mejorar la experiencia de usuario para todos.

Al fin y al cabo, todos tenemos alguna discapacidad en algún momento.

Illustrated chart with colums titles physical, temporary, and situational disabilities and rows titled touch, see, hear, and speak.

 

8. Diseño + código

Mientras todos nos devanábamos los sesos pensando si los diseñadores debían aprender a programar, algunos lo hicieron sin hacer ruido y aprovecharon sus nuevos conocimientos para crear mejores herramientas de diseño. Estamos viendo una nueva generación de herramientas como Figma o Framer X que permiten una integración más estrecha con el código mediante API y sistemas de complementos.

Nota del editor: Por no hablar de herramientas como Webflow, que se saltan las API y los complementos para dejarte diseñar código. Ah, y si eres fan de Figma, deberías echarle un vistazo al vídeo de la diseñadora Charli Marie sobre cómo convertir diseños de Figma en sitios funcionales de Webflow:  


9. Tipografía llamativa

Por alguna razón, cualquier lista de tendencias de diseño tiene que incluir la "tipografía llamativa". Teniendo en cuenta que la tipografía existe desde 1439, es difícil equivocarse con eso. (Bueno, salvo por aquel breve periodo en 2013 en el que Apple decidió que todo debía escribirse en Helvetica Neue Ultra Light).

Nota del editor: Me declaro culpable, Sacha. Más sobre esto a continuación.

Nuestro siguiente colaborador es el inimitable Pablo Stanley. Cuando Pablo no está diseñando cosas geniales para InVision o dejando al mundo del diseño boquiabierto con sus ilustraciones perspicaces y llenas de personalidad, parece que disfruta de verdad metiéndose a fondo con Webflow.

Sobre todo desde que lanzamos…

10. CSS grid

Landing page for LAYOUT LAND by Jen Simmons.


¡Madre mía! ¡¡¡Me encanta Grid!!!

–Pablo Stanley

Para muchos diseñadores y desarrolladores web, flexbox ha sido una especie de santo grial. Responde a la eterna pregunta de cómo centrar las cosas correctamente, tanto vertical como horizontalmente. Hace que diseños antes complejos sean relativamente fáciles de implementar. Incluso permite (literalmente) el legendario diseño del “santo grial”.

La cuestión es que no te permite controlar las posiciones horizontal y vertical de los elementos al mismo tiempo. Es decir, es una herramienta de "esto o lo otro".

Aquí entra CSS grid: que te permite colocar un elemento exactamente donde quieras, tanto vertical como horizontalmente. Parece sencillo, pero la realidad es que desbloquea un nivel de libertad expresiva y control que antes solo nos podía dar la impresión.

Y, sin embargo, nadie lo está usando.

Bueno, casi nadie. Especialmente si lo comparas con flexbox.

Según Chrome Platform Status, aproximadamente el 83% de las páginas vistas incluyen flexbox. ¿CSS grid? Apenas un 1,5%, aproximadamente.

¿Por qué, te preguntarás? Pues la respuesta, como suele ocurrir con las herramientas de diseño web, es la falta de compatibilidad uniforme.

According to Can I Use, CSS grid is supported by the latest versions of all browsers but Opera Mini and Blackberry Browser.


O, más concretamente, la nada sorprendente ausencia de compatibilidad (o la compatibilidad dudosa) que ofrece Internet Explorer (IE), que a pesar de haber sido retirado por Microsoft, sigue siendo utilizado de forma desproporcionada por muchas empresas.

Aun así, el uso de IE probablemente no sea lo suficientemente significativo como para explicar por completo la falta de adopción de grid. Por lo tanto, considera que las estadísticas citadas anteriormente se centran en páginas vistas, no en páginas. Eso significa que es la falta de adopción de grid por parte de los principales sitios web lo que probablemente explique mejor el rendimiento aparentemente pobre de grid hasta la fecha.

Lo cual tiene sentido. Es probable que estas grandes plataformas solo hayan apostado por flexbox hace muy poco tiempo. Y reajustar el diseño de sitios que atraen a miles de millones de usuarios no es tarea fácil.

Afortunadamente, tú probablemente no te enfrentes a los mismos problemas en la mayor parte de tu trabajo. Y con Webflow, ni siquiera necesitas pasar horas dominando la sintaxis de grid. Simplemente puedes usarlo. Hoy mismo. Visualmente. ‍

Empieza a usar grid en Webflow.

Por qué tu equipo de diseño debería usar Webflow

Descubre cómo los equipos de diseño están optimizando sus flujos de trabajo —y creando mejores experiencias— con Webflow.

→
↗
►
↓
←
↑
Leer ahora



Para nuestro siguiente invitado, un pensador del diseño, recurrí a Los Montoya, diseñador principal en la aplicación social Mappen y director creativo de Juxta Labs. Aquí tienes a Los en sus propias palabras:

Actualmente estoy enfocado en liderar el diseño tanto para nuestros esfuerzos de marketing como de producto en Mappen, y he obtenido una perspectiva única sobre lo que vendrá en 2019.

11. Enfoques opuestos al color según la posición en el mercado

En 2019, espero ver a más empresas seguir el ejemplo de otras marcas notables y optar por paletas de colores más suaves, accesibles e incluso sutiles.

Por el contrario, seguiremos viendo cómo las empresas de diseñadores y creadores independientes se hacen notar con colores más audaces, saturados y con personalidad. Seguiremos viendo un uso intensivo de ilustraciones en un esfuerzo por humanizar la tecnología y, lo que es más importante, humanizar la marca.

12. Grid rompe la cuadrícula

Veremos el uso de CSS grid como un marco subyacente para romper con la "cuadrícula". La proliferación y accesibilidad de las tecnologías de CSS grid ayudarán tanto a diseñadores como a desarrolladores a inclinarse por diseños rotos en un esfuerzo por llevar diseños de la "vieja escuela", inspirados en la impresión, a la web.

13. Animación pensada primero para móviles

El diseño web a finales de 2018 nos mostró una variedad de animaciones basadas en el desplazamiento y la inclusión de "animaciones temporizadas" para ayudar a guiar la vista a lo largo de una página de marketing. Aunque esto funciona bien en el punto de interrupción de escritorio, veremos un enfoque más orientado a móviles para las interacciones en 2019. Estoy deseando ver cómo los diseñadores y desarrolladores trasladan facetas del "diseño web de escritorio" al diseño web móvil.

14. El año de la gran redacción

Creo que todo esto son evoluciones naturales de lo que hemos visto en 2018. En cierto sentido, el diseño visual tanto para la web como para el producto se ha estabilizado. Tenemos una base sólida de flujos de UX e interacciones probadas y validadas para el diseño web y de producto. El resultado son productos digitales y sitios web que tienden a parecer primos cercanos, si no hermanos.

Es por eso que, si quieres crear una marca que la gente ame y tu trabajo es Diseñador [Inserta el título deseado], necesitarás fortalecer tus habilidades de narración y tu eficacia como redactor. Es demasiado fácil desarrollar un gran gusto desde una perspectiva de diseño visual. Tienes muchísimos ejemplos de diseños hermosos de los cuales aprender. Tienes flujos de embudo de marketing y flujos de UX de productos digitales probados que son fácilmente accesibles para ti, por lo que puedes diseñar una experiencia que sea fácilmente comprendida por la mayoría de los clientes.

Dicho esto, 2019 será el año de la gran redacción. El año de la gran narración y las historias. Elimina los colores, las animaciones, las cuadrículas y las ilustraciones de un sitio web y lo que te queda son, en su mayoría, palabras. Las palabras importan en un sitio web y las palabras importan en el diseño de producto. Cómo y cuándo te comunicas con tus clientes mientras recorren tu aplicación es crucial para darte otra oportunidad de que vuelvan y contraten tu aplicación de nuevo.

Las palabras son la forma en que te comunicas con tu equipo para hacer el trabajo de manera efectiva.

Las palabras son la forma en que ayudas a un cliente a enamorarse de tu marca.

Las palabras son la forma en que le dices a la gente por qué deberían preocuparse por lo que estás haciendo.

2019 es el año para construir algo que valga la pena amar.

Nuestra siguiente colaboradora es Mariah Driver, productora de contenido, experta en juegos de palabras y defensora de la accesibilidad en Webflow:

15. Demasiado movimiento

En la obra de Shakespeare Como gustéis, Rosalinda pregunta: "¿Puede alguien desear demasiado algo bueno?"

Ahora, probablemente te estés preguntando cómo podemos relacionar una comedia pastoral escrita en 1599 con las tendencias de diseño web de 2019. Dos palabras: diseño de movimiento.

La tendencia hacia los elementos animados e interactivos no es nada nueva y, lo que es más importante, no va a desaparecer. El diseño de movimiento puede ser algo "bueno" en el diseño web, siempre que ayude a los usuarios a navegar por los sitios.

Las consecuencias de añadir animaciones e interacciones por puro estilo visual, y no por usabilidad, pueden ser mucho mayores que simplemente distraer al usuario. En algunos casos, pueden hacer que sea imposible, e incluso peligroso, que los usuarios naveguen por tu sitio.

Por ejemplo, cualquier pantalla que parpadee, destelle o titile puede provocar ataques en personas con epilepsia fotosensible. Aunque este elemento de diseño sin duda hace que un sitio sea memorable, puede volverse perjudicial rápidamente si no se utiliza correctamente.

Hemos incluido el sitio a continuación para demostrar el tipo de pantalla parpadeante que puede ser perjudicial para ciertos usuarios. Por favor, no hagas clic en el sitio si eres sensible a los destellos o parpadeos:

Bio blurb for Zipeng Zhu in bold, uppercase, black typeface that fills the hero section
Advertencia: si eres fotosensible, mejor evita este.

Para entender mejor cómo puedes usar destellos, parpadeos y titileos de forma segura y sin sacrificar la accesibilidad de tu sitio, consulta las Pautas de accesibilidad web sobre convulsiones y destellos.

¿La conclusión de esta tendencia?

Evita la tentación de añadir movimiento a tu sitio solo porque las herramientas de diseño web modernas, como Webflow, hacen que sea posible. Antes de añadir una interacción o animación, pregúntate si tiene un propósito en la página. Y, lo que es más importante, si podría impedir que alguien navegue por tu sitio.

Ahora me toca a mí.

16. Texto masivo que domina la pantalla


Rolling Flowers landing page text that fills the hero section and reads, "drink the purest water / boire de l'eau la plus pure"


Los redactores y otros especialistas en contenido llevan mucho tiempo argumentando que el contenido siempre debe ser lo primero en el proceso de diseño. Después de todo, publicar en la web... sigue siendo publicar. Y tanto si por fin hemos conseguido convencer al mundo del valor del contenido, como si los diseñadores simplemente han empezado a interesarse de verdad por las formas de las letras, estamos empezando a ver sitios web que realmente dan al contenido textual el protagonismo absoluto.

Observa la imagen anterior de los creadores de productos para fumar, Rolling Flowers. Presentado como una alternativa al tabaco de liar, Rolling Flowers deja que el texto haga (casi) todo el trabajo en su sitio de comercio electrónico minimalista (y llamativo).

Minimal, large, black text on a white background: a buy button next to the product photo and the product name below.


Y, además, añade unos botones de compra increíblemente grandes.

O mira esta imagen de un proyecto interno (por ahora) súper secreto:


Large, black text fills the hero section on a white background. One word per line reads, "march into infinitude"


Que coloca el texto tan grande que te obliga a procesar la frase en fragmentos, no en frases completas. (Lo que, teóricamente, centra tu atención).

"The damn user journey" fills the hero section of Tayler Freund's landing page.
Tayler Freund comparte algunas de sus reflexiones sobre los recorridos de usuario con tipografía grande y llamativa.

‍

Incluso Huffpost se ha sumado a la moda de los textos dramáticamente gigantescos:

Landing page for a Huffpost piecse with the article's title filling the left 2/3 of the screen in oversized text and the essay body on the right.


Como referencia, esto es todo lo que veo en mi MacBook Pro:

 The same Huffpost article as in the abov image with2/3 of the image cut off.


También estamos viendo cómo esta tendencia de textos masivos surge en diseños de menús creativos, como se puede apreciar en el sitio de la firma de arquitectura Dot to Dot:

White, outlined text on a black background over a grid of yellow dots connected by lines to form a constellation-like image


Curiosamente, el menú ha abandonado el rincón habitual de la barra superior para ocupar el centro del escenario, de modo que su sistema de navegación se convierte, al menos en la página de inicio, en el «plato fuerte» del sitio.

17. Diseño y animación de cursor lúdicos

Siguiendo con Dot to Dot por un momento, vale la pena destacar una tendencia emergente que consiste en aprovechar al máximo la herramienta principal de la interacción humano-computadora: el humilde cursor.

Debido a que desempeña un papel tan vital en la dinámica de la interacción humana con los espacios digitales, muchos somos reacios a juguetear con el cursor. Pero no todos.

En Dot to Dot, por ejemplo, el cursor hace un gran trabajo:

Aquí, el estado al pasar el ratón revela la imagen de un proyecto.
Aquí se convierte en una pista sobre cómo interactuar con el menú, si te detienes unos instantes.
Y aquí revela una pequeña declaración de principios. (Lamentablemente, renderizando el texto como imagen).
En el sitio del KIKK Festival, tu cursor parece casi quemar el intenso fondo azul para revelar otra dimensión del diseño, añadiendo un toque de diversión a tu visita.


El diseñador Niccolò Miranda, usuario de Webflow, también ha dado al cursor un uso más creativo que el simple apuntar y hacer clic en su portafolio. En su página de inicio, el cursor te invita a hacer clic y mantener presionado, lo que activa una ingeniosa animación de él trabajando duro durante todo el día.

Mi única esperanza para Niccolò es que no trabaje realmente desde las 5 a. m. hasta la medianoche.


18. Larga vida al nuevo héroe homogéneo

Hasta hace muy poco, todos compartíamos una visión del sitio web omnipresente. Se veía más o menos así:

Wirframe of a landing page with nav in the top right, logo top left, a hero image followed with a blurb and three colums
Fuente

Incluso escribimos un tutorial sobre cómo construir exactamente esto, por si tus clientes lo están pidiendo a gritos.

Pero en 2018, ese diseño empezó a metamorfosearse. Los diseñadores web se cansaron del titular centrado y el botón sobre una foto bonita.

¿Qué hicieron en su lugar? Mover el titular y la llamada a la acción a la izquierda. Luego, reducir la imagen, colocarla a la derecha y, tal vez, ¿convertirla en una ilustración personalizada?

¡Et voilà! Contemplad al nuevo héroe homogéneo.

Airtable.com
Dropbox.com
Mailchimp.com
Stripe.com

‍

Para que quede claro: personalmente, no creo que haya nada malo en esto. Los titulares son cada vez más claros. Los subtítulos añaden un contexto muy necesario. Siempre sabes dónde encontrar tu llamada a la acción. Nuestro deseo de fluidez cognitiva —esa sensación de dominio que obtenemos al trabajar con cosas familiares— queda satisfecho. La ley de Jakob se tiene en cuenta.

A landing page for Jakob's Law, its standard layout reflecting the law's premise. The blurb text reads, "Users spend most of their time on other sites. this means that users prefer your site to work the same way as all the other sites they already know."


Y el texto centrado nunca debió verse fuera de las invitaciones de boda.

Pero vaya que está de moda.

19. Superponlo todo

Site layout mockups with sections separated by grey boxes and header text that spans across more than one section.


La era del diseño basado en tarjetas nos hizo muy fans de los objetos discretos con agrupaciones muy claras y explícitas. Es una elección sensata dada la ley de regiones comunes de la psicología de la Gestalt.

Pero las regiones comunes no son la única forma de vincular visualmente elementos de diseño discretos. También existe la ley de la conexión uniforme, que explica por qué queda claro, en el diseño de arriba, que "It’s a Light" se refiere a la lámpara que aparece a la izquierda.

Así que en 2019, esperamos ver mucha más exploración de formas para establecer conexiones, como este módulo de boletín informativo en el sitio de NBC:

Newsletter module with overlapping elements on NBC.com

Y este collage personalizable de fotos y texto:

Overlapping, moveable photos for Molley Heltz site concept.
La página "sobre mí" animada de Zhenya Rynzhuk


Y en el sitio de la agencia creativa japonesa SONICJAM:

Overlapping elemens on sonicjam.co.jp
Menú abierto para aumentar el efecto. (¡Fíjate también en el cursor tan original!)

‍

20. El año en que los "usuarios" contraatacan

Banksy piece of a man and a woman embracing while looking at their mobile phones.
“Mobile Lovers”, de Banksy‍

Desde el lanzamiento de los teléfonos inteligentes y el auge de las redes sociales, hemos estado disfrutando de un nivel de conexión totalmente nuevo. El conocimiento del mundo está al alcance de nuestra mano. Podemos "hacernos amigos" (así es, chicos: ya existía un verbo para eso) de casi cualquiera, en cualquier lugar, a través de las redes sociales. "Disfrutamos" refrescando constantemente "feeds" de "contenido" "hecho a medida" "solo para nosotros".

Y nos estamos cansando de todo esto. Estamos hartos de la invasión. De la manipulación y la falta de honestidad. De la retórica grandilocuente sobre conectar al mundo frente a las noticias sobre filtraciones, manipulación mediática y (¿quizás?) elecciones amañadas.

Nos estamos dando cuenta de que cargamos con un mono a cuestas. Uno que vive en nuestros bolsillos y que, desde siempre, solo ha querido lo mejor para nosotros.

Pero esa revelación nos hace preguntarnos a muchos «usuarios»: ¿vale la pena el precio de entrada por el retorno de inversión? ¿La transformación del «teléfono» móvil a superordenador de bolsillo nos ha costado más de lo que nos ha aportado?

Y si es así, ¿cómo podemos corregir el desequilibrio? ¿Podemos quedarnos con el pastel y comérnoslo también?

Pero tú, que lees esto, no puedes responder a estas preguntas solo como «usuario» o parte del público. Probablemente también seas un creador. Así que, en 2019, es hora (ya va siendo hora) de preguntarte:

¿Qué puedo hacer para devolver a las personas el control sobre su interacción, su uso y sus vidas?


Última actualización
December 14, 2018
Categoría

Artículos relacionados

9 ejemplos inspiradores de sitios web de comercio electrónico creados en Webflow
9 ejemplos inspiradores de sitios web de comercio electrónico creados en Webflow

9 ejemplos inspiradores de sitios web de comercio electrónico creados en Webflow

9 ejemplos inspiradores de sitios web de comercio electrónico creados en Webflow

Inspiración
Por
Jeff Cardello
,
,
Leer artículo
8 impresionantes ejemplos de webs de boda para inspirar la tuya
8 impresionantes ejemplos de webs de boda para inspirar la tuya

8 impresionantes ejemplos de webs de boda para inspirar la tuya

8 impresionantes ejemplos de webs de boda para inspirar la tuya

Diseño
Por
Jorge Farah
,
,
Leer artículo
Cómo vender Webflow a los clientes: mejores prácticas
Cómo vender Webflow a los clientes: mejores prácticas

Cómo vender Webflow a los clientes: mejores prácticas

Cómo vender Webflow a los clientes: mejores prácticas

Estrategia
Por
John Moore Williams
,
,
Leer artículo
¿Qué es el movimiento Pop Art? Todo lo que necesitas saber
¿Qué es el movimiento Pop Art? Todo lo que necesitas saber

¿Qué es el movimiento Pop Art? Todo lo que necesitas saber

¿Qué es el movimiento Pop Art? Todo lo que necesitas saber

Diseño
Por
Rease Rios
,
,
Leer artículo
El proceso de diseño web moderno: definir objetivos
El proceso de diseño web moderno: definir objetivos

El proceso de diseño web moderno: definir objetivos

El proceso de diseño web moderno: definir objetivos

Diseño
Por
Jeff Cardello
,
,
Leer artículo
Cómo conseguir clientes de diseño web rápidamente: 5 pasos clave
Cómo conseguir clientes de diseño web rápidamente: 5 pasos clave

Cómo conseguir clientes de diseño web rápidamente: 5 pasos clave

Cómo conseguir clientes de diseño web rápidamente: 5 pasos clave

Estrategia
Por
Equipo de Webflow
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.