•ᐅ 77 Ejemplos y Tendencias de diseño web en 2020

Hoy en día, ninguna empresa puede esperar tener éxito sin un sitio web, pero destacar de la competencia es cada vez más difícil y por eso es tan esencial estar al tanto de las tendencias y mejores prácticas en diseño web.

Tendencias en diseño web para dos mil diecinueve #CafecitoConRivas – Vídeo de Vida MRR

Comencemos con ciertas estadísticas asombrosas que demuestran la relevancia del diseño web:

¿Buscas profesionales?

Sin compromiso ni registros • Profesionales destacados

¿Buscas clientes del servicio?

Cuota fija al mes • Sin permanencia ni comisiones

Decir que el diseño web es esencial para su negocio sería quedarse corto.

El sitio web de su empresa es la principal fuente de información sobre los productos y servicios que está vendiendo. Los usuarios juzgan la verosimilitud y calidad de su marca a través de su sitio web.

Crear un sitio que retumbe con la demografía objetivo es la mejor forma de atraer tráfico y persuadir a los clientes a fin de que compren su producto/usen sus servicios.

Sin embargo, como las tendencias de diseño web están cambiando constantemente, la creación de un enorme sitio web que capta y sostiene la atención de los usuarios puede ser un reto.

Por lo tanto, si 2020 es el año en el que va a lanzar un sitio para empresas, tiene 2 opciones:

1. Comprar un sitio ya establecido con un diseño decente y convertirlo en algo grande
2. Construir un sitio desde cero con un diseño profesional y bien trabajado

Back to top

1) TOP Tendencias del Diseño de páginas Web para 2020

En los dos casos, tendrá que invertir en diseño web para una mayor tasa de conversión y éxito del proyecto, te recomendamos tener muy presentes las siguientes tendencias de diseño de páginas web para 2020:

1.1) El apogeo de los visuales interactivos en el diseño web

Mientras que el diseño simple funciona bien, desea canalizar su canguro interior cuando se trata de diseño web.

¿Cómo?

Saltando a través de aros para mantenga entretenidos a sus clientes.

2018 vio un incremento de los diseñadores web que personalizan su enfoque a los clientes que desean entretenerse.

Después de todo, no debe ser una compañía de entretenimiento para sostener a los visitantes de su sitio comprometidos.

El auge de los visuales interactivos en el diseño web y los diferentes géneros de contenido (más que la fórmula tradicional de texto e imagen) será aún más prominente en dos mil diecinueve.

Los antiguos romanos decían panem et circenses(comida y juegos), así que hagamos como los romanos.

Si tienes una gran oferta, también diviértete con la gente

Un buen ejemplo de cómo usar totalmente los visuales interactivos es La Compañía de Interrupción.

The Disruption Company emplea animaciones y vídeospara mantener a sus clientes interesados.

Luego, elevan absolutamente el listón para el resto de nosotros, los plebeyos, cambiando el contenido que los visitantes ven cada vez que visitan su sitio.

Esto da a los visitantes del sitio una experiencia única e interesante y aumenta automáticamente su tasa de conversión.

Otro gran ejemplo de contenido interactivo que los visitantes del sitio disfrutan es el sitio de APPS.

APPS es una empresa dedicada a la producción de sidra de manzana, que demuestra el ahínco que dedica a su producto principal con un simulador de acción sidrera en primera página.

Puedes continuar todo el proceso de elaboración de la sidra tal y como si fueses parte de ella y si bien la mayoría de nosotros no podríamos hacer una sidra para salvar nuestras vidas, APPS la hace amena y también interesante desde el principio.

2019 va a ser el año del viaje del consumidor, por lo que es esencial integrar características que enriquezcan el viaje del consumidor final.

Si APPS consigue algo, tienen la necesidad de una experiencia vívida.

Los usuarios de hoy en día desean interacción, no sólo texto e imágenes.

Perderán su atrayente en dos mil diecinueve, sobre todo por el hecho de que muchas empresas ya se están acercando a la tendencia interactiva.

Y hablando de interacción, otra gran tendencia a esperar en dos mil veinte es…

1.2) Gamificación en Diseño Web

La gamificación ha sido un gran inconveniente en el diseño y la comercialización este último año, pero sólo como una palabra clave.

Si juegas en Google, verás muchos artículos mas muy poco contenido, en especial sobre cómo puedes emplearlo para impulsar tus esfuerzos de marketing.

El truco de la gamificación es asistir a los clientes del servicio a sumergirse absolutamente en el proceso de consumo del producto.Los buenos mercadólogos y diseñadores saben que esta inmersión empieza con el sitio web.

La gamificación puede emplearse de diferentes formas, por ejemplo:

1. Visitantes y consumidores compitiendo entre sí (con el propósito de ganar un premio)
2. Comparación de resultados
3. Interactividad
4. Juegos actuales

Obviamente, todo acerca de la gamificación es bastante ameno y sirve para atraer a los visitantes, mas no hay nada como los minijuegos reales.

Ahora, puedes integrarlos en el sitio como un producto separado, mas también puedes crear sitios completos con la gamificación en psique.

Un gran ejemplo de gamificación es la Guía de Navidad polaca.

Polish Christmas Guide es un sitio web que ayuda a los visitantes a aprender más sobre las tradiciones navideñas en Polonia, y aunque no es un ejemplo típico de diseño de un sitio con fines de lucro, hay mucho que aprender de él.

La Guía de Navidad polaca emplea gráficos SVG animados y animaciones CSS activadas por desplazamiento con efectos SFX personalizados

La misión principal del proyecto es motivar a los visitantes a donar a la Fundación Nobody’s Children, que ayuda a los niños maltratados.

Este diseño está impulsado por imágenes, y los visitantes juegan a un juego en el que pasean en el trineo de Santa Claus y coleccionan regalos mientras aprenden sobre las tradiciones polacas.

Es un enorme contenido, en cuanto a marketing de contenido se refiere, en tanto que en última instancia, sirve a sus dos propósitos principales: la educación del consumidor, y la conversión emocional.

Una vez más, la gamificación realmente se esfuerza por crear experiencias únicas para el consumidor que pueden considerarse productos separados, mas en coexistencia con el producto real crean una historia completa.

Por ejemplo, Habiticate deja jugar tu vida y motivarte para conseguir tus metas.

Es esencialmente un rastreador de hábitos que utiliza la mecánica de los juegos de rol, como lograr puntos, ganar recompensas (armadura más elegante, armas, mascotas, etcétera) y batallar contra los monstruos con otros amigos.

Aunque el diseño web en sí mismo no es tan interactivo, la gamificación comienza desde el comienzo.

El sitio está diseñado pensando en la experiencia final,lo que deja a los usuarios sumergirse en la experiencia incluso ya antes de haber descargado las aplicaciones.

La ludificación es increíblemente eficaz, especialmente pues el 70 por ciento de los esfuerzos de transformación del negocio fracasan debido a la falta de compromiso.

La gamificación combate eso con éxito y aumenta tanto el compromiso como la conversión.

Además, es muy entretenido.

Y todos precisamos un poco más de diversión en dos mil diecinueve.

1.3) Diseño móvil que da tanto como la Web

En 2015, vimos que las búsquedas móviles aumentaron en comparación con las búsquedas web, y esa tendencia siguió incrementando en los últimos años.

La gente utiliza sus teléfonos más que los de escritorio, y Google es el alfa y omega de los recursos, por lo que no sorprende a absolutamente nadie que los algoritmos de Google también den prioridad a los móviles sobre la web.

Cuando se trata de diseño web y marketing, hemos tenido que ajustar nuestros esfuerzos para acomodar el apogeo de la telefonía móvil.

Con esa nueva dirección de diseño se presentan muchas restricciones, mas no debemos comprometer la calidad.

Los consumidores prosiguen deseando lo que los consumidores desean, y una tendencia importante en dos mil veinte será ajustar el móvil para otorgar tanto como el diseño web.

Esto significa que el móvil no sólo ha de ser una adición al diseño estándar de su sitio web, sino más bien un diseño por derecho propio.

Un gran ejemplo de diseño móvil que ganará aún más relevancia en dos mil veinte es el sitio web de Adrian Zumbrunnen, diseñador y escritor de UX.

La experiencia del sitio web móvil de Zumbrunnen se basa en la conversación, y los clientes del servicio pueden «tener una conversación» con él, contándole más sobre sus necesidades.

Una vez más, la interactividad será enorme en dos mil veinte, así que si no quieres perdértelo, puedes aprender de Zumbrunnen.

El móvil no es la plataforma idónea para muchas animaciones y vídeos, pero los grandes diseñadores y profesionales del marketing saben que no deben hacer concesiones cuando se trata de una experiencia de usuario única.

Es la principal manera de transformar a los clientes potenciales en clientes del servicio, así que cuando piense en el diseño móvil, piense en interesante .

A continuación, amoldarse a la plataforma.

Lean Labshace lo mismo, en tanto que comprende que el diseño móvil es diferente del diseño de sitios web, mas del mismo modo esencial.

Son una agencia de marketing, y tienen una»fórmula 10x».

Los clientes del servicio pueden entender su fórmula 10x desplazándose por el sitio, y todo se adapta a la elegancia y simplicidad de la experiencia móvil.

Lean Labs también muestra su experiencia en el campo del diseño y el marketing utilizando géneros de letra, esquemas de color y visuales apropiados.

Cuando echamos un vistazo a los sitios web de Zumbrunnen y Lean Labs y los comparamos con otros sitios móviles que no fueron creados pensando en el móvil primero, ciertas cosas se aclaran inmediatamente:

• El móvil no es el segundo plato.
• La interactividad es igual de esencial con los móviles (y es alcanzable).
• El contenido es esencial, mas también lo son las imágenes.

Vamos a ver muchos más sitios móviles -primeros en dos mil diecinueve-, así que olvídese de escalar los botones CTA de su sitio web frecuente, y concéntrese en crear una experiencia diferente, única, pero de marca.

1.4) Un tipo diferente de minimalismo de diseño

En aquellos tiempos (con lo que deseamos decir 2016, como semeja que fue hace veinte siglos), el minimalismo significaba esquemas de color en blanco y negro, y no había mucho que ver.

Afortunadamente, hemos crecido y nos hemos dado cuenta de que el minimalismo en el sentido tradicional no dará a los consumidores lo que necesitan

Así que hoy en día, estamos viendo un cambio de paradigma cara experiencias significativas que se centran en un objetivo(por servirnos de un ejemplo, todo cuanto impulsa al consumidor a anotarse, en lugar de llenarlo de información y proporcionarle poquísima orientación).

Para que el diseño funcione apropiadamente, este minimalismo de diseño debe ser potenciado por opciones visuales.

Con minimalismo, los colores se utilizan para estimular las decisiones de compra dependiendo de las industrias, y cada elección de diseño puede ser pequeña, mas afirma mucho acerca de las decisiones de los diseñadores y vendedores.

Evoulvecomienza alucinante y cósmicamente.

Son una empresa de innovación digital, y queda claro que están atravesando fronteras que antes no habían sido tocadas por el diseño de su sitio.

El mensaje de su marca se transmite con el diseño minimalista de su sitio web.

Desde el principio, los visitantes están motivados cara cosas más grandes y mejores con la combinación de colores y la animación del planeta.

Evoulve sólo tiene una fácil barra lateral izquierda donde los visitantes pueden navegar para encontrar más información sobre la empresa

Cuando se pulsa sobre la animación principal, hay una escala translúcida y un navegador con información sobre la compañía y las tecnologías, así como sobre cómo ponerse en contacto con ellas.

