Evolución del diseño web desde 1990 hasta hoy

El primer sitio web del mundo se publicó en 1990. Desde entonces las tendencias en diseño web han ido evolucionando con los años. Comparando con una web de hoy en día, es impresionante ver lo lejos que hemos llegado. El diseñador web de antaño seguro que sufría mucho más que uno actual.

En este post, viajaremos atrás en el tiempo para ver cada paso de la evolución del diseño web en los últimos 30 años. ¡Vamos a ello!

1990

Fue entonces cuando se publicó el primer sitio web del mundo. No había mucho más que unos pocos textos y enlaces. Sin embargo, en ese momento el navegador web público disponible no era gráfico, sino de texto, llamado navegador de «line-mode». Así que esto es lo que se veía:

Evolución del diseño web

1992

La primera imagen que fue publicada en Internet. Fue editada con Photoshop (¡Sí! ¡Ya teníamos Photoshop en 1992!) antes de subirla a internet.Evolución del diseño web

 

1993

Mosaic, el primer navegador web gráfico público del mundo estaba disponible. Muchas empresas comenzaron a crear su página web. Fue entonces cuando se introdujo el diseño de la landing page. Y el primero que hizo esto fue la web de MTV. Así lucía su home:

evolución del diseño web

 

1994

Se lanzó uno de los navegadores más famosos y populares del mundo, «Netscape«. Introdujo un fácil acceso a Internet para el público. Incluyendo características gráficas como imagen GIF animada, formato de texto y tablas:

evolución del diseño web

W3C también se fundó como estándar para el desarrollo web.

evolución diseño web

1995

Se adoptó ampliamente el uso de tablas para dar formato a la estructura HTML. También se introdujo este año JavaScript. Comenzando la era del contenido interactivo. Ejemplo de una página de la BBC:

evolucion-del-diseno-web-6

 

1996-1999

El CSS1 se introdujo y se adoptó durante este período. Antes de eso, todos los estilos se escribían inline en el HTML.

El CSS es el primer paso para separar el contenido y la estructura y se ha convertido en la base del diseño y desarrollo web actual:

evolution-of-web-design-8

 

El uso de tablas para dar formato al contenido se había convertido en una norma. La imagen de esquina redondeada era una tendencia muy popular debido a que el border-radius no estaba disponible hasta 10 años después.

JavaScript se usaba principalmente para crear efectos de página como la caída de nieve o fuegos artificiales. (¿recuerdas el DHTML?) Flash también era una tecnología de vanguardia para crear animación en las páginas web de esos tiempos.

2000

Se introdujeron Flash 5 y ActionScript 1.0. Este fue el comienzo del contenido animado y de los juegos en flash. También el primer borrador de la especificación CSS3 fue publicado durante este año.

evolucion-web-design

 

2001

Se introdujo el formato SVG. Es el primer formato de imagen vectorial para web que puede ser escrito en XML.

 

2003

La primera versión de WordPress fue creada este año. Marcó el comienzo de la era de los contenidos dinámicos y los blogs en lugar de las páginas HTML estáticas.

2004

Se introdujo el uso del Sprite CSS. Agrupar imágenes más pequeñas en una, y luego usar la posición de fondo para seleccionar qué imagen mostrar para reducir el número de solicitudes y el tamaño del HTML. Esto permite al diseñador web poner más contenido gráfico en la página.

evolution-of-web-design-11

 

2006

Primera versión de SASS. El primer pre-procesador de CSS, Sass fue creado este año. Extendiendo las características del CSS y permitiendo al diseñador web crear un efecto más complejo.

sass

 

2007

Se introdujo el diseño del CSS Grill. Marcó el final de la era de la tablas y la disposición flotante de los div (pero pasarían muchos años hasta que los navegadores lo soportasen).

css-grid

 

2009

Se introdujo el concepto de FLEX BOX de CSS para permitir al diseñador web crear un diseño flexible sin preocuparse por la alineación y el espaciado (de nuevo, flex se integró en los navegadores muchos años después)

2010

El nacimiento del diseño responsive. En lugar de crear un sitio móvil separado, el mismo contenido podría ser usado en diferentes diseños dependiendo del tamaño de la pantalla.

Google Font fue lanzado este año. Alentando el concepto de tipografía para ser usado en el diseño web.

2011

Con la influencia de Windows 8, el diseño de un metro o flat design se hizo muy popular:

flat design

El framework de CSS llamado Bootstrap también fue liberado este año, aumentando la velocidad del diseño web drásticamente.

2012

Los media queries se introdujeron en este año. Ofreciendo la capacidad al CSS de detectar el tamaño de la pantalla, básicamente es la base del diseño responsive. Los parallax scrolling también se vieron por primera vez este año.

2014

Año del 3D. Se lanzó una versión estable y completa de WebGL. Permitiendo el renderizado 3D con la potencia de la GPU usando JavaScript.

evolution-of-web-design-15

La transformaciones de CSS 3D también empezaron a popularizarse.

2015

HTML5 se adoptó ampliamente y YouTube decidió dejar de lado el reproductor de flash y usar el de HTML5 en su lugar.

El CSS3  animation y transition se metieron este año, permitiendo botones y menús fluidos y sensibles (y el nacimiento hamburguer menu de CSS).

2016

El surgimiento del minimal design. Muchos diseñadores web tienden a reducir todo a sólo los elementos básicos más usables. El diseño de «Mobile first» y «thumb friendly» también fue ampliamente adoptado este año.

evolucion-diseno-web-minimal

 

2017 – Actualidad

Debido a la madurez de las herramientas de diseño web, empezamos a ver muchas técnicas de diseño muy impresionantes. Diseño web asimétrico, diseño de cuadrícula rota, fondo animado usando video o webGL. También el diseño simple o minimal sigue siendo potente.

evolution-of-web-design-17

 

Esperamos que hayas disfrutado de este recorrido por la evolución del diseño web hasta la actualidad.

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *