Tendencias de diseño web en 2020

Cada año que pasa, las tendencias sobre todo en cuanto a diseño y adaptabilidad van cambiando o variando.

En años pasados las páginas web tenían unos diseños limitados a otras necesidades, los diseños eran estéticamente más estrechos, pero ahora debido a las pantallas y monitores cada vez más grandes de los que  disponemos, nos podemos permitir otra clase de diseños.

Pero no solo eso, últimamente tenemos unas conexiones a internet cada vez las rápidas, y que las páginas web carguen rápido se ha convertido en una auténtica lucha.

Table of Contents

Nuestros monitores son mas grandes

Debido a esto, los diseños de las páginas web han tenido que evolucionar para adaptarse a los nuevos tamaños implantándose desde hace algunos años los diseños respònsive.

Ahora mismo hacer diseños web con un ancho fijo de 1080px es casi impensable salvo para determinados proyectos muy específicos. En cambio los diseños adaptativos para aprovechar los anchos completos de pantalla son ya una realidad.

El diseño responsive y el ancho completo

Antes de que llegara el responsive las páginas que aprovechaban los anchos completos, cuando eran navegados con monitores de una resolución inferior a la que fue diseñada, estos diseños se descuadraban y obligaban al usuario a hacer ampliaciones de pantalla y a moverse por ella de una manera antinatural usando los scrolls.

El responsive es un diseño que aprovechando todo el ancho de pantalla de un monitor, nos permite meter todo el contenido que haga falta. Pero el mismo diseño, según va estrechándose a diferentes resoluciones, todo ese contenido, se va adaptando y estrechando, de manera el que el contenido se va desplazando a una parte inferior para poder visualizarse de manera correcta.

O sea que una web responsive, en diferentes resoluciones se ve con un diseño diferente, pero en todos ellos se tiene que ver de forma legible.

Ejemplo de diseño responsive

Porque usar el ancho completo

Obviamente un diseño de ancho completo, independientemente de si nos gusta más o menos, nos permite introducir más objetos, más imágenes, más textos en nuestras páginas web, pero  sin saturar el diseño.

Además de que gracias al CSS los efectos a usar son innumerables y con un poco de gusto estético se pueden hacer autenticas virguerías.

Hace unos años hacer una web como las de hoy en día, seria impensable dada la complejidad y cantidad de elementos que en su época harían que este tipo de web fuera demasiado pesada e inviable.

Gracias a las mejoras de carga en imágenes, más las librerías CSS y JS, y a los diseños de ancho completo y responsive, el ancho completo es algo óptimo, aconsejado y bonito.

Recuerda que si no vas a hacer la web tu mismo, tienes que procurar contactar con alguna empresa de diseño de páginas web que entienda de SEO, que use este tipo de herramientas en las creaciones de sus páginas.

La velocidad de carga y tipos de imágenes

La fibra óptica se está implementando cada vez más, y para tener un buen SEO en nuestra web, tener un índice de carga muy rápido es obligatorio.

A pesar de que gracias a la fibra nos podríamos permitir poner imágenes muy pesadas, si lo haces, los buscadores como Google te penalizaran. Así que hoy en día hay que optar por hacer páginas web de carga muy rápida, sobre todo para que el usuario que navega por tu web, no este esperando y por aburrimiento termine yéndose a la web de la competencia.

Las imágenes son el principal problema a la hora de que una web sean más o menos pesadas, así que frente a las clásicas imágenes de toda la vida (GIF, JPG y PNG) ya están saliendo nuevos formatos para mejorar la carga y su visualización.

Los formatos de imágenes vectoriales

Las imágenes vectoriales son siempre super nítidas e independientemente de la resolución a la que se visualizan, esta siempre se ven perfectas. Pero no nos confundamos, las imágenes vectoriales no se pueden usar como por ejemplo las fotografías. Solo se usan para hacer o crear imágenes de tipo icono. Su mayor virtud es que siempre se vez perfectas, por mucho que las amplíes jamas pierden calidad y además su índice de carga es super óptimo.

Tienes diferentes extensiones y, entre ellas podrás encontrar imágenes vectoriales con extensiones AI , SVG , EPS y PDF.

La imagen vectorial se basa en fórmulas matemáticas, y no se dividen en unidades mínimas de información como los píxeles, sino en manchas de color y líneas. Se construyen a partir de vectores, que son objetos definidos por una serie de puntos que pueden modificarse para dar una u otra forma a la imagen final.

tipos imagenes vectoriales
tipos imagenes vectoriales

Las imagenes y las fotografias

Sabiendo que las imágenes vectoriales nunca podrán sustituir a las fotografías, ya llegan los nuevos formatos de imágenes con por ejemplo las extensiones WebP (Entre muchos otros).

Por ejemplo las imágenes WebP son un formato que soporta compresiones con pérdida, como sin ella y ha sido desarrollado por Google.

El problema de este tipo de nuevo formato es que no todos los navegadores de internet lo soportan, pero este en concreto se está estandarizando bastante bien siendo soportado por prácticamente todos los navegadores habituales, Firefox, Chrome, Opera, Android Browser,   Edge, Chrome for Android etc.

Este formato se comporta realmente bien comparándolo con uno de los estándar como JPEG reduciendo la carga prácticamente en un 40% manteniendo la calidad sin perdidas.

Resumen y conclusiones

En definitiva, dada la necesidad de cargar rápido, cada vez tiramos más a imágenes tipo icono con vectoriales, y dado que los diseños de ancho completo nos permiten introducir muchos elementos y mejoran los diseño, es bastante obvio que todo esto es lo que se usa en la actualidad.

Además que visto la importancia que está tomando la necesidad de que nuestras páginas web carguen rápido, es mejor que nos vallamos adaptando a este tipo de mejora cuanto antes, imágenes vectoriales, imágenes con nuevos formatos, y preocuparnos mucho porque nuestra web sea la más rápida de internet.

En la medida e lo posible evitar diseño de ancho fijo, salvo que el proyecto en si lo requiera o necesite.

Dejar un comentario

Ir arriba