Este ejemplo es un gran ejemplo para enseñar cómo el diseño y el campo de trabajo pueden ir de la mano, singularmente cuando los principios del minimalismo se emplean para ese propósito.

Con minimalismo, cada elección de diseño dice mucho sobre el propósito de la compañía.

Un gran ejemplo de ello es el sitiode un diseñador de productos, Mikiya Kobayashi.

El enfoque principal del lugar de Kobayashi está en los productos que crea.

Sólo mienta escuetamente su nombre e invita a los visitantes del sitio a desplazarse y centrarse en cómo crea los productos.

Algunos diseñadores pueden incluso decir que la colocación de imágenes con respecto a su marca es desafortunada

Sin embargo, se trata de una elección de diseño muy valiente y minimalista que transmite el mensaje de «el producto primero» desde el principio.

En dos mil diecinueve, el minimalismo adquirirá un significado diferente, más significativo para el consumidor final.

Y los diseñadores que entiendan que el minimalismo es fundamentalmente un enfoque cara la decisión de compra centralizadaserán los que más aprovechen el diseño web en dos mil diecinueve.

1.5) Chatbots y aprendizaje automático integrado con el diseño web

El aprendizaje de robots y máquinas ha cambiado la manera en que nos comunicamos, singularmente en ventas.

En sitio de contestar manualmente a los correos electrónicos y a las preguntas de los clientes, las empresas usan cada vez más el chatbots y el aprendizaje automático para reducir la carga de trabajo y proporcionar a los clientes del servicio respuestas mucho más rápidas.

Es natural que también haya alterado el diseño.

Actualmente, estamos viendo muchas integraciones de sitios web (normalmente en forma de ventanas emergentes de ZenDesk en el lado derecho) que son sólo una solución pasajera.

Los profesionales del marketing y los diseñadores que quieran aprovechar al máximo las posibilidades de los robots de chat y el aprendizaje automático tendrán que amoldar su diseño a la nueva tecnología en dos mil diecinueve, y transformarlo en una parte crucial de la experiencia del usuario del sitio.

Los chatbots y el aprendizaje automático son otra característica del empuje hacia una experiencia de usuario más completa

Hipmunk, una plataforma que ayuda a la gente a buscar vuelos, hoteles y coches de alquiler, lo comprende, y han creado integraciones de Slack, Fb y Skype para asistir a los usuarios a comunicarse con ellos cuando los precisan.

Una vez más, la conveniencia del diseño web queda ejemplarizada por las características que una compañía ofrece a sus clientes del servicio.

El objetivo es administrar un servicio completo.

Landbot.io, pese a ser un distribuidor de chatbot, tiene un enorme sitio que muestra exactamente cómo funcionan sus chatbots.

Si recuerdas el sitio web conversacional que fue un gran ejemplo de interactividad, entonces verás cuánto ayuda Landbot.io con eso.

Los clientes pueden tener conversaciones completas (que van desde ofertas de productos hasta servicio al usuario) con sitios.

Esto no sólo ayuda a suministrar un excelente servicio al usuario, sino que también reduce los gastos generales para muchas empresas, con lo que la integración de chatbot va a transformarse en un importante actor del diseño en 2019.

Esperemos que Skynet no se apodere del mundo.

1.6) Opciones de diseño visualmente intrigantes

Los sitios web ya no son sólo recursos, sino se están transformando en un importante motor de conversación y conversión.

El compromiso es importante, y comienza con ellos.

Es de ahí que que las opciones de diseño visualmente intrigantes se convertirán en una gran tendencia en la manera en que diseñamos sitios en dos mil diecinueve.

Es esencial captar la atención y provocar el compromiso, y ¿qué mejor forma de hacerlo que tomando resoluciones audaces que sobresalgan de la mayoría?

Cuando hablamos de opciones de diseño visual, podemos hablar de animaciones, párrafos de cine, y también podemos hablar de líneas de diseño y puntos de enfoque.

Tradicionalmente, hemos empleado líneas rectas y horizontales para separar los diferentes contenidos.

Sin embargo, se ha comprobado que el uso del diseño de líneas diagonaleses más efectivo.

Un ejemplo de uso de diseño web de línea diagonal es Startup Giraffe.

Inmediatamente está claro que se trata de una empresa que procura presentarse como entretenida y cómoda, mas que la imagen de marca se ve potenciada por sus opciones de diseño.

Estas líneas angulosas no sólo resultan interesantes para los visitantes del sitio web, sino también motivan a los visitantes a proseguir navegando y averiguar más.

El sitio de Start-up Giraffe es un enorme ejemplo de un sitio web que utiliza un diseño visualmente intrigante para motivar las conversiones y la educación, mas también se pueden utilizar para crear una experiencia de usuario más dinámica.

Los neumáticos Dunloputilizan líneas angulares con la intención de crear una sensación dinámica, que está a la par con su industria (automotriz).

En general, existen muchas maneras de utilizar las líneas diagonales, pero el primordial atractivo de ellas (tanto para las compañías como para los clientes del servicio) es que son visualmente interesantes y destacan entre la multitud.

Muchos diseñadores ya han comenzado a emplear estos principios en la manera en que dan forma a la experiencia del usuario para sus clientes del servicio, y como herramienta de marketing, son increíblemente poderosos.

Es de ahí que que veremos muchos más en dos mil diecinueve.

Otra manera de elegir algo más interesante para su diseño web en dos mil veinte es usar colores brillantes.

Los degradados y la escala de grises han sido muy populares en los últimos años, mas estamos viendo un empuje cara los colores refulgentes, que sólo serán más prominentes en dos mil diecinueve.

Por ejemplo, el sitio web de Paulo Vaineres muy atractivo.

Desde los elementos de collage hasta los colores vivos que se destacan inmediatamente, presentan su identidad de marca desde el principio.

Una vez más, su sitio es muy minimalista, pero su paleta de colores muestra todo cuanto un visitante ha de saber para convertirse en cliente del servicio a la mayor brevedad.

Mambomambo también utiliza funciones de desplazamiento y microanimaciones para añadir al atrayente visual y enseñar lo dinámico que es su trabajo creativo.

Hay muchas maneras de diseñar con la curiosidad en psique, y lo mejor es que en 2019, eso es exactamente lo que los clientes del servicio necesitarán.

1.7) Diferente desplazamiento en el diseño web

Cuando pensamos en el desplazamiento tradicional, pensamos de arriba abajo.

Sin embargo, esto se ha convertido en el estándar, y si hemos aprendido algo que deseamos tener en cuenta en 2019, es que la mejor manera de enfocar el diseño web es teniendo en cuenta la diversidad.

Un número cada vez mayor de diseñadores web están ensayando con diferentes géneros de desplazamiento.

Esto es genial desde la perspectiva del cliente del servicio, ya que crea automáticamente una experiencia (lo que aumenta las tasas de compromiso y conversión).

Siempre hay competencia, y crear una experiencia única para el cliente es una promesa de que la experiencia de compra también será más única.

Un gran ejemplo de desplazamiento diferente en el diseño web que será más popular en 2020 es Aces, una agencia de reclutamiento de béisbol.

Lo primero que los ases hacen bien es empezar a cargar la página mostrando cuántas carreras de béisbol han conseguido.

Y cuando los clientes del servicio llegan a la página cargada, se les invita a desplazarse.

El desplazamiento es diagonal, y cada movimiento abre un nuevo jugador cuya carrera Aces logró.Además, Aces también proporciona información estadística sobre el trabajo que efectúan, mostrando a los clientes del servicio desde el principio cuál es su misión.

Negocian los acuerdos mostrando resultados, no hablando, y es algo que los ha posicionado altísimo en el mundo del béisbol.

Sin embargo, es importante que el diseño de su sitio siga su ejemplo.

El scrolling largoes también otro género de scrolling diferente que puede ayudar a las marcas a contar su historia de forma más fluida, a diferencia de llenar a los visitantes del sitio con contenido que no pueden procesar.

Le Mugses un restorán que usa con éxito el desplazamiento largo y diferentes perspectivas visuales para crear una experiencia de usuario única.

Los visitantes del sitio son de manera inmediata invitados (y atraídos) a explorar su oferta hedonista y a zambullirse en la experiencia sibarita.

Utilizan imágenes audaces y atractivas y mecanismos de desplazamiento únicos para mantener la atención en su sitio y en su oferta.

El scrolling largo también es ideal para sitios web en los que es importante que los visitantes exploren y tomen la decisión de adquiere a través de él.

El desplazamiento Parallaxes típico de la industria del entretenimiento, mas también puede ser usado con gran éxito en diferentes áreas profesionales si se hace bien.

Cuando hablamos de desplazamiento de paralaje, suponemos que hay 2 imágenes que se mueven a ritmos diferentes.

Esto lo convierte en una opción idónea para contar historias y crear un sitio web más dinámico.

Un gran ejemplo de desplazamiento de paralaje es el sitio web de The Walking Dead.

Un programa de televisión sobre zombis, su sitio se queja al formato cómico.

Al desplazarnos, seguimos al personaje de la camisa amarilla a través de diferentes escenas.

Algunos de ellos contienen animaciones adicionales, mas aun si no lo hicieran, seguiría siendo una forma interesante de desplazarse.

¿Quién diría que no al programa después de eso?

Además, tenga presente las animaciones activadas por desplazamiento.

Cuando los visitantes se desplazan, esto desencadena diferentes animaciones e interactúes que provocan el compromiso.

Una vez más, el enfoque en 2020 definitivamente será la creación de una experiencia de usuario que lo abarque todo, y las animaciones activadas por desplazamiento son una forma bien interesante de mantener a los visitantes en su lugar y convertirlos en clientes del servicio.

Un gran ejemplo de ello es Igor, un sitio web de una compañía de IO.

Se invita a los visitantes a hojear para poder ver la oferta completa, y pueden ver una pluralidad de recursos que pueden hallar útiles.

Cuando se trata de diferentes géneros de desplazamiento que son una enorme tendencia para dos mil diecinueve, tenga presente que los tiempos de carga son increíblemente importantes.

Si no quiere comprometer la experiencia sólo a fin de que su sitio sea más rápido, intente crear una página de carga interesante que impida que los visitantes se alejen.

1.8) Grande y audaz

Si lo tienes, alardea de ello.

Eso va a ser el diseño del sitio en resumen en el próximo año, así que asegúrate de no quedarte atrás.

Muchos diseñadores web utilizan una combinación de grandes frases (literalmente, el tamaño de la fuente será enorme) y detalles simplificados para crear una experiencia de usuario dinámica.Piense en las vallas publicitarias, sólo en las pantallas de los ordenadores portátiles o teléfonos móviles.

Este es otro juego de imágenes interesantes y declaraciones en negrita que puede crear un efecto poderosísimo para los clientes del servicio.

Un gran ejemplo de grande y valiente como una misión de diseño web en 2020 es Austin Eastciders.

Como empresa productora de sidra, utilizan su eslogan «Cider Y’All» como inspiración para su diseño.

Austin Eastciders emplea títulos grandes y audaces con copias más pequeñas, y deja que las animaciones y el vídeo dirijan a los clientes del servicio cara las compras.

Los vídeos muestran diferentes ocasiones en las que la gente puede gozar de sus sidras, y ese es otro ejemplo de una narración bien hecha.

La gente no adquiere pues los productos son estupendos – compran porque quieren el modo de vida.

Austin Eastciders gana en esta categoría por el hecho de que saben que el atractivo del modo de vida en 2020 empieza con el diseño web.

La tendencia de mejora de la interactividad y la experiencia en dos mil veinte también quiere decir que cada parte del sitio web debe emplearse de manera plena para crear una gran experiencia para el usuario final y el consumidor.

