--- title: Tendencias en diseño web durante 2020 description: Descubre las tendencias de diseño web que van a estar vigentes durante el año 2020 para renovar tu página web o blog corporativo. image: https://www.tiralineas.digital/hubfs/destacado-tendencias-web2020.png --- ****  DIAGNÓSTICO**  |  Descubre en 2 minutos cómo de optimizado está tu HubSpot   [¡Haz el test!](https://www.tiralineas.digital/diagnostico-madurez-hubspot) [![logo-pie](https://www.tiralineas.digital/hs-fs/hubfs/logo-pie.png?width=900&height=157&name=logo-pie.png "logo-pie")](https://www.tiralineas.digital) [** ](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020#offcanvasExample) ##### ¿Qué buscas? Servicios - [Marketing digital](https://www.tiralineas.digital/inbound-marketing) - [Análisis y estrategia digital](https://www.tiralineas.digital/inbound-marketing/analisis-estrategia-digital) - [Email marketing](https://www.tiralineas.digital/inbound-marketing/email-marketing) - [Marketing de contenidos](https://www.tiralineas.digital/inbound-marketing/marketing-de-contenidos-y-social-media) - [Posicionamiento SEO](https://www.tiralineas.digital/inbound-marketing/posicionamiento-seo) - [SEM / Paid Media](https://www.tiralineas.digital/inbound-marketing/posicionamiento-seo) - [Diseño web / UX / Accesibilidad](https://www.tiralineas.digital/inbound-marketing/desarrollo-web-ecommerce) - [Desarrollos](https://www.tiralineas.digital/hubspot) - [Integraciones HubSpot](https://www.tiralineas.digital/hubspot/integraciones) - [Migraciones HubSpot](https://www.tiralineas.digital/hubspot/migraciones) - [Desarrollo de webs y ecommerces](https://www.tiralineas.digital/inbound-marketing/desarrollo-web-ecommerce) - [Desarrollos a medida](https://www.tiralineas.digital/productos/desarrollos-medida) - [Servicios HubSpot](https://www.tiralineas.digital/hubspot) - [Asesoría](https://www.tiralineas.digital/hubspot/asesoria) - [Onboarding](https://www.tiralineas.digital/hubspot/onboarding) - [Acompañamiento / Soporte](https://www.tiralineas.digital/hubspot/soporte) - [Integraciones](https://www.tiralineas.digital/hubspot/integraciones) - [Migraciones](https://www.tiralineas.digital/hubspot/migraciones) - [ Otros servicios](https://www.tiralineas.digital/otros-servicios) Productos - [PrestaShop + Aircall](https://www.tiralineas.digital/productos/integracion-prestashop-aircall) - [Redsys + HubSpot](https://www.tiralineas.digital/productos/redsys-hubspot) - [Power BI + HubSpot](https://www.tiralineas.digital/productos/powerbi-hubspot) - [Holded + HubSpot](https://www.tiralineas.digital/productos/holded-hubspot) - [Sensitive Data](https://www.tiralineas.digital/productos/sensitive-data) - [Saysimple + HubSpot](https://www.tiralineas.digital/productos/saysimple-hubspot) - [PrestaShop + HubSpot](https://www.tiralineas.digital/productos/prestasyncro) - [Sage200 + HubSpot](https://www.tiralineas.digital/productos/sage200-hubspot) - [CoverManager + HubSpot](https://www.tiralineas.digital/productos/coversyncro) [ Nosotros ](https://www.tiralineas.digital/nosotros) [ Proyectos ](https://www.tiralineas.digital/proyectos) [ Blog ](https://www.tiralineas.digital/blog) ES [EN](https://www.tiralineas.digital/en) [FR](https://www.tiralineas.digital/fr) [Contacto](https://www.tiralineas.digital/contacto)   # [Tendencias en diseño web durante 2020](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020)   4/5/2020 Tiempo de lectura: **3 min** Nos acercamos a mediados de 2020 y todos estamos seguros de que va a ser un año que no vamos a olvidar. ¿Por qué no aprovechar para renovarse e ilusionarse de cara al nuevo tiempo? Desde Tiralíneas te proponemos realizar un rediseño de tu web o blog corporativo para comenzar a trabajar de nuevo con energías renovadas. Así que como te prometimos en nuestro post [Optimiza tu estrategia de marketing durante el confinamiento](https://www.tiralineas.digital/optimiza-tu-estrategia-de-marketing-durante-el-confinamiento), hoy te hablamos sobre las corrientes de diseño actuales. ¿Cuáles son las **tendencias que no tenemos que perder de vista**? El diseño, en cualquier disciplina, siempre se va adaptando a las necesidades y va evolucionando. El diseño web no va a ser menos.  ### Índice de contenidos 1. [Asimetría](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020#Asimetra1) 2. [Tarjetas de contenido](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020#Tarjetas-de-contenido2) 3. [Diseño vertical](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020#Diseo-vertical3) 4. [Tipografías grandes](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020#Tipografas-grandes4) 5. [Microanimaciones](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020#Microanimaciones5) ## Asimetría Cada vez estamos viendo más webs que se alejan de estructuras perfectamente simétricas, que buscan **romper los "bloques"**. No debemos olvidar que dentro de la asimetría nos encontramos con diferentes niveles (puede ser algo sencillo que rompa la estructura ligeramente o algo muy estridente) pero que la **coherencia visual** tiene que existir. La simetría es mucho más que líneas rectas. Además, la **usabilidad** tiene que reinar por encima de esta asimetría ya que siempre debemos pensar en el usuario y no perder de vista que queremos que encuentre lo que está buscando y lo entienda. ![Ejemplo de asimetría](https://www.tiralineas.digital/hubfs/Captura%20de%20pantalla%202020-05-01%20a%20las%2017.51.42.png) *Elementos superpuestos, tipografías grandes y animaciones: www.eye-sprint.com* ## Tarjetas de contenido Puede chocar que otra tendencia que convive con la asimetría sea el diseño en **formato de "tarjeta"**, donde encontramos habitualmente un elemento gráfico, un texto y un [call-to-action](https://www.tiralineasestudio.com/que-es-el-cta) agrupados o enmarcados de alguna manera. Este tipo de diseño en grupos o cajas es especialmente **útil y práctico** para distribuir el contenido a lo largo de la página y tiene muchas **ventajas para el responsive** y la accesibilidad de nuestra web. ¿Creéis que es incompatible con una ligera asimetría? Nosotros creemos que no, solo tenéis que dejar volar vuestra imaginación. ## Diseño vertical Esta distribución en tarjetas está unida también al **diseño en vertical**. El diseño vertical hace referencia a la **separación de contenido** con color o incluso imágenes para diferenciar secciones dentro de una misma página. Es una excelente manera de crear un **foco de atención** para el usuario dentro de nuestra web. ## Tipografías grandes Estos últimos meses hemos visto títulos muy grandes, que ocupan buena parte de una cabecera. Suelen ser **tipografías rectas** principalmente, de palo seco, que dividen el contenido de nuestras páginas ayudando a **ordenar** el contenido y a que el usuario pueda encontrar más rápido lo que le interesa. También se está tendiendo a aumentar el cuerpo de la tipografía de los **textos**, y no solo de los títulos, ayudando a que la** lectura** sea más cómoda. Hemos dicho que para las tipografías grandes normalmente se usan tipografías sans-serif, pero ¿por qué no combinarlo con una que sea **estilo manuscrita**? Se consiguen combinaciones realmente bonitas que son perfectamente compatibles con la legibilidad y la usabilidad.  ![5d19b7c807007392489843](https://www.tiralineas.digital/hubfs/5d19b7c807007392489843.jpg) *Ejemplo de una web con tipografías enormes: jazzfm.ro* ## Microanimaciones Las microanimaciones se usan para **cargar diseños**, elementos decorativos o incluso los menús de navegación. Es un recurso muy útil para romper y ofrecer algo diferente a nuestros usuarios, una manera de que **interactúen** e incluso de invitarles a **seguir navegando** por otros apartados de nuestra web. En ocasiones, este tipo de animaciones son tan **sutiles** que no somos conscientes de ellas, pero aportan valor a nuestro diseño.   Seguro que se os están ocurriendo muchas ideas para vuestras páginas webs. ¡Genial! Pero recordad que la **accesibilidad** y la **usabilidad** del contenido, junto con una buena [Arquitectura de la información](https://www.tiralineas.digital/arquitectura-informacion-objetivos-web), tienen que seguir siendo los reyes. ¡Estamos deseando escuchar todas vuestras ideas!     ### ¡Comparte en redes! [![Share on facebook](https://7528309.fs1.hubspotusercontent-na1.net/hub/7528309/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/facebook-color.png?width=24&name=facebook-color.png) ](http://www.facebook.com/share.php?u=https%3A%2F%2Fwww.tiralineas.digital%2Fblog%2Ftendencias-diseno-web-2020%3Futm_medium%3Dsocial%26utm_source%3Dfacebook) [![Share on linkedin](https://7528302.fs1.hubspotusercontent-na1.net/hub/7528302/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/linkedin-color.png?width=24&name=linkedin-color.png) ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.tiralineas.digital%2Fblog%2Ftendencias-diseno-web-2020%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin) [![Share on twitter](https://7528304.fs1.hubspotusercontent-na1.net/hub/7528304/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/twitter-color.png?width=24&name=twitter-color.png) ](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fwww.tiralineas.digital%2Fblog%2Ftendencias-diseno-web-2020%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fwww.tiralineas.digital%2Fblog%2Ftendencias-diseno-web-2020%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=) [![Share on email](https://7528311.fs1.hubspotusercontent-na1.net/hub/7528311/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/email-color.png?width=24&name=email-color.png) ](mailto:?subject=Check%20https%3A%2F%2Fwww.tiralineas.digital%2Fblog%2Ftendencias-diseno-web-2020%3Futm_medium%3Dsocial%26utm_source%3Demail%20&body=Check%20https%3A%2F%2Fwww.tiralineas.digital%2Fblog%2Ftendencias-diseno-web-2020%3Futm_medium%3Dsocial%26utm_source%3Demail) #### **Y tú ¿qué opinas? Déjanos tu comentarios. ** ¡Nos encanta leerte! ## Noticias relacionadas [CoverSyncro](https://www.tiralineas.digital/productos/coversyncro) [PrestaSyncro](https://www.tiralineas.digital/productos/prestasyncro) [Deal Commander](https://www.tiralineas.digital/productos/deal-commander) [Análisis y estrategia](https://www.tiralineas.digital/inbound-marketing/analisis-estrategia-digital) [Proyectos](https://www.tiralineas.digital/proyectos) [Email marketing](https://www.tiralineas.digital/inbound-marketing/email-marketing) [Inbound marketing](https://www.tiralineas.digital/inbound-marketing) [Nuestros productos](https://www.tiralineas.digital/productos) [Novedades](https://www.tiralineas.digital/blog) [Diccionario](https://www.tiralineas.digital/diccionario-terminos-marketing-online) [Vídeos](https://www.tiralineas.digital/videos) [Sobre nosotros](https://www.tiralineas.digital/nosotros) [Soporte](https://www.tiralineas.digital/soporte) **[KIT DIGITAL](https://www.tiralineas.digital/soporte)**   **** ** [943 59 87 87](tel:+34943598787) [info@tiralineas.digital](mailto:info@tiralineas.digital) [Novedades](https://www.tiralineas.digital/blog) [Diccionario](https://www.tiralineas.digital/diccionario-terminos-marketing-online) [Vídeos](https://www.tiralineas.digital/videos) [Soporte](https://www.tiralineas.digital/soporte) **** ** [943 59 87 87](tel:+34943598787) [info@tiralineas.digital](mailto:info@tiralineas.digital) [ ¡Forma parte de nuestro equipo! ](https://www.tiralineas.digital/trabaja-con-nosotros) [Aviso legal](https://www.tiralineas.digital/aviso-legal) - [Política de privacidad](https://www.tiralineas.digital/politica-privacidad) - [Política de cookies](https://www.tiralineas.digital/politica-cookies) ![logo-pie](https://www.tiralineas.digital/hubfs/WEB-nueva/logo-pie.png "logo-pie") #### Marketing digital [Análisis y estrategia digital](https://www.tiralineas.digital/inbound-marketing/analisis-estrategia-digital) [Páginas web y ecommerce](https://www.tiralineas.digital/inbound-marketing/desarrollo-web-ecommerce) [Email marketing](https://www.tiralineas.digital/inbound-marketing/email-marketing) [Marketing de contenidos y social media](https://www.tiralineas.digital/inbound-marketing/marketing-contenidos-social-media) [Posicionamiento SEO](https://www.tiralineas.digital/inbound-marketing/posicionamiento-seo) [SEM/Paid media](https://www.tiralineas.digital/inbound-marketing/posicionamiento-seo) [Branding](https://www.tiralineas.digital/otros-servicios) #### Servicios Hubspot [Migraciones a HubSpot](https://www.tiralineas.digital/hubspot/migraciones) [Integraciones con HubSpot](https://www.tiralineas.digital/hubspot/integraciones) [Páginas web y ecommerce](https://www.tiralineas.digital/inbound-marketing/desarrollo-web-ecommerce) [Asesoría](https://www.tiralineas.digital/hubspot/asesoria) [Onboarding](https://www.tiralineas.digital/hubspot/onboarding) [Acompañamiento / Soporte](https://www.tiralineas.digital/soporte) #### Productos [Sensitive Data](https://www.tiralineas.digital/productos/sensitive-data) [Saysimple + HubSpot](https://www.tiralineas.digital/productos/saysimple-hubspot) [PrestaShop + HubSpot](https://www.tiralineas.digital/productos/prestasyncro) [Módulo carrito abandonado](https://www.tiralineas.digital/productos/carrito-abandonado) [Holded + HubSpot](https://www.tiralineas.digital/productos/holded-hubspot) [Sage 200 + HubSpot](https://www.tiralineas.digital/productos/sage200-hubspot) [CoverManager + Hubspot](https://www.tiralineas.digital/productos/coversyncro) [Redsys + HubSpot](https://www.tiralineas.digital/productos/redsys-hubspot) #### Empresa [Proyectos](https://www.tiralineas.digital/proyectos) [Sobre nosotros](https://www.tiralineas.digital/nosotros) [Novedades](https://www.tiralineas.digital/blog) [Vídeos](https://www.tiralineas.digital/videos) [Subvenciones](https://www.tiralineas.digital/ayudas-inteligencia-artificial-empresas) [Diccionario](https://www.tiralineas.digital/diccionario-terminos-marketing-online) [Base del conocimiento](https://soporte.tiralineas.digital/es) [Contacto](https://www.tiralineas.digital/contacto) #### ¿Quieres formar parte de nuestro equipo? Envíanos tu currículum. [![¡Forma parte de nuestro equipo!](https://no-cache.hubspot.com/cta/default/2070477/7a7152a8-e683-40e3-a65a-7dc80817cb26.png) ](https://cta-redirect.hubspot.com/cta/redirect/2070477/7a7152a8-e683-40e3-a65a-7dc80817cb26) #### Somos agentes digitalizadores Contacta con nosotros y te ayudaremos [![Información KIT DIGITAL](https://no-cache.hubspot.com/cta/default/2070477/06f53b4f-0506-467e-b8e4-13c5c81d2171.png) ](https://cta-redirect.hubspot.com/cta/redirect/2070477/06f53b4f-0506-467e-b8e4-13c5c81d2171) ![Logo Kit digital](https://www.tiralineas.digital/hubfs/WEB-nueva/kit-digital-logo.png) [**](https://es.linkedin.com/company/tiralineas-digital) [**](https://www.instagram.com/tiralineas.digital/) [**](https://www.youtube.com/@tiralineasdigital) [**](https://www.tiktok.com/@tiralineasdigital?lang=es) [**](https://www.facebook.com/Tiralineas.digital/) [**](https://x.com/tiralineasdigit) [943 59 87 87](tel:+34943598787) [info@tiralineas.digital](mailto:info@tiralineas.digital) Copyright © Tiralíneas [Aviso legal](https://www.tiralineas.digital/aviso-legal) [Política de privacidad](https://www.tiralineas.digital/politica-privacidad) [Política de cookies](https://www.tiralineas.digital/politica-cookies) ![logo-pie](https://www.tiralineas.digital/hubfs/WEB-nueva/logo-pie.png "logo-pie") #### Marketing digital [Análisis y estrategia digital](https://www.tiralineas.digital/inbound-marketing/analisis-estrategia-digital) [Páginas web y ecommerce](https://www.tiralineas.digital/inbound-marketing/desarrollo-web-ecommerce) [Email marketing](https://www.tiralineas.digital/inbound-marketing/email-marketing) [Marketing de contenidos y social media](https://www.tiralineas.digital/inbound-marketing/marketing-contenidos-social-media) [Posicionamiento SEO](https://www.tiralineas.digital/inbound-marketing/posicionamiento-seo) [SEM/Paid media](https://www.tiralineas.digital/inbound-marketing/posicionamiento-seo) [Branding](https://www.tiralineas.digital/otros-servicios) #### Servicios Hubspot [Migraciones a HubSpot](https://www.tiralineas.digital/hubspot/migraciones) [Integraciones con HubSpot](https://www.tiralineas.digital/hubspot/integraciones) [Páginas web y ecommerce](https://www.tiralineas.digital/inbound-marketing/desarrollo-web-ecommerce) [Asesoría](https://www.tiralineas.digital/hubspot/asesoria) [Onboarding](https://www.tiralineas.digital/hubspot/onboarding) [Acompañamiento / Soporte](https://www.tiralineas.digital/soporte) #### Productos [Sensitive Data](https://www.tiralineas.digital/productos/sensitive-data) [Saysimple + HubSpot](https://www.tiralineas.digital/productos/saysimple-hubspot) [PrestaShop + HubSpot](https://www.tiralineas.digital/productos/prestasyncro) [Sage 200 + HubSpot](https://www.tiralineas.digital/productos/sage200-hubspot) [CoverManager + Hubspot](https://www.tiralineas.digital/productos/coversyncro) [Redsys + HubSpot](https://www.tiralineas.digital/productos/redsys-hubspot) #### Empresa [Proyectos](https://www.tiralineas.digital/proyectos) [Sobre nosotros](https://www.tiralineas.digital/nosotros) [Novedades](https://www.tiralineas.digital/blog) [Vídeos](https://www.tiralineas.digital/videos) [Subvenciones](https://www.tiralineas.digital/ayudas-inteligencia-artificial-empresas) [Diccionario](https://www.tiralineas.digital/diccionario-terminos-marketing-online) [Base del conocimiento](https://www.tiralineas.digital/https://soporte.tiralineas.digital/es) [Contacto](https://www.tiralineas.digital/contacto) [**](https://es.linkedin.com/company/tiralineas-digital) [**](https://www.instagram.com/tiralineas.digital/) [**](https://www.youtube.com/@tiralineasdigital) [**](https://www.tiktok.com/@tiralineasdigital?lang=es) [**](https://www.facebook.com/Tiralineas.digital/) [**](https://x.com/tiralineasdigit) [943 59 87 87](tel:+34943598787) [info@tiralineas.digital](mailto:info@tiralineas.digital) [![¡Forma parte de nuestro equipo!](https://no-cache.hubspot.com/cta/default/2070477/7a7152a8-e683-40e3-a65a-7dc80817cb26.png) ](https://cta-redirect.hubspot.com/cta/redirect/2070477/7a7152a8-e683-40e3-a65a-7dc80817cb26) [Aviso legal](https://www.tiralineas.digital/aviso-legal) - [Política de privacidad](https://www.tiralineas.digital/politica-privacidad) - [Política de cookies](https://www.tiralineas.digital/politica-cookies) ![logo-pie](https://www.tiralineas.digital/hubfs/WEB-nueva/logo-pie.png "logo-pie") [** ](https://www.tiralineas.digital/blog/tendencias-diseno-web-2020#menu)