{"id":99364,"date":"2019-10-29T18:44:01","date_gmt":"2019-10-29T18:44:01","guid":{"rendered":"https:\/\/codewebbarcelona.com\/tendencias-en-diseno-web-2020\/"},"modified":"2026-06-12T12:12:21","modified_gmt":"2026-06-12T12:12:21","slug":"tendencias-en-diseno-web-2020","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/","title":{"rendered":"Tendencias en dise\u00f1o web 2020"},"content":{"rendered":"

Si deseas estar al d\u00eda y empezar el pr\u00f3ximo a\u00f1o con buen pie, en este post vamos a cubrir las tendencias en dise\u00f1o web para 2020. Canvas, 3D, big typos, contrastes, inteligencia artificial, machine learning, voice recognition, y mucho m\u00e1s.<\/p>\n

[superfeatured]7076[\/superfeatured]<\/p>\n

Un a\u00f1o m\u00e1s aqu\u00ed estamos, prepar\u00e1ndonos para el siguiente. Ya pr\u00e1cticamente en noviembre, queremos estar a tope para el a\u00f1o que viene, y tambi\u00e9n queremos que nuestros visitantes lo est\u00e9n. As\u00ed pues como es de costumbre, hemos preparado un post para hablar sobre lo que se va a llevar dentro del mundo del dise\u00f1o web para el a\u00f1o 2020.<\/p>\n

Seguimos la evoluci\u00f3n \u2192 las tendencias de dise\u00f1o web 2026<\/a> traen minimalismo, IA y experiencias m\u00e1s humanas.<\/h6>\n

Este tipo de post es uno de los posts cornerstone de nuestro blog y por los que recibimos una gran cantidad de visitas e incluso solicitudes de presupuesto a lo largo de todo el a\u00f1o, por parte de usuarios que aterrizan en busca de las \u00faltimas tendencias en dise\u00f1o web, gr\u00e1fico y marketing. Es por ello que cada a\u00f1o le ponemos m\u00e1s esfuerzo, atenci\u00f3n y dedicaci\u00f3n que el anterior en la creaci\u00f3n del post. Nuestro objetivo es ofrecer contenido de calidad para nuestros visitantes. Ya se trate de profesionales del dise\u00f1o gr\u00e1fico\/web como de potenciales clientes en busca de inspiraci\u00f3n para su nuevo website. Adem\u00e1s el hecho de crear un contenido de calidad, nos ayuda a seguir rankeando en los buscadores. Ya sab\u00e9is: Content is king!<\/p>\n

WOWWW TIO! ya tenemos el nuevo post de las tendencias en dise\u00f1o web para 2021<\/a>!!!<\/h6>\n

Posts de a\u00f1os anteriores que pueden interesarte: Tendencias en dise\u00f1o web 2019<\/a> – Tendencias en dise\u00f1o web 2018<\/a> – Tendencias en dise\u00f1o web 2016<\/a><\/p>\n

Tendencias en dise\u00f1o web para 2020, be ahead<\/h2>\n

Tipograf\u00edas a\u00fan m\u00e1s grandes<\/h3>\n

\"\"<\/p>\n

Una de las tendencias en dise\u00f1o web para 2020, ser\u00e1 sin duda el uso de tipograf\u00edas de gran tama\u00f1o. No solamente en titulares, si no tambi\u00e9n en el cuerpo del texto general.<\/p>\n

Con la masificaci\u00f3n de las pantallas en formato panor\u00e1mico con resoluciones altas y la bajada de precio en este tipo de pantallas que antes eran menos comunes, nos encontramos con que el tama\u00f1o de la tipograf\u00eda para los cuerpos de texto ya est\u00e1 muy lejos de los 12 y 14 p\u00edxeles utilizados en los ya lejanos a\u00f1os 2010. Ahora perfectamente podemos utilizar tama\u00f1os de 20 p\u00edxeles hacia arriba siempre que el tipo de proyecto y website lo requiera.<\/p>\n

Para titulares no hay un m\u00e1ximo en tama\u00f1o m\u00e1s all\u00e1 que el buen gusto y el sentido com\u00fan, por lo que atr\u00e9vete utilizando tama\u00f1os gigantes que ofrezcan un gran contraste. Utilizar tama\u00f1os gigantes para titulares bien redactados dar\u00e1 personalidad a cualquier website que quiera destacar y estar preparado para lo que viene no s\u00f3lo en 2020, si no, en los pr\u00f3ximos a\u00f1os.<\/p>\n

C\u00f3mo y cu\u00e1ndo aplicarlo<\/h4>\n

Aplica esta tendencia web en websites que:<\/p>\n

    \n
  1. Necesite de un dise\u00f1o muy visual y de impacto<\/li>\n
  2. Tengan poca imagen para mostrar y necesites un refuerzo visual de potencia. Utilizar tipograf\u00edas grandes de forma descarada, dar\u00e1 el punto visual que necesitas<\/li>\n
  3. No est\u00e9n dirigidos a un p\u00fablico muy conservador<\/li>\n
  4. Tengan un p\u00fablico objetivo con un equipo moderno, en especial, con pantallas grandes<\/li>\n<\/ol>\n

    Recuerda que:<\/p>\n

      \n
    1. Deber\u00e1s ajustar los tama\u00f1os en las distintas resoluciones de pantalla. Para ello crea las excepciones responsive, abarcando desde 2560px (pantalla grande) hasta los m\u00e1s comunes 1330px (pantalla de port\u00e1til)<\/li>\n
    2. Presta especial atenci\u00f3n a que los tama\u00f1os sean coherentes para la versi\u00f3n Mobile, ya que la mayor\u00eda de usuarios en la actualidad ya navega por Internet<\/li>\n<\/ol>\n

      Websites que incorporan la tendencia<\/h4>\n

      Rogue Studio<\/strong><\/p>\n

      \"\"<\/p>\n

      Link al website<\/a><\/p>\n

      En este sitio web pod\u00e9is ver claramente el uso de tipograf\u00edas no grandes… si no EXTRA grandes. Y la verdad es que quedan geniales.<\/p>\n

      Estoy seguro que este website ser\u00e1 uno de los candidatos para el post anual en el que recopilamos los mejores dise\u00f1os web del a\u00f1o.<\/p>\n

      Granyon Summer Party<\/strong><\/p>\n

      \"tendencias<\/p>\n

      Link al website<\/a><\/p>\n

      Otro gran ejemplo de la tendencia en dise\u00f1o web aplicada a la perfecci\u00f3n. Vemos que no solamente el titular principal y dem\u00e1s titulares, si no que el cuerpo del texto general es grande de por s\u00ed.<\/p>\n

      Team Elite Kickboxing<\/strong><\/p>\n

      \"tendencias<\/p>\n

      Link al website<\/a><\/p>\n

      Para finalizar, el \u00faltimo ejemplo donde podemos ver aplicada la tendencia. Adem\u00e1s, podemos ver c\u00f3mo este website tambi\u00e9n utiliza a la perfecci\u00f3n la tendencia para 2020 de la que hablaremos en el siguiente punto.<\/p>\n

      Contrastes, colores negativos y colores estridentes<\/h3>\n

      \"\"<\/p>\n

      El uso de contrastes y colores negativos es un recurso que lleva utiliz\u00e1ndose cada vez m\u00e1s en los \u00faltimos a\u00f1os dentro del mundo del dise\u00f1o y desarrollo web. De cara el a\u00f1o 2020, no va a ser distinto y vamos a ver websites de impacto, utilizando el recurso sin ning\u00fan tipo de complejo.<\/p>\n

      Desata tu lado m\u00e1s atrevido utilizando contrastes y colores vivos. Aplica filtros a las im\u00e1genes ya sea previamente con photoshop o similares o utilizando herramientas de desarrollo web m\u00e1s modernas como puede ser la utilizaci\u00f3n de los blending modes de CSS o incluso con el elemento canvas.<\/p>\n

      C\u00f3mo y cuando aplicarlo<\/h4>\n

      Aplica esta tendencia web en websites que:<\/p>\n

        \n
      1. Necesite de un dise\u00f1o muy visual y de impacto<\/li>\n
      2. No est\u00e9n dirigidos a un p\u00fablico muy conservador<\/li>\n
      3. Quieras llamar la atenci\u00f3n y no dejar indiferente a nadie<\/li>\n<\/ol>\n

        Recuerda que:<\/p>\n

          \n
        1. En websites corporativos dirigidos a empresas m\u00e1s conservadoras, este recurso debe ser utilizado de forma muy sutil<\/li>\n
        2. Deber\u00e1s aplicar el uso de contrastes de forma coherente, teniendo en cuenta la imagen corporativa y colores de la empresa\/marca<\/li>\n
        3. Aunque ofrezcan contraste, deber\u00e1s tener en cuenta la armon\u00eda visual creando una paleta de colores coherente<\/li>\n<\/ol>\n

          Websites que incorporan la tendencia<\/h4>\n

          Ninja guru<\/b><\/p>\n

          \"tendencias<\/p>\n

          Link al website<\/a><\/p>\n

          En este website podemos apreciar el uso de contrastes en su m\u00e1xima expresi\u00f3n. Utilizan tanto colores negativos (blanco\/negro) como contrastes estridentes (azul\/naranja).<\/p>\n

          Festa da Francofonia 2019<\/strong><\/p>\n

          \"tendencias<\/p>\n

          Link al website<\/a><\/p>\n

          Colores vivos, contrastes, elementos geom\u00e9tricos en movimiento… Un website que no dejar\u00e1 indiferente al visitante y el perfecto ejemplo para una de las tendencias clave en dise\u00f1o web para 2020.<\/p>\n

          Kombu<\/strong><\/p>\n

          \"tendencias<\/p>\n

          Link al website<\/a><\/p>\n

          En este website utilizan el contraste para el packaging creado en cada uno de los refrescos, como representaci\u00f3n del sabor de la bebida concreta. El uso del efecto “wavy” para las l\u00edneas diagonales que coincide perfectamente con el del packaging es una genialidad. Un gran ejemplo en cuanto a la utilizaci\u00f3n no ya solo de contrastes si no de efectos JS con sentido, que mantiene la l\u00ednea comunicativa formal para el tipo de producto que ofrece.<\/p>\n

          Experiencia mobile, a\u00fan m\u00e1s importante<\/h3>\n

          Algunos tips<\/h4>\n
            \n
          1. Elementos como v\u00eddeos, ser\u00e1 mejor no cargarlos con autoplay, ya que eso consumir\u00eda el ancho de banda del usuario y si se encuentra sin wifi le haremos una trastada<\/li>\n
          2. Optimizar las im\u00e1genes, sirviendo versiones adaptadas a la anchura del dispositivo, nos ayudar\u00e1 a mejorar los tiempos de carga<\/li>\n
          3. Utiliza men\u00fa tipo burger para comprimir los men\u00fas en un formato app-like<\/li>\n<\/ol>\n

            Websites que incorporan la tendencia<\/h4>\n

            Nicholas Munt<\/strong><\/p>\n

            Link al website<\/a><\/p>\n

            Este website al utilizar ajax para cargar cada p\u00e1gina, resulta muy mobile friendly, ya que se asemeja mucho al tipo de navegaci\u00f3n y uso que tienen la mayor\u00eda de las apps.<\/p>\n

            Salmoon & Sons<\/strong><\/p>\n

            Link al website<\/a><\/p>\n

            Sobre este website en versi\u00f3n mobile, destacamos el slider con una funcionalidad para swipe totalmente mobile, ya que vemos la totalidad de la imagen deslizarse siguiendo nuestro dedo a la perfecci\u00f3n. Tambi\u00e9n tiene un muy buen men\u00fa tipo burger, que se desliza desde uno de los lados.<\/p>\n

            Volia<\/strong><\/p>\n

            Link al website<\/a><\/p>\n

            Como pod\u00e9is ver, en este website se utiliza un tama\u00f1o de tipograf\u00edas bastante grande, pero que incluso en versi\u00f3n mobile est\u00e1n muy bien tratadas. El men\u00fa burger tambi\u00e9n est\u00e1 muy bien desarrollado y ofrece una transici\u00f3n realmente interesante.<\/p>\n

            WOWWW TIO! ya tenemos el nuevo post de los\u00a0mejores dise\u00f1os web 2019-2020<\/a>!!!!\u00a0Haz click ahora!!<\/a><\/h6>\n

            Cursores y scrolls personalizados<\/h3>\n

            \"tendencias<\/p>\n

            Una de las tendencias que m\u00e1s estamos viendo y que va en aumento de popularidad es la de crear cursores personalizados en sustituci\u00f3n del cursor default del propio navegador.<\/p>\n

            Estos cursores normalmente incorporan cierta interacci\u00f3n con los elementos del web site a su alrededor, cambiando por ejemplo el tama\u00f1o del mismo, el color, etc. Es una de las tendencias m\u00e1s recientes y que sin duda ir\u00e1 en aumento este nuevo a\u00f1o 2020.<\/p>\n

            Lo mismo con los scrollbars. Cada vez est\u00e1 m\u00e1s de moda la utilizaci\u00f3n de scrollbars totalmente personalizados, obviando los de navegador. Estos scrolls tambi\u00e9n vienen con un deslizamiento suave o smooth scrolling.<\/p>\n

            Tambi\u00e9n estamos viendo cada vez m\u00e1s el no-uso de scrollbars, a pesar de que haya m\u00e1s contenido debajo. Esta tendencia cada vez m\u00e1s en alza, pod\u00e9is dar por seguro que ser\u00e1 una de las tendencias en dise\u00f1o web para 2020. La realidad es que el usuario est\u00e1 tan acostumbrado a navegar utilizando el scroll down, que ya nos viene educado tras largos a\u00f1os de interacci\u00f3n con la web. De esta forma podemos empezar a plantearnos el no uso de scrolls, para crear una interfaz mucho m\u00e1s minimalista. Si el hecho de prescindir de la scroll bar nos intimida demasiado, siempre podemos llegar a un punto medio y optar por no poner scrollbar, pero ir guiando al usuario con el t\u00edpico icono de “scroll down”.<\/p>\n

            C\u00f3mo y cuando aplicarlo<\/h4>\n

            Aplica esta tendencia web en websites que:<\/p>\n

              \n
            1. Quieras aportar un extra de personalidad<\/li>\n
            2. El usuario visitante es un usuario avanzado\/acostumbrado al mundo online<\/li>\n<\/ol>\n

              Recuerda que:<\/p>\n

                \n
              1. Deber\u00e1s comprobar que el scroll funcione correctamente en los distintos navegadores<\/li>\n
              2. En dispositivos mobile, es posible que el scroll haga cosas raras, por lo que lo mejor ser\u00eda que lo ocultaras por completo<\/li>\n<\/ol>\n

                Websites que incorporan la tendencia<\/h4>\n

                Aluxion<\/strong><\/p>\n

                \"tendencias<\/p>\n

                Link al website<\/a><\/p>\n

                Podemos ver como disponemos de un scroll personalizado, formado por dos circumferencias. Una grande y otra peque\u00f1a. Se desplaza siguiendo nuestro cursor con un peque\u00f1o delay y adem\u00e1s ofrece un hover muy vistoso. Adem\u00e1s tambi\u00e9n dispone de una scrollbar personalizada, lo cual hace que el conjunto de todo el dise\u00f1o quede completamente integrado.<\/p>\n

                Joseph Berry<\/strong><\/p>\n

                \"tendencias<\/p>\n

                Link al website<\/a><\/p>\n

                Este cursor que es muy parecido al anterior, me ha parecido muy interesante y original por el hecho de incorporar la circunferencia exterior en formato tipogr\u00e1fico. Respecto del scrollbar en este caso se han decantado por ni siquiera utilizar y pienso que ser\u00e1 tendencia web para 2020, ya que el usuario cada vez est\u00e1 m\u00e1s educado a hacer scroll de forma instintiva.<\/p>\n

                Matt VBRG<\/strong><\/p>\n

                \"tendencias<\/p>\n

                Link al website<\/a><\/p>\n

                En este site concreto, podemos ver como el cursor interact\u00faa con todo el contenido del website, haciendo cambiar colores y aplicando efectos visuales muy llamativos, como el efecto cromado de las im\u00e1genes.<\/p>\n

                Canvas y elementos 3D con Three.js<\/h3>\n

                \"tendencias
                \nLa utilizaci\u00f3n de Canvas dentro de un dise\u00f1o web es una de las tendencias que m\u00e1s protagonismo han ido cogiendo a lo largo de estos a\u00f1os y como es de esperar para 2020 ser\u00e1 una de las tendencias en dise\u00f1o web estrella y sin duda clave para conseguir crear websites de \u00faltima generaci\u00f3n.<\/p>\n

                Gracias a canvas podemos utilizar opengl para crear experiencias que traspasan los umbrales del html con creces. Y es que con canvas, somos totalmente libres para crear absolutamente cualquier cosa que se nos pase por la cabeza.<\/p>\n

                Uno de los aspectos del elemento Canvas que est\u00e1 siendo m\u00e1s explotado es el uso de las 3 dimensiones para crear profundidad y objetos 3D con los que interactuar. Llegando a extremos que consiguen que nuestro website, m\u00e1s que un website parezca pr\u00e1cticamente un videjuego.<\/p>\n

                Para crear estas experiencias 3D utilizando el elemento Canvas, tenemos la famosa librer\u00eda Three.js. Gracias a Three.js podremos crear objetos 3D o importar modelos creados en programas de modelaje 3D. Adem\u00e1s lo ca\u00f1ero del asunto es el hecho de poder interactuar con estos elementos, creando verdaderas experiencias inmersivas.<\/p>\n

                Sin duda el uso de Three.js para 3D ser\u00e1 una de las principales tendencias en dise\u00f1o web para 2020.<\/p>\n

                C\u00f3mo y cuando aplicarlo<\/h4>\n

                Aplica esta tendencia web en websites que:<\/p>\n

                  \n
                1. Requieran de una gran experiencia creativa y visual<\/li>\n
                2. Quieras impactar al visitante<\/li>\n
                3. Necesites explorar nuevos m\u00e9todos para comunicar mensajes de una forma mucho m\u00e1s actual e innovadora<\/li>\n<\/ol>\n

                  Recuerda que:<\/p>\n

                    \n
                  1. Hacer uso de una herramienta tan poderosa conlleva una gran responsabilidad. Piensa primero en la comunicaci\u00f3n y despu\u00e9s aplica lo necesario (generalmente, el dise\u00f1o y la creatividad sirven a la comunicaci\u00f3n y no a la inversa)<\/li>\n
                  2. Deber\u00e1s prestar especial atenci\u00f3n a los distintos dispositivos y navegadores para que tu experiencia tenga sentido en todos y cada uno de ellos<\/li>\n<\/ol>\n

                    Websites que incorporan la tendencia<\/h4>\n

                    DMC2019<\/strong><\/p>\n

                    \"tendencias<\/p>\n

                    Link al website<\/a><\/p>\n

                    En este website podemos apreciar el uso de Three.js para la creaci\u00f3n de un website muy singular, que est\u00e1 basado en un men\u00fa en 3 dimensiones a trav\u00e9s del cual podemos navegar de forma din\u00e1mica a cada uno de los apartados. Adem\u00e1s os fij\u00e1is, ver\u00e9is que pod\u00e9is subir hasta arriba del todo para ver el logotipo del evento que promociona la p\u00e1gina web. Si por el contrario nos dirigimos a la parte inferior veremos que tenemos un mapa en 3 Dimensiones que nos muestra la localizaci\u00f3n del evento. Un perfecto ejemplo de una de las tendencias en dise\u00f1o web para 2020 aplicada de forma elegante, estridente y super ca\u00f1era. \u00bfSer\u00e1 este uno de los websites que figurar\u00e1n en nuestro recopilatorio de mejores dise\u00f1os web de este a\u00f1o?<\/p>\n

                    Hack Wired<\/b><\/p>\n

                    \"tendencias<\/p>\n

                    Link al website<\/a><\/p>\n

                    Otro ejemplo de la utilizaci\u00f3n de Three.js.<\/p>\n

                    En este website han creado este especie de chicle en movimiento y con un cambio de forma que interact\u00faa con el movimiento del cursor. En este caso, el uso del elemento en 3D de three.js es un elemento meramente est\u00e9tico, pero en mi opini\u00f3n bien aplicado para el tipo de conferencia que promociona el website en cuesti\u00f3n.<\/p>\n

                    Vladimir Gruev<\/strong><\/p>\n

                    \"tendencias<\/p>\n

                    Link al website<\/a><\/p>\n

                    En este caso el desarrollador de este website, ha decidido utilizar la tecnolog\u00eda canvas para crear una experiencia de navegaci\u00f3n totalmente diferente a cualquiera que haya visto nunca. Mediante un cubo 3D ha desarrollado tanto un men\u00fa super creativo como un formato de navegaci\u00f3n y consumo de contenido totalmente innovador. Lo que est\u00e1 claro es que un tipo de usabilidad o experiencia como esta, solo puede ser utilizada para sitios web muy concretos y este es uno de ellos, as\u00ed que “muscle tought” para el developer!<\/p>\n

                    Canvas y efectos de distorsi\u00f3n en im\u00e1genes<\/h3>\n

                    \"tendencias<\/p>\n

                    Dentro del uso de Canvas, encontramos que una de las tendencias que van m\u00e1s en alza es el uso de distorsiones en im\u00e1genes para crear efectos llamativos y muy rompedores.<\/p>\n

                    Apuntad esta tendencia como una de las m\u00e1s cotizadas del pr\u00f3ximo a\u00f1o y de los que vienen, porque viene fuerte. Cada vez hay m\u00e1s sitios web de alta calidad gr\u00e1fica que est\u00e1n incorporando este tipo de efectos. El uso de distorsiones ha venido para quedarse un largo tiempo.<\/p>\n

                    Para este pr\u00f3ximo 2020 toca ponerse las pilas y empezar a tocar cositas para crear efectos grunge y morphings para estar al d\u00eda en cada proyecto de dise\u00f1o web.<\/p>\n

                    Una de las librer\u00edas m\u00e1s utilizadas para crear este tipo de efectos es la libreria Pixi.js. Echadle un ojo porque en pocos minutos de aprendizaje pod\u00e9is crear experiencias muy interesantes y distintas. Experiencias que har\u00e1n que tu website destaque muy por encima del resto.<\/p>\n

                    En youtube econtrar\u00e9is infinidad de tutoriales que explican c\u00f3mo hacer efectos super ca\u00f1eros.<\/p>\n

                    C\u00f3mo y cuando aplicarlo<\/h4>\n

                    Aplica esta tendencia web en websites que:<\/p>\n

                      \n
                    1. Quieras darle un toque de creatividad<\/li>\n
                    2. Quieras que destaquen y no queden como un sitio web plano sin mucho m\u00e1s<\/li>\n
                    3. Quieras experimentar con cosas locas. El l\u00edmite lo pones tu<\/li>\n<\/ol>\n

                      Recuerda que:<\/p>\n

                        \n
                      1. Hacer uso de una herramienta tan poderosa conlleva una gran responsabilidad. Piensa primero en la comunicaci\u00f3n y despu\u00e9s aplica lo necesario (generalmente, el dise\u00f1o y la creatividad sirven a la comunicaci\u00f3n y no a la inversa)<\/li>\n
                      2. Deber\u00e1s prestar especial atenci\u00f3n a los distintos dispositivos y navegadores para que tu experiencia tenga sentido en todos y cada uno de ellos<\/li>\n<\/ol>\n

                        Websites que incorporan la tendencia<\/h4>\n

                        Francesco Michelini<\/strong><\/p>\n

                        \"tendencias<\/p>\n

                        Link al website<\/a><\/p>\n

                        El sitio web de este developer es uno de los ejemplos en los que pod\u00e9is apreciar el impacto que tiene el uso de canvas en elementos como fotograf\u00edas para crear distorsiones. En este caso, el efecto de la distorsi\u00f3n se aplica conforme hacemos scroll. Tambi\u00e9n podemos apreciarlo en el momento en que hacemos hover en la tipograf\u00eda donde muestra los proyectos en los que ha trabajado. F\u00e1cilmente pod\u00e9is pensar en c\u00f3mo quedar\u00eda el mismo sitio web sin el uso de estos efectos. Quedar\u00eda como un sitio muy correcto a nivel de dise\u00f1o y con muy buena ejecuci\u00f3n, pero a la que le a\u00f1adimos el efecto con canvas, pasa directamente a otro nivel.<\/p>\n

                        Julio Cesar<\/strong><\/p>\n

                        \"tendencias<\/p>\n

                        Link al website<\/a><\/p>\n

                        En este website, pod\u00e9is ver el uso de distorsiones junto con morphings de una forma que queda super impactante y visual. Estoy seguro de que el website no deja indiferente a ninguno de sus visitantes.<\/p>\n

                        Violence<\/strong><\/p>\n

                        \"tendencias<\/p>\n

                        Link al website<\/a><\/p>\n

                        Aqu\u00ed podemos apreciar otro ejemplo del uso de efectos grunge y distorsiones en im\u00e1genes. Adem\u00e1s el website trae sorpresa si hac\u00e9is click en cualquier \u00e1rea del site. Probadlo y ver\u00e9is.<\/p>\n

                        Bonus track: Machine learning, inteligencia artificial y voice recognition<\/h3>\n

                        Nos salimos un poco del \u00e1rea m\u00e1s visual y pasamos a un tipo de tendencia mucho m\u00e1s enfocada a la funcionalidad y es que en este aspecto, cuando hablamos de machine learning, inteligencia artificial y el uso del reconocimiento de voz, hay mucha chicha de la que hablar.<\/p>\n

                        Algunos sitios web que est\u00e1n utilizando machine learning son Amazon, Pinterest, Twitter, Google, Instagram y otras grandes compa\u00f1\u00edas. Y no es de extra\u00f1ar.<\/p>\n

                        Gracias al uso del machine learning en nuestro website podremos ofrecer al usuario un contenido mucho m\u00e1s adecuado a lo que espera encontrar y por lo tanto una mejor experiencia, lo cual llevar\u00e1 a un mayor engagement.<\/p>\n

                        Dentro del Voice Recognition, encontramos los smartphones de por si, junto con sus asistentes virtuales con los que podemos interactuar y pedirle cosas como hacer una llamada, enviar un whatsapp o buscar cualquier cosa por internet. Tambi\u00e9n disponemos de dispositivos como Google Home o Amazon Alexa a trav\u00e9s de los cuales podemos interactuar con elementos de nuestra propia casa: reproducir canciones, controlar la televisi\u00f3n, obtener respuestas a dudas que tengamos, etc. A este campo a\u00fan le queda mucho por explorar, pero sin duda va a dar mucho sobre lo que desarrollar y con ello, va a traer cambios tambi\u00e9n para la web y c\u00f3mo interactuamos con ella.<\/p>\n

                        El objetivo es ofrecer la m\u00e1xima comodidad y experiencia m\u00e1s directa posible al usuario final.<\/p>\n

                        C\u00f3mo y cuando aplicarlo<\/h4>\n

                        Aplica esta tendencia web en websites que:<\/p>\n

                          \n
                        1. Sean del tipo ecommerce. De esta forma podr\u00e1s ofrecer productos especificos para cada tipo de usuario, estudiando su perfil de compras.<\/li>\n
                        2. Requieran de un formato de navegaci\u00f3n y experiencia moderna. Deber\u00e1s ser creativo y explorar diferentes formatos ya que a\u00fan hay mucho por hacer y en este aspecto, muy poco de lo que “copiar”. As\u00ed que adelantate y se tu del que se copien.<\/li>\n<\/ol>\n

                          Recuerda que:<\/p>\n

                            \n
                          1. Deber\u00e1s mantener la cordura y no utilizar este tipo de tecnolog\u00eda “for the sake of it”. Utilizala en casos necesarios y de formas realmente pr\u00e1cticas.<\/li>\n<\/ol>\n

                            Websites que incorporan la tendencia<\/h4>\n

                            Amazon, Pinterest, Twitter, Google<\/p>\n

                            <\/h6>\n
                            WOWWW TIO! ya tenemos el nuevo post de las tendencias en dise\u00f1o web para 2021<\/a>!!!<\/h6>\n

                            Conclusiones y resumen para vagos<\/h3>\n

                            Como hab\u00e9is visto, las tendencias en dise\u00f1o web para 2020 que vienen, no son muy distintas de las que ya ten\u00edamos en a\u00f1os anteriores. Simplemente hay que sacar como reflexi\u00f3n que a nivel de front end, hay que empezar a prestar mucha atenci\u00f3n al uso de Canvas para crear gr\u00e1ficas potentes y de impacto. Algunas de las librer\u00edas para crear este tipo de experiencias web, son Three.js para 3D y Pixi.js para 2D.<\/p>\n

                            Resumiendo las tendencias:<\/p>\n

                              \n
                            • Utiliza tipograf\u00edas grandes. Muy grandes. Sin complejos.<\/li>\n
                            • Crea contrastes y juega con los colores negativos<\/li>\n
                            • Enf\u00f3cate en crear una experiencia \u00fanica para mobile<\/li>\n
                            • Dale personalidad a tu website utilizando cursores y scrollbars personalizados<\/li>\n
                            • Utiliza canvas y elementos 3D, Three.js es la librer\u00eda m\u00e1s com\u00fan y extendida<\/li>\n
                            • Utiliza canvas para elementos 2D y juega con distorsiones en im\u00e1genes<\/li>\n
                            • Implemente machine learning e inteligencia artificial para convertir m\u00e1s. Empieza a pensar en c\u00f3mo aplicar el voice recognition en tus proyectos, ya que es el futuro pr\u00f3ximo.<\/li>\n<\/ul>\n

                              Sobre el post<\/h3>\n

                              Este a\u00f1o hemos decidido darle al post sobre las tendencias en dise\u00f1o web para 2020 un enfoque un poco distinto al de otros a\u00f1os y es que hemos apoyado cada una de las tendencias de unos breves tips para utilizarla y ponerla en pr\u00e1ctica de forma efectiva, adem\u00e1s de ofrecer 3 ejemplos de websites donde est\u00e1n aplicadas las tendencias en dise\u00f1o web. El objetivo ha sido que teng\u00e1is un abanico mayor para vuestra inspiraci\u00f3n.<\/p>\n

                              Disclaimer<\/h3>\n

                              Suele ser com\u00fan que la gente nos comente cosas del tipo “pero esta tendencia concreta ya se estaba utilizando el a\u00f1o pasado y el otro”. Y s\u00ed, hay tendencias que evidentemente ya llevan tiempo utilizandose y que seguir\u00e1n utilizandose por un buen tiempo m\u00e1s. Es por ello, que si est\u00e1is metidos en el meollo algunas tendencias puede ser que ya las conozc\u00e1is. Para los que no est\u00e1n dentro del mundo del dise\u00f1o web o dise\u00f1o gr\u00e1fico, seguro que les es de gran utilidad el hecho de conocer los principales protagonistas en cuanto a recursos de dise\u00f1o web.<\/p>\n","protected":false},"excerpt":{"rendered":"

                              Si deseas estar al d\u00eda y empezar el pr\u00f3ximo a\u00f1o con buen pie, en este post vamos a cubrir las tendencias en dise\u00f1o web para 2020. Canvas, 3D, big typos, contrastes, inteligencia artificial, machine learning, voice recognition, y mucho m\u00e1s. [superfeatured]7076[\/superfeatured] Un a\u00f1o m\u00e1s aqu\u00ed estamos, prepar\u00e1ndonos para el siguiente. Ya pr\u00e1cticamente en noviembre, queremos […]<\/p>\n","protected":false},"author":1,"featured_media":12093,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[686,651,658],"class_list":["post-99364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration","category-grafikdesign","category-webdesign-webentwicklung"],"acf":[],"yoast_head":"\nTendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code<\/title>\n<meta name=\"description\" content=\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code\" \/>\n<meta property=\"og:description\" content=\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/\" \/>\n<meta property=\"og:site_name\" content=\"CODE\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-29T18:44:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-12T12:12:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1290\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Tendencias en dise\u00f1o web 2020\",\"datePublished\":\"2019-10-29T18:44:01+00:00\",\"dateModified\":\"2026-06-12T12:12:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/\"},\"wordCount\":4074,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"articleSection\":[\"Inspiration\",\"Grafikdesign\",\"Webdesign und -entwicklung\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/\",\"name\":\"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"datePublished\":\"2019-10-29T18:44:01+00:00\",\"dateModified\":\"2026-06-12T12:12:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/tendencias-en-diseno-web-2020\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"contentUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Active-Theory-01.jpg\",\"width\":1290,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\\\/\\\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/","og_locale":"de_DE","og_type":"article","og_title":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","og_description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","og_url":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/","og_site_name":"CODE","article_published_time":"2019-10-29T18:44:01+00:00","article_modified_time":"2026-06-12T12:12:21+00:00","og_image":[{"width":1290,"height":700,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Tendencias en dise\u00f1o web 2020","datePublished":"2019-10-29T18:44:01+00:00","dateModified":"2026-06-12T12:12:21+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/"},"wordCount":4074,"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","articleSection":["Inspiration","Grafikdesign","Webdesign und -entwicklung"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/","url":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/","name":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","datePublished":"2019-10-29T18:44:01+00:00","dateModified":"2026-06-12T12:12:21+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/codewebbarcelona.com\/de\/tendencias-en-diseno-web-2020\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","width":1290,"height":700},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/de\/#website","url":"https:\/\/codewebbarcelona.com\/de\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/99364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/comments?post=99364"}],"version-history":[{"count":1,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/99364\/revisions"}],"predecessor-version":[{"id":99365,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/99364\/revisions\/99365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media\/12093"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media?parent=99364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/categories?post=99364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}