Esto significa que ya no podemos contentarnos con los temas de Wordpress y un pie de página que contiene información básica, y llamarlo un día.

En lugar de eso, el 2020 nos va a hacer ir todos de canguro nuevamente y empezar a saltar en un esmero por suministrar más a los clientes, en lugar de romper la cuarta pared con un pie de página poco inspirador.

Después de todo, los detalles importan.

Y serán aún más importantes en dos mil diecinueve.

Considere el sitio web de 360gardalife.

Un sitio web para actividades deportivas en el Lago de Garda en Italia, cada elección de diseño en el lugar provee a la experiencia del usuario.

Muestran detalles sobre diferentes ofertas, ofrecen instrucciones sobre cómo reservar, y todo lo demás que la gente atlética que visita el Lago de Garda puede disfrutar.

Sin embargo, la verdadera magia empieza cuando llegas a su pie de página y te percatas de que no es sólo información básica.

En sitio de suministrar a los visitantes información básica de contacto, los diseñadores del Lago de Garda también emplean el pie de página para mostrar: informes meteorológicos, webcams y también iconos que recuerdan a la gente su diversa oferta.

Además, los visitantes también pueden seleccionar los deportes que les interesen, añadir su dirección de correo electrónico y recibir una oferta personalizada con actividades que se amolden a sus preferencias.

Naturalmente, esto crea una sensación más inclusiva en todo el diseño web (que será una necesidad absoluta en 2019), y si los visitantes no estaban convencidos, lo estarán al ver el pie de página.

1.9) Diseño web 3D

La gente desea entretenerse, y usar los principios de la tridimensionalidad puede ser una enorme forma de suministrar más sabor.

Normalmente hay 2 formas de emplear el diseño web en 3D, y es a través de elementos 3D (creando profundidad en los visuales) o bien mediante el uso de animaciones.

Un gran ejemplo de diseño web en 3D que emplea animaciones es Future Living.

Los diseñadores detrás del sitio se inspiraron en el tema y crearon una pluralidad de animaciones y microinteracciones para progresar la experiencia del usuario.

Reimaginan la manera en que vivimos, creando un futuro con urbes de concha que son capaces de resguardarse a sí mismas y de llevar el punto a casa, han creado increíbles animaciones que harán que la mayoría de nosotros seamos absolutamente ecológicos.

Una vez más, el diseño web en 2020 se centrará en la narración de historias y la inmersión de los visitantes en una experiencia única.

Future Living se da cuenta de ello, y han creado un precioso sitio web con ilustraciones (que evocan sentimientos positivos) y explicaciones sencillas.

Cuando se trata de usar los principios de la tridimensionalidad, Future Living también crea profundidad con sombras y colores diferentes, no sólo animaciones.

Sin embargo, el mejor ejemplo de uso de colores para crear el efecto 3D es Mortgage Hub.

Aunque no están cargados de animaciones, los distribuidores de hipotecas crean profundidad al entremezclar diferentes tonos de color y visuales.

Como también se consideran una forma más afable de hipotecar, han escogido diseños que asisten a los visitantes a sentirse tal y como si fuesen amigos de ellos.

Sin embargo, los principios de la tridimensionalidad también contribuyen en buena medida a crear una sensación de diseño dinámica (en vez de plana) y a mejorar la experiencia del usuario.

A medida que las tecnologías progresan y dan a los diseñadores y desarrolladores estas herramientas increíblemente poderosas, la cultura de la tecnología cambia la conversación cara el significado y la narrativa en vez de la emoción y la sensación.

Falter Inferno por Wild.

Una representación del averno viviente de el día de hoy, desafiándote a mirarte en el espéculo.

La teoría de la Gestalt implica que el todo es mayor que la suma de sus partes.

Cuando solucionamos un inconveniente de negocio con el diseño, contribuimos a algo más grande que el bienestar de una compañía.

Afectar a las personas con productos es una responsabilidad que va más allá del ámbito judicial.

El impacto social está cobrando impulso y lo que la empresa representa en el desempeño de su trabajo es tan importante como la calidad del producto o bien servicio.

Por qué haces algo será más esencial que lo que haces.

1.10) Asombrosa animación

Existe la idea equivocada de que la animación compleja depende del hardware hasta el punto de que no tiene sentido producirla para la masa de procesadores lentos.

Resulta que hay productos capaces de superar los estándares de la industria escritos para hardware lento sin depender de los fabricantes de hardware.

GreenSock es una de esas empresas.

Hacen plugins y herramientas de desarrollo para animación interactiva.

De alguna forma optimizan el proceso de implementación de proyectos interactivos para trabajar en prácticamente cualquier dispositivo de forma «eficiente y sin problemas»

Maíz.

Revolución de Resn en GreenSock.

La moción cuenta una historia mejor que las palabras.

Con mejor tecnología como TweenMax y WebGL, se trata de poner sustancia en la animación.

Para muchas empresas de diseño, nosotros incluidos, es un terreno inexplorado, pero está bien que por último la animación de calidad se transforme en masas.

Esto conducirá a una saturación de mierda y a una purga inevitable.

Es hora de hacer un movimiento.

Literalmente

1.11) Asimetría y pantalla dividida

La disposición de los bloques es un clásico.

Refleja un flujo de información fácilmente asimilable cuando los conceptos han definido límites.

Atiende a la sensación de finalización y sólo ayuda a entender mejor la estructura.

Los bloques significan simetría.

Sin embargo, hay una tendencia asimétrica que siempre y en toda circunstancia está ahí, pero que nunca llega a la corriente dominante.

Especialmente con las extensas pantallas de escritorio de hoy en día.

Baas Amsterdam una disposición asimétrica.

 

Sentimos que el año que viene es cuando la asimetría hace otra reaparición.

En primer sitio, todo el mundo está habituado a tratar con múltiples herramientas que luchan por la propiedad de la pantalla.

Nos sentimos cómodos con las configuraciones de pantalla dividida y este principio también se está transformando en diseños de una sola plataforma.

2019 Boletín Anual por Abb-d Choudhury y Sara Scobie.

Lo que originalmente era un enfoque utilitario para dar 2 bloques de información separados en una pantalla, ahora se transforma en una forma visualmente atractiva de presentar cualquier tipo de información por el simple hecho de hacerlo.

La reina de la asimetría en dos mil veinte es Zhenya Rynzhuk.

Emocionado de ver su progreso.

Dale un seguimiento.

Separarse.

1.12) Degradados de baja intensidad

La tendencia general del diseño que la tecnología se está orientando hacia la automatización, la delegación de la IA, menos es más y todo de ese tipo.

Ya no es para redactar sobre eso.

Sin embargo, los elementos visuales atribuidos a esta clase de diseño se están abriendo camino en lo que prosigue siendo un trabajo muy humano.

Una de ellas es la sutileza de los colores, así como la simplificación y la reducción.

La idea de que algo es inteligente y automatizado trae la luz y los matices de ensueño.

2018 fue un año de gradientes azules y morados.

2019 es el mismo mas más suave.

Esperando ver más de esa dilución en 2020.

Doctor fuego con agua.

1.13) Colores armoniosos

Los colores de dos mil veinte combinan «optimismo con subestimación, una forma atemporal de aligerar»

En general, los colores aguardados para la tendencia a través de todas las industrias de diseño son mucho más naturales que la paleta de colores de los dos años precedentes.

No quiere decir que todos y cada uno de los colores tengan que ser de la misma paleta.

Un elemento de color refulgente fuera de lugar transmite el efecto aún mejor.

Baja el tono.

1.14) Escritura humana

El progreso de la tendencia de la escritura de UX de los últimos 2 años establece los estándares altos para los escritores en diseño.

El término «escritura UX» en sí mismo se desvanecerá, en tanto que cualquier producto que se escriba para la gente es escritura UX.

El texto no acompaña al diseño, es una parte de él.

El contexto importa, el autor importa.

El texto es tan esencial como lo que pasa después – la imagen es la psique del lector y su acción.

La escritura humana deja al lector juzgar, escoger y relacionarse con el producto.

Inspirado por Maxim Ilyahov.

Hay sin palabras mágicas .

1.15) Experiencias combinadas

Las imágenes son más fuertes que las palabras.

Combinar vídeos sin control de carga rápida integrados en los diseños es una buena forma de animar la experiencia.

El contenido es el rey y la manera en que se entrega juega un papel esencial en el impacto que produce.

Mezclar el contenido significa construir una experiencia sana en sus términos.

Más adelante, hablaremos de amoldar la experiencia en función del comportamiento del usuario, mas la última tendencia es un sitio web que no consiste en pantallas, ilustraciones y vídeos.

Es la composición de todo.

Anime «OBSOLETO» por JUNNIE.

Construya experiencias, no kits de construcción.

1.16) La belleza ha vuelto

No hay mucho que decir aquí.

Escucha esto.

Sagmeister & Walsh Belleza.

«Asegúrate de que parezca hecho por humanos, para humanos.» – Stefan Sagmeister

1.17) Desvelador

La kriptonita de un diseñador es desarrollo.

A veces diseñamos cosas que son imposibles de incorporar en un cronograma o bien presupuesto específico, o bien en equipo.

Algunos diseñadores aprenden a codificar y se vuelven «peligrosos» por el hecho de que saben lo suficiente para discutir, mas no lo suficiente para lograrlo.

Esta dicotomía tiene que acabar en 2020 y gracias a herramientas como Webflow, el futuro está aquí.

Básicamente, es una herramienta visual que te deja diseñar cuanto quieras siempre que se pueda hacer en HTML y CSS.

Cada movimiento de píxeles es un cambio de código, lo que hace de este enfoque una forma idónea para que los diseñadores empiecen a codificar.

Diseño por Ryan Morrison » />

Webflow sitio web de comercio electrónico hecho en Webflow.

Diseño de Ryan Morrison.

Cuando todo se orienta cara el diseño basado en la interacción, se hace más difícil explicar cómo debería funcionar y verse la interacción.

La importancia y la necesidad de una herramienta visual como esa son difíciles de exagerar.

Ser un diseñador «peligroso».

Mézclate con el código.

1.18) Espacio vacío

Cuando los elementos luchan por llamar la atención, ninguno de ellos recibe lo suficiente.

Cuando hay un foco en un factor, éste atrae toda la atención.

Dependiendo del mensaje que la interfaz de usuario está entregando, es importante darle un tanto de espacio, para que ese mensaje se hunda.

Existen espacios vacíos micro y macro, espacios de texto y de párrafos, pueden ser activos y pasivos, y todos ellos escalables.

Tiene un aspecto pragmático, ya que tendemos a procesar la información condensada por más tiempo y con menos comprensión.

Hola lunes estudio creativo página de comienzo con mucho espacio en blanco.

Rodeando la idea con espacio vacío es una manera de hacer que la idea destaque.

Ahora vamos a asegurarnos de que lo que se destaca vale la pena.

Nada es algo.

1.19) Renders pesados

Mientras que es difícil imaginar a un diseñador cuyo comportamiento por defecto no implica un conjunto de iconos vectoriales y un bloque de «nuestras ventajas», la corteza superior de la industria lo está llevando de vuelta a escenarios simples y renders estelares.

Impresionante página de presentación y aterrizaje de Apple AirPods Pro.

Para presentar un producto o bien un servicio en 2020, más empresas utilizarán imágenes superdetalladas de los productos y de las personas que los emplean.

La alta definición emula una experiencia prácticamente táctil que está a un paso de una compra.

A pesar de que hay posibles problemas de tiempo de carga, con las tecnologías adecuadas y el UX variable en su sitio, las cosas pueden ponerse feas.

Tan real que puedo olerlo.

1.20) UX variable

