El primer sitio web del mundo se publicó en 1990, cuando el internet en casa sufría de interferencias cada vez que nos llamaban por teléfono. 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:
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.
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:
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:
W3C también se fundó como estándar para el desarrollo 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:
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:
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.
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.
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.
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).
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:
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.
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.
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.
Esperamos que hayas disfrutado de este recorrido por la evolución del diseño web hasta la actualidad.
