evolucion-del-diseño-web-blog-hostgator

La evolución del diseño web

lunes, 30 de septiembre de 2019 | Comentarios

Escrito por

¿Qué tal escuchar este post?

Si hablamos de tecnología, las cosas ocurren muy rápido, cada año tenemos nuevos modelos de teléfonos inteligentes, y aplicaciones nacen y mueren todos los días para facilitar nuestras vidas.

La evolución del diseño web no ha sido diferente. Desde la creación del primer sitio web, hasta hoy los cambios son abismales. Y lo más interesante de todo es que esta evolución es constante.

Así que si te interesa el diseño web te invitamos a un breve recorrido a través de la historia del diseño web, que ya está cerca de alcanzar su tercera década.

evolucion-del-diseño-web-hostgator

Cronología

Con el correr del tiempo, las necesidades y las formas de resolver las dificultades que se han ido presentando en el mundo del diseño web fueron variando. Sin embargo, la apuesta fija siempre ha sido evolucionar hacia la experiencia del usuario. Evolucionar para hacer con que el usuario pueda tener una experiencia fácil e intuitiva a la hora de navegar por internet.

(1989) El inicio. La época oscura del diseño web

Todo comienza en la década de los 90, conocida como la época oscura para el diseño web. En sus inicios, el diseño web se basaba en pantallas negras con píxeles monocromáticos que le daban el toque de color. En pocas palabras, no existía el diseño web, ya que el texto dominaba la pantalla.

Hacia 1991 se publicó la primera página web “World Wide Web”, de la mano de Tim Berners-Lee, un físico inglés considerado uno de los grandes creadores de la web. Este sitio web tenía como único objetivo informar qué era la World Wide Web (o red informática global). Hoy, más de 27 años después, podemos garantizar que sus usos sin duda se han multiplicado, y que la evolución del diseño web está más activa que nunca.

Diseño con tablas. A partir de 1995

 

La invención de los navegadores que permitían mostrar imágenes representa el primer paso en la evolución del diseño web en sí mismo. Las tablas llegaron para otorgarle orden al contenido, siendo la forma que permitía mezclar diseños estáticos y fluidos, a través de tablas dentro de tablas.

De alguna forma las tablas fueron el punto de partida de lo que hoy es el diseño responsivo.

Durante un buen tiempo el método de tablas fué el más utilizado para diseñar páginas web. Y de alguna forma esto produjo una separación entre el diseño y el desarrollo. Mientras los diseñadores creaban los diseños, los desarrolladores buscaban la forma de que funcione, administrando la información en diferentes elementos.

JavaScript. 1995

JavaScript llegó para resolver varias de las limitaciones del HTML. Y fué con su aparición que el diseño web ganó dinamismo. Sin embargo, una de las cuestiones más comentadas como punto en contra es que hace más lenta la carga de la página.

Si bien en la actualidad muchos evitan JavaScript para resolver cuestiones que pueden realizarse utilizando CSS, aún se mantiene fuerte tanto en front-end como en back-end. Siendo el front-end lo relacionado a aquello que se ve en un sitio web. Mientras que el back-end garantiza que los datos correctos se envíen al navegador y crean la funcionalidad del sistema.

 

La era de Flash, y la libertad del diseño. 1996

Llegó Flash e impresionó con la posibilidad de efectos visuales, quebrando las barreras que existían en el diseño web del momento. Era el sueño cumplido a través de una sola herramienta. Con un archivo que se envía al navegador para ser mostrado.

Esta época marcó un hito, pero con el tiempo quedó a la vista que los efectos e interacciones no eran abiertos para las búsquedas que indexan HTML, además de consumir poder de procesamiento. Ésto hizo que con el tiempo pierda fuerza.

El auge del CSS. 1998

Cascading Style Sheets – Hojas de Estilo en Cascada

Este lenguaje se hizo popular con una propuesta que separa el contenido de la forma de presentación. Es decir, que en HTML de trabaja el contenido, mientras que en CSS se define el formato y la apariencia.