Así como hay diferentes géneros de carácter, hay diferentes géneros de comportamiento en línea.

Durante un buen tiempo, solíamos atender a un usuario medio en un contexto medio con un nivel de compromiso medio.

Somos capaces de cambiar la experiencia para un número infinito de personas basándonos en su comportamiento a la vista.

La analítica moderna nos deja determinar con quién está tratando: con un vagabundo que apenas está navegando, una pista incierta o bien un héroe determinado.

Dependiendo de la cantidad de tiempo que pasan en una pantalla o de la velocidad de desplazamiento, un sitio web se comporta de manera diferente.

Adoptará una postura violenta en la investigación de los usuarios y es posible que no sea una opción para el diseño de servicios, mas los diseñadores de marcas tendrán las experiencias adaptadas.

Eso significa comprender la escena, el estado de ánimo y las repercusiones de las acciones que un usuario está efectuando.

Enseñe a sus diseños a entender el contexto.

El movimiento PWA canaliza la brecha entre las aplicaciones y la página web móvil.

Se puede acceder a la misma funcionalidad de 2 maneras, lo que fuerza a los diseñadores a crear patrones de UX consistentes.

Una de las formas en que las aplicaciones y los sitios móviles son diferentes es que estos últimos precisan mediación: un navegador.

2019 es el año en el que el primer navegador móvil real, Cake, se convirtió en un virus.

La comediante Esther Povitsky haciendo demostraciones del navegador móvil Cake.

Técnicamente es una aplicación de la AppStore que está configurada para liberar a los usuarios de las aplicaciones.

Pero lo que hace es suministrar una experiencia similar a la de una aplicación familiar cuando se emplean los motores de búsqueda y se navega por los sitios web.

Los PWAs están aquí para quedarse y con el apoyo de los navegadores móviles, podemos esperar que más de ellos lleguen al mercado.

Acepta el golpe.

1.21) Solapamiento tipográfico

Es la extensión de la tendencia de la tipografía audaz.

Los títulos basados en pósters sobrepuestos son una alternativa al sonido.

Puede dar un mensaje en un tono específico con esto y de una manera gráficamente atractiva.

Orkestra los títulos de las páginas de inicio que se sobreponen a las imágenes.

Spatzek el estudio no tiene inconvenientes.

Debido a la cantidad de información textual que consumimos diariamente, tendemos a pronunciar líneas que resaltan.

Destacarlos, en un caso así, es el auténtico reto.

Estudio Largo utiliza texto sobrepuesto para ilustrar el vídeo de ellos trabajando en un proyecto.

Ponga una palabra al respecto.

1.22) Otras ilustraciones

Para el 2020 vamos a tener todo ilustrado hasta el punto de que estamos reinventando estilos de ilustración que no son más que el producto de las hermosas artes regeneradas en los medios digitales.

Esto abre una ventana de oportunidades para los artistas que detestan las ilustraciones de archivo.

Absurd.design ilustraciones en empleo.

Con esta tendencia, todo se reduce a cómo se comercializa.

El diseño absurdo es un buen ejemplo de cómo adoptar un enfoque puramente artístico para producir contenido y ponerlo en las vías de negocio.

Catálogo Interactivo Qode menú ilustrado.

Fiesta en el frente, negocios en la una parte de atrás.

Los productos que ofrecen una experiencia personalizada son la última tendencia del año que viene.

Existen métodos de conversión probados y requisitos anteriores para objetivos específicos, pero si pensamos en apoyar una marca con imágenes potentes, podemos emplear todos los activos del sitio web, siendo la navegación uno de ellos.

Corfes ha invertido la navegación instándole a escalar la cima en vez de bajar.

La navegación puede contribuir al efecto si se entreteje lógicamente en la historia.

Existen dos géneros de elementos de navegación: visibles y ocultos.

Es esencial diseñar la navegación basándose en la manera en que fluye la información.

Calle 2 menú de navegación repitiendo el posicionamiento del título de la página.

Navegue por el efecto, no por su residuo.

1.23) Imágenes a pantalla completa

Desplegar la alineación central del contenido inducida por los medios sociales es un desafío en múltiples niveles.

En primer lugar, el centro de la pantalla es donde nuestros ojos naturalmente gravitan, en segundo lugar, jugamos una apuesta más segura al colocar contenido significativo en el centro de la página, no obstante, hay beneficios al utilizar todo el estado de la página.

Estudio de Marca es una mira a un planeta orate.

Para tener la oportunidad de crear una experiencia de inmersión, tiene sentido enseñar que el estado de la pantalla es sólo una parte del contenido visible.

Esto anima a los usuarios a explorar más y reduce potencialmente la tasa de rebote.

Shimane Misato de Japón es una historia interactiva a pantalla completa sobre algo.

La profundidad de la experiencia a pantalla completa depende y sólo puede ser limitada por el efecto que se está produciendo.

Tiene sentido para temas difíciles y problemas socialmente significativos en los que es importante poner a una persona en el contexto conveniente.

Alimento para la pesca le está llevando a la profundidad del problema de la industria pesquera.

No construyas muros, destrúyelos.

1.24) Visualización de datos

Debido a que las tecnologías que hacen posible experiencias interactivas increíbles son cada vez más alcanzables, los profesionales del marketing pueden edificar sus estrategias completas en torno a los datos visuales.

Mostrar es mejor que decir, mas si se puede decir y mostrar, es la narración definitiva.

WebGL y 3D es una poderosa combinación si hay datos significativos para enseñar.

Todo lo que recoge datos es una fuente.

Todo lo que tenemos que hacer es filtrarlo, encontrar los más impactantes y llevarlos a dar un paseo.

Este es Otoño visualización de la gestión acústica del automóvil.

Es una ciencia y esto hace que parezca que lo es.

La visualización de datos no son sólo cuadros y gráficos diseñados en una pieza digerible.

Dependiendo de lo que el usuario pueda estimar, somos libres de escoger fuentes de datos y presentarlas de forma gráfica.

Visualice lo que importa, no lo que está disponible.

1.25) UX ininterrumpido

• ¿Necesita un producto? Haga clic aquí y visite esta página.
• ¿Necesita ver más fotografías? Haga clic aquí y desplácese.
• ¿Quieres ciertas críticas? Haga clic aquí y consulte la sección inferior.
• ¿Quieres comprar? Haga clic en el icono de la cesta, entonces vaya a la página de pago, traiga su tarjeta de crédito, pero inscríbase antes, llene veintisiete cuadros de texto, acepte los Términos y Condiciones, consiga una factura por correo electrónico, haga un seguimiento de su pedido, y ya está aquí.

Cada paso de este proceso le está urgiendo a dudar de su intención de compra y a rebotar.

Cada caja que tienes que llenar toma de tu tiempo haciendo otra cosa.

La motivación tiene que ser alta como una cometa para pasar por un procedimiento genérico de compra en línea.

Y puede serlo, porque la gente sabe cómo comercializar las cosas el día de hoy en día.

Y si todo cuanto un sitio precisa de usted para mandar una compra, fue su intención.

Un botón para supervisarlo todo.

El móvil está aprovechando eso integrando los pagos en ademanes simples y también identificaciones de cara.

La web aún no ha visto el aumento de esta tendencia.

Configuración de bicis por Den Klenkov es un caso increíble de una experiencia de adquiere entretejida con la exploración y la prueba del producto.

La tecnología tiene la obligación para con la humanidad de ser negligente con la privacidad.

La única forma de solventarlo no es eludir los datos personales, sino más bien emplearlos para un fin mejor.

Un usuario no debe elucubrar si puede confiar en usted su información personal.

Si usted está solicitando datos, éstos deben estar engastados específicamente para que permanezcan seguros.

Y está en nosotros.

Nuestro trabajo es tomar la intención del usuario y convertirla en una delicia.

Lo que sea que estemos utilizando para hacer eso está bien si se sostiene dentro de los límites de la ética y se alinea con los requisitos modernos de seguridad.

Internet marcha con cookies.

Sin ellos, se convertiría en una mierda.

La próxima será la geolocalización.

El UX ininterrumpido comienza donde la información sensible es promocionada como un sacramento comercial, no como una mercancía.

No se trata sólo de comprar.

Cualquier objetivo del usuario ha de ser tratado de esa forma.

Si ganó una batalla por la atención, no se le permite perder la batalla por la satisfacción.

No interrumpa a una persona que desea darle su dinero.

1.26) Sitios web dirigidos a los milenials

Los sitios dirigidos a los Millennials son una tendencia creciente que se hizo evidente hace más de 6 meses.

Está ganando impulso, y no hay posibilidad de que se detenga.

Hay múltiples razones para ello.

En primer lugar, de forma lenta pero segura, los milenios se están transformando en el público objetivo con independencia financiera; por consiguiente, no puede permitirse el lujo de perder esta ocasión.

En segundo sitio, cada vez más fabricantes concentran su atención en los jóvenes, creando productos que se ajustan a sus necesidades específicas.

Por último, es el público más activo en los espacios en línea: chatean, twittean, comparten.

Por lo tanto, los sitios con un toque de estética juvenil están destinados a surgir aquí, allá y casi en todas partes.

Para proseguir esta tendencia, experimente con elementos de interfaz únicos, desde los cursores del ratón hasta los diseños.

No tenga miedo de usar algunos detalles juveniles.

1.27) Color del año: Azul contra Rosa

Cada año Pantone declara el tono del año.

El dos mil veinte va a ser todo sobre el Azul Clásico que es muy elegante, simple, y que sobresale en el tiempo.

Bueno, esto suena bien.

Sin embargo, siempre y en toda circunstancia hay una trampa.

En primer sitio, como prueba la práctica, Pantone no tiene ninguna influencia en el ámbito del diseño web.

Por lo general, esta nueva pasa desapercibida.

Los diseñadores prefieren adherirse a los colores de la marca, aderezándolos con ciertas tonalidades interesantes.

Por lo tanto, es poco probable que Classic Blue sea una gran tendencia de diseño web en dos mil veinte.

En segundo sitio, como ha declarado el editor jefe de WDD, el año anterior, así como el próximo, se centrará más bien en el color Cyberpunk Pink.

Este tono rebelde se ajusta de forma perfecta a las corrientes principales de hoy en día.

Es progresista e intercultural, y efectivamente te empuja a dejar volar tu imaginación.

En resumen, si deseas jugar limpio, prueba el Classic Blue; sin embargo, si quieres conquistar el mundo digital, el rosa ciberpunk debería ser tu punto de partida para probar con el color.

1.28) Animati

Como hemos mencionado previamente, el año 2019 estuvo poblado de micro-interactúes.

Había una exuberancia de elementos dinámicos en la interfaz de usuario: pequeño, grande, lento, rápido.

Algunos de ellos cambian los detalles básicos de la interfaz, al paso que otros van de la mano de los elementos ordinarios de la interfaz de usuario.

Esta enorme tendencia no nos dejará pronto.

La tendencia general nos muestra que los desarrolladores web, así como la audiencia, están listos para cambiar de interfaces estáticas a dinámicas.

Las micro-interacciones, transiciones, efectos dinámicos junto con animaciones de varias escalas, e incluso los fondos no estáticos son bienvenidos.

¿Qué puedo decir? A la gente le gusta la acción.

Además, a la gente le agrada interactuar con los sitios y desempeñar un papel no sólo de espectador sino también de participante activo en la experiencia de usuario.

Así que prepárese para darle vida a su próximo proyecto, puesto que las interfaces dinámicas con elementos interactivos y ensayos en cuadro van a ser una tendencia en el diseño web en dos mil veinte.

1.29) Elementos ciberpunk, futuristas y de alta tecnología

Todo lo que traiga una sensación de futuro lejano con la dominación de los robots y la obsesión por el cosmos estará en demanda.

Por lo tanto, una tendencia refrescante de diseño web en dos mil veinte se trata del trío de elementos ciberpunk, futuristas y de alta tecnología.

No viene como un rayo del cielo azul.

Al igual que la tendencia precedente, esta tendencia también viene de 2019, especialmente el ciberpunk que se convirtió en la comidilla de la urbe a finales del año pasado.

Una cosa a destacar, al paso que en el año anterior, los ensayos con lona de alta tecnología, así como las soluciones futuristas, se inspiraron mucho en la era retro: duotono, glitch, neón, cambiará su dirección en dos mil veinte.

Aunque ciertas «ráfagas del pasado» sin duda nos complacerán, ya que la añoranza nunca muere.

1.30) Diseños artísticos de sitios web

Esta tendencia se deriva del hecho de que las carteras en línea corren por todo el mundo en estos días.

Cada vez más creativos se establecen en línea.

Por lo tanto, aparecerán cada vez más ideas divertidas, poco usuales y creativas.

El año pasado se vieron muchas ilustraciones antojadizas, iconos animados, cursores de ratón adaptados, animaciones únicas.

Este año no se quedará atrás, eso es seguro.

Será abigarrado, diverso y también inspirador.

Prepárese para contemplar algunos diseños de sitios excepcionales que rezuman vibraciones artísticas.

Para estar a la altura de la tendencia, descarte las imágenes de stock y opte por los gráficos adaptados.

Ponga sus ojos en animaciones inusuales y también incorpore en su diseño ciertas características peculiares que lo convertirán en una auténtica obra maestra.

1.31) Cabeceras con texto

Mencioné en mi artículo del año pasado que la experimentación con las áreas de héroes – la una parte del sitio en la que se carga por vez primera el sitio, también famosa como el área «por sobre el pliegue» – probablemente se hará más evidente a lo largo de dos mil diecinueve.

Este fue claramente el caso, y uno de esos ensayos fue el de los héroes de texto.

Mientras que algunas áreas de héroes se han involucrado más con diferentes tipos de elementos que sólo el texto sobre imagen estándar establecido, esta tendencia de «sólo texto» es intrigante en el sentido de que está eliminando la típica imagen de fondo y dejando que la tipografía haga el trabajo.

El sitio de Phase3 es un gran ejemplo de cómo desnudar las cosas en el área de los héroes, y de cómo centrarse sólo en la tipografía (si bien el fondo que cambia de color, que puedes ver en su lugar, es un sutil toque agradable).

Esa tipografía también tiene cierta personalidad, en vez de una fuente sans-serif estándar o demasiado utilizada.

También puedes ver esta tendencia con The New York Times, que emparejó una fuente personalizada con animaciones para su encabezado de sólo texto para su sitio del Festival de Comida.

1.32) Ilustraciones implicadas

Aunque las ilustraciones han sido usuales en los sitios web a lo largo de muchos años, hay una tendencia creciente de tener ilustraciones personalizadas, detalladas y bien ejecutadas que engalanan los sitios últimamente, y estoy convencido de que esta es una tendencia que apenas está empezando.

Sitios web como DottedSign (arriba) y Fixate (abajo) son grandes ejemplos de esta tendencia creciente.

Ambos sitios web emplean ilustraciones realmente bien pensadas y detalladas, no sólo en la sección de héroes de su lugar, sino más bien en todo el sitio web para unirlo todo.

Emparejar las ilustraciones con un tanto de animación verdaderamente ayuda a captar la atención y puede usarse como otra forma de comunicación con sus visitantes.

Las ilustraciones animadas son geniales como herramienta complementaria al texto, y frecuentemente son mejores para ilustrar y comunicar cuando se emplean como elementos más sutiles y secundarios en vez del principal.

1.33) Colores y tipografía de inspiración vintage

En mi artículo del año pasado, mencioné que la nostalgia en el diseño es un retroceso a los periodos de tiempo anteriores.

A menudo esto está influenciado por otros medios de comunicación de la época, como la televisión y las gacetas, singularmente si se trata de un retroceso a la época precedente a la Internet.

En el año dos mil veinte, preveo que esta tendencia tomará una forma diferente.

En sitio de ir todo en un aspecto retro o throwback, veo sitios web que toman pedazos nostálgicos y los remezclan con un estilo moderno.

Una de las inspiraciones más comunes en el diseño de sitios hoy en día es el empleo de colores y/o tipografías vintage como una forma de transmitir este sentimiento de añoranza.

El nuevo sitio de Chrissy Teigen es un gran ejemplo del empleo de una fuente con repercusión vintage con una combinación de colores de inspiración vintage (terrosos, pero refulgentes).

El sitio web de tendencias de tipografía popular Typewolf también emplea tipografía y colores vintage para influir en el diseño de su sitio, sin dejar de ser moderno en cuanto a la estética.

Su fuente emparejada con el color de fondo se siente vintage, pero no está fechada.

1.34) Blanco y negro

Monocromático es tan 2019.

El año dos mil veinte será el año en que más y más sitios experimentarán con la ausencia total de color, adhiriéndose sólo al blanco y negro con poquísimo entremedio.

Considérelo monocromático que se ha vuelto minimalista.

El lugar de Cahn Wilson es un enorme ejemplo de una estética de diseño ausente de color.

Enfocado eminentemente en blanco y negro con imágenes en escala de grises, el sitio es limpio, nítido, moderno, y a la moda con otros sitios contemporáneos.

El sitio de Alexsandr Yaremenko (abajo) también sostiene con el esquema de color en blanco y negro fuera de los ejemplos de su portafolio.

1.35) Las cuadrículas dominantes se hallan con las cartas

La mayoría de los sitios están diseñados en un sistema de cuadrícula invisible que ayuda a mantener los elementos de la página organizados y en línea.

En 2020, sin embargo, preveo que estas rejas serán visualmente más dominantes y se utilizarán como la principal estética de diseño, claramente inspirada en la popular tendencia de diseño de las «tarjetas».

El lugar de Frames for Future es un gran ejemplo del empleo de la cuadrícula como una estética de diseño en vez de sólo una herramienta de diseño.

El contenido de su lugar está organizado en grandes rectángulos alineados en un formato de cuadrícula.

La mayor parte del sitio de Evergib (abajo) también está dispuesto en una cuadrícula, con «celdas» de diferente tamaño para darle dimensión, interés visual y para cambiar la cadencia.

1.36) Tipografía de contorno

Si no se puede decir ya, me gusta mucho la tipografía y me fijo en las tendencias tipográficas particularmente.

Una tendencia emergente es la tipografía esbozada, y podemos esperar verla cada vez más en 2020.

«Ser distintivo desde el punto de vista tipográfico se ha transformado en un imperativo en la página web, lo que es sorprendente si se tiene en cuenta que no hace mucho tiempo los diseñadores sólo tenían un puñado de fuentes con las que trabajar», explica Vinh, de Adobe.

«Tenemos más fuentes web; precisamos más atrevimiento, y también una tipografía web más diversa» Está claro que esto es evidente no sólo en esta tendencia, sino en otras ya mencionadas aquí.

El lugar de la Fase tres citado al principio de este artículo presenta esta tipografía resumida.

Redscout también emplea una fuente con contorno grande como una parte de su estética de diseño web, combinando la animación para sacar el «relleno» de las letras dejando sólo el contorno cuando se desplaza hacia abajo de la página.

1.37) Tamaños de fuentes masivos

Sí, otra tendencia basada en la tipografía, mas ¿cómo puedes pasar por alto los tamaños de fuentes cada vez más grandes en la web? La tendencia para el año dos mil veinte es una tipografía más grande que la que se puede leer desde el otro lado de la sala.

Redscout y el Festival de Comida del New York Times (ambos presentados anteriormente en este artículo) son grandes ejemplos de esta tendencia.

Baina (arriba) lleva el tamaño de la fuente de su nombre a alturas muy grandes, ocupando prácticamente la mitad de la vista de su página de inicio.

HalloBasis cuenta con una tipografía muy grande que llena el mirador como un estilo de navegación para ayudar a los visitantes a ir a diferentes unas partes de su lugar.

1.38) Formas y patrones geométricos

El año pasado mencioné que en el 2019 las formas más fluidas y orgánicas estarían de moda, así que no es sorprendente que lo opuesto también esté de moda.

Las formas geométricas, las líneas y los patrones están retornando para el año 2020.

El sitio web de la Future London Academy presenta formas geométricas animadas en el área de héroes de su lugar, también en línea con las tendencias de formas geométricas y animación citadas anteriormente.

El sitio web de XXXI (abajo) para su Introducción a la Codificación emplea formas geométricas de forma similar.

1.39) Animaciones activadas por el usuario

Normalmente, cuando pensamos en las animaciones, vemos que se producen por sí solas, con independencia de cualquier acción que podamos realizar en la página como visitantes del sitio.

Una tendencia creciente en el diseño web, sin embargo, es tener la animación desencadenada por algún género de entrada o acción del visitante.

La combinación de la interacción del usuario con la animación de buen gusto y el género de buen gusto es una de las cosas más emocionantes que le han sucedido a la tipografía en una generación.

A pesar de que el diseño web es cada vez más capaz de amoldarse a la expresividad del diseño impreso, la puesta en marcha de la tipografía como respuesta a las entradas del usuario añade una nueva dimensión a la forma en que pensamos sobre la comunicación escrita.

1.40) Las combinaciones de colores de moda llegan a los sitios web

Estoy seguro de que todos estamos familiarizados con las combinaciones y combinaciones de colores que están de tendencia en otras partes de nuestras vidas, así sea la música, la ropa, los medios sociales, etc.

Espero que en el 2020 ciertas de estas combinaciones de colores se abran camino en los diseños de los sitios.

Un ejemplo de una combinación de colores de moda es el azul primario y el rosa pálido/rubor sucio, popularizado por Pinterest e Instagram.

Los sitios de Collate Art (arriba) y Datalands (abajo) presentan esta combinación de colores de tendencia en sus diseños.

Otros ejemplos de combinaciones de colores de moda incluyen tonos de joya (verdes, morados), tonos terrosos (bronceados, cobrizos, verdes, texturas de madera) y combinaciones de colores iridiscentes/perlados (pasteles que se unen como un líquido, dando un aspecto prácticamente metálico).

1.41) Algo de dignidad

El tren del bombo tecnológico mantiene al mundo entero alarma.

En la búsqueda de la adulación inmediata, comenzamos a olvidar lo que nos trajo a la industria y eso son años de estudio, golpes, moratones y algún género de experiencia ganada.

Al saltar de forma ciega en el tren de la publicidad, descuidamos que para un puñado de aficionados, características y reposiciones de Dribbble.

Las tendencias de diseño son geniales, mas la opinión propia es mejor.

1.42) Diseño plano o flat design

Esta tendencia está en curso, y no se desvanecerá pronto.

El diseño plano es minimalista en la naturaleza, usando espacios abiertos limpios y colores brillantes. Lo que lo separa de otros diseños son las fáciles pero visualmente atractivas ilustraciones bidimensionales.

El diseño plano o flat design surgió porque los diseñadores de páginas web siempre están en pos de diseños receptivos que puedan acelerar los tiempos de carga. El desempeño del sitio web deja una experiencia de navegación más agradable, independientemente del dispositivo que se utilice.

Desde la perspectiva de la experiencia del usuario (UX), el diseño plano es el diseño preferido debido a su menor desorden. Los usuarios pueden, por lo tanto, centrarse en el contenido más esencial, navegando fácilmente a través de la página y el sitio.

1.43) GIFs animados