El CSS paso por un proceso de evolución que demoró varios años hasta lograr sus mejores resultados. Al comienzo la visualización variaba dependiendo el navegador, lo que dificultaba la actividad del desarrollador.

La web 2.0. 2003

Comienza la era de la información basada en los usuarios, y la web 2.0 se hace popular junto con las redes sociales y blogs.

Con interfaces visualmente más agradables y con alta usabilidad, entramos en una fase más evolucionada del diseño web, en el que se comenzó a pensar tanto en los usuarios como en los buscadores. El foco en la experiencia de navegación mediante el uso del diseño web.

 

Diseño de grilla y framework. 2007

La llegada del diseño para móviles.

El diseño web se vio en la necesidad de evolucionar con la llegada de los smartphones. A partir de este momento era necesario generar versiones del sitio basadas en el tamaño de la pantalla. Y ésto era posible a través del uso de grillas y framework. Fue un reto muy importante.

La primer mejora fue con la idea de columnas, hasta que se definió el sistema de rejilla con una división en 12 columnas como sistema que se utiliza hasta la actualidad.

Diseño responsivo. 2010

Desde del año 2010 en adelante, llegando hacia el año 2012 aparece el último gran cambio en el diseño web. El diseño responsivo o adaptable llegó para resolver el conflicto de tamaño de las diferentes pantallas de los dispositivos inteligentes.

Con un mismo contenido (un sólo sitio web), pero con diferentes diseños según el tamaño del dispositivo, se encontró una forma de presentar de manera más amigable la información al usuario. De esta manera es posible utilizar imágenes que ocupan el ancho completo de pantalla, y se abre el camino hacia el diseño web minimalista con apariencia más sencilla y limpia. Es decir, que el contenido vuelve a ganar protagonismo.

Con estos cambios se ha privilegiado un diseño más plano, regresando a las raíces que colocan al contenido en primer lugar, dejando atrás los efectos de sombra y regresando a la fotografía, tipografía y los detalles de líneas. La simplicidad de la mano de la practicidad.

De alguna forma parecería que de manera más evolucionada el ciclo vuelve a sus comienzos. Pero como todo proceso, sigue en constante cambio y posiblemente en un futuro no lejano la concepción del diseño web nos continúa sorprendiendo con cambios e innovaciones. Incluso se estima que los cambios y la propia evolución de los dispositivos continuarán influyendo en el mundo del diseño, ya que dependemos de éstos como medio para exponer los sitios. Y si los dispositivos cambian, el diseño web deberán acompañarlos.

Mobile First

Es común confundir Mobile first con el diseño responsivo. Aunque tienen el objetivo de mejorar la experiencia de navegación en los dispositivos móviles, no significan lo mismo. De hecho su estructura y forma de creación es bien diferente.

Cuando hablamos de Mobile First nos referimos a que la creación del sitio web se piensa y realiza primero para dispositivos mobile, y después se adapta para desktop.

Actualidad

Con la evolución del diseño web, hoy en día no es necesario ser un experto para crear una página. En la actualidad están en alta los creadores de sitios como herramientas prácticas para construir sitios web desde plantillas y con la posibilidad de agregar componentes para personalizar el sitio web.

WordPress, en 2018 también lanzó el nuevo editor Gutenberg, compuesto de bloques, haciendo mucho más fácil el proceso de diseño y creación de sitios web. También el diseño 3D y el dominio de los gráficos vectoriales en un nivel más avanzado ha tomado bastante fuerza. Y tú, ¿cómo crees que seguirá la evolución del diseño web?

Te dejamos una síntesis con los datos principales de la evolución. Y nos tocará aguardar para saber cómo continuará la historia. Lo cierto es que con total seguridad el camino continuará en constante transformación y progreso.

Si quieres conocer tips para mejorar tu sitio web, o para crear uno, te puede interesar leer los siguientes temas:

8 Ítems que necesitas mejorar para que tu Sitio Web luzca profesional

Cómo optimizar las imágenes de tu sitio web

 

Etiquetas:
Comentarios
Presiona Enter para buscar o ESC para cerrar