Los usuarios querrán localizar la información que procuran al instante. De esta manera, los sitios web disponen de un tiempo mínimo para captar la atención del usuario, ya de por sí limitada.

Los diseñadores web confían en los GIF animados para cumplir con este propósito. Uno de los beneficios del uso de los MIC es la transmisión de ideas complejas de una manera que los usuarios puedan entender fácilmente, de la manera más atractiva posible.

Otra cosa buena sobre el uso de los GIFs es su alta accesibilidad. Si bien ciertos GIFs son pesados en datos, se muestran en múltiples navegadores y dispositivos.

1.44) Espacio en blanco

Este es otro diseño web estándar de Filipinas que todavía veremos en los próximos años. La mentalidad de los creativos hoy en día es menos es más. Es verdad que los diseños que vemos el día de hoy en día tienen diseños más simples que emplean el espacio en blanco para enfatizar el contenido más esencial.

El espacio en blanco, cuando se utiliza correctamente, mejora la legibilidad del contenido textual y facilita la digestión de la información. Sí, hay una sobrecarga de información, y el diseño y el contenido deben separarse de este escollo.

1.45) Formas orgánicas

Aparte de la asimetría y los patrones, los diseños web se están orientando hacia formas orgánicas. La irregularidad y el desnivel de las formas tienen un encanto único, como si se dijera que ser imperfecto está bien al 100 por cien .

Las formas parecen más humanas y más accesibles pues semejan dibujadas a mano. Hay una conexión instantánea pese a la apariencia inusual y también inesperada. Las formas también llaman la atención de los usuarios con facilidad, con lo que estos son los fondos más convenientes de contenido valioso.

Como tal, los diseñadores web pueden jugar a su alrededor. Pueden utilizar formas orgánicas como capa primaria y añadir otra para progresar la profundidad de los visuales o conjuntar las formas con otros elementos como una imagen. De esta manera, la monotonía se rompe.

1.46) Rejilla rota

Los diseñadores web solían trabajar con una cuadrícula fija, una práctica estándar. Mas todo cambió cuando existían disposiciones asimétricas. Ahora, también están trabajando con redes rotas.

Cuando hay consistencia en la alineación, es más fácil atraer a la audiencia. No obstante, esta puede ser la experiencia más desganada, con independencia de lo real que sea el diseño.

Las rejas rotas dejan a los diseñadores dejar fluir su creatividad. Esta libertad creativa puede impulsar el descubrimiento de nuevos diseños para dos mil veinte y más allá.

La cuadrícula es otra capa que puede guiar a los usuarios a las secciones en las que deberían estar mirando en primer lugar. Estas son las áreas de acción del sitio o partes que de otra forma son ignoradas si no es por los diseños únicos que las rodean.

1.47) Contenido kondo

Si no el espacio negativo, los diseñadores web están en kondoing el contenido del sitio web. Esto se aplica desde el código cara arriba, incluyendo tanto el contenido textual como el visual.

Es como decidir si ciertos elementos prosiguen añadiendo valor al sitio web o bien no. De lo contrario, el contenido intrascendente puede ser eliminado, perturbado o bien sustituido por otros elementos que de otra manera tendrían un propósito de valor añadido.

Es decir, si no hay chispa de alegría alguna cuando miras cierto elemento visual, deshazte de él.

1.48) Narración visual

Esta es quizás la tendencia más significativa para este año pues las marcas todavía están buscando formas de edificar sus comunidades en línea.

Un punto fuerte de la narración visual es el equilibrio entre la copia y lo visual. Destaca el propósito y la historia, relacionando el»qué» con el»cómo» del diseño web sin perder de vista quiénes serán los usuarios.

1.49) Gráficos isométricos

No se confunda, pero los gráficos isométricos se refieren a la ilustración o bien al dibujo de objetos tridimensionales en 2 dimensiones. Los gráficos son más complejos, mas se jactan del elemento de profundidad que impulsa una experiencia más inmersiva.

Las ilustraciones hechas a la medida son a menudo impulsadas por la marca, una forma memorable de presentar la marca y su mensaje que ninguna fotografía de stock puede hacer.

1.50) Texto interrumpido

Esta es una consecuencia del uso de rejas rotas en el diseño. Los elementos sobrepuestos permiten un respiro para las interrupciones de bienvenida, como el texto interrumpido.

Es más de estilo de contenido para incluir motivos de diseño y elementos gráficos. La tendencia conduce a experiencias digitales más ricas.

Las tendencias pueden ir y venir, pero estas son algunas de las que vamos a ver más de este 2020 y quizás, los años venideros.

1.51) Diseño Mobile-First

Teniendo en cuenta el hecho de que los consumidores medios examinan sus smartphones unas 150 veces al día, no es difícil percatarse de que el diseño de su lugar móvil es más importante que la apariencia de la versión de escritorio.

He aquí algunas estadísticas para confirmar lo esencial que es ser amigable con el móvil:

• El consumo de Internet de los móviles creció casi un 80 por ciento en el período . Hoy en día, casi el sesenta por ciento de todo el acceso a Internet se efectúa a través de teléfonos inteligentes.
• La mitad de los ingresos totales del comercio electrónico procede de las plataformas móviles.
• El 40 por cien de los propietarios de dispositivos móviles procuran productos y servicios B2B en estos dispositivos.

A pesar de que estos números dejan claro que los usuarios prefieren sitios optimizados para móviles, la investigación ha encontrado que más del noventa por cien de las pequeñas empresas no tienen sitios web para móviles

Como se mencionó anteriormente, el cuarenta por ciento de los usuarios en línea declararon que si un sitio no está optimado para móviles, lo más probable es que lo abandonen y se vayan a la competencia.

Además, Google da prioridad a los sitios para móviles al clasificarlos más arriba en los resultados de búsqueda.

Los diseñadores web son muy conscientes de la importancia de tener un sitio afable para móviles. El diseño de aplicaciones móviles y el diseño web sensible se han convertido en un estándar en el diseño web. Cuando diseñan un sitio, primero crean imágenes que están optimados para dispositivos más pequeños, que se ajustan a la versión de escritorio.

1.52) Rápido y limpio

Puede que tengas el sitio más bonito, pero no te servirá de nada si te lleva años cargarlo.

En promedio, los usuarios aguardan que una página se cargue en no más de tres segundos. En la práctica, el tiempo promedio a fin de que una página de destino móvil se cargue es de quince segundos! Aquí hay más estadísticas:

• Casi el 75 por ciento de los usuarios de móviles han encontrado sitios que tardan demasiado en cargarse.
• Más del 45 por cien de la gente afirma que aguardar a que se carguen las páginas es lo que más les enfada de la navegación en dispositivos móviles.
• Casi el ochenta por cien de los compradores en línea que han tenido problemas con la velocidad de carga del sitio afirman que no volverían a ese lugar de nuevo.

No es de extrañar que la velocidad de carga lenta haga que la mitad de los visitantes del sitio se vayan. En otras palabras, una velocidad de carga lenta equivale a una pérdida de conversiones y de ingresos.

Además, la velocidad de la página también tiene un impacto en la manera en que Google clasifica el contenido.

El motor de búsqueda más grande hizo cambios en sus algoritmos a fin de que las páginas de carga rápida tengan primates en los resultados de búsqueda.

Por lo tanto, si tu objetivo es aparecer en los Search Engines Ranking Positions, es mejor que te cerciores de que tus páginas se carguen de forma súper rápida.

Con esto en psique, los diseñadores web están creando sitios más simples y limpios con menos elementos. Los sitios web cargados con texto pesado están en el pasado. Los sitios web de el día de hoy en día contienen sólo el texto suficiente para trasmitir el mensaje de la marca.

Este texto se combina con imágenes para captar la atención del usuario y captar su atención de forma efectiva. El énfasis está en proporcionar un mejor UX a fin de que los visitantes deseen regresar al sitio web nuevamente.

1.53) El vídeo sigue siendo una tendencia dominante

El vídeo sigue siendo el factor de diseño visual preferido y por una buena razón. Mira estas alucinantes estadísticas de YouTube:

• YouTube recibe mil millones de visitas únicas por mes.
• Cada hora se cargan prácticamente 100 horas de vídeo.
• Alrededor de seis millones de horas de vídeos son vistos cada mes.

Y con las velocidades de conexión a Internet en incesante mejora, los especialistas pronostican que para dos mil veinte, el 80 por cien del tráfico en línea será vídeo.

Aquí está porqué usted debe incluir el vídeo en su diseño del Web site:

• Tener un vídeo atrayente difiere del enfoque estándar del diseño de sitios web y le ayuda a establecer una conexión con los visitantes. Los diferentes tipos de vídeo, como los vídeos explicativos o las descripciones de productos, resuenan instantáneamente con la audiencia y contribuyen a progresar la experiencia del usuario.
• Tener un vídeo en su página de aterrizaje también puede acrecentar significativamente las conversiones y asistir con la generación de clientes del servicio potenciales.
• Los vídeos informativos de alta calidad refuerzan la autoridad y popularidad de su sitio. Esto, a su vez, le ayuda a posicionarse más alto en los resultados de búsqueda orgánicos.
• Por último, los vídeos informativos o bien amenos se comparten más de manera frecuente en los medios sociales. Esto robustece el conocimiento de la marca y mejora aún más la clasificación de su sitio.

1.54) Ilustraciones, animaciones e imágenes de alta calidad

Las grandes imágenes jamás pasan de tendencia.

Los gráficos e ilustraciones atractivos son otra tendencia de diseño que se prefiere como una herramienta eficiente para trasmitir el mensaje de una marca. Con el empleo de herramientas como el retoque automatizado, pueden ser fácilmente personalizadas para amoldarse al tono y la visión de su empresa y ayudarle a destacarse de la competencia.

Los diseñadores web continuarán utilizando transiciones y animaciones como elementos vitales para prosperar la experiencia, el compromiso y la interacción del usuario.

1.55) El apogeo de la tipografía

Las fuentes de calidad que solían ser costosas están ganando popularidad después de que Google Fonts las hiciera gratuitas.

Las fuentes divertidas e interesantes como Roboto y Open Sans están reemplazando a fuentes que antes eran muy populares como Calibri.

Como una parte de la aspiración de un diseño web limpio y fácil, los diseñadores están optando por tipos de letra menos elaborados y los emparejan con colores brillantes, gradientes, personalizaciones y recortes para que las letras destaquen.

Aquí están algunas de las mayores tendencias de tipografía para el dos mil veinte para inspirarte:

• Tipografía animada
• Tipografía subdimensionada en el área de héroes del lugar web
• Serifas
• Recortes y sobreimpresiones
• Tipo resaltado
• Fuentes y géneros de color
• Texto con degradados
• Permitir que el texto y otros elementos se superpongan

1.56) Caos por diseño

¿Alguna vez has mirado un diseño y te has preguntado en qué estaban pensando?

Pero entonces… «eso es realmente muy bonito.»

Parece que hay un montón de diseños por ahí en este momento que presentan una estructura de caos.

Estos proyectos se identifican por una estética que semeja estar por todas partes, pero cuanto más se profundiza en ellos, más parece que se unen.

Los temas comunes incluyen:

• Falta de una cuadrícula obvia
• Mucho movimiento o bien animación a través de múltiples elementos
• Elementos del sitio con el mismo peso visual
• «Demasiadas» fuentes o bien colores
• Elementos sobredimensionados que te hacen pensar en el contenido
• La palabra»de moda» se rompe sin separación silábica
• Elementos que miran desde los bordes del lienzo

Si estas cosas suenan tal y como si pudiesen hacer un desastre del diseño, tienes toda la razón.

Pero lo que está pasando con estos proyectos – y con los equipos de diseño super talentosos que hay detrás de ellos – es que rompen todas y cada una de las reglas y trabajan.

Usted querrá continuar hojeando estos diseños para poder ver lo que viene después.

Cada uno de los ejemplos a continuación incorpora ciertos de estos temas y son increíbles.

1.57) Tipografía de gran tamaño

La tipografía grande y valiente ha sido una tendencia en el diseño de sitios durante algún tiempo (lo hemos explorado aquí en múltiples ocasiones.)

Pero ha habido un tema común hasta ahora: La mayoría de las clases sobredimensionados han sido de la pluralidad sans serif.

Ahora la tendencia está cambiando a una pantalla aún más audaz sobre el scroll: Letras de gran tamaño y fuentes de escritura.

Cada uno de los ejemplos de diseño o bien tendencias que puedes ver por ahí, utiliza esta tendencia de una forma diferente.

Lo que está claro es que este estilo de tipografía marcha mejor con una sola palabra o frase corta. Esta clase de letra puede ser un reto en términos de legibilidad, por lo que la mejor opción es adherirse a un empleo fácil.

1.58) Cabeceras o bien ‘hero images’ estilo póster

Crear una imagen de héroe estilo póster o bien una pantalla de página de comienzo puede ser la tendencia menos discutida en el resumen de este mes, mas puede ser del mismo modo desafiante cuando se trata de diseño.

Con elementos de múltiples capas y elementos en negrita, conseguir que los visuales se colapsen (o expandan) a diferentes vistas sensibles puede llevar algo de trabajo.

Hay muchas maneras diferentes de crear un diseño que prosiga esta tendencia. Lo común es que la primera pantalla es una experiencia visual inmersiva. No se trata de cuánto leer o de 3 lugares para hacer clic; se trata de establecer el escenario para las interacciones futuras.

Lo que frecuentemente hace que este estilo de diseño funcione es una combinación de imágenes increíbles, texto impactante y suficiente curiosidad para hacer que los usuarios exploren más el diseño.

1.59) Salir del mismo sistema de red de interfaz de usuario antiguo

Los diseñadores web han estado atados al sistema de cuadrícula UI que impone límites estrictos y rígidos a la inventiva.

Sin embargo, a medida que los diseñadores web buscan formas innovadoras de hacer el diseño web más interesante, las reglas se están doblando y la cuadrícula de la interfaz de usuario se está rompiendo para crear diseños web embriagadores.

Esta tendencia hace que la experiencia del sitio sea interactiva y hace que el visitante quiera continuar desplazándose por la página para poder ver lo que viene después.

Este estilo funciona realmente bien para blogs de diseño, marcas de moda e incluso portafolios personales.

Aunque es posible que no sea el mejor enfoque para las marcas corporativas que desean mantener un formato más riguroso y tradicional.

Como diseñadores web, hemos estado tan bloqueados en este sistema de cuadrícula rígida, que personalmente estoy deseando que más diseñadores y marcas rompan con el status quo del diseño web.

Esta tendencia empuja un límite que permite a los diseñadores gráficos meditar fuera de la caja y ser más creativos.

1.60) Bocetos y también ilustraciones abstractas

Cada vez son más las marcas que empiezan a usar ilustraciones en sus sitios web, probablemente pues hace que las marcas parezcan más personales y menos corporativas.

Algunos diseños, como el banco online Ally, mezclan la ilustración más abstracta con la fotografía real.

Grammarly hace un enorme trabajo utilizando la ilustración abstracta como una forma de llenar el espacio en blanco de una forma que es estéticamente agradable y no quita el mensaje primordial en la página.

Esta tendencia de diseño web es una gran manera de mezclar un factor más artístico en el diseño de cualquier sitio, haciendo la experiencia en línea más agradable y no sólo una página llena de texto e imágenes.

Podemos aguardar que esta tendencia continúe durante múltiples años.

1.61) El texto grande como centro de atención

En los últimos años, los diseñadores web se han enamorado de la tendencia de grandes imágenes de héroes, animaciones y vídeos de fondo que hacen una declaración en el instante en que se carga la página.

Ahora, algunos diseñadores web están llegando al punto con el empleo de texto demasiado grande que se convierte en el centro de atención.

El texto se sobrepone a las imágenes con fuentes en bastardilla, y los colores refulgentes se emplean con frecuencia para llamar la atención.

Eche un vistazo a la página web de Buffalo Wild Wings, por ejemplo.

Utiliza un texto grande en el centro de la página para decirte exactamente lo que quieren que sepas.

De hecho, en este ejemplo, el texto capta tanta atención que prácticamente no se nota que hay una hamburguesa grande a la vista.

Esta tendencia de diseño web es cada vez más popular para los sitios de cadenas de restoranes, así como para las agencias de diseño y los consultores que quieren sostener sus carteras de diseño al mínimo sin dejar de transmitir el mensaje.

1.62) Establecimiento de la confianza con las historias de los clientes

Personalmente, como vendedor, esta es una de mis tendencias favoritas de diseño web de 2019.

Es una forma excelente de establecer verosimilitud desde el comienzo y hacer que alguien más hable por .

¿Qué mejor manera de vender sus servicios en línea que tener a sus propios clientes al frente?

Tener un caso de uso en la vida real de cómo un producto o bien servicio soluciona un inconveniente del planeta real es más poderoso de lo que lo será una larga lista de características.

Sin embargo, como vendedor, también sé lo curados que pueden ser estos testimonios de front-and-center.

Se puede aguardar que esta tendencia crezca, singularmente con marcas con renombre que quieren una forma de destacar a sus clientes y mostrar cómo marcha su producto, en vez de decircómo funciona.

1.63) Bloques de contenido izquierdo/derecho

El Internet parece no tener suficiente de estos bloques de izquierda/derecha!

Es exactamente lo que uno pensaría que es: contenido puesto en situaciones alternas a la izquierda y a la derecha.

He visto que este estilo se emplea mucho, incluso en mis proyectos profesionales.

Recientemente, le pedí a nuestra agencia creativa que re-crease una maqueta de diseño web para un usuario porque los bloques izquierdo/derecho fueron utilizados una vez más, y me dijeron cortésmente que no cambiarían este estilo porque «simplemente funciona» Por mucho que quisiese ver algo nuevo, debo estar de acuerdo en que es simple, se ve bien y marcha.

Algunos sitios notables que utilizan este estilo de bloqueo de contenido izquierdo/derecho en sus sitios web son Gifox y GoDaddy.

Este estilo es verdaderamente atractivísimo a la vista, permitiendo que el contenido fluya bien, aun cuando hay mucho de él.

Este simple reposicionamiento de contenido mantiene al visitante comprometido a seguir desplazándose.

1.64) El pie de página en constante crecimiento

Los pies de página solían ser ignorados y aburridos; un lugar donde se ponía el texto de los derechos de autor así como un conjunto de iconos de los medios sociales.

No se les dio mucha importancia.

Pero últimamente, los diseñadores web han estado prestando cada vez más atención al pie de página.

Esta pieza de bienes raíces existe básicamente en todos los sitios web en Internet, y los diseñadores web están encontrando que el pie de página sirve como un punto para añadir ciertos pensamientos «antes de ir».

Por no mentar que los pies de página solían ocupar una octava parte (como máximo) del tamaño de la pantalla.

Hoy en día, están ocupando alrededor de la mitad, si no más, lo que atrae la atención del visitante cara el contenido del pie de página.

Tumi utiliza el pie de página de su sitio para dirigirte a la tienda Tumi más cercana.

American Eagle también ha utilizado su pie de página para efectuar diferentes tareas, como adquirir tarjetas de regalo, acceder a su cuenta de recompensas y realizar un seguimiento de los pedidos.

También ocupa toda la pantalla!

1.65) La vieja escuela con fuentes vintage y serifas

La vieja escuela está de moda nuevamente, en tanto que el empleo de fuentes vintage y serifas se abre camino en estas tendencias de diseño web de dos mil diecinueve.

En los últimos años, las marcas de todo el planeta han comenzado a racionalizar sus logos utilizando fuentes sans-serif, que son más suaves y redondas y que facilitan la lectura de logotipos y eslóganes.

Ahora semeja que todas las marcas y sitios web están utilizando estas fuentes sans-serif, y aquí es donde las fuentes serif de la vieja escuela están comenzando a resurgir.

Estas fuentes vintage verdaderamente destacan de la web dominada por los sans-serifs, ya que hacen una declaración y asisten a que las marcas parezcan más atrevidas y de moda.

Estas fuentes se utilizan a veces en sitios web que tienen una rotación regular de contenido en la página primordial, como Banana Republic.

1.66) Ofreciendo 2 opciones simples

Los diseñadores web desean que sea lo más fácil posible para que los visitantes comprendan qué hacer, y facilitar una acción que se tome de antemano sin pensarlo mucho.

Echa una ojeada a la página web de Warby Parker, por ejemplo.

Esta popular tienda de comercio electrónico que vende gafas graduadas tiene dos opciones para que sus clientes del servicio las compren: Pruebe los marcos en casa o adquiera en línea.

El diseño emplea fáciles botones de llamada a la acción y emplea sutiles pasteles en el fondo para separar las 2 opciones.

Infusionsoft (recientemente rebautizada como Keap) también ha integrado la tendencia de diseño web simple de 2 opciones como un intento de explicar el propósito de la re-marca, así para atender a dos segmentos de clientes del servicio diferentes.

Echa un vistazo al fácil diseño que han usado a continuación que aparta meridianamente sus 2 productos y el propósito de cada uno de ellos a través de un texto fácil.

Esta tendencia de diseño web marcha muy bien cuando su sitio necesita «guiar» a su visitante a tomar la decisión adecuada desde el comienzo, o cuando existe la posibilidad de que se confundan sobre qué producto de los suyos deben usar.

O, si tiene múltiples opciones a fin de que sus clientes interactúen con su negocio, como Warby Parker, entonces se aconseja esta tendencia de diseño web de 2 opciones.

Creo que esta tendencia se queda corta es que es demasiado simple, y verdaderamente se basa en la suposición de que sus visitantes ya tendrán una idea general sobre lo que hace su producto o bien servicio y por qué es mejor que el resto.

Este estilo de diseño acepta que el usuario ha hecho su investigación y ahora sólo necesita ser guiado a la acción correcta.

Este diseño web no da detalles en exceso sobre su producto o bien servicio, y no permite destacar lo que podrían ser características cruciales o propuestas de venta únicas que los nuevos clientes necesitan antes incluso de decidir proceder al resto del sitio web.

Tenga en cuenta estas consideraciones antes de decidir proceder con una tendencia de diseño web como esta.

1.67) Uso del espacio en blanco para centrar la atención

Las marcas que quieren emitir una estética más simplista y «menos es más» pueden hacerlo usando el espacio en blanco.

Esta es una tendencia que ha ido medrando poco a poco durante los últimos años en el diseño web y que últimamente se ha hecho muy popular, singularmente entre las marcas de eCommerce y de gran lujo.

El empleo del espacio en blanco es una tendencia que está aquí para quedarse.

La web se está alejando de sitios desorganizados que parecen demasiado ocupados y rebosantes de información.

Tom Ford utiliza el espacio en blanco en sus catálogos para hacer de la ropa el centro de atención y para dar al comprador una experiencia de adquiere muy elegante y fácil sin demasiadas distracciones.

El espacio en blanco también complementa la estética de la marca de Tom Ford.

Esta tendencia de diseño web marcha realmente bien con marcas de moda y tiendas de comercio electrónico que proporcionan una experiencia de compra en línea y desean ofrecer un producto de mucho lujo o premium.

Antes, estas empresas solían colocar insignias de confianza y logos de tarjetas de crédito en sus sitios.

Esta tendencia minimiza todo el estruendos adicional.

Utiliza espacios en blanco para aprovechar al máximo la experiencia de adquiere en línea.

1.68) Desplazar animaciones

Esta tendencia de desarrollo web es complicada, en tanto que es fácil de usar incorrectamente.

Todos hemos visitado un sitio donde empiezas a desplazarte y de pronto las cosas se mueven con movimientos entrecortados, tu navegador empieza a tener dificultades para poder ver la animación, y todo el tiempo estás intentando averiguar qué es lo que está pasando.

La mayoría de las veces, ese es el resultado final con las animaciones de desplazamiento.

Mientras la tendencia va en aumento, el empleo de demasiadas animaciones de desplazamiento puede ser una experiencia de usuario poco placentera.

Las animaciones de desplazamiento han de ser intencionadas, moderadas y, francamente, empleadas como mínimo.

Hacerlo en demasía en este departamento puede costarte algunos puntos de experiencia de usuario por el hecho de estar a la moda.

Usa este con precaución!

Algunos sitios para poder ver que usan animaciones mientras que te desplazas son Apple y Wealthsimple.

Cuando se usan correctamente, estas animaciones pueden dar a su sitio una ventaja innovadora y hacer que sus productos y servicios realmente se destaquen.

1.69) Fondos de vídeo a pantalla completa

¿Qué mejor forma de cautivar a la audiencia que con un fondo de vídeo a pantalla completa?

Esta tendencia ha existido durante algún tiempo, y se está abriendo camino en esta lista de tendencias de diseño web de dos mil veinte pues a los diseñadores web todavía les chifla usarlo!
Los fondos de vídeo a pantalla completa son una genial forma de acrecentar la participación de los usuarios.

De hecho, según Search Engine Watch, los vídeos generaban un cuarenta y uno por cien más de clicks que el texto sin formato.

No es de extrañar que marcas como Teavana y Sonos recurran al vídeo para compartir la historia de su marca y establecer una conexión con sus visitantes.

Si decide probar esta tendencia, le recomiendo que se asegure de que su vídeo esté silenciado en segundo plano, en lugar de un vídeo de reproducción automática que empiece a reproducir audio al momento.

Esto puede tener un efecto negativo y rehusar a sus visitantes.

Los fondos de video son una gran forma de conectarse con su audiencia y aumentar el tiempo que los visitantes permanecen en su lugar.

Los videos también dismuyen el tiempo que tardan los visitantes en percatarse de lo que está vendiendo y ayudan a minimizar el proceso de toma de resoluciones.

Un fondo de vídeo describe claramente lo que está vendiendo, así como el modo de vida de su marca.

1.70) Espacio en blanco exagerado

Tanto espacio en blanco.

Estos sitios presentan cantidades exageradas de espacios en blanco y temas minimalistas fuertes con poquísima ornamentación de color o diseño.

Y si eres como , no puedes dejar de mirarlos.

¿Cómo marcha un diseño con tan poca información visual?

El truco del diseño aquí es la interrupción.

Si ve uno de estos diseños, son muy, muy diferentes a prácticamente cualquier otro sitio que esté visitando. Eso te hace detenerte, mirar y meditar en lo que estás viendo.

Con el contenido conveniente puede ser realmente eficiente.

Mientras que cada uno de ellos de los diseños aquí usan cantidades exageradas de espacio en blanco y prácticamente ningún color, no todos tienen el mismo aspecto y utilizan efectos complementarios para trasmitir un mensaje.

VS+Empresa emplea una animación sutil con bloques de texto que aparecen al lado de las líneas «POST» y «MGMT» sobredimensionadas.

El texto da contenido e información adicional sobre el sitio web y emplea un color negro que facilita su lectura.

Lundqvist y Dallyn hace una pregunta para despertar el interés del usuario.

La imagen en la pantalla de comienzo y a lo largo del scroll presenta animaciones que animan los clicks.

Jillian Hobbs utiliza el espacio en blanco para ayudar a los usuarios a afinar las palabras, en este caso los nombres de los proyectos, para interactuar con ellos.

Es un concepto arriesgado para un portafolio de diseño, pero anima a hacer click en páginas con el mismo patrón visual, mas con imágenes y color.

1.71) Bordes y líneas marcadas

Aunque el brutalismo jamás ha despegado completamente como una tendencia generalizada del diseño, está influyendo en los diseñadores.

Los bordes y las líneas afiladas son una de las maneras en que lo vemos manifiesto.

Más recientemente, los proyectos han tenido un tacto más suave con colores degradados, imágenes o ilustraciones reales y formas más suaves.

Los proyectos de abajo presentan bordes más duros, líneas gruesas y formas cuadradas.

Estas formas pueden ser emparejadas con diferentes elementos para establecer una sensación.

El resultado es una tendencia de diseño que es un tanto más dura, más fuerte y más dura.

Casi exige que lo mires.

Futura Academia de la ciudad de Londres emplea los valientes colores amarillo y negro para crear la sensación más brutal de la colección. Incluso la tipografía tiene una ventaja.

Piedra Púrpura Tijeras tiene un tic animado en las líneas duras de su página de comienzo, lo que crea una sensación de malestar para los usuarios. ¿Por qué todo se mueve de esta forma?

Casi te obliga a desplazarte. Todos y cada uno de los videoclips del lugar utilizan el mismo efecto, que se semeja mucho a lo que estamos viendo con la red social TikTok.

ElUnshift se centra en las formas y la animación sin casi ningún color para captar los usuarios. El cubo en movimiento es intrigante y suficiente para generar interés.

1.72) Titulares centrados en la pantalla

Los titulares de los héroes no son una tendencia nueva.

Pero, ¿ha notado un cambio en la colocación de los grandes textos en las páginas de comienzo?

Está centrado vertical y horizontalmente.

La colocación tiene sentido cuando se piensa en ello.

El ojo irá directo al centro de la pantalla y después se extenderá a otros elementos.

Pero, ¿te agrada la sensación súper simétrica?

La otra ventaja de este procedimiento de construcción es la de las versiones móviles de las páginas web. Se amolda perfectamente a la pantalla de un móvil como escritorio.

Por el contrario, si el texto se pon con fuerza a la izquierda o a la derecha, de manera frecuente hay que moverlo cuando se cambia de una orientación de pantalla más horizontal a una más vertical.

Esta es una de esas tendencias limpias que está fuertemente influida por la tecnología y la manera en que utilizamos y también interactuamos con los dispositivos en línea.

Lo único que hay que tener en cuenta con una tendencia como ésta es que, aunque la simetría perfecta es armoniosa y visualmente atrayente, es posible que no funcione con todos los fondos o bien imágenes.

También puede empezar a parecer algo desganado si todo el planeta lo hace.

Finalmente, piense en la longitud de las palabras y los mensajes.

Con demasiados caracteres, este estilo puede parecer pesado y apabullante y marcha mejor con bloques cortos de texto, como cada uno de ellos de los ejemplos que aparecen a continuación.

1.73) Privacidad

Hoy en día, todo el planeta habla de la privacidad y de cómo la tecnología está teniendo un enorme impacto en ella.

Todos sabemos que se están recopilando y guardando más datos en línea que nunca antes; registros médicos, historial de ubicación, historial de búsquedas, mensajes de texto íntimos, el nombre de su cánido y muchos más.

El usuario ha llegado más o menos a la conclusión de que sus datos personales ya no son «privados» debido a su compromiso con los principales ecosistemas tecnológicos: Apple, Google, Facebook y Amazon.

Como diseñadores web, es importante dar al usuario el control sobre la configuración de privacidad para que pueda determinar el género de datos recopilados y cómo son usados por su producto

El usuario debería ser capaz de mudar estos ajustes tan con frecuencia como desee e incluso escoger que se le envíen recordatorios regulares para ayudar a mantener la privacidad en mente:

• La privacidad como configuración predeterminada
• Proactivo, no reactivo
• Visibilidad y transparencia
• Manteniéndolo centrado en el usuario

Back to top

2) Tendencias diseño web 2018 vs 2019 vs 2020

2018 nos mostró que en el diseño web, hay un único camino a seguir. Y dos mil diecinueve, no debe ser una excepción.

Reclamemos este año como el año de las innovaciones en diseño web!

El año pasado, los avances tecnológicos permitieron que los sitios fueran más alcanzables y que se conectaran de forma consistente con los usuarios. Nuevas formas de conexión también allanaron el camino para nuevos estilos que traspasan las fronteras.

Con vistas a un mayor progreso en el diseño web, sería útil tomar en consideración las tendencias que se mantendrán en torno a este 2020 en el momento de abordar proyectos nuevos o de rediseño.

Definitivamente, nuevas tendencias surgirán conforme avancemos en el camino.

Back to top

3) Reflexiones finales

Este año, los diseñadores web se centran en diseños simples y limpios que atraen a los usuarios.

El uso del vídeo y de grandes imágenes seguirá siendo una tendencia en el diseño de sitios web, al tiempo que la tipografía se utilizará para destacar una marca y trasmitir su mensaje de forma más eficiente.

Sin embargo, incluso el diseño más atrayente no significa nada si sus páginas se están cargando de forma lenta o bien si su sitio web no es amigable con el móvil. De ahí que que debe asegurarse de que estos son los dos requisitos prioritarios en su informe de diseño.

Back to top

4) Cómo afectan las novedades y tendencias en sitios web bien diseñados

Al examinar las primordiales tendencias de diseño gráfico para el año dos mil veinte, Venngage identificó tendencias tales como ‘colores apagados’ y ‘fotografía de stock de aspecto natural’ que pueden aplicarse al diseño web a pequeña escala.

Cambiar la paleta de colores de un sitio web es, indudablemente, una gran revisión, pero agregar más elementos apagados en las nuevas páginas de destino o contenido puede ser un sutil guiño a las tendencias de vanguardia sin necesidad de una revisión masiva.

Un buen diseño puede tener un impacto positivo en su posicionamiento SEO también, si se hace apropiadamente. Más allá de la optimización de la imagen los elementos de diseño pueden prestarse a las mejores prácticas de SEO. Las cosas obvias como abrazar el minimalismo y meditar en el primer diseño móvil pueden hacer gran diferencia. Mas hay otras maneras en que un buen diseño puede beneficiar a su posicionamiento en buscadores.

En última instancia, quiere crear una experiencia para el visitante que sea positiva para su público. Desea que la gente halle información de forma rápida y fácil, y suministrar amplias ocasiones para las conversiones (lo que sea que le parezca a ). Fuera de la construcción de backlinks y el diseño de optimización de palabras clave es otro elemento en el que puede influir fácilmente.

La creación de páginas de destino atractivas mas prácticas mejorará la experiencia de los usuarios, lo que permitirá que el tiempo de permanencia en la página sea mayor y que se comparta más. Recoger las tendencias de diseño como la ‘paleta de colores apagados’ puede ayudar a atraer a los visitantes y mantenerlos por más tiempo, por el hecho de que la página que están navegando es agradable a los ojos.

La creación de una página web bien diseñada también puede asistir a pintarte como el mejor sitio web de su clase. A medida que las tendencias se vuelven más dominantes, los escritores de todas partes (¡como !) buscarán ejemplos de la vida real que ilustren mejor el uso de las tendencias.

Y al paso que transformarse en un líder de pensamiento puede no ser su objetivo final, vale la pena tener en consideración las ocasiones si está buscando medrar o bien escalar su sitio.

¿Buscas profesionales?

Sin compromiso ni registros • Profesionales destacados

¿Buscas clientes?

Cuota fija al mes • Sin permanencia ni comisiones

Back to top